Отправляет email-рассылки с помощью сервиса Sendsay

Все Скрипты для Cайта! - с множеством Регулируемых Настроек!

Подписаться Бесплатная «Серебряная» новостная рассылка . Подписчиков 3.764 RSS
←   Февраль 2011   →
 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
26
27
28


За последние 60 дней ни разу не выходила


Сайт рассылки: http://www.tunescript.biz-1.ru/
Открыта: 27-11-2001

Автор
Авторский коллектив "Ускорителя"

Статистика

3.764 подписчиков
0 за неделю
←   Все выпуски   →

Начиная с этого выпуска Вы будете видеть много примеров использования библиотеки-движка jQuery для фронт-энд программирования сайтов. В этом выпуске Вы увидите десяток примеров использования типичной jQuery-конструкции $(`CSS-селектор').метод(параметры) на примере метода slideToggle(), по очереди скрывающего или открывающего группу элементов, заданную CSS-селектором. Все эффекты будут реализованы нами всего одной этой строчкой, помещенной в обработчик события onclick элемента.


Уважаемые подписчики!

Начиная с этого выпуска Вы будете видеть много примеров использования библиотеки-движка jQuery для фронт-энд программирования сайтов. Главным преимуществом “библиотечного” javaScript-программирования является кроссбраузерный код на выходе – верстальщику почти не нужно заботиться о том, чтобы поведение сайта было одинаковым во всех браузерах – этим за него занимается та библиотека, которую он использует.

Выбор именно библиотеки jQuery обусловлен несколькими причинами. На данный момент jQuery – это самая мощная и одновременно самая быстрая в среднем из всех библиотек. Предлагая использование CSS-селекторов для отбора сразу группы элементов, она не только убирает большие объемы ненужного кода и экономит время, но создает неявный цикл по этим элементам. Есть и другие преимущества, благодаря которым движок jQuery завоевал заслуженную популярность, но давайте обо всем по порядку - мы будем двигаться от простого к сложному.

Для начала читайте, как интегрировать библиотеку jQuery на сайт:

Как интегрироавать jQuery на сайт

В этом выпуске Вы увидите десяток примеров использования типичной jQuery-конструкции $(‘CSS-селектор’).метод(параметры) на примере метода slideToggle(), по очереди скрывающего или открывающего группу элементов, заданную CSS-селектором. Все эффекты будут реализованы нами всего одной этой строчкой, помещенной в обработчик события onclick элемента.

Метод slideToggle() работает следующим образом. Если элемент, на который он воздействует видим, то он скрывает этот элемент постепенно уменьшая его высоту. Если элемент, на который он воздействует в данный момент невидим, то он, наоборот открывает его постепенно увеличивая его высоту начиная с нуля. Параметром метода является скорость эффекта – slow, normal, fast или число в миллисекундах. Для большей различимости мы везде используем slideToggle(‘slow’), чтобы легко было разглядеть протекание визуального эффекта.

Для наглядности примеров мы будем вставлять стили элементов прямо в код либо параметром style внутри тегов, либо отдельным тегом <style>, а потом приводить полную распечатку кода. Мы также будем вставлять jQuery-инструкции прямо в обработчик события тега, что не соответствует правилу ‘ненавязчивого javaScript’, при котором весь javaScript-код должен содержаться в отдельном файле для отделения поведения страницы от ее содержания. Пуститься ‘во все тяжкие’ нас заставляет преследуемая цель – при минимальном количестве кода (одна строка jQuery) получить максимальную наглядность (и чтобы все сразу было в одном месте).

Итак, давайте посмотрим несколько примеров – как одна короткая строчка jQuery меняет поведение простых блочных и встроенных элементов (для просмотра примеров нужно перейти по ссылкам – subscribe.ru не позволяет вставлять скрипты в рассылки):

Скрываем/отркрываем абзац с текстом одной строкой jQuery

Действие slideToggle() на заголовки

Как slideToggle() скрывает ссылки

slideToggle() для тега strong

Как видим, slideToggle() обращается со встроенными элементами, как с блочными, поэтому для них ее лучше не использовать, либо выделять их в отдельную строчку. Можно, конечно, изменить свойство display на display: block; но делать так крайне не рекомендуют (т.е. если можно обойтись без изменения встроенного элемента на блочный, то лучше обойтись). Тем более, что если уж делать элемент блочным, то почему бы тогда не взять изначально блочный элемент, например контейнер <div>, а внутрь его вставить встроенный?

Рассмотрим чуть более сложные примеры:

Выезжающий список элементов одной строкой jQuery

Скрываем/показываем группы элементов одной строкой jQuery на примере упорядоченного списка.

Неупорядоченный список - динамическое скрытие/раскрытие избранных групп элементов

Из этих примеров видно, что некоторые старые (но еще активно используемые) версии браузеров ‘забывают’ маркеры элементов списков в процессе скрытия/раскрытия частей списков, за исключением случая скрытия/раскрытия всего списка полностью. Как выход, в случае необходимости манипулирования неразрывной частью списка, можно предложить использовать для этой части отдельный список. В универсальном случае можно просто не использовать маркеры вообще, а если это все-таки очень нужно, то вставлять их дочерними тегами (изображениями или символами) внутрь самих пунктов меню.

Ну и наконец – 2 более сложных примера – динамические эффекты со сложными 2-уровневыми меню. Тут мы уже немножко используем стили:

Динамически раскрываемое 2-уровневое меню на jQuery

(в этом случае все подменю показываются/скрываются независимо друг от друга и можно, например, раскрыть одновременно все подменю)

Экономное 2-х уровневое меню на jQuery

- тут при открытии следующего пункта, все предыдущие сворачиваются для экономии места.

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

Как видим, в итоге, HTML-код, необходимый для отображения гипертекстовой разметки элементов во всех случаях оказался не в пример более объемным, чем jQuery инструкции, обеспечивающие динамику элементов страницы. При правильном программировании (использовании специальных готовых расширений jQuery, создание своих модулей расширения) – программный код всегда будет оставаться простым и наглядным при очень мощной реализуемой им функциональности.

P.S. Из-за заспамливания на сайте пришлось временно отключить комментарии, поэтому все Ваши просьбы, замечания, пожелания и т.п. пишите мне на почту tunescript [AT] gmail.com



С наилучшими пожеланиями,
     Авторский коллектив!

Наши бесплатные рассылки:

    Если Вам интересно как очень просто, быстро и без денежных затрат сделать свой собственный портал в сети интернет на качественном бесплатном движке, то рассылка "Все скрипты для сайта" для Вас! Из нее Вы также узнаете о большом множестве полезных и готовых к использованию скриптов для сайта и получите массу полезных ссылок для их скачивания. В большинстве этих скриптов не нужно разбираться - просто вставил код и получил результат!
Все Скрипты для сайта!С тонкими настройками! Каждый день новые!

    Предлагаем Вам также подписаться на бесплатный электронный журнал "Ускоритель": об ускорении ПК, Ноутбуков, Софта, Игр.     Опытные специалисты простым языком о действенных способах радикального ускорения ПК, Ноутбуков, Процессоров, Видеокарт, Программ и 3D-Игр. Для Вас только тщательно проверенные советы и действительно нужные программы в Интернет журнале "Ускоритель"!
Журнал "Ускоритель": об ускорении ПК, Ноутбуков, Софта, Игр
Все тайны ультрапопулярной почтовой программы The Bat! Только для Вас: секреты сверхбыстрой обработки почты, а также малоизвестные технологии обработки больших объемов интернет-корреспонденции и создания автоматизированных услуг и курсов в Интернете.

Все о The Bat! - Секреты популярной почтовой программы!
Подписаться письмом
В избранное