Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Jquery

1,417 views

Published on

  • Be the first to comment

  • Be the first to like this

Jquery

  1. 1. jQuery UI         Александр  Котоманов   Верстальщик   19.08.10   1  
  2. 2. Содержание   •  Возможности  jQuery   •  jQuery  UI   •  jQuery  Tools   19.08.10   2  
  3. 3. Возможности  jQuery   •  Sizzle     –  Поисковой  движок     –  Раньше  был  частью  jQuery   –  Сейчас  отдельный  проект     –  Используется  также  в  Dojo   19.08.10   3  
  4. 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. 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. 6. Возможности  jQuery   •  Sizzle   –  h]p://sizzlejs.com/   –  h]p://wiki.github.com/jeresig/sizzle/   19.08.10   6  
  7. 7. jQuery  UI     Это  JS-­‐Фреймворк  для  построения   пользовательских  интерфейсов,  написанный   на  jQuery     19.08.10   7  
  8. 8. jQuery  UI     Основной  элемент  –  виджет.   •  Есть  готовые  (h]p://jqueryui.com/demos/)   •  Можно  писать  свои  ( h]p://jqueryui.com/docs/Developer_Guide)   19.08.10   8  
  9. 9. jQuery  UI     Готовые  виджеты:   •  Accordion   •  Autocomplete   •  Bu]on   –  Simple   –  Radio   –  Checkboxes   –  Bu]ons  with  icons   –  Split   19.08.10   9  
  10. 10. jQuery  UI   •  Datepicker   •  Dialog   –  Default   –  Modal   –  Message  /  Confirma‘on   –  With  forms   •  Progress  bar   19.08.10   10  
  11. 11. jQuery  UI   •  Slider   –  Simple   –  Range   –  Ver‘cal   –  Scrollbar   •  Tabs   19.08.10   11  
  12. 12. jQuery  UI     Interac‘ons   •  Draggable   •  Droppable   •  Resizeble   •  Selectable   •  Sortable   19.08.10   12  
  13. 13. jQuery  UI     Внешний  вид   •  Темы  (h]p://jqueryui.com/themeroller/)   •  CSS-­‐Фреймворк  (h]p://jqueryui.com/docs/Theming/API)   19.08.10   13  
  14. 14. jQuery  UI     Плюсы:   •  Модульный  подход  к  построению  UI   •  Быстрый  старт  над  проектом   •  Создание  прототипов   •  Протестированный  код   •  Кроссбраузерность   19.08.10   14  
  15. 15. jQuery  UI     Минусы:   •  Сложный  CSS-­‐фреймворк   •  HTML  элементы  генерируются  JS   •  Бывают  трудности  с  уникальным  дизайном   19.08.10   15  
  16. 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. 17. jQuery  Tools   •  Overlay   –  Simple   –  Modal  window   •  Scrollable   –  Carousel   •  Form   –  Slider  range   –  Datepicker   –  Form  valida‘on   –  HTML5  input  types   19.08.10   17  
  18. 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  

×