'

jQuery как путь к RIA

Понравилась презентация – покажи это...





Слайд 0

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


Слайд 1

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


Слайд 2

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


Слайд 3

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


Слайд 4

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


Слайд 5

Селекторы Событие $(document).ready() В классическом JavaScript проблематично запустить какой-то код после загрузки документа – нет единой событийной модели jQuery реализует для этого кросс-браузерное событие ready


Слайд 6

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


Слайд 7

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


Слайд 8

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


Слайд 9

Демо jQuery events


Слайд 10

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


Слайд 11

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


Слайд 12

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


Слайд 13

Демо jQuery UI http://jqueryUI.com/demos


Слайд 14

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


Слайд 15

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


Слайд 16

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


Слайд 17

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


×

HTML:





Ссылка: