jQuery как путь к RIA

Содержание

Слайд 2

Что будет:

Понятия Rich User Interface и RIA
jQuery как средство работы с UI
Введение

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

Слайд 3

Rich User Interface

Elaborate, having complex formatting, multimedia, or depth of interaction (Продуманный,

Rich User Interface Elaborate, having complex formatting, multimedia, or depth of interaction
имеющий сложное форматирование, мультимедиа или глубину взаимодействия с пользователем

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

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

Однако сейчас наступил период, когда возможностей самих браузеров становится достаточно

Слайд 4

jQuery

JQuery отделяет поведение от структуры HTML

Функция $ (aka jQuery() function) возвращает:
а)

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

Большинство методов объекта-обертки возвращают ту же самую группу элементов => возможно объединение в цепь вызовов

Слайд 5

Преимущества jQuery

Не пытается создать свой новый язык или вариант языка, но

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

Слайд 6

Селекторы

Событие $(document).ready()

В классическом JavaScript проблематично запустить какой-то код после загрузки документа

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

Слайд 7

Разнообразие селекторов

$("p a.someClass")

$("ul.someList > li > a")

$("a[href*='http://tuladev.net']")

$("span[class^='some']")

$("span[class]")

$("p")

Все параграфы

Все ссылки, находящиеся внутри параграфов

Разнообразие селекторов $("p a.someClass") $("ul.someList > li > a") $("a[href*='http://tuladev.net']") $("span[class^='some']") $("span[class]")
и имеющие класс someClass

Все ссылки внутри элементов списка, если сам список имеет класс someClass

Все ссылки на TulaDev.NET

Все span-элементы, имеющие класс, начинающийся на «some»

Все span-элементы, имеющие хоть какой-нибудь класс

Слайд 8

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

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

Слайд 9

События в jQuery

.click(handler), .dblclick(handler), .mousein(handler) – упрощение синтаксиса
.bind(‘eventname’, handler) -

События в 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

Демо jQuery events

Слайд 11

Анимация в jQuery
.fadeIn, .fadeOut
.animate

$('#book').animate({
opacity: 0.25,
left: '+=50',
height: 'toggle'
},

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

Слайд 12

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

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

Слайд 13

jQuery UI

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

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

Слайд 14

Демо
jQuery UI

http://jqueryUI.com/demos

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

Слайд 15

jQuery + Ajax + Mvc

HTML vs JSON
Способы получения контента с

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"
]
}

Слайд 16

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

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

Слайд 17

Вопросы? Внимательно слушаю ☺

Андрей Кулешов
Codemasters International
Senior C# Developer, Team Lead
akuleshov@codereign.net | http://www.codemastersintl.com/Blogs/Andrey-Kuleshov

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