Rich User Interface на основе jQuery + jQueryUI + MVC + HTML5

1. TulaDev.NET jQueryкак путь к RIA Rich User Interface на основе jQuery + jQueryUI + MVC + HTML5 Андрей Кулешов Codemasters International Senior C# Developer, Team Lead akuleshov@codereign.net | http://www.codemastersintl.com/Blogs/Andrey-Kuleshov

2. Что будет: Понятия Rich User Interface и RIA jQueryкак средство работы с UI Введение в библиотеку. Понятие селекторов Обработка событий. Анимация в jQuery jQuery UI как библиотека пользовательских элементов на стороне клиента Ajax в jQuery. Взаимодействие с ASP.NET MVC Расширяемость jQuery. Обзор существующих плагинов

4. Изначально начал появляться на десктопных приложениях

5. Начал активно внедряться в Web c появлением Flash технологии

8. Легковесный (минимизированная сжатая версия – 29 кб)

9. Легкий для изучения

10. Большое количество готовых плагинов

11. Легко расширяемый

12. Поддерживается Microsoft (IntelliSense, CDN)

13. Большое количество обучающих материалов

15. jQueryреализует для этого кросс-браузерное событие ready

16. В основе jQueryлежит selector engine (Sizzle)

18. Разнообразие селекторов Все параграфы $("p") Все ссылки, находящиеся внутри параграфов и имеющие класс someClass $("p a.someClass") $("ul.someList > li > a") Все ссылкивнутри элементов списка, если сам список имеет класс someClass $("a[href*='http://tuladev.net']") Все ссылкина TulaDev.NET Все span-элементы, имеющие класс, начинающийся на «some» $("span[class^='some']") Все span-элементы, имеющие хоть какой-нибудь класс $("span[class]")

19. Демо Простые селекторы

21. .bind(‘eventname’, handler) - .unbind(‘eventname’, handler)- через него реализуются все одномоментные связывания- события обрабатываются лишь для тех элементов, которые уже присутствуют в DOM на момент вызова

22. .live(‘eventname’, handler) – .die(‘eventname’, handler)- работают для всех элементов, включая динамически добавленные- используют «всплывание» события до уровня корня дерева элементов

25. .animate $('#book').animate({ opacity: 0.25, left: '+=50', height: 'toggle' }, 5000, function() { // Animation complete. });

26. Демо Анимация

28. кроссбраузерность (почти всегда)

31. Способы получения контента с сервера

32. PartialResultvsJsonResult{ "firstName": "Иван", "lastName": "Иванов", "address": { "streetAddress": "Московское ш., 101, кв.101", "city": "Ленинград", "postalCode": 101101 }, "phoneNumbers": [ "812 123-1234", "916 123-4567" ] }

33. Демо Анимация

34. Вопросы?Внимательно слушаю  Андрей Кулешов Codemasters International Senior C# Developer, Team Lead akuleshov@codereign.net | http://www.codemastersintl.com/Blogs/Andrey-Kuleshov

35. Источники jQuery documentationhttp://docs.jquery.com/ jQuery UIhttp://jqueryui.com/demos/ What You, as an ASP.NET Developer, Need to Know About jQueryGill Cleerenhttp://msteched.com Андрей Кулешов Codemasters International Senior C# Developer, Team Lead akuleshov@codereign.net | http://www.codemastersintl.com/Blogs/Andrey-Kuleshov