• Главное
• Радуга
• Как худеть
• Как бросить курить
• Сăмах
• Как создать сайт
• Лада приора
• Электросварка

• HTML
• CSS
• Web-диз
• JavaScript
• PHP
• jQuery
• SEO
• MySQL
• XML

Функция bind() в jQuery.

Функция bind() позволяет не только указывать событие на странице сайта и функцию для реакции на событие; функция bind()передает дополнительную информацию для использования функцией, обрабатывающее данное событие, то есть способствует тому, что одна и таже функция может действовать по-разному в зависимости от запускаемого события.

Общий вид кода функции такой:

  
                  $('#селектор').bind('событие', моиДанные, имяФункции);

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

Второй аргумент - данные передаваемые функцией в форме литерала объекта или переменной, содержащей литерал объекта, то есть список имен свойств и их значений { имя: 'Коля', фамилия: 'Николаев' }. Литерал объекта есть аргументы функции, представленный как список имен и их значений в виде имя двоеточие и значение имени. Аргументы можно представить в виде имен переменных, то есть сперва назначить имя переменной var strokaVar = { message: 'Вы нажали на ссылку'}, далее это имя применять как аргумет функции.

Третий аргумент - есть другая функция, выполняющая какое-то действие при запуске события. Может быть именованной или анонимной функцией function() {...}.

Первую переменную для объектной константы мы написали. Пусть вторая переменная будет такой var abzacVar = { message:'Вы нажали на абзац'}; Теперь мы напишем код программы создающий всплывающее окно в ответ на событие, а сообщение будет разным в зависимости от того, какой элемент вызывал событие:

  
                   var strokaVar = { message: 'Вы нажали на ссылку'};
                   var abzacVar = { message: 'Вы покидаете абзац'};
                   function showMessage(evt) {
                   alert(evt.data.message);
                   }
                   $('a').bind('click', strokaVar, showMessage);
                   $('p').bind('mouseover', abzacVar, showMessage);                      

Функция bind() дает возможность воздействовать на события разными способами. Допустим нам нужно, чтобы у посетителей эффект-lightbox возникал и при щелкании кнопкой мыши и при нажатии клавиши клавиатуры, тогда код такой программы будет такой:

  
                      < style>p { margin: 8px; font-size:12px; }< /style>
                      < script type="text/javascript">$(document).ready(function(){
                           $('#lightbox').html('< img src="../fon/56.jpg" />')
                           .bind('click keypress', function() {
                           $('#lightbox_1'
                           .html('< img src="../chebok/dsc09536" height="350" width="500" />')
                          });
                        });
                      < /script>
                      < div style=" margin: 15px auto 15px 150px;">
                      < button id="all">Нажимайте на фото.< br/>
                      < div id="lightbox">< /div>
                      < div id="lightbox_1">< /div>
                      < /div>

Как видите, первым аргументом события функция bind() стоят имена наших событий click и keypress, разделенных пробелом (сюда можно добавить еще несколько имен событий) эти события специально выделил жирным шрифтом, при запуске которых выполняется анонимная функция.

В данном случае Вы нажимаете на маленькую картину и рядом появляется другая большая картина. Можно, конечно, и убрать было маленькую картину, но, эффект-lightbox при этом не было видно.

В одной функции bind() можно присоединить несколько событий, каждое из которых запускает различные действия:

                
                            $('#teg').bind({
                                            'click':function(){1 действие},
                                        'mouseover':function(){2 действие};
                            });

Как видите, в одной функции разные аргументы запускают анонимные функции выполняющие свои действия; обратите на знаки двоеточие до анонимной функции.

обратно на главную     назад    дальше     вперед