Студопедия

Главная страница Случайная страница

КАТЕГОРИИ:

АвтомобилиАстрономияБиологияГеографияДом и садДругие языкиДругоеИнформатикаИсторияКультураЛитератураЛогикаМатематикаМедицинаМеталлургияМеханикаОбразованиеОхрана трудаПедагогикаПолитикаПравоПсихологияРелигияРиторикаСоциологияСпортСтроительствоТехнологияТуризмФизикаФилософияФинансыХимияЧерчениеЭкологияЭкономикаЭлектроника






Установка jQuery




Изначально jquery уже установлен, но если фреймворк обновился, а это делается часто, то очевидно, что необходимо обновить его:

Install-Package JQuery

Далее, мы до этого убрали JQueryUI (http://jqueryui.com/), так как собираемся функции datepicker, modal использовать из того, что предлагает bootstrap. Но в JQueryUI есть необходимый нам функционал взаимодействия, т.е. Draggable, Droppable, Resizable, Selectable и Sortable. Установим их выборочно:

1. Так как для Install-Package JQuery.UI.Interactions необходима версия jquery < 1.6, то установим вручную.

2. Выберем custom скачивание с сайта http://jqueryui.com/download/

3. Выбираем только Сore и Interactions

4. Скачиваем

5. Переносим css-файлы в /Content/css

6. Переносим js-файлы в /Scripts (jquery-1.9.1-min.js переносить нет необходимости)

7. Подключаем в BundleConfig

bundles.Add(new ScriptBundle("~/bundles/jqueryui")

.Include("~/Scripts/jquery-ui-1.*"));

 

bundles.Add(new StyleBundle("~/Content/css/jqueryui")

.Include("~/Content/jquery-ui-1*"));

8. При необходимости, объявляем на страницах.

9. Готово!

Firebug (Firefox) и Developer Tool (Chrome)

Для удобства отладки в Firefox есть расширение Firebug, а в Chrome есть встроенный механизм Developer Tool. Я рассмотрю пример с Developer Tool. Вызывается по нажатию клавиш –Shift-Ctrl-I.


 

 

Давайте изучим его:

· Вкладка Elements.

Здесь, в левой части, мы можем увидет DOM – дерево элементов. В правой части - стили. Стили, как и элементы, можно редактировать на ходу, и изменения будут сразу же отображаться в браузере в редактируемой странице. Очень удобно, когда надо поправить расположение объектов на несколько пикселей.


 

 

· Вкладка Resources

В левой части располагаются все ресурсы, которые были загружены, а в правой можно просмотреть на них

· Вкладка Network

Показывает запросы и тайминг этих запросов. Обозначает разными цветами document, css, js файлы, изображения. Показывает размеры файлов.


 

При клике на запрос можно подробнее рассмотреть HTTP-запрос, например:

· Вкладка Sources

Одна из основных вкладок. Тут можно просматривать js-файлы, устанавливать точки останова, и выполнять отладку приложения. Горячие клавиши F9, F10, F11 как в VisualStudio для отладки.

· Вкладка Timeline

Показывает происходящие события в браузере. Я ее никогда не использовал.

· Вкладка Profiles

Для профилирования, т.е. нахождения нетривиальных ошибок. Также, никогда не использовал.


 

· Вкладка Audits

На этой вкладке можно проверить страницу на оптимизацию. Т.е. браузер рекомендует сделать некоторые действия, которые приведут к уменьшению кода передаваемого от сервера, сжатия, удаление лишних строк css.



· Вкладка Console

Одновременно и командная строка и окно вывода протоколирования. Для вывода лога нужно вызвать команду console.log(“message”).

Осторожно используйте эту команду в IE, так как когда консоль не открыта, то выдает ошибку.

 


mylektsii.ru - Мои Лекции - 2015-2019 год. (0.007 сек.)Все материалы представленные на сайте исключительно с целью ознакомления читателями и не преследуют коммерческих целей или нарушение авторских прав Пожаловаться на материал