О jQuery

jQuery – это замечательный JavaScript Framework, который подкупает своей простотой в понимании и удобством в использовании. Для его использования начинающему админу не надо знать всех тонкостей JavaScript, и даже нет необходимости JavaScript учить. С помощью jQuery можно легко создать сайт уровня Web 2.0, необходимо всего-навсего для модификации элемента использовать ту или иную функцию jQuery.

Основной принцип программирования очень прост. Мы указываем какой-то элемент страницы (в нашем примере – это контейнер <div id=«panel»>…</div> или любой, какой нам нужен) и делаем с ним, все, что заблагорассудится. Мы можем получить его содержание и записать это содержание в переменную, или это содержание заменить на другое. Мы можем переназначить свойства этого элемента, описанные в CSS. Мы можем заключить его в рамку с круглыми углами. Мы можем поместить в этот элемент несколько картинок и листать эти картинки с анимационными эффектами. Можно сделать так, чтобы при наведении на наш элемент указателя мыши (событие mouseover) выполнялась назначенная нами функция…

Более того! Можно нанизывать эффекты друг на друга, получая совершенно волшебные превращения. И при этом вовсе не надо быть гуру в Javascript!

Синтаксис jQuery

Он очень прост:

$(элемент).что_с_ним_делать

Здесь символ $(элемент) – синоним jquery(элемент). Можно использовать то или другое. Второе предпочтительно, если у вас ранее уже была назначена другая функция $() (не jQuerry).
элемент – здесь указывается id или класс элемента, с которым производится действие, указанное в .что_с_ним_делать.
.что_с_ним_делать - то действие или преобразование или доступ к свойствам или что-то другое, что позволяет сдедать с этим элементом библиотека Jquery и ее плагины.

Как обратиться к jQuery

Напишем для примера небольшую html страничку с таким фрагментом:

<head>
<script type="text/javascript" src="path/jquerry.js"></script>  //здесь прописывается путь к библиотеке jQuery
<script type="text/javascript"> 
    $(document).ready(funcion(){                         //эта функция ожидает, пока все без исключения элементы загрузятся в браузер
         $(".buton.").click(funcion(){                   //при клике по элементу с классом button выполнится функция slideDown()
                 $("#panel").slideDown("slow");          //элемент с id="panel" медленно соскользнет вниз.
          });
     });
</script>
</head>
<body>
...
<div id="panel">...</div>
...
</body>

Что происходит при обращении к такому коду? Смотрите на рисунке 1:

Особенность jQuery в том, что для начала работы вы должны обеспечить доступ к фреймворку. Это можно сделать двумя способами, хотя принцип совершенно одинаков:

Подключение внешней библиотеки. Вы указываете путь к скриптам, которые находятся на официальном сайте jQuery http://jquery.com. В этом случае у Вас всегда самые свежие версии сценариев. Недостаток этого способа – повышенная наргузка на сервер и несколько пониженное быстродействие.
Размещение библиотеки сценариев у себя на сайте. В этом случае Вы скачиваете фреймворк с этого же сайта http://jquery.com и размещаете его в любой папке. Достоинство этого способа – повышенное быстродействие, ведь если вы используете jQuery для оформления многих элементов, то обращаться они будут всего к одной библиотеке. Его недостаток – «замороженность» библиотеки, то есть Вам придется регулярно обновлять версии вручную.

В примере и на рисунке 1 фреймворк расположен в той же папке, что и оформляемый с помощью jQuery элемент. В InstantCMS он уже расположен в папке \includes\jquery\, то есть Вам попросту нужно прописать этот путь, и больше ничего делать не надо. А вот если Вы захотите обратиться к другим библиотекам jQuerry и содержащимся в них фукнциям, вам придется добавить еще одну строчку - путь к этим дополнительным библиотекам, указанным выше способом, иначе они не запустятся.

Модификация элементов с помощью jQuery

Обратите внимание на запись

$("#panel").slideDown("slow");

В этой нехитрой строчке и сосредоточена вся мощь фреймворка jQuery. Если Вы немного знаете CSS (а Вы его знаете, раз пишите сайты) , то стринг »#panel» означает ID или класс элемента, который Вы хотите модифицировать с помощью jQuery. Выражение .slideDown(«slow») означает вызов функции .slideDown() с параметром «slow». Эта функция заставляет элемент скользить вниз, а параметр «slow» определяет скорость скольжения, в данном случае низкую.

Если вы запишите .slideTown(), то элемент будет скользить вверх. Этих функций очень много. Вы можете выбрать любую, если внимательно посмотрите на шпаргалку jQuery здесь. Более того, появилось расширение jQuery UI, где этих функций еще больше! Регулярно появляются плагины к jQuery (их нужно подключать дополнительно к основной библиотеке), где добавлены еще какие-то функции или эффекты.

Кроме библиотеки jquery.js существуют плагины со своими функциями. Например, плагин tooltip.js с функцией .easyTooltip() позволяет создать очень красивую всплывающую подсказку. Главное – принцип подключения и использования этих плагинов, и этих функций, ничем не отличается от рассмотренного примера.

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

P.S. Маленькое предупреждение при написании шаблонов с jQuery. Использование нескольких скриптов в одном шаблоне может покараться абсолютной заглушкой всех скриптов, поэтому при добавлении каких либо скриптов в тело шаблона обязательно проверяйте работоспособность остальных элементов сайта. Не расстраивайтесь если что то глючит. Пробуйте оставлять рукописные скрипты - отключая подгружаемые. Может сработать )))

Указание элементов, модифицируемых с помощью jQuery

Нам всего-то осталось указать тот элемент, который мы хотим заставить медленно соскальзывать вниз. В теле документа пишем:

<div id="panel">
...
</div>

Ну и конечно, следует обозначить свойства элемента с помощью описателей CSS.

Написала feba7

Ссылки

К оглавлению
Справочник: Структура Базы Данных
Справочник: Структура Модуля
Справочник: Структура Шаблона
Справочник: Структура Компонента
Справочник: Компилирующий обработчик шаблонов Smarty

Реклама спонсоров

Куртки кожаные мужские

Условия размещения рекламы. Интернет-магазин спортивной одежды.

wildberries.ru
Инфракрасный теплый пол

Электротехническая компания. Электротехнический портал.

z-plus.ru
Турбина

Фотогалерея участников. Классификация по алфавиту и по разделам.

kdturbo.com