JQuery как путь к RIA Rich User Interface на основе jQuery + jQueryUI + MVC + HTML5 TulaDev.NET Андрей Кулешов Codemasters International Senior C# Developer, - презентация

1 jQuery как путь к RIA Rich User Interface на основе jQuery + jQueryUI + MVC + HTML5 TulaDev.NET Андрей Кулешов Codemasters International Senior C# Developer, Team Lead |

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

3 Rich User Interface Elaborate, having complex formatting, multimedia, or depth of interaction (Продуманный, имеющий сложное форматирование, мультимедиа или глубину взаимодействия с пользователем Изначально начал появляться на десктопных приложениях Начал активно внедряться в Web c появлением Flash технологии Однако сейчас наступил период, когда возможностей самих браузеров становится достаточно

4 jQuery JQuery отделяет поведение от структуры HTML Функция $ (aka jQuery() function) возвращает: а) JavaScript –объект, содержащий массив DOM-элементов б) в том порядке, в каком они были найдены в документе в) Соответствующих переданному селектору г) этот объект известен как wrapper или wrapped set Большинство методов объекта-обертки возвращают ту же самую группу элементов => возможно объединение в цепь вызовов

5 Преимущества jQuery Не пытается создать свой новый язык или вариант языка, но использует комбинацию CSS, HTML и классического JavaScript Легковесный (минимизированная сжатая версия – 29 кб) Легкий для изучения Большое количество готовых плагинов Легко расширяемый Поддерживается Microsoft (IntelliSense, CDN) Большое количество обучающих материалов Помогает писать Unobstrutive JavaScript

6 Селекторы В основе jQuery лежит selector engine (Sizzle) Может быть использован для выборки элементов по: - имени (идентификатору); - атрибутам; - позиции; Многократно перегруженный оператор $() используется как для осуществления выборки, так и для создания новых элементов Событие $(document).ready() В классическом JavaScript проблематично запустить какой-то код после загрузки документа – нет единой событийной модели jQuery реализует для этого кросс-браузерное событие ready

7 Разнообразие селекторов Все параграфы Все ссылки, находящиеся внутри параграфов и имеющие класс someClass Все ссылки внутри элементов списка, если сам список имеет класс someClass Все ссылки на TulaDev.NET Все span-элементы, имеющие класс, начинающийся на «some» Все span-элементы, имеющие хоть какой-нибудь класс

8 Демо Простые селекторы

9 События в jQuery.click(handler),.dblclick(handler),.mousein(handler) – упрощение синтаксиса.bind(eventname, handler) -.unbind(eventname, handler) - через него реализуются все одномоментные связывания - события обрабатываются лишь для тех элементов, которые уже присутствуют в DOM на момент вызова.live(eventname, handler) –.die(eventname, handler) - работают для всех элементов, включая динамически добавленные - используют «всплывание» события до уровня корня дерева элементов.delegate( selector, eventType, handler ) - используют «всплывание» до уровня элемента, на котором были вызваны

10 Демо jQuery events

11 Анимация в jQuery.fadeIn,.fadeOut.animate $('#book').animate({ opacity: 0.25, left: '+=50', height: 'toggle' }, 5000, function() { // Animation complete. });

12 Демо Анимация

13 jQuery UI обширная библиотека контролов кроссбраузерность (почти всегда) только client-side

14 Демо jQuery UI

15 jQuery + Ajax + Mvc HTML vs JSON Способы получения контента с сервера PartialResult vs JsonResult { "firstName": "Иван", "lastName": "Иванов", "address": { "streetAddress": "Московское ш., 101, кв.101", "city": "Ленинград", "postalCode": }, "phoneNumbers": [ " ", " " ] }

16 Демо Анимация

17 Вопросы? Внимательно слушаю Андрей Кулешов Codemasters International Senior C# Developer, Team Lead |

18 Источники Андрей Кулешов Codemasters International Senior C# Developer, Team Lead |