Web 2.0 неожиданно возродил технологию под названием XMLHttpRequest, появившуюся еще в 2000 году. Эта технология позволяет обращаться к серверу без перезагрузки текущей страницы. На данный момент можно считать, что все современные браузеры реализуют эту технологию в объеме, достаточном для безболезненного ее использования. В новой реинкарнации триумвират XMLHttpRequest, JavaScript и DOM называется AJAX.
Метод animate является основой большинства, если не всех, эффектов jQuery и плагинов. Например, jQuery предлагает следующие методы для показа и скрытия элементов:
Ключевой функцией, на которой базируются все остальные, является функция animate:
Read the rest of this entry »
Если Вы пробовали что-то найти в Google, то наверняка знаете, что после ввода символа в текстовое поле появляется выпадающий список, который содержит десяток строк со словами, начальные символы которых совпадают с теми символами, что Вы уже успели ввести. Так работает Google Suggest. Почему бы не сделать так же на своем сайте? Ведь это удобно. К тому же с библиотекой jQuery это не так уж и сложно…
Read the rest of this entry »
Или как их еще называют – баблы.
Итак, перед нами очередная очень распространенная задача — по клику на эскиз изображения (который фактически является ссылкой) красиво развернуть оригинальную картинку. Красиво — это в нашем случае что-то отличное от target="_blank" и с каким-нибудь «вау-эффектом».
Все скрипты, выполняющие данную задачу принято называть лайтбоксами (lightbox). В поисках неплохих решений, мною были запытаны более двух десятков скриптов, но в результате в копилку были включены только нижеследующие.
Скрипт представляет собой плагин к jQuery.
Возможности:
* Подгоняет размеры изображений под разрешение монитора;
* Пририсовывает тень к всплывающему окошку;
* Поддерживает возможность группирования объектов и их просмотр в виде галереи в одном окне;
* Выведет для вас не только изображения, но и inline-элементы, а также HTML-контен в iframe;
* Конечно же, все это благолепие можно конфигурировать, а также экспериментировать с CSS.
Теперь о размерах, а точнее, весе скрипта (вопрос немаловажный):
* непосредственно jquery.fancybox-1.0.0.js – 12 Кб
* сам jQery (jquery-1.2.3.pack.js) – 29,1 Кб
* дополнительный скриптик jquery.pngFix.pack.js – 2,52 Кб
* CSS – около 4 Кб
* изображения – 17 Кб
Подключение и использование скрипта не представляет никакой сложности:
1. Сначала подключаем скрипты и CSS:
/* обязательно */
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/jquery.fancybox.js"></script>
/* опционально */
<script type="text/javascript" src="js/jquery.pngFix.js"></script>
<script type="text/javascript" src="js/jquery.metadata.js"></script>
/* цепляем CSS */
<link rel="stylesheet" href="css/fancybox.css" type="text/css" media="screen">
2. Берем подопытную картинку:
<a href="image_big.jpg"><img src="image_small.jpg" alt=""/></a>
примечание: можете использовать атрибут title для отображения подписи к изображению, а также rel – для группировки обектов.
Заключаем картинку в какое-нибудь оформление (p, div, span – без разницы) с определенным ID. Например, так:
<p id="”test1”"><a href="image_big.jpg"><img src="image_small.jpg" alt="" /></a></p>
3. Инициализируем плагин:
$(document).ready(function() {
$("p#test1 a").fancybox();
});
Готово. В данном случае по щелчку на изображение появится всплывающее окошко с оригиналом изображения. Все параметры окна будут по умолчанию Но вы можете использовать дополнительные опции при вызове плагина, например:
$(document).ready(function() {
$("p#test2 a").fancybox({
‘hideOnContentClick’: true
});
});
Параметр ‘hideOnContentClick’: true — делает возможным закрытие всплывающего окна не только по нажатию на специальную кнопку, но и по щелчку на свободной области.
Со всеми возможными настройками можете ознакомиться на официальном сайте плагина, где также можно скачать архив и полюбоваться на примеры работы скрипта .
В разных браузерах полоса прокрутки выглядит по разному. И когда возникает необходимость настроить внешний вид скроллбара, появляются мысли что это должно быть как-то связано с CSS. Если вы будете искать информацию об этом, то скорее всего обнаружите что есть стили с помощью которых можно настроить цвет скроллбара. Стоит заметить, что поддерживаются эти стили только браузерами IE 5.5 и выше.
Элемент DatePicker из известной библиотеки интерфейсных элементов jQuery UI. Множество полезных функций, а главное – локализация для многих языков!
Смотри также: библиотека lightbox
Нам понадобится библиотека jQuery, конечно же сам плагин jquery.lightbox.js, файл стилевого оформления, несколько картинок (вперед, назад, загрузка…) и фотографии для Вашей галереи, представленные в двух вариантах: миниатюра и полноразмерное изображение.
А также Prototype и прочее. Громадным плюсом jQuery является его совместимость с другими фреймворками.
<!–more–>
Так вот. Чтобы одновременно работало несколько фреймворков, в jQuery следует писать не $(element), а jQuery(element).
Как говорится все элементарное просто 