Google Git
Sign in
apache / netbeans-website / 44443f9641a4bc18331d3d9c0e0f178c417e52be / . / netbeans.apache.org / src / content / kb / docs / web / js-toolkits-jquery_ru.asciidoc
blob: e1ffa81e561e7f39eeb40adf4bff4d79dba8d3c8 [file] [log] [blame]
//
// 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*, затем выберите *Веб-приложение*.
. Нажмите кнопку "Далее" и присвойте проекту имя `jqproject`. Также, укажите каталог на компьютере для сохранения проекта. Нажмите кнопку "Далее".
. В действии 3 для целей этого учебного курса примите параметры мастера по умолчанию.
*Примечание.* Если проект PHP создается в первый раз и требуется поддержка, см. раздел 'Настройка среды для разработки PHP' в link:../../trails/php.html[+Учебная карта PHP+].
. Нажмите кнопку *Готово* для завершения работы мастера и создания нового проекта. Проект `jqproject` откроется в окне "Проекты", а в редакторе откроется файл приветствия проекта.
. Создайте обычный файл HTML, с которым вы можете работать до завершения этого курса. Поскольку для кода jQuery, который будет добавлен, не требуется связь внутренним сервером, мы просто запустим файл HTML в браузере, чтобы просмотреть результаты.
Правой кнопкой мыши щелкните узел проекта и выберите "Новый > Файл HTML" (Ctrl-N).
. Присвойте файлу имя `index`, затем нажмите кнопку *Готово*. В окне "Проекты" обратите внимание, что в проекте присутствует новый файл `index.html`, и этот файл открыт в редакторе.
. Взгляните на страницу приветствия в браузере. Для этого правой кнопкой мыши щелкните узел `index.html` в окне "Проекты" и выберите "Просмотр". (Также можно выбрать пункт "Просмотр" в контекстном меню файла в редакторе.) Страница отобразится в окне браузера.
image::images/browser-test.png[title="Просмотрите пустой шаблон HTML в окне браузера"]
. В файле `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>
----
. Настройте проект, чтобы файл `index.html` отображался в качестве страницы приветствия при развертывании и запуске приложения. Для этого правой кнопкой мыши щелкните узел `jqproject` в окне "Проекты" и выберите "Свойства".
* *Проекты PHP:* Выберите категорию *Выполнить настройку*, затем введите `index.html` в поле *Файл индекса*.
* *Проекты Java Web:* Выберите категорию *Выполнить*, затем введите `index.html` в поле *Относительный URL-адрес*.
. Нажмите "ОК", чтобы закрыть окно "Свойства проекта" и сохранить изменения.
. На этом этапе можно удалить исходный файл индекса, который был создан вместе с проектом. В проекте 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` в папке *Родительская папка*.#
. Нажмите кнопку *Готово* для выхода из мастера.
. Найдите библиотеку jQuery, загруженную на компьютер. На настоящий момент текущая версия библиотеки — 1.4.2, поэтому обычно файл называется `jquery-1.4.2.js`. Скопируйте файл в буфер (Ctrl-C; ⌘-C в Mac).
. Вставьте файл библиотеки в новую папку `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 напрямую в проект"]
|===
. В редакторе укажите ссылку на библиотеку 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>
...
----
. Сохраните файл (сочетание клавиш CTRL+S; &amp;#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>
----
. Теперь создадим класс CSS, делающий элемент синим при применении. Введите следующее между тегами `<style>` в `<head>` заголовок:
[source,java]
----
.blue { color: blue; }
----
. Теперь настроим место для размещения команд 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, представленным `$`.
. Введите эту конструкцию между только что созданными тегами 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>
----
. Для демонстрации работы синтаксиса jQuery попробуем выполнить простую операцию. Мы добавим к странице инструкции jQuery для изменения цвета слова "Test" на синий при его щелчке. Для этого библиотека jQuery должна добавить класс CSS `.blue` к элементу `<h1>` модели DOM при получении щелчка мыши.
Введите следующий код внутри функции `(document).ready` между скобок `{}`:
[source,java]
----
$("h1").click(function(){
$(this).addClass("blue");
});
----
. Сохраните документ (Ctrl-S; ⌘-S в Mac), затем щелкните правой кнопкой мыши в редакторе и выберите 'Просмотр' для просмотра в используемом веб-браузере. Выполните тестирование, чтобы проверить работу. При щелчке слова "Test" оно должно стать синим.
image::images/blue-test.png[title="При щелчке текста его цвет изменяется на синий"]
В этом примере используется функция `click()` jQuery для вызова функции `addClass()` jQuery при достижении элемента, соответствующего селектору CSS "`h1`". `$(this)` ссылается обратно на вызываемый элемент. Если добавить к странице дополнительные селекторы `<h1>`, это же поведение будет применено ко всем из них с этим набором правил, и каждый будет независимо взаимодействовать с jQuery. (Можно попробовать выполнить это как краткое упражнение.)
. Другое важное качество 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");
});
});
----
. В браузере обновите страницу и щелкните "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>`, содержащие изображение и нумерованный список.
. Добавьте несколько встроенных правил 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.
. Сохраните файл (сочетание клавиш CTRL+S; &amp;#8984+S в Mac OS).
. Теперь добавим изображения JPG, на которые содержатся ссылки в приведенном выше фрагменте кода нашего проекта. Получите каталог `pix` из <<requiredSoftware,ресурсов проекта, загруженных ранее,>> и скопируйте каталог целиком в папку проекта, разместив его на том же уровне, что и файл `index.html`. Через некоторый момент среда NetBeans автоматически обновит окно "Проекты", чтобы отразить, что новый каталог добавлен в проект вручную.
. Переключитесь на браузер и обновите страницу.
image::images/structured-list.png[title="Структурированный список отображается в браузере"]
Есть ряд проблем этого документа, которые будут решены. Во-первых, поиск нужного лица в списке сложнее, чем он должен быть: необходимо прокрутить страницу и визуально проверить множество информации, которая может быть ненужной. Список из четырех контактов может быть управляемым, но если их число вырастет, скажем, до 50, использование списка заметно усложнится. Во-вторых, документ визуально простой, и, скорей всего, не будет сочетаться с дизайном большинства веб-сайтов, в частности сайтом со множеством графики. Эти проблемы будут решены с помощью элемента оформления accordion jQuery вместе с темой jQuery UI по умолчанию.
. Для создания эффекта accordion найдите на компьютере загруженный элемент оформления accordion. В загруженной папке найдите папку с именем "`development-bundle`". В папке `development-bundle` разверните папку `ui` и найдите три следующие сценария:
* `jquery.ui.core.js`
* `jquery.ui.widget.js`
* `jquery.ui.accordion.js`
Версии сценариев наборов инструментов для разработки _полные_, что означает, что их код удобочитаем при просмотре в редакторе. Обычно для готовых к использованию приложений необходимы сжатые версии, чтобы сократить время загрузки.
. Скопируйте (Ctrl-C; &amp;#8984-C в Mac) три сценария, вернитесь в среду IDE и вставьте их в `js` папку, <<js,созданную ранее >> в папке `jqproject`.
Для вставки можно использовать нажатие Ctrl-V (⌘-V в Mac) или щелкните правой кнопкой мыши папку `js` и выберите 'Вставить'.
В папке `development-bundle` > `ui` также содержится файл с именем `jquery-ui-1.8.1.custom.js`. В этом файле три указанных выше сценария объединены в один. Можно также вставить этот файл в проект вместо трех отдельных сценариев.
. Создайте ссылки на сценарии на странице `index.html`, введя три тега `<script>` со ссылками на эти новые файлы JavaScript. Теги `<script>` можно добавить сразу после тегов `<script>`, которые ссылаются на `jquery-1.4.2.js` базовой библиотеки jQuery. Используйте существующие теги `<script>` в качестве модели.
. Удалите тестовый код, созданный внутри функции `(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>
----
. Для того, чтобы статический список без стиля использовал поведение 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+].
. Сохраните файл (сочетание клавиш CTRL+S; &amp;#8984+S в Mac OS).
. Вернитесь к веб-браузеру и обновите страницу. Щелкните одно из имен (не верхнее), чтобы просмотреть действие 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; &amp;#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` в папке *Родительская папка*.#
. Вставьте два элемента непосредственно в новую папку `css`. Для этого щелкните правой кнопкой мыши узел папки `css` и выберите 'Вставить'. Папка проекта должна выглядеть следующим образом.
|===
|
==== Проект PHP:
|
==== Веб-проект Java:
|image:images/proj-win-php.png[title="Проект содержит тему jQuery, заданную по умолчанию"] |image:images/proj-win-java.png[title="Проект содержит тему jQuery, заданную по умолчанию"]
|===
. Ссылка на файл `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">
----
. Сохраните файл (сочетание клавиш CTRL+S; &amp;#8984+S в Mac OS).
. Вернитесь в веб-браузер и обновите страницу. Обратите внимание, что теперь список отображается с темой 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/+]