Этот мини-курс содержит шесть небольших уроков по использованию jQuery. Курс предназначен для тех, у кого нет никакого опыта работы с jQuery и JavaScript. Примеры все простейшие, но при этом будут содержать код на Javascript. Каждый урок снабжен демо страницами, на которых можно увидеть результат работы того или иного скрипта. Курс поможет понять основы работы с JavaScript с использованием библиотеки jQuery.
Содержание мини курса по jQuery для дизайнеров.
1. Как работает jQuery
2. Как обратиться к нужному элементу?
3. Выдвигающаяся панель
4. Эффект исчезновения
5. Движение и изменение элемента
6. Меню с эффектом аккордеон
7. Доработка меню с эффектом аккордеон
8. Всплывающие окна с подсказками
9. Всплывающие окна с подсказками #2
10. Сворачиваемые списки
11. Простая галерея с заменой картинок
12. Стилизация ссылок на файлы различных типов
Перейти на демо сайт
Как работает jQuery
Для начала вы должны загрузить библиотеку jQuery. Далее требуется подключить библиотеку jQuery к ваше сайту. Делается это чаще всего после тэга <head>. Далее пишется функция, в которой говорится что нужно сделать jQuery.
Диаграмма ниже подробно объясняет как работает jQuery.
Как обратиться к нужному элементу?
Написание функций на jQuery достаточно простое, благо есть очень подробная инструкция. Ключевой момент, который нужно знать это как обратиться к нужному вам элементу, к которому вы собираетесь применить эффект.
$("#header")= получить элементы сid="header"$("h3")= получить все заголовки<h3>$("div#content .photo")= получить все элементы принадлежащие классуphoto, которые встречаются внутри блока<div id="content">$("ul li")= получить все<li>элементы списка, которые встречаются в списках<ul>$("ul li:first")= получить только первый<li>элемент списка<ul>
На этом вступительную часть мы заканчиваем. В следующей статье рассмотрим как сделать эффект выезжающей панели и эффект исчезновения блока.
Если вы не знаете как правильно составить техническое задание на разработку сайта, то обязательно прочтите статью на сайте http://videotutor.ru. Там же есть готовый шаблон для технического задания.
Уведомление: Мини-курс по jQuery для дизайнеров. | Grabr
Уведомление: Мини-курс по jQuery для дизайнеров. Урок 2: выдвигающаяся панель и эффект исчезновения. | RusDigi.org Блог Гилязетдинова Руслана
Уведомление: Мини-курс по jQuery для дизайнеров. Урок 3. Движение и меню аккордеон. | RusDigi.org Блог Гилязетдинова Руслана
Уведомление: Эстафета: небольшие планы на будущее | RusDigi.org Блог Гилязетдинова Руслана
Уведомление: Мини-курс по jQuery для дизайнеров. Урок 3. Аккордеон и подсказки. | RusDigi.org Блог Гилязетдинова Руслана
Уведомление: Мини-курс по jQuery для дизайнеров. Урок 5. Подсказки и списки. | RusDigi.org Блог Гилязетдинова Руслана
Уведомление: Мини-курс по jQuery для дизайнеров. Урок 6. Галерея. Иконки файлов | RusDigi.org Блог Гилязетдинова Руслана
Уведомление: Креативное свадебное видео - Платье на выброс
Уведомление: Онлайн-редактор изображений Pixlr | WmrStar: Кладовая полезностей
Уведомление: Инвайты для социальной сети Google+ | RusDigi.org Блог Гилязетдинова Руслана
И где же тут основы???