jQuery UI та ThemeRoller

• Може 13, 2024

Якщо ви хочете простий та швидкий спосіб розробити інтерфейс користувача для веб-сайту чи веб-додатків, а також включити jQuery, перегляньте інтерфейс jQuery. Там ви знайдете комбінований пакет CSS та jQuery функцій під ключ, який додає ці функції до нового проекту просто.

Давайте прогуляємось по сайту. Під посиланням Demos і Docs ви знайдете список інтерактивних плагінів jQuery, таких як перетягування, вкладки та переходи. Для кожного плагіна є демонстрація, документація та зразок коду вирізання та вставки для тестування.

Якщо ви хочете захопити файли під ключ, натисніть на посилання Теми для jQuery ThemeRoller. За замовчуванням css - це біла та сіра тема голих кісток. Ви можете натиснути кнопку завантаження і використовувати як є, але також є Галерея барвистих тем, щоб розпочати роботу. В області Галерея є декілька мініатюр. Просто натисніть на той, який вам подобається. Ви можете завантажити цю тему, натиснувши вкладку «Згорнути своє», а потім кнопку «Завантажити тему». Але веселощі починаються, коли ви починаєте твітувати тему за допомогою двигуна ThemeRoller. Є 11 варіантів, які можна налаштувати. Більшість варіантів дозволять вам змінити текстуру та колір фону, колір рамки та кольори тексту та значків.

У вас є кілька варіантів твітування теми.

• Налаштування шрифту: Ви можете змінити сімейство шрифтів, вагу та розмір шрифту.
  
  
• Кутовий радіус: Ви можете змінити радіус кута. Кожна тема має за замовчуванням стиль округлої вкладки, але тут ви можете змінити розмір кута або встановити його на нуль для квадратної вкладки. (Вкладки побудовані на CSS3, який IE наразі не підтримується.)
  
  
• Заголовок / Панель інструментів: Ви можете встановити значення кольорів для області за вкладками та областей заголовка, наприклад для плагіна календаря.
  
  
• Зміст: Тут ви можете встановити кольори для основної області вмісту. Ви можете отримати дуже різний дизайн, залежно від вибору кордону або без кордону.
  
  
• Стан за замовчуванням, що натискається: Це керує зовнішнім виглядом вкладок та кнопок за замовчуванням (неактивний)
  
  
• Клікований стан наведення: Ці елементи керування відображають вкладки та кнопки в режимі наведення.
  
  
• Активний стан, який можна натиснути: контролює зовнішній вигляд вкладки та кнопки для активної сторінки.
  
  
• Виділення: кольори фону, рамки, тексту та значка для виділених областей.
  
  
• Помилка: кольори фону, рамки, тексту та піктограм для повідомлень про помилки.
  
  
• Модальний екран для накладок: керує кольором та текстурою фону.
  
  
• Тіні для падіння: регулює непрозорість, товщину, зміщення та кути для ефекту тіні.
  
  

Завантаживши jquery-ui-x.x.xx.custom.zip та піднявши його, ви побачите три папки (css, bundle-розробка та js) та файл index.html. Файл index.html - демонстрація для плагінів, стилізованих до вашої теми. Ви хочете помістити папки css та js у свій головний каталог та скопіювати / вставити код із файлу index.html у код свого веб-сайту у тому місці, де ви бажаєте з’являтись плагіни.

//jqueryui.com
//jqueryui.com/demos/
//jqueryui.com/themeroller/