TulaDev.NET
Андрей Кулешов
Codemasters International
Senior C# Developer, Team Lead
akuleshov@codereign.net | http://www.codemastersintl.com/Blogs/Andrey-Kuleshov
- Главная
- Разное
- Дизайн
- Бизнес и предпринимательство
- Аналитика
- Образование
- Развлечения
- Красота и здоровье
- Финансы
- Государство
- Путешествия
- Спорт
- Недвижимость
- Армия
- Графика
- Культурология
- Еда и кулинария
- Лингвистика
- Английский язык
- Астрономия
- Алгебра
- Биология
- География
- Детские презентации
- Информатика
- История
- Литература
- Маркетинг
- Математика
- Медицина
- Менеджмент
- Музыка
- МХК
- Немецкий язык
- ОБЖ
- Обществознание
- Окружающий мир
- Педагогика
- Русский язык
- Технология
- Физика
- Философия
- Химия
- Шаблоны, картинки для презентаций
- Экология
- Экономика
- Юриспруденция
jQuery как путь к RIA презентация
Содержание
- 1. jQuery как путь к RIA
- 2. Что будет: Понятия Rich User Interface и
- 3. Rich User Interface Elaborate, having complex
- 4. jQuery JQuery отделяет поведение от структуры
- 5. Преимущества jQuery Не пытается создать свой
- 6. Селекторы Событие $(document).ready() В классическом JavaScript
- 7. Разнообразие селекторов $("p a.someClass") $("ul.someList > li
- 8. Демо Простые селекторы
- 9. События в jQuery .click(handler), .dblclick(handler), .mousein(handler)
- 10. Демо jQuery events
- 11. Анимация в jQuery .fadeIn, .fadeOut .animate
- 12. Демо Анимация
- 13. jQuery UI обширная библиотека контролов кроссбраузерность (почти всегда) только client-side
- 14. Демо jQuery UI http://jqueryUI.com/demos
- 15. jQuery + Ajax + Mvc HTML
- 16. Демо Анимация
- 17. Вопросы? Внимательно слушаю ☺ Андрей Кулешов Codemasters
- 18. Источники jQuery documentation http://docs.jquery.com/ jQuery UI
Что будет: Понятия Rich User Interface и RIA jQuery как средство работы с UI Введение в библиотеку. Понятие селекторов Обработка событий. Анимация в jQuery jQuery UI как библиотека пользовательских элементов на
Слайд 1jQuery как путь к RIA
Rich User Interface на основе jQuery
+ jQueryUI + MVC + HTML5
Слайд 2Что будет:
Понятия Rich User Interface и RIA
jQuery как средство работы с
UI
Введение в библиотеку. Понятие селекторов
Обработка событий. Анимация в jQuery
jQuery UI как библиотека пользовательских элементов на стороне клиента
Ajax в jQuery. Взаимодействие с ASP.NET MVC
Расширяемость jQuery. Обзор существующих плагинов
Введение в библиотеку. Понятие селекторов
Обработка событий. Анимация в jQuery
jQuery UI как библиотека пользовательских элементов на стороне клиента
Ajax в jQuery. Взаимодействие с ASP.NET MVC
Расширяемость jQuery. Обзор существующих плагинов
Слайд 3Rich User Interface
Elaborate, having complex formatting, multimedia, or depth of
interaction
(Продуманный, имеющий сложное форматирование, мультимедиа или глубину взаимодействия с пользователем
Изначально начал появляться на десктопных приложениях
Начал активно внедряться в Web c появлением Flash технологии
Однако сейчас наступил период, когда возможностей самих браузеров становится достаточно
Слайд 4jQuery
JQuery отделяет поведение от структуры HTML
Функция $ (aka jQuery() function)
возвращает:
а) JavaScript –объект, содержащий массив DOM-элементов
б) в том порядке, в каком они были найдены в документе
в) Соответствующих переданному селектору
г) этот объект известен как wrapper или wrapped set
а) JavaScript –объект, содержащий массив DOM-элементов
б) в том порядке, в каком они были найдены в документе
в) Соответствующих переданному селектору
г) этот объект известен как wrapper или wrapped set
Большинство методов объекта-обертки возвращают ту же самую группу элементов => возможно объединение в цепь вызовов
Слайд 5Преимущества jQuery
Не пытается создать свой новый язык или вариант языка,
но использует комбинацию CSS, HTML и классического JavaScript
Легковесный (минимизированная сжатая версия – 29 кб)
Легкий для изучения
Большое количество готовых плагинов
Легко расширяемый
Поддерживается Microsoft (IntelliSense, CDN)
Большое количество обучающих материалов
Помогает писать Unobstrutive JavaScript
Легковесный (минимизированная сжатая версия – 29 кб)
Легкий для изучения
Большое количество готовых плагинов
Легко расширяемый
Поддерживается Microsoft (IntelliSense, CDN)
Большое количество обучающих материалов
Помогает писать Unobstrutive JavaScript
Слайд 6Селекторы
Событие $(document).ready()
В классическом JavaScript проблематично запустить какой-то код после загрузки
документа – нет единой событийной модели
jQuery реализует для этого кросс-браузерное событие ready
jQuery реализует для этого кросс-браузерное событие ready
Слайд 7Разнообразие селекторов
$("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-элементы, имеющие хоть какой-нибудь класс
li > a")$("a[href*='http://tuladev.net']")$("span[class^='some']")$("span[class]")$("p")Все параграфыВсе ссылки, находящиеся внутри параграфов и имеющие класс" alt="">
Слайд 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 ) - используют «всплывание» до уровня элемента, на котором были вызваны
.live(‘eventname’, handler) – .die(‘eventname’, handler) - работают для всех элементов, включая динамически добавленные - используют «всплывание» события до уровня корня дерева элементов
.delegate( selector, eventType, handler ) - используют «всплывание» до уровня элемента, на котором были вызваны
Слайд 11Анимация в jQuery
.fadeIn, .fadeOut
.animate
$('#book').animate({
opacity: 0.25,
left: '+=50',
height: 'toggle'
}, 5000, function() {
// Animation complete.
});
}, 5000, function() {
// Animation complete.
});
Слайд 15jQuery + Ajax + Mvc
HTML vs JSON
Способы получения контента
с сервера
PartialResult vs JsonResult
PartialResult vs JsonResult
{
"firstName": "Иван",
"lastName": "Иванов",
"address": {
"streetAddress": "Московское ш., 101, кв.101",
"city": "Ленинград",
"postalCode": 101101
},
"phoneNumbers": [
"812 123-1234",
"916 123-4567"
]
}
Слайд 17Вопросы?
Внимательно слушаю ☺
Андрей Кулешов
Codemasters International
Senior C# Developer, Team Lead
akuleshov@codereign.net | http://www.codemastersintl.com/Blogs/Andrey-Kuleshov
Слайд 18Источники
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
