A PHP Error was encountered

Severity: 8192

Message: mysql_escape_string(): This function is deprecated; use mysql_real_escape_string() instead.

Filename: mysql/mysql_driver.php

Line Number: 303

JQuery: Полезные фрагменты кода для вашего сайта

JQuery: Полезные фрагменты кода для вашего сайта

Автор: Mowshon.
Опубликовано 22 августа 2011
в рубрике PHP, Примеры

Просмотров: 5665.
Подписаться на комментарии по RSS.

JQuery: Полезные фрагменты кода для вашего сайта

JQuery является популярной JavaScript библиотекой, которая используется многими разработчиками и во многих приложенях. При использовании JQuery нужно писать меньше кода, написание функций является менее сложным, и есть много плагинов, которые можно использовать бесплатно в веб-приложения. Даже если вы пишете весь код самостоятельно, то требуется всего лишь несколько строк кода, чтобы создавать красивые и мощные функции для вашего сайта.

Заполнение select-меню с jQuery и Ajax

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

Например, у нас есть меню с главными категориями:

<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 сценарий и суб-меню выбора становится видимым.

$(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:

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

На страницах с регистрацией и формах заказа посетитель должен принимать некоторые условия сервиса, перед тем как продолжить заполнение формы. Очень хорошим способом реализации этого является отключение кнопки "Отправить", пока пользователь не установит какой-либо флажок (например: Я принимаю условия сервиса). Следующий фрагмент кода будет включать/отключать кнопку "Отправить" после того, как будет установлен или снят флажок.

$('#accept').click(function() {
	if ($('#buybtn').is(':disabled')) {
    	$('#buybtn').removeAttr('disabled');
    } else {
    	$('#buybtn').attr('disabled', 'disabled');
    }
});

Вместе с этой функцией мы используем следующий HTML код для кнопки "Отправить".

<input id="accept" name="accept" type="checkbox" value="y" /> Я принимаю условия!
<input id="buybtn" disabled="disabled" name="Submit" type="submit" value="Отправить" />

Простая фото галерея с уменьшенными изображениями

Если вы ищете легкий способ создания фото галереи, этот фрагмент кода для вас. Функция работает очень просто: если посетитель нажимает миниатюрное изображение, то значение из атрибута "href" передается в атрибут "src" большего изображения. Вот и все, посмотрите пример кода JQuery и, конечно, HTML.

$("#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-элементы. Этот пример о том, как показать дополнительный список на основе выбора кнопки-переключателя. Сначала сценарий проверяет, что переключатель установлен и отображает дополнительный контейнер, в противном случае скрывает этот контейнер.

$('#payments input[type=radio]').click(function() {
	if ($('input[name=payment]:checked').val() == "creditcard") {
		$("#cards").show();
	} else {
		$("#cards").hide();
	}
});

Фрагмент HTML кода включает в себя группу переключателей и DIV контейнер, который становится видимым, когда установлен переключатель со значением "creditcard".

<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>

Все примеры вы можете посмотреть на этой странице.

Комментариев: 1

  1. димон | 05.07.2012 в 17:11:49 | #1

    где пример то на "этой странице))"

Оставьте комментарий!

Гость
Комментатор / хотите им стать

Чтобы стать комментатором введите email и пароль. Напишите комментарий. В дальшейшем ваша связка email-пароль, позволит вам комментировать и редактировать свои данные. Не забудьте про активацию (инструкция придет на ящик, указанный при регистрации).

grin LOL cheese smile wink smirk rolleyes confused surprised big surprise tongue laugh tongue rolleye tongue wink raspberry blank stare long face ohh grrr gulp oh oh downer red face sick shut eye hmmm mad angry zipper kiss shock cool smile cool smirk cool grin cool hmm cool mad cool cheese vampire snake excaim question

(обязательно)