Министерство по развитию информационных технологий и коммуникаций республики узбекистан нукусский филиал ташкентского университета информационных технологий

МИНИСТЕРСТВО ПО РАЗВИТИЮ ИНФОРМАЦИОННЫХ ТЕХНОЛОГИЙ И КОММУНИКАЦИЙ РЕСПУБЛИКИ УЗБЕКИСТАН
НУКУССКИЙ ФИЛИАЛ ТАШКЕНТСКОГО УНИВЕРСИТЕТА ИНФОРМАЦИОННЫХ ТЕХНОЛОГИЙ
ИМЕНИ МУХАММЕДА АЛЬ-ХОРЕЗМИ

Факультет« АТ сервис »

Самостоятельная работы по веб-программированию
Выполнил: Жуманазаров А.
Принял:

Нукус 2021

План

1. Создание виджета сортировки по цене.

1.1. Создаем html разметку.

1.2. Создаем и подключаем файл стилей.

1.3. Скачиваем и подключаем библиотеки jQuery и jQuery UI.

1.4. Кодируем на javascript.

2. Создание фотогалереи.

2.1. Создаем html разметку.

2.2. Пишем логическую часть фотогалереи.

1. Создание виджета сортировки по цене.

1.1. Создаем html разметку.

Для начала, давайте реализуем слайдер, с помощью которого можно задавать диапазон цен в интернет магазине. Для этого создадим текстовый файл с обычной html разметкой (файл price.html) :
Теперь нам необходимо создать форму и два текстовых поля: первое для минимальной цены, второе для максимальной цены. При этом заключим форму в контейнер div с идентификатором id=’options’(для удобства, как бы с имитируем то, что обычно такие текстовые поля находятся в сайдбарах интернет магазинов).
Итак между тегами body вставляем следующий код:

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

Далее необходимо создать пустой контейнер div в котором у нас будет располагаться слайдер. Добавим этот контейнер после закрывающего тега формы:

1.2. Создаем и подключаем файл стилей.

Далее давайте создадим таблицу стилей и немного приукрасим нашу форму. Я создал файл style.css в папке css, с таким содержимым:
Далее осталось просто подключить данный файл между тегами head:
Давайте посмотрим предварительные результаты нашей работы в браузере: