Ведение в jquery. Основные понятия Введение в jquery. Синтаксис jquery. Виды пользования jquery. Jquery селекторы. События jquery. Jquery ui

Глава 2. Создание клиентского приложения

2.1 Выбор приложения и его тематики

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

) Каталог;
2) Форум;
) Фотогалерея;
) Блог;
) Онлайн библиотека;
Я решил остановить свой выбор на каталоге, так как он является важнейшим, и используется как в форумах (разделы форума), фотогалереях (категории изображений), блогах, а так же в онлайн библиотеках.
Тематикой данного каталога я выбрал комплектующие компьютера, так как в этом примере можно комфортно использовать выпадающее меню (реализованное с использованием jQuery) и подменю в качестве категорий товара и его подкатегорий.
В данном каталоге будут представлены различные виды видеокарт, процессоров, материнских плат, блоков питания и оперативной памяти и описание каждого из комплектующих с иллюстрациями.
По моим представлениям, данное приложение должно иметь такой функционал:
) Выпадающее меню с подкатегориями каждого из разделов меню;
2) Приятный, не режущий глаз, внешний вид;
) Фрейм, в котором будет показываться информация о выбранном нам товаре для того чтоб не перезагружать каждый раз страницу заново.

2.2 Написание кода

Для начала создадим стартовую страницу index. htm в которой будет содержаться информация о внешнем виде нашего каталога. Создадим 2 вертикальных фрейма, в одном из которых будет находиться выпадающее меню, а во втором будет загружаться страница нужного нам товара, назовем его "content".

Код страницы index. htm:

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

После чего создадим страницу menu. htm в которой у нас и будет находиться само меню.
Код страницы menu. htm:

Видеокарты

ATI Radeon™ HD 5970
ATI Radeon™ HD 7970
Nvidia GeForce GTX 770

Оперативная память

Kingston [KVR13N9S8/4]
Corsair 11-11-11-30
G. Skill RipjawsX CL10-10-10-30

Материнские платы

ASRock LGA1155
ASUS LGA1155
Gigabyte G1. Assassin2 X79

Жесткие диски

Hitachi Deskstar [H3IK40003272SE]
Seagate Constellation ES.3 [ST4000NM0033]
WD Green [WD5000AZRX]

Процессоры

AMD FX-8350
Intel Core i7-4960X
Intel Core i5-4670K

Блоки питания

ATX DNS FinePower DNP-1050EPS
Chieftec 800W
Thermaltake TR2 RX