19.08.10   1  

jQuery и UI    

   

Александр  Котоманов  Верстальщик  

Содержание  

•  Возможности  jQuery  •  jQuery  UI  •  jQuery  Tools  

19.08.10   2  

Возможности  jQuery  

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

19.08.10   3  

Возможности  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  

Возможности  jQuery  

•  Sizzle  –  :contains(text)  –  :not(a#id),  :not(div,p)  –  :has(div)  –  :first,  :last,  :even,  :odd,  :gt,  :lt,  :eq  – Селекторы  форм:  :input,  :text,  :checkbox,  :file,  :password,  :submit,  :image,  :reset,  :bu]on  

–  :header  

19.08.10   5  

Возможности  jQuery  

•  Sizzle  – h]p://sizzlejs.com/  – h]p://wiki.github.com/jeresig/sizzle/  

19.08.10   6  

jQuery  UI  

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

19.08.10   7  

jQuery  UI  

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

h]p://jqueryui.com/docs/Developer_Guide)  

19.08.10   8  

jQuery  UI  

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

19.08.10   9  

jQuery  UI  

•  Datepicker  •  Dialog  – Default  – Modal  – Message  /  Confirma�on  – With  forms  

•  Progress  bar  

19.08.10   10  

jQuery  UI  

•  Slider  –  Simple  –  Range  –  Ver�cal  –  Scrollbar  

•  Tabs  

19.08.10   11  

jQuery  UI  

 Interac�ons  •  Draggable  •  Droppable  •  Resizeble  •  Selectable  •  Sortable  

19.08.10   12  

jQuery  UI  

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

19.08.10   13  

jQuery  UI  

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

19.08.10   14  

jQuery  UI  

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

19.08.10   15  

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  

jQuery  Tools  

•  Overlay  –  Simple  – Modal  window  

•  Scrollable  –  Carousel  

•  Form  –  Slider  range  –  Datepicker  –  Form  valida�on  –  HTML5  input  types  

19.08.10   17  

Полезные ресурсы

•  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