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

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

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

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

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

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

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

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

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

Демо jQuery events

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

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

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

Демо jQuery UI

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

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

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

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