JQuery является популярной JavaScript библиотекой, которая используется многими разработчиками и во многих приложенях. При использовании JQuery нужно писать меньше кода, написание функций является менее сложным, и есть много плагинов, которые можно использовать бесплатно в веб-приложения. Даже если вы пишете весь код самостоятельно, то требуется всего лишь несколько строк кода, чтобы создавать красивые и мощные функции для вашего сайта.
Заполнение select-меню с jQuery и Ajax
Одни из наиболее мощных функций в Ajax содержатся в Ajax Suite. В данном примере показано, как заполнять второе select-меню на основе выбора первого меню.
Например, у нас есть меню с главными категориями:
|
1 2 3 4 5 6 7 8 |
<form> <label for="category">Choose: </label> <select id="category" name="category"> <option value="fruit">Fruit</option> <option value="grain">Grains</option> <option value="vegetables">Vegetables</option> </select> </form> |
Если кто-либо изменяет значение в данном меню выбора, то нам нужно показать эквивалентное меню внутри элемента span с ID "subcat". Для этого мы используем следующий фрагмент JQuery, который выполняет Ajax запрос к PHP-файлу с именем "getSubCat.php". После того, как меню выбора изменяется, выводится изображение загрузки (в случае медленного Интернет-соединения), вызывается PHP сценарий и суб-меню выбора становится видимым.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
$(document).ready(function() { $('#category').change(function() { var category = $(this).val(); $.ajax({ type: 'GET', url: 'getSubCat.php', data: 'cat=' + category, dataType: 'html', beforeSend: function() { $('#subcat').html('<img src="loader.gif" alt="loading..." />'); }, success: function(response) { $('#subcat').html(response); } }); }); }); |
Код PHP используется из файла getSubCat.php:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 |
array('Apples', 'Pears', 'Cherries', 'Oranges', 'Kiwis'), 'grain' => array('Wheat', 'Corn'), 'vegetables' => array('Tomatoes', 'Beans', 'Peas', 'Peperoni') ); // лучше использовать базу данных, массив используется только для примера if (!empty($_GET['cat'])) { if (array_key_exists($_GET['cat'], $data)) { echo ' <select id="subselect" name="'.$_GET['cat'].'">'; foreach ($data[$_GET['cat']] as $key => $val) { echo ' <option value="'.$key.'">'.$val.'</option> '; } echo ' </select> '; } else { echo 'Array-key doesn't exist'; } } else { echo 'Invalid request'; } |
Это простой пример того, как можно использовать возможности Ajax, которые включают в себя много функций и придают большую гибкость.
Отключение/включение кнопки "Отправить" на форме с помощью JQuery
На страницах с регистрацией и формах заказа посетитель должен принимать некоторые условия сервиса, перед тем как продолжить заполнение формы. Очень хорошим способом реализации этого является отключение кнопки "Отправить", пока пользователь не установит какой-либо флажок (например: Я принимаю условия сервиса). Следующий фрагмент кода будет включать/отключать кнопку "Отправить" после того, как будет установлен или снят флажок.
|
1 2 3 4 5 6 7 |
$('#accept').click(function() { if ($('#buybtn').is(':disabled')) { $('#buybtn').removeAttr('disabled'); } else { $('#buybtn').attr('disabled', 'disabled'); } }); |
Вместе с этой функцией мы используем следующий HTML код для кнопки "Отправить".
|
1 2 |
<input id="accept" name="accept" type="checkbox" value="y" /> Я принимаю условия! <input id="buybtn" disabled="disabled" name="Submit" type="submit" value="Отправить" /> |
Простая фото галерея с уменьшенными изображениями
Если вы ищете легкий способ создания фото галереи, этот фрагмент кода для вас. Функция работает очень просто: если посетитель нажимает миниатюрное изображение, то значение из атрибута "href" передается в атрибут "src" большего изображения. Вот и все, посмотрите пример кода JQuery и, конечно, HTML.
|
1 2 3 4 5 6 7 8 9 10 11 |
$("#thumbs a").click( function() { var changeSrc = $(this).attr("href"); $("#detail").attr("src", changeSrc); return false; }); <img id="detail" src="img/1.jpg" alt="big view" /> <a href="img/1.jpg"><img src="thumbs/1.jpg" alt="thumb 1" /></a> <a href="img/2.jpg"><img src="thumbs/2.jpg" alt="thumb 2" /></a> <a href="img/3.jpg"><img src="thumbs/3.jpg" alt="thumb 3" /></a> |
Как скрывать и показывать элементы на основе выбора переключателя
В JQuery есть много отличных функций, чтобы показывать или скрывать HTML-элементы. Этот пример о том, как показать дополнительный список на основе выбора кнопки-переключателя. Сначала сценарий проверяет, что переключатель установлен и отображает дополнительный контейнер, в противном случае скрывает этот контейнер.
|
1 2 3 4 5 6 7 |
$('#payments input[type=radio]').click(function() { if ($('input[name=payment]:checked').val() == "creditcard") { $("#cards").show(); } else { $("#cards").hide(); } }); |
Фрагмент HTML кода включает в себя группу переключателей и DIV контейнер, который становится видимым, когда установлен переключатель со значением "creditcard".
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
<ul id="payments"> <li> <input id="creditcard" name="payment" type="radio" value="creditcard" /> Creditcard <nodiv id="cards"> <label for="cctype">Choose one: </label> <select id="cctype" name="cctype"> <option>...</option> <option value="master">MasterCard</option> <option value="visa">Visa</option> <option value="amex">American Express</option> </select></nodiv></li> <li> <input name="payment" type="radio" value="paypal" /> PayPal</li> <li> <input name="payment" type="radio" value="wire" /> Wire/transfer</li> </ul> |
Все примеры вы можете посмотреть на этой странице.