Форум программистов [Powered by Invision Power Board]

Версия для печати темы
Нажмите сюда для просмотра этой темы в оригинальном формате

Форум программистов > JavaScript: для новичков > Вызов функции

Автор: Wheels 10.10.2008, 14:06

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

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

Имеется выпадающий список с четырмя опциями и три радиобокса.
Суть проблемы:
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>

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

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

Автор: Michael.de 10.10.2008, 18:26

Wheels, если я правильно понял вопрос: похожее рассматривалось >>http://forum.vingrad.ru/forum/topic-210359.html<<

Автор: Wheels 10.10.2008, 18:36

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

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

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

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

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

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

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

Автор: unicross 10.10.2008, 20:56

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

Код


        <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

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

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

Код


<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

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

Код


<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

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

Код


<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

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>

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

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

Автор: unicross 11.10.2008, 21:21

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

)

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

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

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

Автор: Wheels 11.10.2008, 21:25

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

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

Код


<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

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

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

Автор: unicross 12.10.2008, 13:56

Цитата(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

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