// 
//     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 &amp; комплект 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/+]