Ссылки

О jQuery

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

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

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

Синтаксис jQuery

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

$('элемент').действие;

либо, если элементов несколько, а действие над ними одно

$('элемент_0, элемент_1, элемент_2').действие;

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

Пример:

$('#container, .content').hide(2000);

В этом примере элементы DOM c id=«container» и class=«content» скрываются с анимационным эффектом за время 2000 миллисекунд (2 секунды).

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

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

<head>
<script type="text/javascript" src="path/jquery.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:
Рисунок 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, Ваша страница откроется как ни в чем ни бывало, но скрипты jQuery работать не будут. Никаких предупреждений или описаний ошибки при этом не выводится.

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

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

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

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

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

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

Подключение jQuery и его плагинов на страницах InstantCMS

Никаких проблем с подключением этого фреймворка к файлам *.tpl не возникает, если придерживаться простых правил, уже изложеных в этой статье:

Подключение jQuery

Подключение можно сделать двумя способами: с помощью тегов html и с помощью самого движка InstantCMS.

Первый способ. Создаем в самом начале файла *.tpl заголовок head и внутри него прописываем линки:

<head>
<script type="text/javascript" src="../includes/jquery/jquery.js"></script>
<script type="text/javascript" src="../includes/jquery/плагин_jquery/файл_плагина_jquery.js"></script>
</head>

Второй способ. Заголовок не нужен, просто вставляем в самом начале файла

{add_js file='includes/jquery/jquery.js'}
{add_js file='includes/jquery/плагин_jquery/файл_плагина_jquery.js'}

Какой способ использовать - решать Вам. Работают оба способа.
Я использую первый, поскольку четко вижу полный путь к файлу, но это дело вкуса. Кроме того, первый способ позволяет подключить к странице или модулю библиотеку jquery, отличную от той, что лежит по адресу includes/jquery/. Для этого просто положите в папку с Вашим модулем или компонентом файлы библиотеки jquery и плагины к ней и пропишите к ним путь. Естественно, если Вы используете дополнительные плагины jquery, не забудте скачать их и положить по указанному пути.

Вызов jquery

Чтобы текст скрипта не маячил среди Вашего контента, необходимо заключить его в контейнер literal:

{literal}
	<script type="text/javascript">
		$(document).ready(function(){
			$("#элемент").действие_или_плагин();
		});
	</script>
{/literal}

Этот код можно поместить в любое место файла *.tpl. Естественно, если плагин обладает свойствами, отличными от свойств по умолчанию, необходимо эти свойства с их новыми значениями перечислить внутри круглых скобок плагина.


Написала Светлана Кондратьева
Добавил Странник


Ссылки
 
справочник/jquery_-_java_библиотека.txt · Последние изменения: 2014/06/18 10:26 От stroller7