1. jQuery UI
Александр
Котоманов
Верстальщик
19.08.10
1

2. Содержание
• Возможности
jQuery
• jQuery
UI
• jQuery
Tools
19.08.10
2

3. Возможности
jQuery
• Sizzle
– Поисковой
движок
– Раньше
был
частью
jQuery
– Сейчас
отдельный
проект
– Используется
также
в
Dojo
19.08.10
3

4. Возможности
jQuery
• Sizzle
– CSS
3
селекторы
(h]p://www.w3.org/TR/css3-­‐selectors/)
– Например:
• $("*")
,
$("div"),
$(".myClass")
,
$("#myDiv")
• $("div,span,p.myClass")
• $("form
input")
,
$("#main
>
*"),
$("label
+
input"),
$("#prev
~
div")
– Исключения:
• :root
• :target
• :nth-­‐last-­‐child
• :nth-­‐of-­‐type
/
:nth-­‐last-­‐of-­‐type
/
:first-­‐of-­‐type
/
:last-­‐of-­‐type
/
:only-­‐of-­‐type
• :lang()
19.08.10
4

5. Возможности
jQuery
• Sizzle
– :contains(text)
– :not(a#id),
:not(div,p)
– :has(div)
– :first,
:last,
:even,
:odd,
:gt,
:lt,
:eq
– Селекторы
форм:
:input,
:text,
:checkbox,
:file,
:password,
:subm
it,
:image,
:reset,
:bu]on
– :header
19.08.10
5

6. Возможности
jQuery
• Sizzle
– h]p://sizzlejs.com/
– h]p://wiki.github.com/jeresig/sizzle/
19.08.10
6

7. jQuery
UI
Это
JS-­‐Фреймворк
для
построения
пользовательских
интерфейсов,
написанный
на
jQuery
19.08.10
7

8. jQuery
UI
Основной
элемент
–
виджет.
• Есть
готовые
(h]p://jqueryui.com/demos/)
• Можно
писать
свои
(
h]p://jqueryui.com/docs/Developer_Guide)
19.08.10
8

9. jQuery
UI
Готовые
виджеты:
• Accordion
• Autocomplete
• Bu]on
– Simple
– Radio
– Checkboxes
– Bu]ons
with
icons
– Split
19.08.10
9

10. jQuery
UI
• Datepicker
• Dialog
– Default
– Modal
– Message
/
Confirma‘on
– With
forms
• Progress
bar
19.08.10
10

11. jQuery
UI
• Slider
– Simple
– Range
– Ver‘cal
– Scrollbar
• Tabs
19.08.10
11

12. jQuery
UI
Interac‘ons
• Draggable
• Droppable
• Resizeble
• Selectable
• Sortable
19.08.10
12

13. jQuery
UI
Внешний
вид
• Темы
(h]p://jqueryui.com/themeroller/)
• CSS-­‐Фреймворк
(h]p://jqueryui.com/docs/Theming/API)
19.08.10
13

14. jQuery
UI
Плюсы:
• Модульный
подход
к
построению
UI
• Быстрый
старт
над
проектом
• Создание
прототипов
• Протестированный
код
• Кроссбраузерность
19.08.10
14

15. jQuery
UI
Минусы:
• Сложный
CSS-­‐фреймворк
• HTML
элементы
генерируются
JS
• Бывают
трудности
с
уникальным
дизайном
19.08.10
15

16. jQuery
Tools
• Tabs
– Slideshow
– Accordions
– AJAX’ed
tabs
with
history
support
– Wizard
• Tool‘p
– Simple
– In
forms
– In
tables
and
listes
19.08.10
16

17. jQuery
Tools
• Overlay
– Simple
– Modal
window
• Scrollable
– Carousel
• Form
– Slider
range
– Datepicker
– Form
valida‘on
– HTML5
input
types
19.08.10
17

18. • h]p://jquery.com/
• h]p://jqueryui.com/
• h]p://flowplayer.org/tools/
• h]p://jqapi.com/
• h]p://visualjquery.com/
• h]p://www.futurecolors.ru/jquery/
• h]p://www.learningjquery.com/
• h]p://jqueryfordesigners.com/
19.08.10
18