| // |
| // Licensed to the Apache Software Foundation (ASF) under one |
| // or more contributor license agreements. See the NOTICE file |
| // distributed with this work for additional information |
| // regarding copyright ownership. The ASF licenses this file |
| // to you under the Apache License, Version 2.0 (the |
| // "License"); you may not use this file except in compliance |
| // with the License. You may obtain a copy of the License at |
| // |
| // http://www.apache.org/licenses/LICENSE-2.0 |
| // |
| // Unless required by applicable law or agreed to in writing, |
| // software distributed under the License is distributed on an |
| // "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY |
| // KIND, either express or implied. See the License for the |
| // specific language governing permissions and limitations |
| // under the License. |
| // |
| |
| = Использование jQuery для улучшения внешнего вида и удобства использования веб-страницы |
| :jbake-type: tutorial |
| :jbake-tags: tutorials |
| :jbake-status: published |
| :icons: font |
| :syntax: true |
| :source-highlighter: pygments |
| :toc: left |
| :toc-title: |
| :description: Использование jQuery для улучшения внешнего вида и удобства использования веб-страницы - Apache NetBeans |
| :keywords: Apache NetBeans, Tutorials, Использование jQuery для улучшения внешнего вида и удобства использования веб-страницы |
| |
| link:http://jquery.com/[+jQuery+] — это облегченная библиотека JavaScript, позволяющая программистам быстро и просто добавлять улучшения в дизайн и поведение веб-страниц. jQuery использует краткий синтаксис с переменными в форме селекторов CSS для эффективного подключения к любым целевым элементам DOM, будь то (`идентификаторы`) уникальных элементов, (`классы`) наборов элементов или произвольно выбранные элементы. Поскольку библиотека jQuery — это JavaScript, она может быть встроена в любой проект, в котором может использоваться JavaScript. |
| |
| В этом учебном курсе показано, как приступить к использованию библиотеки jQuery в проектах NetBeans, а также использование среды IDE при работе с любыми проектами пользовательского интерфейса, в которых используются файлы HTML, CSS и JavaScript. В основном будет продемонстрирован вызов выполнения кода для функций и использование интегрированной поддержки интерфейса API. Также будут представлены ключевые понятия jQuery, включая вызов функции `$(document).ready`, использование объектов jQuery наподобие селекторов CSS и формирование цепочек эффектов и поведений jQuery. Также можно изучить преимущества link:http://jqueryui.com[+библиотеки UI jQuery+], создав простой пример документа "список контактов" и применив к нему link:http://jqueryui.com/demos/accordion/[+элемент оформления "гармошка" jQuery+]. |
| |
| Пример использования jQuery в приложениях HTML5 приведен в учебном курсе link:../webclient/html5-gettingstarted.html[+Начало работы с приложениями HTML5+]. |
| |
| |
| |
| == Для выполнения этого учебного курса потребуются следующие материалы. |
| |
| |=== |
| |Программное обеспечение или материал |Требуемая версия |
| |
| |link:https://netbeans.org/downloads/index.html[+NetBeans IDE, Java EE или HTML5 & комплект PHP+] |Версия 7.0 или более поздние |
| |
| |link:http://www.oracle.com/technetwork/java/javase/downloads/index.html[+Комплект для разработчика на языке Java (JDK)+] |7 или 8 |
| |
| |link:http://docs.jquery.com/Downloading_jQuery#Current_Release[+Базовая библиотека jQuery+] |Версия 1.4.2 или более поздние |
| |
| |link:http://jqueryui.com/download[+Элемент оформления Accordion jQuery+] |Версия 1.8.1 или более поздние |
| |
| |link:https://netbeans.org/projects/samples/downloads/download/Samples%252FJavaScript%252Fpix.zip[+Ресурсы проекта+] |неприменимо |
| |=== |
| |
| *Примечания:* |
| |
| * link:https://netbeans.org/projects/samples/downloads/download/Samples%252FJavaScript%252FjQueryProjectFiles.zip[+Ресурсы проекта+] содержат файлы JPG, необходимые для выполнения этого учебного курса. |
| * Если необходимо сравнить свой проект с работающим решением, можно link:https://netbeans.org/projects/samples/downloads/download/Samples%252FJavaScript%252FjQueryProjectFiles.zip[+загрузить пример проекта+]. (Включает версии PHP and Java Web.) |
| * Если планируется работа с проектом Java, необходимо учесть настройку сервера для среды развертывания. Сервер GlassFish входит в состав загрузки среды IDE для Java и по умолчанию настроен для запуска из NetBeans. |
| * Если планируется работа с проектом PHP, необходимо загрузить PHP и настроить среду. Дополнительные сведения приведены в link:../../trails/php.html[+учебной карте по PHP+]. |
| * Предполагается, что читатель обладает базовыми знаниями или опытом программирования на HTML, CSS и JavaScript. |
| |
| |
| |
| [[settingup]] |
| == Настройка проекта NetBeans |
| |
| 1. Начните с создания нового проекта. Выберите 'Файл' > 'Новый проект' (Ctrl-Shift-N; ⌘-Shift-N в Mac). |
| 2. Если необходимо работать с проектом PHP, выберите категорию *PHP*, затем выберите *Приложение PHP*. |
| |
| Если необходимо работать с веб-проектом Java, выберите категорию *Java Web*, затем выберите *Веб-приложение*. |
| |
| [start=3] |
| . Нажмите кнопку "Далее" и присвойте проекту имя `jqproject`. Также, укажите каталог на компьютере для сохранения проекта. Нажмите кнопку "Далее". |
| |
| [start=4] |
| . В действии 3 для целей этого учебного курса примите параметры мастера по умолчанию. |
| |
| *Примечание.* Если проект PHP создается в первый раз и требуется поддержка, см. раздел 'Настройка среды для разработки PHP' в link:../../trails/php.html[+Учебная карта PHP+]. |
| |
| |
| [start=5] |
| . Нажмите кнопку *Готово* для завершения работы мастера и создания нового проекта. Проект `jqproject` откроется в окне "Проекты", а в редакторе откроется файл приветствия проекта. |
| |
| [start=6] |
| . Создайте обычный файл HTML, с которым вы можете работать до завершения этого курса. Поскольку для кода jQuery, который будет добавлен, не требуется связь внутренним сервером, мы просто запустим файл HTML в браузере, чтобы просмотреть результаты. |
| |
| Правой кнопкой мыши щелкните узел проекта и выберите "Новый > Файл HTML" (Ctrl-N). |
| |
| |
| [start=7] |
| . Присвойте файлу имя `index`, затем нажмите кнопку *Готово*. В окне "Проекты" обратите внимание, что в проекте присутствует новый файл `index.html`, и этот файл открыт в редакторе. |
| |
| [start=8] |
| . Взгляните на страницу приветствия в браузере. Для этого правой кнопкой мыши щелкните узел `index.html` в окне "Проекты" и выберите "Просмотр". (Также можно выбрать пункт "Просмотр" в контекстном меню файла в редакторе.) Страница отобразится в окне браузера. |
| |
| image::images/browser-test.png[title="Просмотрите пустой шаблон HTML в окне браузера"] |
| |
| [start=9] |
| . В файле `index.html` в редакторе NetBeans введите `jQuery Test Project` между тегами `<title>` и создайте пару тегов `<style>` внутри тегов `<head>` страницы. (Изменения *выделены полужирным шрифтом*.) |
| |
| [source,xml] |
| ---- |
| |
| <html> |
| <head> |
| <title>*jQuery Test Project*</title> |
| <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> |
| *<style type="text/css"> |
| |
| </style>* |
| </head> |
| <body> |
| TODO write content |
| </body> |
| </html> |
| ---- |
| |
| [start=10] |
| . Настройте проект, чтобы файл `index.html` отображался в качестве страницы приветствия при развертывании и запуске приложения. Для этого правой кнопкой мыши щелкните узел `jqproject` в окне "Проекты" и выберите "Свойства". |
| * *Проекты PHP:* Выберите категорию *Выполнить настройку*, затем введите `index.html` в поле *Файл индекса*. |
| * *Проекты Java Web:* Выберите категорию *Выполнить*, затем введите `index.html` в поле *Относительный URL-адрес*. |
| |
| [start=11] |
| . Нажмите "ОК", чтобы закрыть окно "Свойства проекта" и сохранить изменения. |
| |
| [start=12] |
| . На этом этапе можно удалить исходный файл индекса, который был создан вместе с проектом. В проекте PHP это файл `index.php`; в проектах Java Web это файл `index.jsp`. |
| |
| Для удаления файла щелкните его правой кнопкой мыши в окне "Проекты" и выберите "Удалить". В появившемся диалоговом окне подтверждения нажмите кнопку *Да*. |
| |
| |
| |
| [[addingjquery]] |
| == Добавление библиотеки jQuery к проекту |
| |
| Перед началом работы с jQuery необходимо добавить к проекту библиотеку jQuery. Если это еще не сделано, загрузите библиотеку jQuery с веб-сайта link:http://jquery.com/[+http://jquery.com/+]. |
| |
| Перед загрузкой выберите версию без сжатия, например, "Development" (Разработка). Использование несжатой версии позволит изучить код JavaScript в редакторе, а также упростит процессы отладки. |
| |
| Чтобы добавить библиотеку jQuery к проекту NetBeans, просто скопируйте папку библиотеки из ее местоположения на компьютере и вставьте непосредственно в проект в окне "Проекты" среды IDE. Подробные сведения приведены ниже. |
| |
| 1. В среде IDE создайте папку с именем `js` и добавьте ее к проекту. Для этого нажмите кнопку 'Создать файл' ( image:images/new-file-btn.png[] ) на панели инструментов IDE. (В качестве альтернативы нажмите Ctrl-N; ⌘-N в Mac.) |
| 2. Выберите категорию *Другое*, затем выберите *Папка*. |
| 3. Присвойте папке имя `js`. |
| |
| [alert]#Для веб-проектов Java убедитесь, что папка `js` помещена в корневой веб-узел проекта. Для этого введите `web` в папке *Родительская папка*.# |
| |
| [start=4] |
| . Нажмите кнопку *Готово* для выхода из мастера. |
| |
| [start=5] |
| . Найдите библиотеку jQuery, загруженную на компьютер. На настоящий момент текущая версия библиотеки — 1.4.2, поэтому обычно файл называется `jquery-1.4.2.js`. Скопируйте файл в буфер (Ctrl-C; ⌘-C в Mac). |
| |
| [start=6] |
| . Вставьте файл библиотеки в новую папку `js`. Для этого щелкните правой кнопкой мыши `js` и выберите 'Вставить' (Ctrl-V; ⌘-V в Mac). В папке появится узел файла `jquery-1.4.2.js`. |
| |=== |
| |
| | |
| ==== Проект PHP: |
| |
| | |
| |
| |
| ==== Веб-проект Java: |
| |
| |
| |
| |image:images/jquery-lib-php.png[title="Вставьте библиотеку jQuery напрямую в проект"] |image:images/jquery-lib-java.png[title="Вставьте библиотеку jQuery напрямую в проект"] |
| |=== |
| |
| [start=7] |
| . В редакторе укажите ссылку на библиотеку jQuery из файла `index.html`. Для этого добавьте пару тегов `<script>` и используйте атрибут `src`, чтобы указать местоположение библиотеки. (Изменения *выделены полужирным шрифтом*.) |
| |
| [source,xml] |
| ---- |
| |
| <html> |
| <head> |
| <title>jQuery Test Project</title> |
| <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> |
| *<script type="text/javascript" src="js/jquery-1.4.2.js"></script>* |
| |
| <style type="text/css"> |
| |
| </style> |
| </head> |
| ... |
| ---- |
| |
| [start=8] |
| . Сохраните файл (сочетание клавиш CTRL+S; &#8984+S в Mac OS). |
| |
| Теперь библиотека jQuery включена в проект `jqproject`, и на нее содержится ссылка в файле `index.html`. Можно начать добавлять функции jQuery к странице. |
| |
| |
| |
| [[gettingacquainted]] |
| == Знакомство с jQuery |
| |
| jQuery работает путем подключения динамически примененных атрибутов и поведений JavaScript к элементам модели DOM (объектной модели документа). Добавим элемент к модели DOM и попробуем повлиять на его свойства. Мы создадим заголовок, цвет которого при его щелчке меняется с черного на синий. |
| |
| 1. Начнем с создания заголовка, в структурном плане это элемент `<h1>`. Переместите комментарий "`TODO write content`" и введите следующее между тегами `<body>`: |
| |
| [source,xml] |
| ---- |
| |
| <h1>Test.</h1> |
| ---- |
| |
| [start=2] |
| . Теперь создадим класс CSS, делающий элемент синим при применении. Введите следующее между тегами `<style>` в `<head>` заголовок: |
| |
| [source,java] |
| ---- |
| |
| .blue { color: blue; } |
| ---- |
| |
| [start=3] |
| . Теперь настроим место для размещения команд jQuery. Добавим новый набор тегов `<script>` к `<head>` документа, например, после тегов `<script>` со ссылкой на библиотеку jQuery. (Изменения *выделены полужирным шрифтом*.) |
| |
| [source,xml] |
| ---- |
| |
| <html> |
| <head> |
| <title>jQuery Test Project</title> |
| <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> |
| <script type="text/javascript" src="js/jquery-1.3.2.js"></script> |
| |
| *<script type="text/javascript"> |
| |
| </script>* |
| |
| <style type="text/css"> |
| .blue { color: blue; } |
| </style> |
| </head> |
| ... |
| ---- |
| |
| Код можно упорядочить, щелкнув правой кнопкой мыши в редакторе и выбрав 'Формат'. |
| |
| Команды jQuery, которые мы добавим, должны быть выполнены только после загрузки браузером всех элементов модели DOM. Это важно, потому что поведения jQuery подключаются к элементам модели DOM, и эти элементы должны быть доступны для jQuery для получения ожидаемых результатов. jQuery выполняет это за нас с помощью встроенной функции `(document).ready`, которая следует за объектом jQuery, представленным `$`. |
| |
| [start=4] |
| . Введите эту конструкцию между только что созданными тегами script: |
| |
| [source,java] |
| ---- |
| |
| $(document).ready(function(){ |
| |
| }); |
| ---- |
| |
| Доступна сокращенная версия этой функции, которая также может использоваться: |
| |
| |
| [source,java] |
| ---- |
| |
| $(function(){ |
| |
| }); |
| ---- |
| Наши команды для jQuery принимают форму метода JavaScript с дополнительным объектным литералом, предоставляющим массив параметров, который должен быть помещен между фигурными скобками `{}` в функции `(document).ready` для выполнения только в верное время, то есть после полной загрузки модели DOM. |
| |
| На этом этапе файл `index.html` должен выглядеть следующим образом: |
| |
| [source,xml] |
| ---- |
| |
| <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> |
| <html> |
| <head> |
| <title>jQuery Test Project</title> |
| <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> |
| <script type="text/javascript" src="js/jquery-1.3.2.js"></script> |
| |
| <script type="text/javascript"> |
| $(document).ready(function(){ |
| |
| }); |
| </script> |
| |
| <style type="text/css"> |
| .blue { color: blue; } |
| </style> |
| </head> |
| <body> |
| <h1>Test.</h1> |
| </body> |
| </html> |
| ---- |
| |
| [start=5] |
| . Для демонстрации работы синтаксиса jQuery попробуем выполнить простую операцию. Мы добавим к странице инструкции jQuery для изменения цвета слова "Test" на синий при его щелчке. Для этого библиотека jQuery должна добавить класс CSS `.blue` к элементу `<h1>` модели DOM при получении щелчка мыши. |
| |
| Введите следующий код внутри функции `(document).ready` между скобок `{}`: |
| |
| [source,java] |
| ---- |
| |
| $("h1").click(function(){ |
| $(this).addClass("blue"); |
| }); |
| ---- |
| |
| [start=6] |
| . Сохраните документ (Ctrl-S; ⌘-S в Mac), затем щелкните правой кнопкой мыши в редакторе и выберите 'Просмотр' для просмотра в используемом веб-браузере. Выполните тестирование, чтобы проверить работу. При щелчке слова "Test" оно должно стать синим. |
| |
| image::images/blue-test.png[title="При щелчке текста его цвет изменяется на синий"] |
| |
| В этом примере используется функция `click()` jQuery для вызова функции `addClass()` jQuery при достижении элемента, соответствующего селектору CSS "`h1`". `$(this)` ссылается обратно на вызываемый элемент. Если добавить к странице дополнительные селекторы `<h1>`, это же поведение будет применено ко всем из них с этим набором правил, и каждый будет независимо взаимодействовать с jQuery. (Можно попробовать выполнить это как краткое упражнение.) |
| |
| [start=7] |
| . Другое важное качество jQuery — функции могут быть быстро объединены в цепочку для создания более сложных или последовательных поведений. Чтобы продемонстрировать это, добавим инструкцию jQuery для замедления fadeOut для нашей функции `click()`. Разместите функцию `fadeOut("slow")` jQuery после функции `addClass`, чтобы строка кода выглядела следующим образом: |
| |
| [source,java] |
| ---- |
| |
| $(this).addClass("blue").fadeOut("slow"); |
| ---- |
| Вся функция jQuery должна выглядеть следующим образом: |
| |
| [source,java] |
| ---- |
| |
| $(document).ready(function(){ |
| $("h1").click(function(){ |
| $(this).addClass("blue").fadeOut("slow"); |
| }); |
| }); |
| ---- |
| |
| [start=8] |
| . В браузере обновите страницу и щелкните "Test". Текст станет синим, затем темнеет и исчезает со страницы. (Чтобы повторить, необходимо обновить страницу.) |
| |
| |
| === Автозавершение кода NetBeans и поддержка интерфейса API |
| |
| В любое время при вводе в редакторе можно вызвать автозавершение кода, нажав клавиши Ctrl-Space. Среда IDE представит список предложений для выбора, а также окно документации по интерфейсу API, в котором определяются перечисленные элементы, предоставляются примеры фрагментов кода и отображаются сведения о поддержке целевого браузера. |
| |
| image::images/code-completion.png[title="Для просмотра окон автозавершения кода и документации по API нажмите сочетание клавиш CTRL+ПРОБЕЛ."] |
| |
| Можно указать целевые браузеры для автозавершения кода и документации по интерфейсу API, открыв окно параметров JavaScript среды IDE. Выберите "Сервис > Параметры" (NetBeans > Preferences в Mac), затем выберите "Разное > JavaScript". |
| |
| |
| |
| |
| [[addingaccordion]] |
| == Добавление элемента оформления Accordion ("гармошка") jQuery к проекту |
| |
| Выше мы создали простой способ, используя поведения JavaScript, включенные в базовую библиотеку jQuery. Теперь изучим более реальный пример, настроив список контактов сотрудников, используя основную разметку HTML. Затем применим к списку контактов link:http://jqueryui.com/demos/accordion/[+виджет jQuery accordion+]. |
| |
| Элемент оформления accordion входит в link:http://jqueryui.com/[+библиотеку UI jQuery+]. Библиотека UI основана на базовой библиотеке и предоставляет модульных подход к обеспечению взаимодействий, элементов оформления и эффектов на веб-страницах. Можно сохранить минимальный размер файлов и удобным образом выбрать только необходимые компоненты в интерфейсе загрузки jQuery по адресу link:http://jqueryui.com/download[+http://jqueryui.com/download+]. |
| |
| Если это еще не сделано, посетите link:http://jqueryui.com/download[+http://jqueryui.com/download+] и загрузите элемент оформления переходов accordion. Обратите внимание, что при выборе элемента оформления accordion также автоматически выбираются базовая библиотека UI и Widget Factory. Также имейте в виду, что на странице загрузки по умолчанию выбирается тема "`UI lightness`", которая входит в состав пакета загрузки. Эта тема будет применена к списку контактов в <<usingcss,следующем разделе>>. |
| |
| 1. Вставьте следующий код в документ вместо `<h1>Test.</h1>`. |
| |
| [source,html] |
| ---- |
| |
| <div id="infolist"> |
| |
| <h3><a href="#">Mary Adams</a></h3> |
| <div> |
| <img src="pix/maryadams.jpg" alt="Mary Adams"> |
| <ul> |
| <li><h4>Vice President</h4></li> |
| <li><b>phone:</b> x8234</li> |
| <li><b>office:</b> 102 Bldg 1</li> |
| <li><b>email:</b> m.adams@company.com</li> |
| </ul> |
| <br clear="all"> |
| </div> |
| |
| <h3><a href="#">John Matthews</a></h3> |
| <div> |
| <img src="pix/johnmatthews.jpg" alt="John Matthews"> |
| <ul> |
| <li><h4>Middle Manager</h4></li> |
| <li><b>phone:</b> x3082</li> |
| <li><b>office:</b> 307 Bldg 1</li> |
| <li><b>email:</b> j.matthews@company.com</li> |
| </ul> |
| <br clear="all"> |
| </div> |
| |
| <h3><a href="#">Sam Jackson</a></h3> |
| <div> |
| <img src="pix/samjackson.jpg" alt="Sam Jackson"> |
| <ul> |
| <li><h4>Deputy Assistant</h4></li> |
| <li><b>phone:</b> x3494</li> |
| <li><b>office:</b> 457 Bldg 2</li> |
| <li><b>email:</b> s.jackson@company.com</li> |
| </ul> |
| <br clear="all"> |
| </div> |
| |
| <h3><a href="#">Jennifer Brooks</a></h3> |
| <div> |
| <img src="pix/jeniferapplethwaite.jpg" alt="Jenifer Applethwaite"> |
| <ul> |
| <li><h4>Senior Technician</h4></li> |
| <li><b>phone:</b> x9430</li> |
| <li><b>office:</b> 327 Bldg 2</li> |
| <li><b>email:</b> j.brooks@company.com</li> |
| </ul> |
| <br clear="all"> |
| </div> |
| </div> |
| ---- |
| Обратите внимание, что общему заключающему элементу `<div>` предоставлен атрибут `id` со значением `infolist`. В этом элементе `<div>` находятся четыре комплекта тегов `<h3>` и теги `<div>`, содержащие изображение и нумерованный список. |
| |
| [start=2] |
| . Добавьте несколько встроенных правил CSS к приведенной выше разметке. Удалите правило стиля `.blue`, созданное для целей тестирования выше. Вместо него добавьте следующие правила. (Изменения *выделены полужирным шрифтом*.) |
| |
| [source,xml] |
| ---- |
| |
| <style type="text/css"> |
| *ul {list-style-type: none} |
| img {padding-right: 20px; float:left} |
| |
| #infolist {width:500px}* |
| </style> |
| ---- |
| |
| При вводе внутри тегов `<style>` используйте встроенную функцию автозавершения кода CSS среды IDE, вызываемую путем нажатия Ctrl-Space. |
| |
| |
| [start=3] |
| . Сохраните файл (сочетание клавиш CTRL+S; &#8984+S в Mac OS). |
| |
| [start=4] |
| . Теперь добавим изображения JPG, на которые содержатся ссылки в приведенном выше фрагменте кода нашего проекта. Получите каталог `pix` из <<requiredSoftware,ресурсов проекта, загруженных ранее,>> и скопируйте каталог целиком в папку проекта, разместив его на том же уровне, что и файл `index.html`. Через некоторый момент среда NetBeans автоматически обновит окно "Проекты", чтобы отразить, что новый каталог добавлен в проект вручную. |
| |
| [start=5] |
| . Переключитесь на браузер и обновите страницу. |
| |
| image::images/structured-list.png[title="Структурированный список отображается в браузере"] |
| |
| Есть ряд проблем этого документа, которые будут решены. Во-первых, поиск нужного лица в списке сложнее, чем он должен быть: необходимо прокрутить страницу и визуально проверить множество информации, которая может быть ненужной. Список из четырех контактов может быть управляемым, но если их число вырастет, скажем, до 50, использование списка заметно усложнится. Во-вторых, документ визуально простой, и, скорей всего, не будет сочетаться с дизайном большинства веб-сайтов, в частности сайтом со множеством графики. Эти проблемы будут решены с помощью элемента оформления accordion jQuery вместе с темой jQuery UI по умолчанию. |
| |
| [start=6] |
| . Для создания эффекта accordion найдите на компьютере загруженный элемент оформления accordion. В загруженной папке найдите папку с именем "`development-bundle`". В папке `development-bundle` разверните папку `ui` и найдите три следующие сценария: |
| * `jquery.ui.core.js` |
| * `jquery.ui.widget.js` |
| * `jquery.ui.accordion.js` |
| |
| Версии сценариев наборов инструментов для разработки _полные_, что означает, что их код удобочитаем при просмотре в редакторе. Обычно для готовых к использованию приложений необходимы сжатые версии, чтобы сократить время загрузки. |
| |
| |
| [start=7] |
| . Скопируйте (Ctrl-C; &#8984-C в Mac) три сценария, вернитесь в среду IDE и вставьте их в `js` папку, <<js,созданную ранее >> в папке `jqproject`. |
| |
| Для вставки можно использовать нажатие Ctrl-V (⌘-V в Mac) или щелкните правой кнопкой мыши папку `js` и выберите 'Вставить'. |
| |
| В папке `development-bundle` > `ui` также содержится файл с именем `jquery-ui-1.8.1.custom.js`. В этом файле три указанных выше сценария объединены в один. Можно также вставить этот файл в проект вместо трех отдельных сценариев. |
| |
| |
| [start=8] |
| . Создайте ссылки на сценарии на странице `index.html`, введя три тега `<script>` со ссылками на эти новые файлы JavaScript. Теги `<script>` можно добавить сразу после тегов `<script>`, которые ссылаются на `jquery-1.4.2.js` базовой библиотеки jQuery. Используйте существующие теги `<script>` в качестве модели. |
| |
| [start=9] |
| . Удалите тестовый код, созданный внутри функции `(document).ready`. Он больше не требуется. |
| |
| Теперь теги `<head>` вашего файла должны выглядеть следующим образом. |
| |
| [source,xml] |
| ---- |
| |
| <head> |
| <title>jQuery Test Project</title> |
| <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> |
| |
| <script type="text/javascript" src="js/jquery-1.4.2.js"></script> |
| <script type="text/javascript" src="js/jquery.ui.core.js"></script> |
| <script type="text/javascript" src="js/jquery.ui.widget.js"></script> |
| <script type="text/javascript" src="js/jquery.ui.accordion.js"></script> |
| |
| <script type="text/javascript"> |
| $(document).ready(function(){ |
| |
| }); |
| </script> |
| </head> |
| ---- |
| |
| [start=10] |
| . Для того, чтобы статический список без стиля использовал поведение accordion, необходимо просто добавить одну строку кода jQuery. Введите эту строку в функцию `(document).ready`. (Изменения *выделены полужирным шрифтом*.) |
| |
| [source,java] |
| ---- |
| |
| $(document).ready(function(){ |
| *$("#infolist").accordion({ |
| autoHeight: false |
| });* |
| }); |
| ---- |
| В этой строке кода `#infolist` — это селектор CSS, подключенный к уникальному элементу DOM, имеющему атрибут `id` со значением `infolist`; другими словами, наш список контактов. С помощью обычной точечной нотации JavaScript ('`.`') он подключается к инструкции jQuery, использующей метод `accordion()` для отображения этого элемента. |
| |
| В приведенном выше фрагменте кода также было указано "`autoHeight: false`". Это препятствует установке элементом оформления accordion высоты каждой панели на основе самой высокой части содержимого в разметке. Дополнительные сведения см. в link:http://docs.jquery.com/UI/Accordion[+документации accordion API+]. |
| |
| |
| [start=11] |
| . Сохраните файл (сочетание клавиш CTRL+S; &#8984+S в Mac OS). |
| |
| [start=12] |
| . Вернитесь к веб-браузеру и обновите страницу. Щелкните одно из имен (не верхнее), чтобы просмотреть действие accordion. Элемент оформления accordion jQuery обрабатывает все сведения обработки DOM и реагирования на щелчки мыши пользователем. |
| |
| image::images/accordion-list.png[title="Виджет 'гармошка' обрабатывает щелчки мышью пользователей и создает звуковой эффект звука гармошки"] |
| |
| |
| |
| [[usingcss]] |
| == Использование темы по умолчанию jQuery для улучшения стиля |
| |
| Теперь в нашем проекте имеется нужное поведение, но оно довольно простое, и требует настройки внешнего вида. Решим эту проблему, включил тему "`UI lightness`" jQuery по умолчанию. |
| |
| 1. Выберите папку на компьютере, в которую был загружен элемент оформления accordion. В загруженной папке разверните папку `development-bundle` > `themes` > `ui-lightness`. |
| 2. В папке `ui-lightness` скопируйте (Ctrl-C; &#8984-C в Mac) файл `jquery-ui-1.8.1.custom.css` и папку `images`, содержащую все изображения, необходимые для правильного отображения темы. |
| 3. В среде IDE создайте новую папку в проекте с именем `css`. Эта папка будет содержать тему "`UI lightness`" для элемента оформления accordion. |
| |
| Для этого щелкните правой кнопкой мыши узел проекта и выберите 'Создать' > 'Папка'. (Если 'Папка' не отображается в качестве параметра, нажмите кнопку 'Создать файл' ( image:images/new-file-btn.png[] ) на панели инструментов IDE, а затем выберите 'Другие' > 'Папка' в мастере создания файлов). Присвойте папке имя `css` и поместите ее в тот же каталог, в котором находится файл `index.html`. |
| |
| [alert]#Для проектов Java Web убедитесь, что папка `js` помещена в корневой веб-узел проекта. Для этого введите `web` в папке *Родительская папка*.# |
| |
| [start=4] |
| . Вставьте два элемента непосредственно в новую папку `css`. Для этого щелкните правой кнопкой мыши узел папки `css` и выберите 'Вставить'. Папка проекта должна выглядеть следующим образом. |
| |=== |
| |
| | |
| ==== Проект PHP: |
| |
| | |
| |
| |
| ==== Веб-проект Java: |
| |
| |
| |
| |image:images/proj-win-php.png[title="Проект содержит тему jQuery, заданную по умолчанию"] |image:images/proj-win-java.png[title="Проект содержит тему jQuery, заданную по умолчанию"] |
| |=== |
| |
| [start=5] |
| . Ссылка на файл `jquery-ui-1.8.1.custom.css` на веб-странице `index.html`. Добавьте следующий тег `<link>` в заголовок страницы. |
| |
| [source,java] |
| ---- |
| |
| <link rel="stylesheet" href="css/jquery-ui-1.8.1.custom.css" type="text/css"> |
| ---- |
| |
| [start=6] |
| . Сохраните файл (сочетание клавиш CTRL+S; &#8984+S в Mac OS). |
| |
| [start=7] |
| . Вернитесь в веб-браузер и обновите страницу. Обратите внимание, что теперь список отображается с темой jQuery по умолчанию, что является эстетическим улучшением по сравнению с простой версией без стиля. |
| |
| image::images/ui-lightness-theme.png[title="Тема jQuery, заданная по умолчанию, улучшает внешний вид виджета 'гармошка'"] |
| |
| |
| |
| [[summary]] |
| == Заключение |
| |
| В этом учебном курсе вы узнали, как добавлять библиотеки jQuery к проекту, а также как создавать некоторые простые команды, используя синтаксис jQuery. Вы также узнали, как jQuery взаимодействует с моделью DOM с использованием переменных наподобие селекторов CSS для изменения внешнего вида и поведения элементов на веб-странице. |
| |
| Наконец, были кратко рассмотрены возможности библиотеки пользовательского интерфейса jQuery путем применения элемента оформления accordion к простому списку контактов. После реализации эффекта accordion к списку была применена тема jQuery по умолчанию. Теперь вы должны оценить, как можно использовать jQuery для создания динамических веб-страниц, улучшая внешний вид и удобство использования. |
| |
| link:/about/contact_form.html?to=3&subject=Feedback: Using jQuery to Enhance the Appearance and Usability of a Web Page[+Отправить отзыв по этому учебному курсу+] |
| |
| |
| |
| |
| [[seealso]] |
| == Дополнительные сведения |
| |
| Дополнительные сведения о поддержке приложений HTML5 и JavaScript в IDE см. в следующих материалах на сайте link:https://netbeans.org/[+www.netbeans.org+]: |
| |
| * link:../webclient/html5-gettingstarted.html[+Начало работы с приложениями HTML5+]. Документ, который показывает, как установить расширение NetBeans Connector для Chrome, а также выполнить создание и запуск простого приложения HTML5. |
| * link:../webclient/html5-editing-css.html[+Работа со страницами стилей CSS в приложениях HTML5+] Документ, который продолжает работу с приложением, которое было создано в этом учебном курсе. Он показывает, как использовать некоторые из мастеров CSS и окон в IDE и как использовать режим проверки в браузере Chrome для визуального определения элементов в источниках проекта. |
| * link:../webclient/html5-js-support.html[+Отладка и тестирование JavaScript в приложениях HTML5+] Документ, который демонстрирует, как IDE предоставляет инструменты, которые могут использоваться в отладке и тестировании файлов сценариев JAVA в IDE. |
| * link:js-toolkits-dojo.html[+Подключение дерева Dojo к списку ArrayList с помощью JSON+]. Представлено введение в набор средств Dojo, а также шаги по взаимодействию с сервером базы данных с использованием Ajax и JSON. |
| * link:../../docs/php/ajax-quickstart.html[+Введение в Ajax (PHP)+]. Описывается создание простого приложения с использованием технологии PHP с одновременным объяснением базовой последовательности действий запроса Ajax. |
| * link:ajax-quickstart.html[+Введение в Ajax (Java)+]. Описана сборка простого приложения с использованием технологии сервлетов, в то же время показан внутренний процесс обработки запроса Ajax. |
| |
| Дополнительные сведения о jQuery доступны в официальной документации: |
| |
| * Официальная домашняя страница: link:http://jquery.com[+http://jquery.com+] |
| * Домашняя страница UI: link:http://jqueryui.com/[+http://jqueryui.com/+] |
| * Учебные курсы: link:http://docs.jquery.com/Tutorials[+http://docs.jquery.com/Tutorials+] |
| * Главная страница документации: link:http://docs.jquery.com/Main_Page[+http://docs.jquery.com/Main_Page+] |
| * Демонстрации интерфейса пользователя и документация: link:http://jqueryui.com/demos/[+http://jqueryui.com/demos/+] |
| |
| |