VPF::Вызов функции - Форум программистов

Wheels

Дата 10.10.2008, 14:06 (ссылка)

(нет голосов)

Загрузка ...

Шустрый

Профиль
Группа: Участник
Сообщений: 64
Регистрация: 1.2.2007

Репутация: 1
Всего: 1

Всем привет.
Имеется определенная функция.

Понятно как сделать кнопочки и нацепить на каждую вызов этой функции, но у меня не совсем стандартная ситуация.

Имеется выпадающий список с четырмя опциями и три радиобокса.
Суть проблемы:
1) как нацепить вызов функции на опции в списке? На каждую опцию функция должна вызываться со своими параметрами, причем, параметры должны завистеть от выбранного радиобокса? Т.е. при выборе одной из опций вызывается одна из трех функций (в зависимости от того, какой выбран радиобокс)

2) при выборе радиобокса функция тоже перевызывается, но параметры ее зависят от того, какая выбрана опция в списке.

Код


        <script type=text/javascript><!---Вызов функции выделения просто при загрузке страницы, именно эту функцию нужно вызвать в писанных выше ситуациях с различными параметрами--->
        $(window).load(function () {
        $('#pic').imgAreaSelect({selectionOpacity: 0, minHeight: 65, minWidth: 65});
        });
        </script>

        <script><!---Скриптик для смены изображения по выбору опции в выпадающем списке--->
        function gett(elem) {
        var im = document.getElementById('pic');
        im.src = '/zone/system/temp/images/<?echo $work_id ?>/<?echo $work_imgid ?>/' + elem.value + '.jpg';
        }
        </script>

        <table border=0 cellspacing=0 cellpadding=5 width=100%>
        <tr><td align=center valign=middle>
        <select name="size" onchange="gett(this);">
        <option value="100" id="100">100%</option>
        <option value="75" id="75">75%</option>
        <option value="50" id="50" selected>50%</option>
        <option value="25" id="25">25%</option>
        </select>
        <input name="type" type="radio" value="sv"  id="sv" checked>
        <input name="type" type="radio" value="hr" id="hr">
        <input name="type" type="radio" value="vr" id="vr">
        <br><br>
        <img src="/system/temp/images/<?echo $work_id ?>/<?echo $work_imgid ?>/50.jpg" id="pic" />
        </td></tr>
        </table>

Совершенно не представляю как это сделать. Пробовал по-разному, но вероятно, у меня не хватает каких-то элементраных знаний.

Заранее БОЛЬШОЕ спасибо!

Это сообщение отредактировал(а) Wheels - 10.10.2008, 18:51

Michael.de

Дата 10.10.2008, 18:26 (ссылка)

(нет голосов)

Загрузка ...

Опытный

Профиль
Группа: Участник
Сообщений: 346
Регистрация: 22.3.2005
Где: Deutschland

Репутация: 4
Всего: 9

Wheels, если я правильно понял вопрос: похожее рассматривалось >>тут<<

Wheels

Дата 10.10.2008, 18:36 (ссылка)

(нет голосов)

Загрузка ...

Шустрый

Профиль
Группа: Участник
Сообщений: 64
Регистрация: 1.2.2007

Репутация: 1
Всего: 1

Michael.de, спасибо за ссылку, но к сожалению там у человека совсем иная задача была.

попробую немного по-другому обьяснить.

есть выпадающий список из 4 пунктов.
есть 3 радиобокса.

При выборе какого-нибудь пункта из списка, вызывается одна из трех функций, а какая именно - зависит от выбранного радиобокса.

В свою очередь - при выборе какого-либо радиобокса вызывается одна из четырех функций, а какая именно - зависит от выбранного пункта списка.

Такая вот, муть... =(

Функция-то вызывается одна и та же, просто с разными параметрами.

Это сообщение отредактировал(а) Wheels - 10.10.2008, 18:47

unicross

Дата 10.10.2008, 20:56 (ссылка)

(нет голосов)

Загрузка ...

Опытный

Профиль
Группа: Участник
Сообщений: 422
Регистрация: 15.6.2008

Репутация: 1
Всего: 53

Что-то типа того

Код


        <script>
        <!--
        function gett(elem) {
           var im = document.getElementById('pic');
           var select_value = elem.value;
           if (document.getElementById('sv').checked) {
              document.getElementById('funct').innerHTML = "Функция (параметры id='sv' sel='" + select_value + "')";
           }
           else {
                if (document.getElementById('hr').checked) {
                     document.getElementById('funct').innerHTML = "Функция (параметры id='hr' sel='" + select_value + "')";
               }
               else {
                    document.getElementById('funct').innerHTML = "Функция (параметры id='vr' sel='" + select_value + "')"
               }
           }
           im.innerHTML = '/zone/system/temp/images/' + select_value + '.jpg';
        }

        function f_click() {
           var im = document.getElementById('pic');
           var select1 = document.getElementById('sel1');
           var select_value = select1.options[select1.selectedIndex].value;
           if (document.getElementById('sv').checked) {
              document.getElementById('funct').innerHTML = "Функция (параметры id='sv' sel='" + select_value + "')";
           }
           else {
                if (document.getElementById('hr').checked) {
                     document.getElementById('funct').innerHTML = "Функция (параметры id='hr' sel='" + select_value + "')";
               }
               else {
                    document.getElementById('funct').innerHTML = "Функция (параметры id='vr' sel='" + select_value + "')";
               }
           }
           im.innerHTML = '/zone/system/temp/images/' + select_value + '.jpg';
        }

        //-->
        </script>


        <table border=0 cellspacing=0 cellpadding=5 width=100%>
        <tr><td align=center valign=middle>
        <select name="size" id="sel1" onchange="gett(this);">
        <option value="100">100%</option>
        <option value="75">75%</option>
        <option value="50" selected>50%</option>
        <option value="25">25%</option>
        </select>
        <input name="type" type="radio" value="sv"  id="sv" checked onclick="f_click();">
        <input name="type" type="radio" value="hr" id="hr" onclick="f_click();">
        <input name="type" type="radio" value="vr" id="vr" onclick="f_click();">
        <br><br>
        <div id="pic"></div>
        <div id="funct"></div>
        </td></tr>
        </table>

Немного коряво получилось, но смысл думаю будет понятен. Функцию, в которую передаются параметры, написать сможете сами.

Выведет примерно следующее

Код


/zone/system/temp/images/75.jpg
Функция (параметры id='vr' sel='75')

Wheels

Дата 11.10.2008, 18:08 (ссылка)

(нет голосов)

Загрузка ...

Шустрый

Профиль
Группа: Участник
Сообщений: 64
Регистрация: 1.2.2007

Репутация: 1
Всего: 1

unicross, Спасибо!!!

Нужно немного переделать, не получается самому ((

Код


"Функция (параметры id='hr' sel='" + select_value + "')";

вот тут параметры подставляются js динамически. А у меня они формируются посредством php еще до вывода страницы. Для каждой из этих комбинаций свои параметры вызываемой функции.

что-то типа

Код


if (100){
  if(sv){функция с параметром 1  }
  elseif(vr){функция с параметром 2}
  elseif(hr){функция с параметром 3}
}
elseif(75){
  if(sv){функция с параметром 4  }
  elseif(vr){функция с параметром 5}
  elseif(hr){функция с параметром 6}
}
elseif(50){
  if(sv){функция с параметром 7}
  elseif(vr){функция с параметром 8}
  elseif(hr){функция с параметром 9}
}
elseif(25){
  if(sv){функция с параметром 10}
  elseif(vr){функция с параметром 11}
  elseif(hr){функция с параметром 12}
}

if(hr){
  if(100){функция с параметром 13}
  elseif(75){функция с параметром 14}
  elseif(50){функция с параметром 15}
  elseif(25){функция с параметром 16}
}
elseif(vr){
  if(100){функция с параметром 17}
  elseif(75){функция с параметром 18}
  elseif(50){функция с параметром 19}
  elseif(25){функция с параметром 20}
}
elseif(sv){
  if(100){функция с параметром 21}
  elseif(75){функция с параметром 22}
  elseif(50){функция с параметром 23}
  elseif(25){функция с параметром 24}
}

Только не бейте больно за написанное выше, всего лишь скелет для примера, так сказать). Уже иду читать основы js ))

Wheels

Дата 11.10.2008, 19:21 (ссылка)

(нет голосов)

Загрузка ...

Шустрый

Профиль
Группа: Участник
Сообщений: 64
Регистрация: 1.2.2007

Репутация: 1
Всего: 1

Вот что у меня получилось. Как-то очень громоздко. Можно ли как-нибудь... более изящно что ли это написать?

Код


<html>

<head>
  <title></title>
</head>

<body>

<script>
function gett()
{
    var se = document.getElementById('sel').value;
    var im = document.getElementById('pic');
    im.src = '/system/temp/images/50.jpg' +se+ '.jpg';
    if(se == '100'){
        if(document.getElementById('hr').checked){
        alert('100 hr');
        }
        if(document.getElementById('vr').checked){
        alert('100 vr');
        }
        if(document.getElementById('sv').checked){
        alert('100 sv');
        }
    }
    if(se == '75'){
        if(document.getElementById('hr').checked){
        alert('75 hr');
        }
        if(document.getElementById('vr').checked){
        alert('75 vr');
        }
        if(document.getElementById('sv').checked){
        alert('75 sv');
        }
    }
    if(se == '50'){
        if(document.getElementById('hr').checked){
        alert('50 hr');
        }
        if(document.getElementById('vr').checked){
        alert('50 vr');
        }
        if(document.getElementById('sv').checked){
        alert('50 sv');
        }
    }
    if(se == '25'){
        if(document.getElementById('hr').checked){
        alert('25 hr');
        }
        if(document.getElementById('vr').checked){
        alert('25 vr');
        }
        if(document.getElementById('sv').checked){
        alert('25 sv');
        }
    }
}

function r_click()
{
    var im = document.getElementById('sel').value;
    if(document.getElementById('hr').checked){
        if(im == 100){
        alert('100 hr');
        }
        if(im == 75){
        alert('75 hr');
        }
        if(im == 50){
        alert('50 hr');
        }
        if(im == 25){
        alert('25 hr');
        }
    }
    if(document.getElementById('vr').checked){
        if(im == 100){
        alert('100 vr');
        }
        if(im == 75){
        alert('75 vr');
        }
        if(im == 50){
        alert('50 vr');
        }
        if(im == 25){
        alert('25 vr');
        }
    }
    if(document.getElementById('sv').checked){
        if(im == 100){
        alert('100 sv');
        }
        if(im == 75){
        alert('75 sv');
        }
        if(im == 50){
        alert('50 sv');
        }
        if(im == 25){
        alert('25 sv');
        }
    }
}
</script>

<select id=sel onchange="gett(this);">
<option value=100>1</option>
<option value=75>2</option>
<option value=50>3</option>
<option value=25>4</option>
</select>

<img src="/system/temp/images/50.jpg" id="pic">

<input name="type" type="radio" value="sv"  id="sv" checked onclick="r_click();">
<input name="type" type="radio" value="hr" id="hr" onclick="r_click();">
<input name="type" type="radio" value="vr" id="vr" onclick="r_click();">

</body>
</html>

unicross

Дата 11.10.2008, 20:36 (ссылка)

(нет голосов)

Загрузка ...

Опытный

Профиль
Группа: Участник
Сообщений: 422
Регистрация: 15.6.2008

Репутация: 1
Всего: 53

Можно с помощью всего одной функции:

Код


<script>
<!--
function f_click() {
   var im = document.getElementById('pic');
   var select1 = document.getElementById('sel1');
   var select_value = select1.options[select1.selectedIndex].value;
   var m_sv = document.getElementById('sv');
   var m_hr = document.getElementById('hr');
   var m_vr = document.getElementById('vr');

   if (m_sv.checked) {
      switch (select_value) {
         case '100':
            alert('100 sv');
         break;
         case '75':
            alert('75 sv');
         break;
         case '50':
            alert('50 sv');
         break;
         case '25':
            alert('25 sv');
         break;
      }
   }
   if (m_hr.checked) {
      switch (select_value) {
         case '100':
            alert('100 hr');
         break;
         case '75':
            alert('75 hr');
         break;
         case '50':
            alert('50 hr');
         break;
         case '25':
            alert('25 hr');
         break;
      }
   }
   if (m_vr.checked) {
      switch (select_value) {
         case '100':
            alert('100 vr');
         break;
         case '75':
            alert('75 vr');
         break;
         case '50':
            alert('50 vr');
         break;
         case '25':
            alert('25 vr');
         break;
      }
   }
   im.innerHTML = '/zone/system/temp/images/' + select_value + '.jpg';
}
//-->
</script>


<table border=0 cellspacing=0 cellpadding=5 width=100%>
<tr><td align=center valign=middle>
<select name="size" id="sel1" onchange="f_click();">
<option value="100">100%</option>
<option value="75">75%</option>
<option value="50" selected>50%</option>
<option value="25">25%</option>
</select>
<input name="type" type="radio" value="sv"  id="sv" checked onclick="f_click();">
<input name="type" type="radio" value="hr" id="hr" onclick="f_click();">
<input name="type" type="radio" value="vr" id="vr" onclick="f_click();">
<br><br>
<div id="pic"></div>
</td></tr>
</table>

Цитата(Wheels @ 11.10.2008, 18:08

)

вот тут параметры подставляются js динамически. А у меня они формируются посредством php еще до вывода страницы.

Причем здесь PHP и JS. Одно на сервере, а второе в браузере. Это разные вещи.

Эти параметры должны передаваться PHP?

unicross

Дата 11.10.2008, 20:52 (ссылка)

(нет голосов)

Загрузка ...

Опытный

Профиль
Группа: Участник
Сообщений: 422
Регистрация: 15.6.2008

Репутация: 1
Всего: 53

Если требуется только передать параметры, то будет еще проще

Код


<script>
<!--
function f_print(s1, s2) {
   alert(s1 + " " + s2);
}

function f_click() {
   var im = document.getElementById('pic');
   var select1 = document.getElementById('sel1');
   var select_value = select1.options[select1.selectedIndex].value;
   var m_sv = document.getElementById('sv');
   var m_hr = document.getElementById('hr');
   var m_vr = document.getElementById('vr');

   if (m_sv.checked) {
      f_print('sv', select_value);
   }
   if (m_hr.checked) {
      f_print('hr', select_value);
   }
   if (m_vr.checked) {
      f_print('vr', select_value);
   }
   im.innerHTML = '/zone/system/temp/images/' + select_value + '.jpg';
}
//-->
</script>


<table border=0 cellspacing=0 cellpadding=5 width=100%>
<tr><td align=center valign=middle>
<select name="size" id="sel1" onchange="f_click();">
<option value="100">100%</option>
<option value="75">75%</option>
<option value="50" selected>50%</option>
<option value="25">25%</option>
</select>
<input name="type" type="radio" value="sv"  id="sv" checked onclick="f_click();">
<input name="type" type="radio" value="hr" id="hr" onclick="f_click();">
<input name="type" type="radio" value="vr" id="vr" onclick="f_click();">
<br><br>
<div id="pic"></div>
</td></tr>
</table>

Wheels

Дата 11.10.2008, 21:13 (ссылка)

(нет голосов)

Загрузка ...

Шустрый

Профиль
Группа: Участник
Сообщений: 64
Регистрация: 1.2.2007

Репутация: 1
Всего: 1

unicross, огромное спасибо за помощь! А-то искал что-нибудь типа elseif() или switch case в js =)

А php тут вот причем:

вот если взять скрипт, как я его в последний раз написал и вместо вызова alert() в каждом случае вызывать функцию

Код


        <script type=text/javascript>
        $(window).load(function () {
        $('#pic').imgAreaSelect({selectionOpacity: 0, minHeight: 65, minWidth: 65});
        });
        </script>

то получится как раз то, что мне нужно. Другое дело, что я не знаю как ее туда пристроить =)

Просто заранее php подставляет в эту функцию кое-какие параметры и она вызывается с разными параметрами каждый раз, вот и все)

Вот так эта функция вызывается с разными параметрами при нажатии на кнопки:

Код

<script>
$(document).ready(function () {
  $('#red').click(function () {
    $('#duck').imgAreaSelect({ selectionColor: 'red' });
  });
  $('#green').click(function () {
    $('#duck').imgAreaSelect({ selectionColor: 'green' });
  });
  $('#blue').click(function () {
    $('#duck').imgAreaSelect({ selectionColor: 'blue' });
  });
});

$(window).load(function () {
  $('#duck').imgAreaSelect({ <em>x1: 120, y1: 90, x2: 280, y2: 210</em> });
});
</script>
<img id="duck" src="duck.jpg">

<button id="red" type="button" style="color: red;">Red</button>
<button id="green" type="button" style="color: green;">Green</button>
<button id="blue" type="button" style="color: blue;">Blue</button>

А мне нужно что бы она запускалась у меня вместо того, что бы алерты вылетали )

Еще раз спасибо Вам.

Это сообщение отредактировал(а) Wheels - 11.10.2008, 21:23

unicross

Дата 11.10.2008, 21:21 (ссылка)

(нет голосов)

Загрузка ...

Опытный

Профиль
Группа: Участник
Сообщений: 422
Регистрация: 15.6.2008

Репутация: 1
Всего: 53

Цитата(Wheels @ 11.10.2008, 21:13

)

Просто заранее php подставляет в эту функцию кое-какие параметры, вот и все)

Что должна делать эта функция? Изменять размеры изображения?

PHP генерирует изображение на сервере? Может можно все сделать через JS без PHP?

Wheels

Дата 11.10.2008, 21:25 (ссылка)

(нет голосов)

Загрузка ...

Шустрый

Профиль
Группа: Участник
Сообщений: 64
Регистрация: 1.2.2007

Репутация: 1
Всего: 1

http://odyniec.net/projects/imgareaselect/

вот по этой ссылке можно посмотреть. Она выделяет область изображения.

Я просто не хочу приводить свой полный код, там каша из php - пипец какая)

Добавлено через 9 минут и 52 секунды
unicross, кстати, может быть действительно я извращенец и можно обойтись js. Я просто не знаю js, но знаю php- вот и кручусь как могу.

Только не смейтесь, ладно?)

Я загружаю изображение на сервер, ну и работаю с ним... в процессе понадобилось сделать так:

показать изображение в масштабе 25%, 50%, 75%, 100. (как раз за этим и нужен выпадающий список)
Тут я просто взял и средствами php сдела 4 файла картинки из одного (пропорционально уменьшая оригинал на нужное кол-во %)

Далее нужно выделить область на изображении средствами js (как раз эта функция для того и вызывается)
Дело в том, что у выделяемой области есть минимальные длины сторон. Например, она должна быть не меньше, чем 65х65.
Ну а если изображение слишком большое - целесообразно работать уменьшив его процентов на 50%, что бы на экран помещалось. Или же работать с большим, если нужно видеть мелкие детали.
Для этого и селектом и переключаются размеры. Но если мы выбрали 50% - то выделяемая область должна быть уже не 65 на 65, а в пловину меньше. Далее средствами php я уже сопоставлю масштаб изображения в котором пользователь выделял и и вырежу как надо.

Вот, как-то так)

Добавлено через 11 минут и 38 секунд
Я просто не нашел как поменять пропорционально размер изображения средствами js, возможно и не понадобилось бы делать 4 файла с помощью php.

unicross

Дата 11.10.2008, 22:23 (ссылка)

(нет голосов)

Загрузка ...

Опытный

Профиль
Группа: Участник
Сообщений: 422
Регистрация: 15.6.2008

Репутация: 1
Всего: 53

Изменить размер изображения можно например так:

Код


<HTML>
<HEAD>
<script>
<!--
var im_width = 0;
var im_height = 0;

function f_load() {
   var im = document.getElementById('pic');
   im_width = im.width;
   im_height = im.height;
}

function f_print(s1, s2) {
   var im = document.getElementById('pic');
   if (im_width != 0 && im_height != 0) {
      im.width = im_width * (parseInt(s2) / 100);
      im.height = im_height * (parseInt(s2) / 100);
   }
}

function f_click() {
   var im = document.getElementById('pic');
   var select1 = document.getElementById('sel1');
   var select_value = select1.options[select1.selectedIndex].value;
   var m_sv = document.getElementById('sv');
   var m_hr = document.getElementById('hr');
   var m_vr = document.getElementById('vr');

   if (m_sv.checked) {
      f_print('sv', select_value);
   }
   if (m_hr.checked) {
      f_print('hr', select_value);
   }
   if (m_vr.checked) {
      f_print('vr', select_value);
   }
   im.innerHTML = '/zone/system/temp/images/' + select_value + '.jpg';
}
//-->
</script>
</HEAD>
<BODY>
<table border=0 cellspacing=0 cellpadding=5 width=100%>
<tr><td align=center valign=middle>
<select name="size" id="sel1" onchange="f_click();">
<option value="100">100%</option>
<option value="75">75%</option>
<option value="50" selected>50%</option>
<option value="25">25%</option>
</select>
<input name="type" type="radio" value="sv"  id="sv" checked onclick="f_click();">
<input name="type" type="radio" value="hr" id="hr" onclick="f_click();">
<input name="type" type="radio" value="vr" id="vr" onclick="f_click();">
<br><br>
<img src="foto.jpg" id="pic" onload="f_load();">
</td></tr>
</table>
</BODY>
</HTML>

Цитата

http://odyniec.net/projects/imgareaselect/

Крутая штука...

Wheels

Дата 12.10.2008, 12:42 (ссылка)

(нет голосов)

Загрузка ...

Шустрый

Профиль
Группа: Участник
Сообщений: 64
Регистрация: 1.2.2007

Репутация: 1
Всего: 1

О, теперь можно загружать всего одно изображение... Спасибо.

Как запустить функцию выделения вместо алерта?

unicross

Дата 12.10.2008, 13:56 (ссылка)

(нет голосов)

Загрузка ...

Опытный

Профиль
Группа: Участник
Сообщений: 422
Регистрация: 15.6.2008

Репутация: 1
Всего: 53

Цитата(Wheels @ 12.10.2008, 12:42

)

Как запустить функцию выделения вместо алерта?

А так делать не пробывали?

Код


function f_print(s1, s2) {
   var im = document.getElementById('pic');
   if (im_width != 0 && im_height != 0) {
      im.width = im_width * (parseInt(s2) / 100);
      im.height = im_height * (parseInt(s2) / 100);
   }
   $('#pic').imgAreaSelect({selectionOpacity: 0, minHeight: 65, minWidth: 65});
  
}

В функцию f_print() передаются практически все параметры. Это можно обработать.

Как я понимаю

Код


      $(window).load(function () {}
      $('#red').click(function () {}

это просто обработка событий. Так как вы сами обрабатываете события, то можно просто вставить выражение внутри этих функций в функцию f_print() и изменить какие-либо параметры в зависимости от значения переменных s1 и s2, например, поменять параметры minHeight и minWidth.

Wheels

Дата 12.10.2008, 16:02 (ссылка)

(нет голосов)

Загрузка ...

Шустрый

Профиль
Группа: Участник
Сообщений: 64
Регистрация: 1.2.2007

Репутация: 1
Всего: 1

Все, спасибо большое, вопрос решён))

0 Пользователей читают эту тему (0 Гостей и 0 Скрытых Пользователей)
0 Пользователей:
« Предыдущая тема \| JavaScript: для новичков \| Следующая тема »