9186

Работа с готовыми плагинами Jquery

Лабораторная работа

Информатика, кибернетика и программирование

Работа с готовыми плагинами Jquery Цель: научиться подключать и адаптировать под свои нужды готовые плагины Jquery Теоретические сведения: Плагин - независимо компилируемый программный модуль, динамически подключаемый к основной программе, предназна...

Русский

2013-02-25

645.94 KB

22 чел.

Работа с готовыми плагинами Jquery

Цель: научиться подключать и адаптировать под свои нужды готовые плагины Jquery

Теоретические сведения:

Плагин - независимо компилируемый программный модуль, динамически подключаемый к основной программе, предназначенный для расширения и/или использования её возможностей. Также может переводиться как «модуль». Плагины обычно выполняются в виде разделяемых библиотек.

Рассмотрим пример создания карусели изображений с использованием плагина jCarousel (http://sorgalla.com/jcarousel/)

  1.  Подключаем библиотеку Jquery, плагин карусели (jcarousel), а также стандартный файл скина для карусели (skin.css)

  1.  Создаем html-структуру для галереи изображений:

  1.  Инициализируем работу карусели:


  1.  Исправляем css-файл, для отображения необходимого внешнего вида галереи изображений.

  1.  При необходимости изменяем свойства плагина jcarousel для корректной работы с заданными условиями.

Полный список свойств можно посмотреть:

http://sorgalla.com/projects/jcarousel/

Индивидуальные задания:

1

Сделать вертикальную карусель изображений с отображением 5 элементов и автоматической прокруткой на 1 элемент каждые 8 секунд (кнопок вперед назад быть не должно)

2

Сделать горизонтальную карусель для нескольких поговорок,

Кавычки должны быть кнопками смены поговорок.

3

Сделать горизонтальную карусель изображений, с отображением одного фото по центру, и кнопками смены (влево-вправо).

Пример галереи изображен на рисунке

4

Сделать галерею изображений с помощью плагина thickbox (http://thickbox.net/).

Внешний вид: отображается 8 изображений по клику на каждое из них в pop-up окне открывается увеличенное изображение.

5

Сделать галерею изображений с помощью плагина fancyBox (http://fancybox.net/).

Внешний вид: отображается 5 изображений по клику на каждое из них в pop-up окне открывается увеличенное изображение.

6

Соединить карусель и галерею изображений jcarousel + thickbox

Внешний вид: отображается 3 элемента, кнопки влево-вправо, по клику на которые карусель вращается. По клику на любое изображение в pop-up окне открывается увеличенное изображение.

7

Сделать слайдер изображений с помощью плагина NivoSlider (http://nivo.dev7studios.com/)

Внешний вид представлен на рисунке:

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

8

Сделать таблицу группы (взять в деканате), внешний вид:

Номер по порядку

Фамилия

Имя

Рейтинг за 3 года обучения

С помощью плагина tablesorter (http://tablesorter.com) сделать сортировку по каждой колонке таблицы (по возрастанию/по убыванию)


 

А также другие работы, которые могут Вас заинтересовать

20481. Детальний розгляд критичних етапів життєвого циклу. Принципи структурного аналізу 34 KB
  Принципи структурного аналізу. Всі методології структурного аналізу базуються на ряді загальних принципів частина з яких регламентує організацію робіт на початкових етапах ЖЦ а частина використовується при виробленні рекомендацій щодо організації робіт. В якості двох базових принципів використовуються наступні: принцип розділяй і володарюй і принцип ієрархічного упорядкування. Перший є принципом вирішення важких проблем шляхом розбиття їх на безліч менших незалежних завдань легких для розуміння і вирішення.
20482. Совокупное предложение и кривая 94 KB
  Совокупное предложение базируется на производственных возможностях национальной экономики. Оно является функцией экономики от доступных на текущий момент факторов производства, технологии и уровня цен. В процессе анализа совокупного предложения важно различать совокупное предложение в краткосрочном и долгосрочном периодах.
20483. Діаграми “сутність-зв’язок”. Основні означення та терміни. Нотація Чена 55.5 KB
  Модель сутністьзв'язок ERмодель англ. Entityrelationship model або entityrelationship diagram модель даних яка дозволяє описувати концептуальні схеми за допомогою узагальнених конструкцій блоків. ERмодель це метамодель даних тобто засіб опису моделей даних. ERмодель зручна при проектуванні інформаційних систем баз даних архітектур комп'ютерних застосунків та інших систем моделей.
20484. Діаграми атрибутів. Категоризація сутностей 38 KB
  Діаграми випадків використання описують взаємозвязки і залежності між групою випадків використання і акторами що беруть участь у процесі. Важливо зауважити що діаграми випадків використання не призначено для показу компонування вони не можуть описати внутрішню структуру системи. Діаграми випадків використання призначено для полегшення обміну інформацією між майбутніми користувачами системи і замовником вони особливо корисні для визначення переліку можливостей які повинна мати система. За діаграмами випадків використання можна...
20485. Діаграми потоків даних. Основні означення та символи 29 KB
  Діаграма потоків даних англ. Data Flow Diagram графічне представлення потоків даних в інформаційній системі. Діаграма потоків даних також може використовуватись для представлення обробки даних структурна розробка.
20486. Закони булевої алгебри 28 KB
  Конюнкцією висловлень А і В називаємо висловлення А^В буде істинним тоді і тільки тоді коли обидва висловлення істинні. Дизюнкцією висловлень А і В називаються висловлення АvВ в якій буде істина тоді і лише тоді коли істинне хоча б одне із висловлень. Імплікацією висловлень А і В називається таке висловлення АВ яке буде хибне тоді і лише тоді коли А істинне В хибне. Заперечення висловлення А називається складне висловлення А яке буде істинне тоді і лише тоді коли А хибне і хибним тоді коли а істинне.
20487. Запити, типи запитів, обчислення в запитах 32 KB
  Запити дозволяють обраховувати підсумкові значення і виводити їх у компактному форматі а також виконувати обчислення над групами записів. Запити можна створювати самостійно і за допомогою майстра. Майстри запитів автоматично виконують основні дії залежно від відповідей користувача на поставлені питання.
20488. Засоби структурного аналізу та їх взаємовідносини 36 KB
  принципова схема технологічного процесу на складі; транспортнотехнологічна схема переробки вантажів на складі; технологічна карта роботи складу; технологічний графік роботи складу; опис стандартних процедур складського процесу; мережеві моделі складських процесів а також ряд інших засобів моделювання процесів; технологічні планування складів; карти організації праці окремих категорій працівників складу. Правильно організований технологічний процес роботи складу повинен забезпечувати: чітке і своєчасне проведення кількісного...
20489. Зведення системи лінійних рівнянь до зручного для ітерацій вигляду 78 KB
  Ітераційними називають такі методи які дають змогу знайти наближений розв'язок системи із заздалегідь указаною точністю шляхом виконання скінченої кількості арифметичних операцій хоч самі обчислення можуть проводитись і без округлень а коефіцієнти і вільні члени системи бути точними числами. Точний розв'язок системи за допомогою ітераційних методів можна знайти тільки теоретично як границю збіжного нескінченного процесу. Розв'язуючи системи рівнянь ітераційними методами крім похибок округлення треба враховувати також похибку методу....