Google Git
Sign in
apache / netbeans-website-cleanup / refs/heads/asciidoc-features / . / src / content / kb / docs / web / js-toolkits-jquery_ru.html
blob: fa5af73f140b0849afe4073d3d970f1247672fa4 [file] [log] [blame]
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<link rel="stylesheet" type="text/css" href="../../../netbeans.css">
<title>Использование jQuery для улучшения внешнего вида и удобства использования веб-страницы - учебный курс по NetBeans</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<meta name="description" content="A tutorial for enhancing the usability and appearance of structured documents using the jQuery JavaScript library in the NetBeans IDE">
<meta name="keywords" content="NetBeans, IDE, integrated development environment, jQuery, JavaScript, CSS, semantically structured HTML, enhancing">
<meta name="author" content="lloyd.dunn@sun.com, troy.giunipero@sun.com">
</head>
<body>
<!--
Copyright (c) 2009, 2010, Oracle and/or its affiliates. All rights reserved.
-->
<h1>Использование jQuery для улучшения внешнего вида и удобства использования веб-страницы</h1>
<p><a href="http://jquery.com/">jQuery</a> — это облегченная библиотека JavaScript, позволяющая программистам быстро и просто добавлять улучшения в дизайн и поведение веб-страниц. jQuery использует краткий синтаксис с переменными в форме селекторов CSS для эффективного подключения к любым целевым элементам DOM, будь то (<code>идентификаторы</code>) уникальных элементов, (<code>классы</code>) наборов элементов или произвольно выбранные элементы. Поскольку библиотека jQuery — это JavaScript, она может быть встроена в любой проект, в котором может использоваться JavaScript.</p>
<p>В этом учебном курсе показано, как приступить к использованию библиотеки jQuery в проектах NetBeans, а также использование среды IDE при работе с любыми проектами пользовательского интерфейса, в которых используются файлы HTML, CSS и JavaScript. В основном будет продемонстрирован вызов выполнения кода для функций и использование интегрированной поддержки интерфейса API. Также будут представлены ключевые понятия jQuery, включая вызов функции <code>$(document).ready</code>, использование объектов jQuery наподобие селекторов CSS и формирование цепочек эффектов и поведений jQuery. Также можно изучить преимущества <a href="http://jqueryui.com">библиотеки UI jQuery</a>, создав простой пример документа &quot;список контактов&quot; и применив к нему <a href="http://jqueryui.com/demos/accordion/">элемент оформления &quot;гармошка&quot; jQuery</a>.</p>
<p class="tips">Пример использования jQuery в приложениях HTML5 приведен в учебном курсе <a href="../webclient/html5-gettingstarted.html">Начало работы с приложениями HTML5</a>.</p>
<h3>Содержание</h3>
<img alt="Содержимое на этой странице применимо к IDE NetBeans 7.2, 7.3, 7.4 и 8.0" class="stamp" src="../../../images_www/articles/73/netbeans-stamp-80-74-73.png" title="Содержимое этой страницы применимо к IDE NetBeans 7.2, 7.3, 7.4 и 8.0">
<ul class="toc">
<li><a href="#settingup">Настройка проекта NetBeans</a></li>
<li><a href="#addingjquery">Добавление к проекту библиотеки jQuery</a></li>
<li><a href="#gettingacquainted">Ознакомление с jQuery</a></li>
<li><a href="#addingaccordion">Добавление элемента оформления Accordion (&quot;гармошка&quot;) jQuery к проекту</a></li>
<li><a href="#usingcss">Использование темы по умолчанию jQuery для улучшения стиля</a></li>
<li><a href="#summary">Заключение</a></li>
<li><a href="#seealso">Дополнительные сведения</a></li>
</ul>
<h4>Для выполнения этого учебного курса потребуются следующие материалы.</h4>
<table id="requiredSoftware">
<tbody>
<tr>
<th class="tblheader" scope="col">Программное обеспечение или материал</th>
<th class="tblheader" scope="col">Требуемая версия</th>
</tr>
<tr>
<td class="tbltd1"><a href="https://netbeans.org/downloads/index.html">NetBeans IDE, Java EE или HTML5 &amp; комплект PHP</a></td>
<td class="tbltd1">Версия 7.0 или более поздние</td>
</tr>
<tr>
<td class="tbltd1"><a href="http://www.oracle.com/technetwork/java/javase/downloads/index.html">Комплект для разработчика на языке Java (JDK)</a></td>
<td class="tbltd1">7 или 8</td>
</tr>
<tr>
<td class="tbltd1"><a href="http://docs.jquery.com/Downloading_jQuery#Current_Release">Базовая библиотека jQuery</a></td>
<td class="tbltd1">Версия 1.4.2 или более поздние</td>
</tr>
<tr>
<td class="tbltd1"><a href="http://jqueryui.com/download">Элемент оформления Accordion jQuery</a></td>
<td class="tbltd1">Версия 1.8.1 или более поздние</td>
</tr>
<tr>
<td class="tbltd1"><a href="https://netbeans.org/projects/samples/downloads/download/Samples%252FJavaScript%252Fpix.zip">Ресурсы проекта</a></td>
<td class="tbltd1">неприменимо</td>
</tr>
</tbody>
</table>
<p><strong class="notes">Примечания:</strong></p>
<ul>
<li><a href="https://netbeans.org/projects/samples/downloads/download/Samples%252FJavaScript%252FjQueryProjectFiles.zip">Ресурсы проекта</a> содержат файлы JPG, необходимые для выполнения этого учебного курса.</li>
<li>Если необходимо сравнить свой проект с работающим решением, можно <a href="https://netbeans.org/projects/samples/downloads/download/Samples%252FJavaScript%252FjQueryProjectFiles.zip">загрузить пример проекта</a>. (Включает версии PHP and Java Web.)</li>
<li>Если планируется работа с проектом Java, необходимо учесть настройку сервера для среды развертывания. Сервер GlassFish входит в состав загрузки среды IDE для Java и по умолчанию настроен для запуска из NetBeans.</li>
<li>Если планируется работа с проектом PHP, необходимо загрузить PHP и настроить среду. Дополнительные сведения приведены в <a href="../../trails/php.html">учебной карте по PHP</a>.</li>
<li>Предполагается, что читатель обладает базовыми знаниями или опытом программирования на HTML, CSS и JavaScript.</li>
</ul>
<br>
<h2 id="settingup">Настройка проекта NetBeans</h2>
<ol>
<li>Начните с создания нового проекта. Выберите 'Файл' > 'Новый проект' (Ctrl-Shift-N; ⌘-Shift-N в Mac).</li>
<li>Если необходимо работать с проектом PHP, выберите категорию <strong>PHP</strong>, затем выберите <strong>Приложение PHP</strong>. <br><br> Если необходимо работать с веб-проектом Java, выберите категорию <strong>Java Web</strong>, затем выберите <strong>Веб-приложение</strong>.</li>
<li>Нажмите кнопку &quot;Далее&quot; и присвойте проекту имя <code>jqproject</code>. Также, укажите каталог на компьютере для сохранения проекта. Нажмите кнопку &quot;Далее&quot;.</li>
<li>В действии 3 для целей этого учебного курса примите параметры мастера по умолчанию. <br><br>
<p><strong class="notes">Примечание.</strong> Если проект PHP создается в первый раз и требуется поддержка, см. раздел 'Настройка среды для разработки PHP' в <a href="../../trails/php.html">Учебная карта PHP</a>.</p></li>
<li>Нажмите кнопку <strong>Готово</strong> для завершения работы мастера и создания нового проекта. Проект <code>jqproject</code> откроется в окне &quot;Проекты&quot;, а в редакторе откроется файл приветствия проекта.</li>
<li>Создайте обычный файл HTML, с которым вы можете работать до завершения этого курса. Поскольку для кода jQuery, который будет добавлен, не требуется связь внутренним сервером, мы просто запустим файл HTML в браузере, чтобы просмотреть результаты.
<p>Правой кнопкой мыши щелкните узел проекта и выберите &quot;Новый &gt; Файл HTML&quot; (Ctrl-N).</p></li>
<li>Присвойте файлу имя <code>index</code>, затем нажмите кнопку <strong>Готово</strong>. В окне &quot;Проекты&quot; обратите внимание, что в проекте присутствует новый файл <code>index.html</code>, и этот файл открыт в редакторе.</li>
<li>Взгляните на страницу приветствия в браузере. Для этого правой кнопкой мыши щелкните узел <code>index.html</code> в окне &quot;Проекты&quot; и выберите &quot;Просмотр&quot;. (Также можно выбрать пункт &quot;Просмотр&quot; в контекстном меню файла в редакторе.) Страница отобразится в окне браузера. <br> <img alt="Файл index.html отображается в браузере" class="margin-around b-all" src="../../../images_www/articles/73/web/js-toolkits-jquery/browser-test.png" title="Просмотрите пустой шаблон HTML в окне браузера"></li>
<li>В файле <code>index.html</code> в редакторе NetBeans введите <code>jQuery Test Project</code> между тегами <code>&lt;title&gt;</code> и создайте пару тегов <code>&lt;style&gt;</code> внутри тегов <code>&lt;head&gt;</code> страницы. (Изменения <strong>выделены полужирным шрифтом</strong>.)
<pre class="examplecode">
&lt;html&gt;
&lt;head&gt;
&lt;title&gt;<strong>jQuery Test Project</strong>&lt;/title&gt;
&lt;meta http-equiv=&quot;Content-Type&quot; content=&quot;text/html; charset=UTF-8&quot;&gt;
<strong>&lt;style type=&quot;text/css&quot;&gt;
&lt;/style&gt;</strong>
&lt;/head&gt;
&lt;body&gt;
TODO write content
&lt;/body&gt;
&lt;/html&gt;</pre></li>
<li>Настройте проект, чтобы файл <code>index.html</code> отображался в качестве страницы приветствия при развертывании и запуске приложения. Для этого правой кнопкой мыши щелкните узел <code>jqproject</code> в окне &quot;Проекты&quot; и выберите &quot;Свойства&quot;.
<ul>
<li><strong>Проекты PHP:</strong> Выберите категорию <strong>Выполнить настройку</strong>, затем введите <code>index.html</code> в поле <strong>Файл индекса</strong>.</li>
<li><strong>Проекты Java Web:</strong> Выберите категорию <strong>Выполнить</strong>, затем введите <code>index.html</code> в поле <strong>Относительный URL-адрес</strong>.</li>
</ul></li>
<li>Нажмите &quot;ОК&quot;, чтобы закрыть окно &quot;Свойства проекта&quot; и сохранить изменения.</li>
<li>На этом этапе можно удалить исходный файл индекса, который был создан вместе с проектом. В проекте PHP это файл <code>index.php</code>; в проектах Java Web это файл <code>index.jsp</code>. <br><br> Для удаления файла щелкните его правой кнопкой мыши в окне &quot;Проекты&quot; и выберите &quot;Удалить&quot;. В появившемся диалоговом окне подтверждения нажмите кнопку <strong>Да</strong>.</li>
</ol>
<br>
<h2 id="addingjquery">Добавление библиотеки jQuery к проекту</h2>
<p>Перед началом работы с jQuery необходимо добавить к проекту библиотеку jQuery. Если это еще не сделано, загрузите библиотеку jQuery с веб-сайта <a href="http://jquery.com/">http://jquery.com/</a>.</p>
<p class="tips">Перед загрузкой выберите версию без сжатия, например, &quot;Development&quot; (Разработка). Использование несжатой версии позволит изучить код JavaScript в редакторе, а также упростит процессы отладки.</p>
<p>Чтобы добавить библиотеку jQuery к проекту NetBeans, просто скопируйте папку библиотеки из ее местоположения на компьютере и вставьте непосредственно в проект в окне &quot;Проекты&quot; среды IDE. Подробные сведения приведены ниже.</p>
<ol>
<li id="js">В среде IDE создайте папку с именем <code>js</code> и добавьте ее к проекту. Для этого нажмите кнопку 'Создать файл' ( <img alt="Кнопка &apos;Создать файл&apos;" src="../../../images_www/articles/73/web/js-toolkits-jquery/new-file-btn.png"> ) на панели инструментов IDE. (В качестве альтернативы нажмите Ctrl-N; ⌘-N в Mac.)</li>
<li>Выберите категорию <strong>Другое</strong>, затем выберите <strong>Папка</strong>.</li>
<li>Присвойте папке имя <code>js</code>. <br><br> <span class="alert">Для веб-проектов Java убедитесь, что папка <code>js</code> помещена в корневой веб-узел проекта. Для этого введите <code>web</code> в папке <strong>Родительская папка</strong>.</span></li>
<li>Нажмите кнопку <strong>Готово</strong> для выхода из мастера.</li>
<li>Найдите библиотеку jQuery, загруженную на компьютер. На настоящий момент текущая версия библиотеки — 1.4.2, поэтому обычно файл называется <code>jquery-1.4.2.js</code>. Скопируйте файл в буфер (Ctrl-C; ⌘-C в Mac).</li>
<li>Вставьте файл библиотеки в новую папку <code>js</code>. Для этого щелкните правой кнопкой мыши <code>js</code> и выберите 'Вставить' (Ctrl-V; ⌘-V в Mac). В папке появится узел файла <code>jquery-1.4.2.js</code>. <br>
<table class="margin-around">
<tr>
<td><h4>Проект PHP:</h4></td>
<td><h4>Веб-проект Java:</h4></td>
</tr>
<tr>
<td><img alt="Библиотека jQuery отображается в окне &apos;Проекты&apos; среды IDE" class="margin-around b-all" src="../../../images_www/articles/73/web/js-toolkits-jquery/jquery-lib-php.png" title="Вставьте библиотеку jQuery напрямую в проект"></td>
<td><img alt="Библиотека jQuery отображается в окне &apos;Проекты&apos; среды IDE" class="margin-around b-all" src="../../../images_www/articles/73/web/js-toolkits-jquery/jquery-lib-java.png" title="Вставьте библиотеку jQuery напрямую в проект"></td>
</tr>
</table>
</li>
<li>В редакторе укажите ссылку на библиотеку jQuery из файла <code>index.html</code>. Для этого добавьте пару тегов <code>&lt;script&gt;</code> и используйте атрибут <code>src</code>, чтобы указать местоположение библиотеки. (Изменения <strong>выделены полужирным шрифтом</strong>.)
<pre class="examplecode">&lt;html&gt;
&lt;head&gt;
&lt;title&gt;jQuery Test Project&lt;/title&gt;
&lt;meta http-equiv=&quot;Content-Type&quot; content=&quot;text/html; charset=UTF-8&quot;&gt;
<strong>&lt;script type=&quot;text/javascript&quot; src=&quot;js/jquery-1.4.2.js&quot;&gt;&lt;/script&gt;</strong>
&lt;style type=&quot;text/css&quot;&gt;
&lt;/style&gt;
&lt;/head&gt;
...</pre></li>
<li>Сохраните файл (сочетание клавиш CTRL+S; &amp;#8984+S в Mac OS).</li>
</ol>
<p>Теперь библиотека jQuery включена в проект <code>jqproject</code>, и на нее содержится ссылка в файле <code>index.html</code>. Можно начать добавлять функции jQuery к странице.</p>
<br>
<h2 id="gettingacquainted">Знакомство с jQuery</h2>
<p>jQuery работает путем подключения динамически примененных атрибутов и поведений JavaScript к элементам модели DOM (объектной модели документа). Добавим элемент к модели DOM и попробуем повлиять на его свойства. Мы создадим заголовок, цвет которого при его щелчке меняется с черного на синий.</p>
<ol>
<li>Начнем с создания заголовка, в структурном плане это элемент <code>&lt;h1&gt;</code>. Переместите комментарий &quot;<code>TODO write content</code>&quot; и введите следующее между тегами <code>&lt;body&gt;</code>:
<pre class="examplecode">&lt;h1&gt;Test.&lt;/h1&gt;</pre></li>
<li>Теперь создадим класс CSS, делающий элемент синим при применении. Введите следующее между тегами <code>&lt;style&gt;</code> в <code>&lt;head&gt;</code> заголовок:
<pre class="examplecode">.blue { color: blue; }</pre></li>
<li>Теперь настроим место для размещения команд jQuery. Добавим новый набор тегов <code>&lt;script&gt;</code> к <code>&lt;head&gt;</code> документа, например, после тегов <code>&lt;script&gt;</code> со ссылкой на библиотеку jQuery. (Изменения <strong>выделены полужирным шрифтом</strong>.)
<pre class="examplecode">&lt;html&gt;
&lt;head&gt;
&lt;title&gt;jQuery Test Project&lt;/title&gt;
&lt;meta http-equiv=&quot;Content-Type&quot; content=&quot;text/html; charset=UTF-8&quot;&gt;
&lt;script type=&quot;text/javascript&quot; src=&quot;js/jquery-1.3.2.js&quot;&gt;&lt;/script&gt;
<strong>&lt;script type=&quot;text/javascript&quot;&gt;
&lt;/script&gt;</strong>
&lt;style type=&quot;text/css&quot;&gt;
.blue { color: blue; }
&lt;/style&gt;
&lt;/head&gt;
...</pre>
<p class="tips">Код можно упорядочить, щелкнув правой кнопкой мыши в редакторе и выбрав 'Формат'.</p>
Команды jQuery, которые мы добавим, должны быть выполнены только после загрузки браузером всех элементов модели DOM. Это важно, потому что поведения jQuery подключаются к элементам модели DOM, и эти элементы должны быть доступны для jQuery для получения ожидаемых результатов. jQuery выполняет это за нас с помощью встроенной функции <code>(document).ready</code>, которая следует за объектом jQuery, представленным <code>$</code>.</li>
<li>Введите эту конструкцию между только что созданными тегами script:
<pre class="examplecode">$(document).ready(function(){
});</pre>
<p class="tips">Доступна сокращенная версия этой функции, которая также может использоваться:</p>
<pre class="examplecode">$(function(){
});</pre>
Наши команды для jQuery принимают форму метода JavaScript с дополнительным объектным литералом, предоставляющим массив параметров, который должен быть помещен между фигурными скобками <code>{}</code> в функции <code>(document).ready</code> для выполнения только в верное время, то есть после полной загрузки модели DOM. <br><br> На этом этапе файл <code>index.html</code> должен выглядеть следующим образом:
<pre class="examplecode">&lt;!DOCTYPE HTML PUBLIC &quot;-//W3C//DTD HTML 4.01 Transitional//EN&quot;&gt;
&lt;html&gt;
&lt;head&gt;
&lt;title&gt;jQuery Test Project&lt;/title&gt;
&lt;meta http-equiv=&quot;Content-Type&quot; content=&quot;text/html; charset=UTF-8&quot;&gt;
&lt;script type=&quot;text/javascript&quot; src=&quot;js/jquery-1.3.2.js&quot;&gt;&lt;/script&gt;
&lt;script type=&quot;text/javascript&quot;&gt;
$(document).ready(function(){
});
&lt;/script&gt;
&lt;style type=&quot;text/css&quot;&gt;
.blue { color: blue; }
&lt;/style&gt;
&lt;/head&gt;
&lt;body&gt;
&lt;h1&gt;Test.&lt;/h1&gt;
&lt;/body&gt;
&lt;/html&gt;</pre></li>
<li>Для демонстрации работы синтаксиса jQuery попробуем выполнить простую операцию. Мы добавим к странице инструкции jQuery для изменения цвета слова &quot;Test&quot; на синий при его щелчке. Для этого библиотека jQuery должна добавить класс CSS <code>.blue</code> к элементу <code>&lt;h1&gt;</code> модели DOM при получении щелчка мыши. <br><br> Введите следующий код внутри функции <code>(document).ready</code> между скобок <code>{}</code>:
<pre class="examplecode">$(&quot;h1&quot;).click(function(){
$(this).addClass(&quot;blue&quot;);
});</pre></li>
<li>Сохраните документ (Ctrl-S; &#8984-S в Mac), затем щелкните правой кнопкой мыши в редакторе и выберите 'Просмотр' для просмотра в используемом веб-браузере. Выполните тестирование, чтобы проверить работу. При щелчке слова &quot;Test&quot; оно должно стать синим. <br> <img alt="Текст синего цвета в браузере" class="margin-around b-all" src="../../../images_www/articles/73/web/js-toolkits-jquery/blue-test.png" title="При щелчке текста его цвет изменяется на синий"> <br><br> В этом примере используется функция <code>click()</code> jQuery для вызова функции <code>addClass()</code> jQuery при достижении элемента, соответствующего селектору CSS &quot;<code>h1</code>&quot;. <code>$(this)</code> ссылается обратно на вызываемый элемент. Если добавить к странице дополнительные селекторы <code>&lt;h1&gt;</code>, это же поведение будет применено ко всем из них с этим набором правил, и каждый будет независимо взаимодействовать с jQuery. (Можно попробовать выполнить это как краткое упражнение.)</li>
<li>Другое важное качество jQuery — функции могут быть быстро объединены в цепочку для создания более сложных или последовательных поведений. Чтобы продемонстрировать это, добавим инструкцию jQuery для замедления fadeOut для нашей функции <code>click()</code>. Разместите функцию <code>fadeOut(&quot;slow&quot;)</code> jQuery после функции <code>addClass</code>, чтобы строка кода выглядела следующим образом:
<pre class="examplecode">$(this).addClass(&quot;blue&quot;).fadeOut(&quot;slow&quot;);</pre>
Вся функция jQuery должна выглядеть следующим образом:
<pre class="examplecode">$(document).ready(function(){
$(&quot;h1&quot;).click(function(){
$(this).addClass(&quot;blue&quot;).fadeOut(&quot;slow&quot;);
});
});</pre>
<li>В браузере обновите страницу и щелкните &quot;Test&quot;. Текст станет синим, затем темнеет и исчезает со страницы. (Чтобы повторить, необходимо обновить страницу.)</li>
</ol>
<div class="indent">
<div class="feedback-box float-left" style="width:700px">
<h3>Автозавершение кода NetBeans и поддержка интерфейса API</h3>
<p>В любое время при вводе в редакторе можно вызвать автозавершение кода, нажав клавиши Ctrl-Space. Среда IDE представит список предложений для выбора, а также окно документации по интерфейсу API, в котором определяются перечисленные элементы, предоставляются примеры фрагментов кода и отображаются сведения о поддержке целевого браузера.</p>
<img alt="Окна автозавершения кода и документации по API отображаются в редакторе" class="margin-around b-all" src="../../../images_www/articles/73/web/js-toolkits-jquery/code-completion.png" title="Для просмотра окон автозавершения кода и документации по API нажмите сочетание клавиш CTRL+ПРОБЕЛ.">
<p>Можно указать целевые браузеры для автозавершения кода и документации по интерфейсу API, открыв окно параметров JavaScript среды IDE. Выберите &quot;Сервис &gt; Параметры&quot; (NetBeans &gt; Preferences в Mac), затем выберите &quot;Разное &gt; JavaScript&quot;.</p>
</div>
</div>
<br style="clear:both;">
<br>
<h2 id="addingaccordion">Добавление элемента оформления Accordion (&quot;гармошка&quot;) jQuery к проекту</h2>
<p>Выше мы создали простой способ, используя поведения JavaScript, включенные в базовую библиотеку jQuery. Теперь изучим более реальный пример, настроив список контактов сотрудников, используя основную разметку HTML. Затем применим к списку контактов <a href="http://jqueryui.com/demos/accordion/">виджет jQuery accordion</a>.</p>
<p>Элемент оформления accordion входит в <a href="http://jqueryui.com/">библиотеку UI jQuery</a>. Библиотека UI основана на базовой библиотеке и предоставляет модульных подход к обеспечению взаимодействий, элементов оформления и эффектов на веб-страницах. Можно сохранить минимальный размер файлов и удобным образом выбрать только необходимые компоненты в интерфейсе загрузки jQuery по адресу <a href="http://jqueryui.com/download">http://jqueryui.com/download</a>.</p>
<p>Если это еще не сделано, посетите <a href="http://jqueryui.com/download">http://jqueryui.com/download</a> и загрузите элемент оформления переходов accordion. Обратите внимание, что при выборе элемента оформления accordion также автоматически выбираются базовая библиотека UI и Widget Factory. Также имейте в виду, что на странице загрузки по умолчанию выбирается тема &quot;<code>UI lightness</code>&quot;, которая входит в состав пакета загрузки. Эта тема будет применена к списку контактов в <a href="#usingcss">следующем разделе</a>.</p>
<ol>
<li>Вставьте следующий код в документ вместо <code>&lt;h1&gt;Test.&lt;/h1&gt;</code>.
<pre class="examplecode">&lt;div id=&quot;infolist&quot;&gt;
&lt;h3&gt;&lt;a href=&quot;#&quot;&gt;Mary Adams&lt;/a&gt;&lt;/h3&gt;
&lt;div&gt;
&lt;img src=&quot;pix/maryadams.jpg&quot; alt=&quot;Mary Adams&quot;&gt;
&lt;ul&gt;
&lt;li&gt;&lt;h4&gt;Vice President&lt;/h4&gt;&lt;/li&gt;
&lt;li&gt;&lt;b&gt;phone:&lt;/b&gt; x8234&lt;/li&gt;
&lt;li&gt;&lt;b&gt;office:&lt;/b&gt; 102 Bldg 1&lt;/li&gt;
&lt;li&gt;&lt;b&gt;email:&lt;/b&gt; m.adams@company.com&lt;/li&gt;
&lt;/ul&gt;
&lt;br clear=&quot;all&quot;&gt;
&lt;/div&gt;
&lt;h3&gt;&lt;a href=&quot;#&quot;&gt;John Matthews&lt;/a&gt;&lt;/h3&gt;
&lt;div&gt;
&lt;img src=&quot;pix/johnmatthews.jpg&quot; alt=&quot;John Matthews&quot;&gt;
&lt;ul&gt;
&lt;li&gt;&lt;h4&gt;Middle Manager&lt;/h4&gt;&lt;/li&gt;
&lt;li&gt;&lt;b&gt;phone:&lt;/b&gt; x3082&lt;/li&gt;
&lt;li&gt;&lt;b&gt;office:&lt;/b&gt; 307 Bldg 1&lt;/li&gt;
&lt;li&gt;&lt;b&gt;email:&lt;/b&gt; j.matthews@company.com&lt;/li&gt;
&lt;/ul&gt;
&lt;br clear=&quot;all&quot;&gt;
&lt;/div&gt;
&lt;h3&gt;&lt;a href=&quot;#&quot;&gt;Sam Jackson&lt;/a&gt;&lt;/h3&gt;
&lt;div&gt;
&lt;img src=&quot;pix/samjackson.jpg&quot; alt=&quot;Sam Jackson&quot;&gt;
&lt;ul&gt;
&lt;li&gt;&lt;h4&gt;Deputy Assistant&lt;/h4&gt;&lt;/li&gt;
&lt;li&gt;&lt;b&gt;phone:&lt;/b&gt; x3494&lt;/li&gt;
&lt;li&gt;&lt;b&gt;office:&lt;/b&gt; 457 Bldg 2&lt;/li&gt;
&lt;li&gt;&lt;b&gt;email:&lt;/b&gt; s.jackson@company.com&lt;/li&gt;
&lt;/ul&gt;
&lt;br clear=&quot;all&quot;&gt;
&lt;/div&gt;
&lt;h3&gt;&lt;a href=&quot;#&quot;&gt;Jennifer Brooks&lt;/a&gt;&lt;/h3&gt;
&lt;div&gt;
&lt;img src=&quot;pix/jeniferapplethwaite.jpg&quot; alt=&quot;Jenifer Applethwaite&quot;&gt;
&lt;ul&gt;
&lt;li&gt;&lt;h4&gt;Senior Technician&lt;/h4&gt;&lt;/li&gt;
&lt;li&gt;&lt;b&gt;phone:&lt;/b&gt; x9430&lt;/li&gt;
&lt;li&gt;&lt;b&gt;office:&lt;/b&gt; 327 Bldg 2&lt;/li&gt;
&lt;li&gt;&lt;b&gt;email:&lt;/b&gt; j.brooks@company.com&lt;/li&gt;
&lt;/ul&gt;
&lt;br clear=&quot;all&quot;&gt;
&lt;/div&gt;
&lt;/div&gt;</pre>
Обратите внимание, что общему заключающему элементу <code>&lt;div&gt;</code> предоставлен атрибут <code>id</code> со значением <code>infolist</code>. В этом элементе <code>&lt;div&gt;</code> находятся четыре комплекта тегов <code>&lt;h3&gt;</code> и теги <code>&lt;div&gt;</code>, содержащие изображение и нумерованный список.</li>
<li>Добавьте несколько встроенных правил CSS к приведенной выше разметке. Удалите правило стиля <code>.blue</code>, созданное для целей тестирования выше. Вместо него добавьте следующие правила. (Изменения <strong>выделены полужирным шрифтом</strong>.)
<pre class="examplecode">&lt;style type=&quot;text/css&quot;&gt;
<strong>ul {list-style-type: none}
img {padding-right: 20px; float:left}
#infolist {width:500px}</strong>
&lt;/style&gt;</pre>
<p class="tips">При вводе внутри тегов <code>&lt;style&gt;</code> используйте встроенную функцию автозавершения кода CSS среды IDE, вызываемую путем нажатия Ctrl-Space.</p>
</li>
<li>Сохраните файл (сочетание клавиш CTRL+S; &amp;#8984+S в Mac OS).</li>
<li>Теперь добавим изображения JPG, на которые содержатся ссылки в приведенном выше фрагменте кода нашего проекта. Получите каталог <code>pix</code> из <a href="#requiredSoftware">ресурсов проекта, загруженных ранее,</a> и скопируйте каталог целиком в папку проекта, разместив его на том же уровне, что и файл <code>index.html</code>. Через некоторый момент среда NetBeans автоматически обновит окно &quot;Проекты&quot;, чтобы отразить, что новый каталог добавлен в проект вручную.</li>
<li>Переключитесь на браузер и обновите страницу. <br> <img alt="Структурированный список отображается в браузере" class="margin-around b-all" src="../../../images_www/articles/73/web/js-toolkits-jquery/structured-list.png" title="Структурированный список отображается в браузере"> <br><br> Есть ряд проблем этого документа, которые будут решены. Во-первых, поиск нужного лица в списке сложнее, чем он должен быть: необходимо прокрутить страницу и визуально проверить множество информации, которая может быть ненужной. Список из четырех контактов может быть управляемым, но если их число вырастет, скажем, до 50, использование списка заметно усложнится. Во-вторых, документ визуально простой, и, скорей всего, не будет сочетаться с дизайном большинства веб-сайтов, в частности сайтом со множеством графики. Эти проблемы будут решены с помощью элемента оформления accordion jQuery вместе с темой jQuery UI по умолчанию.</li>
<li>Для создания эффекта accordion найдите на компьютере загруженный элемент оформления accordion. В загруженной папке найдите папку с именем &quot;<code>development-bundle</code>&quot;. В папке <code>development-bundle</code> разверните папку <code>ui</code> и найдите три следующие сценария:
<ul>
<li><code>jquery.ui.core.js</code></li>
<li><code>jquery.ui.widget.js</code></li>
<li><code>jquery.ui.accordion.js</code></li>
</ul>
<p class="tips">Версии сценариев наборов инструментов для разработки <em>полные</em>, что означает, что их код удобочитаем при просмотре в редакторе. Обычно для готовых к использованию приложений необходимы сжатые версии, чтобы сократить время загрузки.</p></li>
<li>Скопируйте (Ctrl-C; &amp;#8984-C в Mac) три сценария, вернитесь в среду IDE и вставьте их в <code>js</code> папку, <a href="#js">созданную ранее </a> в папке <code>jqproject</code>. <br><br> Для вставки можно использовать нажатие Ctrl-V (&#8984-V в Mac) или щелкните правой кнопкой мыши папку <code>js</code> и выберите 'Вставить'.
<p class="tips">В папке <code>development-bundle</code> &gt; <code>ui</code> также содержится файл с именем <code>jquery-ui-1.8.1.custom.js</code>. В этом файле три указанных выше сценария объединены в один. Можно также вставить этот файл в проект вместо трех отдельных сценариев.</p></li>
<li>Создайте ссылки на сценарии на странице <code>index.html</code>, введя три тега <code>&lt;script&gt;</code> со ссылками на эти новые файлы JavaScript. Теги <code>&lt;script&gt;</code> можно добавить сразу после тегов <code>&lt;script&gt;</code>, которые ссылаются на <code>jquery-1.4.2.js</code> базовой библиотеки jQuery. Используйте существующие теги <code>&lt;script&gt;</code> в качестве модели.</li>
<li>Удалите тестовый код, созданный внутри функции <code>(document).ready</code>. Он больше не требуется. <br><br> Теперь теги <code>&lt;head&gt;</code> вашего файла должны выглядеть следующим образом.
<pre class="examplecode">&lt;head&gt;
&lt;title&gt;jQuery Test Project&lt;/title&gt;
&lt;meta http-equiv=&quot;Content-Type&quot; content=&quot;text/html; charset=UTF-8&quot;&gt;
&lt;script type=&quot;text/javascript&quot; src=&quot;js/jquery-1.4.2.js&quot;&gt;&lt;/script&gt;
&lt;script type=&quot;text/javascript&quot; src=&quot;js/jquery.ui.core.js&quot;&gt;&lt;/script&gt;
&lt;script type=&quot;text/javascript&quot; src=&quot;js/jquery.ui.widget.js&quot;&gt;&lt;/script&gt;
&lt;script type=&quot;text/javascript&quot; src=&quot;js/jquery.ui.accordion.js&quot;&gt;&lt;/script&gt;
&lt;script type=&quot;text/javascript&quot;&gt;
$(document).ready(function(){
});
&lt;/script&gt;
&lt;/head&gt;</pre></li>
<li>Для того, чтобы статический список без стиля использовал поведение accordion, необходимо просто добавить одну строку кода jQuery. Введите эту строку в функцию <code>(document).ready</code>. (Изменения <strong>выделены полужирным шрифтом</strong>.)
<pre class="examplecode">$(document).ready(function(){
<strong>$(&quot;#infolist&quot;).accordion({
autoHeight: false
});</strong>
});</pre>
В этой строке кода <code>#infolist</code> — это селектор CSS, подключенный к уникальному элементу DOM, имеющему атрибут <code>id</code> со значением <code>infolist</code>; другими словами, наш список контактов. С помощью обычной точечной нотации JavaScript ('<code>.</code>') он подключается к инструкции jQuery, использующей метод <code>accordion()</code> для отображения этого элемента.
<p class="tips">В приведенном выше фрагменте кода также было указано &quot;<code>autoHeight: false</code>&quot;. Это препятствует установке элементом оформления accordion высоты каждой панели на основе самой высокой части содержимого в разметке. Дополнительные сведения см. в <a href="http://docs.jquery.com/UI/Accordion">документации accordion API</a>.</p></li>
<li>Сохраните файл (сочетание клавиш CTRL+S; &amp;#8984+S в Mac OS).</li>
<li>Вернитесь к веб-браузеру и обновите страницу. Щелкните одно из имен (не верхнее), чтобы просмотреть действие accordion. Элемент оформления accordion jQuery обрабатывает все сведения обработки DOM и реагирования на щелчки мыши пользователем. <br> <img alt="Список гармошки отображается в браузере" class="margin-around b-all" src="../../../images_www/articles/73/web/js-toolkits-jquery/accordion-list.png" title="Виджет &apos;гармошка&apos; обрабатывает щелчки мышью пользователей и создает звуковой эффект звука гармошки">
</li>
</ol>
<br>
<h2 id="usingcss">Использование темы по умолчанию jQuery для улучшения стиля</h2>
<p>Теперь в нашем проекте имеется нужное поведение, но оно довольно простое, и требует настройки внешнего вида. Решим эту проблему, включил тему &quot;<code>UI lightness</code>&quot; jQuery по умолчанию.</p>
<ol>
<li>Выберите папку на компьютере, в которую был загружен элемент оформления accordion. В загруженной папке разверните папку <code>development-bundle</code> &gt; <code>themes</code> &gt; <code>ui-lightness</code>.</li>
<li>В папке <code>ui-lightness</code> скопируйте (Ctrl-C; &amp;#8984-C в Mac) файл <code>jquery-ui-1.8.1.custom.css</code> и папку <code>images</code>, содержащую все изображения, необходимые для правильного отображения темы.</li>
<li>В среде IDE создайте новую папку в проекте с именем <code>css</code>. Эта папка будет содержать тему &quot;<code>UI lightness</code>&quot; для элемента оформления accordion. <br><br> Для этого щелкните правой кнопкой мыши узел проекта и выберите 'Создать' > 'Папка'. (Если 'Папка' не отображается в качестве параметра, нажмите кнопку 'Создать файл' ( <img alt="Кнопка &apos;Создать файл&apos;" src="../../../images_www/articles/73/web/js-toolkits-jquery/new-file-btn.png"> ) на панели инструментов IDE, а затем выберите 'Другие' > 'Папка' в мастере создания файлов). Присвойте папке имя <code>css</code> и поместите ее в тот же каталог, в котором находится файл <code>index.html</code>. <br><br> <span class="alert">Для проектов Java Web убедитесь, что папка <code>js</code> помещена в корневой веб-узел проекта. Для этого введите <code>web</code> в папке <strong>Родительская папка</strong>.</span></li>
<li>Вставьте два элемента непосредственно в новую папку <code>css</code>. Для этого щелкните правой кнопкой мыши узел папки <code>css</code> и выберите 'Вставить'. Папка проекта должна выглядеть следующим образом. <br>
<table class="margin-around">
<tr>
<td><h4>Проект PHP:</h4></td>
<td><h4>Веб-проект Java:</h4></td>
</tr>
<tr>
<td><img alt="Окно &apos;Проекты&apos; - тема jQuery, заданная по умолчанию, содержится в проекте" class="margin-around b-all" src="../../../images_www/articles/73/web/js-toolkits-jquery/proj-win-php.png" title="Проект содержит тему jQuery, заданную по умолчанию"></td>
<td><img alt="Окно &apos;Проекты&apos; - тема jQuery, заданная по умолчанию, содержится в проекте" class="margin-around b-all" src="../../../images_www/articles/73/web/js-toolkits-jquery/proj-win-java.png" title="Проект содержит тему jQuery, заданную по умолчанию"></td>
</tr>
</table>
</li>
<li>Ссылка на файл <code>jquery-ui-1.8.1.custom.css</code> на веб-странице <code>index.html</code>. Добавьте следующий тег <code>&lt;link&gt;</code> в заголовок страницы.
<pre class="examplecode">&lt;link rel=&quot;stylesheet&quot; href=&quot;css/jquery-ui-1.8.1.custom.css&quot; type=&quot;text/css&quot;&gt;</pre></li>
<li>Сохраните файл (сочетание клавиш CTRL+S; &amp;#8984+S в Mac OS).</li>
<li>Вернитесь в веб-браузер и обновите страницу. Обратите внимание, что теперь список отображается с темой jQuery по умолчанию, что является эстетическим улучшением по сравнению с простой версией без стиля. <br> <img alt="Список гармошки отображается в браузере с темой jQuery, заданной по умолчанию" class="margin-around b-all" src="../../../images_www/articles/73/web/js-toolkits-jquery/ui-lightness-theme.png" title="Тема jQuery, заданная по умолчанию, улучшает внешний вид виджета &apos;гармошка&apos;">
</li>
</ol>
<br>
<h2 id="summary">Заключение</h2>
<p>В этом учебном курсе вы узнали, как добавлять библиотеки jQuery к проекту, а также как создавать некоторые простые команды, используя синтаксис jQuery. Вы также узнали, как jQuery взаимодействует с моделью DOM с использованием переменных наподобие селекторов CSS для изменения внешнего вида и поведения элементов на веб-странице.</p>
<p>Наконец, были кратко рассмотрены возможности библиотеки пользовательского интерфейса jQuery путем применения элемента оформления accordion к простому списку контактов. После реализации эффекта accordion к списку была применена тема jQuery по умолчанию. Теперь вы должны оценить, как можно использовать jQuery для создания динамических веб-страниц, улучшая внешний вид и удобство использования.</p>
<div class="feedback-box">
<a href="/about/contact_form.html?to=3&amp;subject=Feedback: Using jQuery to Enhance the Appearance and Usability of a Web Page">Отправить отзыв по этому учебному курсу</a>
</div>
<br style="clear:both;">
<br>
<h2 id="seealso">Дополнительные сведения</h2>
<p>Дополнительные сведения о поддержке приложений HTML5 и JavaScript в IDE см. в следующих материалах на сайте <a href="https://netbeans.org/">www.netbeans.org</a>:</p>
<ul>
<li><a href="../webclient/html5-gettingstarted.html">Начало работы с приложениями HTML5</a>. Документ, который показывает, как установить расширение NetBeans Connector для Chrome, а также выполнить создание и запуск простого приложения HTML5.</li>
<li><a href="../webclient/html5-editing-css.html">Работа со страницами стилей CSS в приложениях HTML5</a> Документ, который продолжает работу с приложением, которое было создано в этом учебном курсе. Он показывает, как использовать некоторые из мастеров CSS и окон в IDE и как использовать режим проверки в браузере Chrome для визуального определения элементов в источниках проекта.</li>
<li><a href="../webclient/html5-js-support.html">Отладка и тестирование JavaScript в приложениях HTML5</a> Документ, который демонстрирует, как IDE предоставляет инструменты, которые могут использоваться в отладке и тестировании файлов сценариев JAVA в IDE.</li>
<li><a href="js-toolkits-dojo.html">Подключение дерева Dojo к списку ArrayList с помощью JSON</a>. Представлено введение в набор средств Dojo, а также шаги по взаимодействию с сервером базы данных с использованием Ajax и JSON.</li>
<li><a href="../../docs/php/ajax-quickstart.html">Введение в Ajax (PHP)</a>. Описывается создание простого приложения с использованием технологии PHP с одновременным объяснением базовой последовательности действий запроса Ajax.</li>
<li><a href="ajax-quickstart.html">Введение в Ajax (Java)</a>. Описана сборка простого приложения с использованием технологии сервлетов, в то же время показан внутренний процесс обработки запроса Ajax.</li>
</ul>
<p>Дополнительные сведения о jQuery доступны в официальной документации:</p>
<ul>
<li>Официальная домашняя страница: <a href="http://jquery.com">http://jquery.com</a></li>
<li>Домашняя страница UI: <a href="http://jqueryui.com/">http://jqueryui.com/</a></li>
<li>Учебные курсы: <a href="http://docs.jquery.com/Tutorials">http://docs.jquery.com/Tutorials</a></li>
<li>Главная страница документации: <a href="http://docs.jquery.com/Main_Page">http://docs.jquery.com/Main_Page</a></li>
<li>Демонстрации интерфейса пользователя и документация: <a href="http://jqueryui.com/demos/">http://jqueryui.com/demos/</a></li>
</ul>
<br>
</body>
</html>