| <!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 改善 Web 页的外观和可用性 - 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 改善 Web 页的外观和可用性</h1> |
| |
| <p><a href="http://jquery.com/">jQuery</a> 是一个小型的 JavaScript 库，它允许程序员方便快速地改进 Web 页面的外观和行为。jQuery 的语法简洁，以 CSS 选择器的形式使用变量，作为将 DOM 的任何目标元素（可以是一个唯一元素 (<code>id</code>)，或者元素集 (<code>class</code>) 或者所选择的任何元素）与效果联系起来的途径。因为 jQuery 是 JavaScript，能把它嵌入到 JavaScript 所应用到的任何项目标中。</p> |
| |
| <p>本教程说明了如何在 NetBeans 项目中开始使用 jQuery，以及如何在处理任何涉及 HTML、CSS 和 JavaScript 文件的前端项目时利用 IDE。首先，将向您演示如何调用代码完成函数和使用集成的 API 支持。还将向您介绍 jQuery 的关键概念，包括 <code>$(document).ready</code> 函数调用、类似 CSS 选择器的 jQuery 对象的使用以及 jQuery 效果和行为的链接方式。通过设置简单的 "contacts list" 示例文档并对其应用 <a href="http://jqueryui.com/demos/accordion/">jQuery 可折叠面板窗口部件</a>，您还将了解 <a href="http://jqueryui.com">jQuery UI 库</a>的优点。</p> |
| |
| <p class="tips">有关如何在 HTML5 应用程序中使用 jQuery 的示例，请参见 <a href="../webclient/html5-gettingstarted.html">HTML5 应用程序入门</a>教程。</p> |
| |
| |
| <h3>目录</h3> |
| <img alt="此页上的内容适用于 NetBeans IDE 7.2、7.3、7.4 和 8.0" class="stamp" src="../../../images_www/articles/73/netbeans-stamp-80-74-73.png" title="此页上的内容适用于 NetBeans IDE 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">将 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 和 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 Core 库</a></td> |
| <td class="tbltd1">1.4.2 或更高版本</td> |
| </tr> |
| <tr> |
| <td class="tbltd1"><a href="http://jqueryui.com/download">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">N/A</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 和 Java Web 版本。）</li> |
| |
| <li>如果您计划使用 Java 项目，则应考虑为开发环境配置服务器。GlassFish Server 包含在 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>首先，创建一个新项目。选择 "File"（文件）> "New Project"（新建项目）（Ctrl-Shift-N 组合键；在 Mac 上为 ⌘-Shift-N 组合键）。</li> |
| |
| <li>如果要使用 PHP 项目，请选择 <strong>PHP</strong> 类别，然后选择 <strong>PHP Application</strong>（PHP 应用程序）。<br><br> 如果要使用 Java Web 项目，请选择 <strong>Java Web</strong> 类别，然后选择 <strong>Web Application</strong>（Web 应用程序）。</li> |
| |
| <li>单击 "Next"（下一步）并将项目命名为 <code>jqproject</code>。还要指定计算机中要用于保存项目的目录。单击 "Next"（下一步）。</li> |
| |
| <li>在步骤 3 中，就本教程而言，请接受向导中提供的默认设置。 <br><br> |
| <p><strong class="notes">注：</strong>如果您是初次创建 PHP 项目并且需要帮助，请参见 <a href="../../trails/php.html">PHP 学习教程</a>中的“为 PHP 开发配置环境”。</p></li> |
| |
| <li>单击 <strong>Finish</strong>（完成），以完成向导并创建新项目。<code>jqproject</code> 将在 "Projects"（项目）窗口中打开，并在编辑器中打开项目欢迎页。</li> |
| |
| <li>创建一个纯 HTML 文件，在本教程的剩余部分中，可以使用该文件。由于将要添加的 jQuery 代码不需要与后端服务器进行任何通信，因此只需在浏览器中运行该 HTML 文件便可查看结果。 |
| |
| <p>右键单击项目节点并选择 "New"（新建）> "HTML file"（HTML 文件）（Ctrl-N 组合键）。</p></li> |
| |
| <li>将文件命名为 <code>index</code>，然后单击 <strong>Finish</strong>（完成）。在 "Projects"（项目）窗口中，注意项目中已列出新的 <code>index.html</code> 文件，且在编辑器中打开该文件。</li> |
| |
| <li>在浏览器中查看欢迎页的外观。要执行此操作，请右键单击 "Projects"（项目）窗口中的 <code>index.html</code> 节点并选择 "View"（查看）。（还可以在编辑器中从文件的右键单击菜单中选择 "View"（查看）。）将在浏览器窗口中显示该页。 <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>在 NetBeans 编辑器的 <code>index.html</code> 文件中，在 <code><title></code> 标记之间键入 <code>jQuery Test Project</code>，并在页面的 <code><head></code> 标记内创建一对 <code><style></code> 标记。（更改内容以<strong>粗体</strong>显示。） |
| |
| <pre class="examplecode"> |
| <html> |
| <head> |
| <title><strong>jQuery Test Project</strong></title> |
| <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> |
| <strong><style type="text/css"> |
| |
| </style></strong> |
| </head> |
| <body> |
| TODO write content |
| </body> |
| </html></pre></li> |
| |
| <li>配置项目，以便在部署和运行应用程序时将 <code>index.html</code> 文件显示为欢迎文件。要执行此操作，请右键单击 "Projects"（项目）窗口中的 <code>jqproject</code> 节点，然后选择 "Properties"（属性）。 |
| |
| <ul> |
| <li><strong>PHP 项目：</strong>选择 <strong>Run Configuration</strong>（运行配置）类别，然后在 <strong>Index File</strong>（索引文件）字段中键入 <code>index.html</code>。</li> |
| |
| <li><strong>Java Web 项目：</strong>选择 <strong>Run</strong>（运行）类别，然后在 <strong>Relative URL</strong>（相对 URL）字段中键入 <code>index.html</code>。</li> |
| </ul></li> |
| |
| <li>单击 "OK"（确定）关闭 "Project Properties"（项目属性）窗口并保存更改。</li> |
| |
| <li>在此阶段，您可以删除随项目创建的原始索引文件。在 PHP 项目中，该文件为 <code>index.php</code> 文件；在 Java Web 项目中，该文件为 <code>index.jsp</code> 文件。<br><br> 要删除该文件，请在 "Projects"（项目）窗口中右键单击文件，然后选择 "Delete"（删除）。在显示的确认对话框中，单击 <strong>Yes</strong>（是）。</li> |
| </ol> |
| |
| |
| <br> |
| <h2 id="addingjquery">将 jQuery 库添加到项目中</h2> |
| |
| <p>在开始使用 jQuery 之前，我们必须将 jQuery 库添加到项目中。如果尚未执行此操作，请从 <a href="http://jquery.com/">http://jquery.com/</a> 中下载 jQuery 库。</p> |
| |
| <p class="tips">在下载之前选择未压缩的版本，即 "Development"。使用未压缩版本将允许您在编辑器中检查 JavaScript 代码并辅助任何调试过程。</p> |
| |
| <p>要将 jQuery 库添加到 NetBeans 项目中，只需从计算机上的相应位置复制库文件夹，然后在 IDE 的 "Projects"（项目）窗口中将其直接粘贴到项目中。下面是详细信息。</p> |
| |
| <ol> |
| <li id="js">在 IDE 中，创建一个名为 <code>js</code> 的文件夹并将其添加到项目中。为此，请单击 IDE 工具栏中的 "New File"（新建文件）(<img alt=""New File"（新建文件）按钮" src="../../../images_www/articles/73/web/js-toolkits-jquery/new-file-btn.png">) 按钮。（也可以按 Ctrl-N 组合键；在 Mac 上按 ⌘-N 组合键。）</li> |
| |
| <li>选择 <strong>Other</strong>（其他）类别，然后选择 <strong>Folder</strong>（文件夹）。</li> |
| |
| <li>将该文件夹命名为 <code>js</code>。<br><br> <span class="alert">对于 Java Web 项目，确保将 <code>js</code> 文件夹放在项目的 Web 根中。为此，请在 <strong>Parent Folder</strong>（父文件夹）字段中输入 <code>web</code>。</span></li> |
| |
| <li>单击 <strong>Finish</strong>（完成）退出向导。</li> |
| |
| <li>查找下载到计算机中的 jQuery 库。到目前为止，最新库版本为 1.4.2，因此文件通常命名为 <code>jquery-1.4.2.js</code>。将文件复制到剪贴板（Ctrl-C 组合键；在 Mac 上为 ⌘-C 组合键）。</li> |
| |
| <li>将库文件粘贴到新的 <code>js</code> 文件夹中。为此，请右键单击 <code>js</code> 并选择 "Paste"（粘贴）（Ctrl-V 组合键；在 Mac 上为 ⌘-V 组合键）。<code>jquery-1.4.2.js</code> 文件节点将出现在该文件夹中。 <br> |
| <table class="margin-around"> |
| <tr> |
| <td><h4>PHP 项目：</h4></td> |
| <td><h4>Java Web 项目：</h4></td> |
| </tr> |
| <tr> |
| <td><img alt="IDE 的 "Projects"（项目）窗口中显示的 jQuery 库" class="margin-around b-all" src="../../../images_www/articles/73/web/js-toolkits-jquery/jquery-lib-php.png" title="将 jQuery 库直接粘贴到您的项目"></td> |
| |
| <td><img alt="IDE 的 "Projects"（项目）窗口中显示的 jQuery 库" 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>在编辑器中，从 <code>index.html</code> 文件中引用 jQuery 库。为此，请添加一对 <code><script></code> 标记并使用 <code>src</code> 属性指向库位置。（更改内容以<strong>粗体</strong>显示。） |
| |
| <pre class="examplecode"><html> |
| <head> |
| <title>jQuery Test Project</title> |
| <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> |
| <strong><script type="text/javascript" src="js/jquery-1.4.2.js"></script></strong> |
| |
| <style type="text/css"> |
| |
| </style> |
| </head> |
| ...</pre></li> |
| |
| <li>保存文件（Ctrl-S；在 Mac 上为 ⌘-S）。</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><h1></code> 元素。删除 "<code>TODO write content</code>" 注释并在 <code><body></code> 标记之间输入以下内容： |
| |
| <pre class="examplecode"><h1>Test.</h1></pre></li> |
| |
| <li>现在我们将创建一个 CSS 类，当应用该类时使元素出现蓝色。在文档 <code><head></code> 的 <code><style></code> 标记间输入以下内容： |
| |
| <pre class="examplecode">.blue { color: blue; }</pre></li> |
| |
| <li>下一步，我们将建立一个容纳 jQuery 命令的地方。向文档的 <code><head></code> 中添加一组新的 <code><script></code> 标记（例如，在链接到 jQuery 库的 <code><script></code> 标记之后）。（更改内容以<strong>粗体</strong>显示。） |
| |
| <pre class="examplecode"><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> |
| |
| <strong><script type="text/javascript"> |
| |
| </script></strong> |
| |
| <style type="text/css"> |
| .blue { color: blue; } |
| </style> |
| </head> |
| ...</pre> |
| |
| <p class="tips">通过在编辑器中单击右键并选择 "Format"（格式化代码）可以清理代码。</p> |
| |
| 我们将要添加的 jQuery 指令必须在浏览器加载所有 DOM 元素之后才能执行。这点很重要，因为 jQuery 行为与 DOM 元素连接在一起，jQuery 必须可以使用这些元素，以便得到预期结果。jQuery 通过其内置的 <code>(document).ready</code> 函数帮助实现此目的，该函数在 jQuery 对象之后，由 <code>$</code> 表示。</li> |
| |
| <li>在刚创建的脚本标记间输入以下结构： |
| |
| <pre class="examplecode">$(document).ready(function(){ |
| |
| });</pre> |
| |
| <p class="tips">还可以使用此函数的缩写版本：</p> |
| |
| <pre class="examplecode">$(function(){ |
| |
| });</pre> |
| |
| jQuery 指令采用 JavaScript 方法的形式，通过一个可选的对象字面值来表示参数数组，且必须置于 <code>(document).ready</code> 函数内的花括号 <code>{}</code> 之间，从而只在合适的时间执行，也就是在 DOM 完全加载后。<br><br> 在此阶段，<code>index.html</code> 文件应如下所示： |
| |
| <pre class="examplecode"><!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></pre></li> |
| |
| <li>为了演示 jQuery 语法的原理，我们将尝试一些简单操作。将 jQuery 指令添加到页面中，单击 "Test" 时，该指令使该词变为蓝色。为实现此功能，我们希望 jQuery 在接收到鼠标单击事件后将 CSS 类 <code>.blue</code> 添加到 DOM 的 <code><h1></code> 元素中。<br><br> 在 <code>(document).ready</code> 函数的花括号 <code>{}</code> 内输入下面的代码： |
| |
| <pre class="examplecode">$("h1").click(function(){ |
| $(this).addClass("blue"); |
| });</pre></li> |
| |
| <li>保存文档（Ctrl-S 组合键；在 Mac 上为 ⌘-S 组合键），然后在编辑器中单击右键并选择 "View"（查看），将其加载到 Web 浏览器中。测试其运行情况。当单击 "Test" 单词，该词将变成蓝色。<br> <img alt="浏览器中的蓝色文本" class="margin-around b-all" src="../../../images_www/articles/73/web/js-toolkits-jquery/blue-test.png" title="单击文本时文本将变为蓝色"> <br><br> 在本例中，当与 CSS 选择器 "<code>h1</code>" 相匹配的元素出现时，可使用 jQuery <code>click()</code> 函数调用 jQuery <code>addClass()</code> 函数。<code>$(this)</code> 指向调用元素。如果想在页面中添加更多的 <code><h1></code>，可以采用同一套规则下的相同行为，各行为单独与 jQuery 进行交互。（您可以自己尝试此练习）</li> |
| |
| <li>jQuery 的另一项重要特质是其函数可被简单链接起来，以创建更加复杂甚至是串行化的行为。为演示这一点，我们将为 <code>click()</code> 函数添加一条“慢 fadeOut”指令。在 <code>addClass</code> 函数后面添加一个 <code>fadeOut("slow")</code> jQuery 函数，如下所示： |
| |
| <pre class="examplecode">$(this).addClass("blue").fadeOut("slow");</pre> |
| |
| 完整的 jQuery 函数如下所示： |
| |
| <pre class="examplecode">$(document).ready(function(){ |
| $("h1").click(function(){ |
| $(this).addClass("blue").fadeOut("slow"); |
| }); |
| });</pre> |
| |
| <li>在浏览器中刷新页面，然后单击 "Test"。您将看到 "Test" 变蓝，然后淡出，并从页面中消失。（想再试一次，必须刷新页面。）</li> |
| </ol> |
| |
| <div class="indent"> |
| <div class="feedback-box float-left" style="width:700px"> |
| <h3>NetBeans 代码完成和 API 支持</h3> |
| |
| <p>只要在编辑器中键入内容，便可以通过按 Ctrl-空格键调用代码完成。IDE 会显示一个可供您选择的建议列表，以及一个定义所列项目、提供代码示例并显示目标浏览器支持的 API 文档窗口。</p> |
| |
| <img alt="编辑器中显示的代码完成和 API 文档窗口" class="margin-around b-all" src="../../../images_www/articles/73/web/js-toolkits-jquery/code-completion.png" title="按 Ctrl-空格键查看代码完成和 API 文档窗口"> |
| |
| <p>通过打开 IDE 的 JavaScript 选项窗口可为代码完成和 API 文档指定目标浏览器。选择 "Tools"（工具）> "Options"（选项）（在 Mac 上为 "NetBeans" > "Preferences"（首选项）），然后选择 "Miscellaneous"（其他）> "JavaScript"（JavaScript）。</p> |
| </div> |
| </div> |
| |
| <br style="clear:both;"> |
| |
| |
| <br> |
| <h2 id="addingaccordion">将 jQuery 可折叠面板窗口部件添加到项目中</h2> |
| |
| <p>通过使用包含在核心 jQuery 库中的 JavaScript 行为，我们创建了上面的简单测试。现在，我们通过使用基本 HTML 标记设置员工联系人列表来检查更真实的示例。然后，我们将 <a href="http://jqueryui.com/demos/accordion/">jQuery 可折叠面板窗口部件</a>应用于该联系人列表。</p> |
| |
| <p>可折叠面板窗口部件属于 <a href="http://jqueryui.com/">jQuery UI 库</a>的一部分。UI 库在核心库的基础上构建，提供了用于为 Web 页启用交互、窗口部件和效果的模块化方法。可使文件大小保持为最小值，并可以方便地从位于 <a href="http://jqueryui.com/download">http://jqueryui.com/download</a> 的 jQuery 下载界面中只选择所需组件。</p> |
| |
| <p>如果尚未执行此操作，请访问 <a href="http://jqueryui.com/download">http://jqueryui.com/download</a> 并下载可折叠面板导航窗口部件。请注意，在选择可折叠面板窗口部件时，会自动选择 UI 核心库和窗口部件工厂。还请注意，在下载页面中，默认情况下会选择 "<code>UI lightness</code>" 主题并将其包括在下载包中。在<a href="#usingcss">以下部分</a>中，会将此主题应用于联系人列表。</p> |
| |
| <ol> |
| <li>将以下代码粘到文档中代替 <code><h1>Test。</h1></code>。 |
| |
| <pre class="examplecode"><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></pre> |
| |
| 注意整个 <code><div></code> 闭合元素被赋予了一个值为 <code>infolist</code> 的 <code>id</code> 属性。在此 <code><div></code> 元素中，有四组包含图像和未排序列表的 <code><h3></code> 标记和 <code><div></code> 标记。</li> |
| |
| <li>向上面的标记中添加一些内联 CSS 规则。删除您为上面的测试创建的 <code>.blue</code> 样式规则。在其位置添加以下规则。（更改内容以<strong>粗体</strong>显示。） |
| |
| <pre class="examplecode"><style type="text/css"> |
| <strong>ul {list-style-type: none} |
| img {padding-right: 20px; float:left} |
| |
| #infolist {width:500px}</strong> |
| </style></pre> |
| |
| <p class="tips">在 <code><style></code> 标记内键入内容时，可以通过按 Ctrl-空格键利用 IDE 的内置 CSS 代码完成。</p> |
| </li> |
| |
| <li>保存文件（Ctrl-S；在 Mac 上为 ⌘-S）。</li> |
| |
| <li>现在，我们将向项目添加以前代码片段中涉及的 JPG 肖像。从<a href="#requiredSoftware">之前下载的项目资源</a>中检索 <code>pix</code> 目录，将整个目录复制到项目文件夹中，将其与 <code>index.html</code> 目录同级放置。稍后，NetBeans 将自动更新 "Projects"（项目）窗口，可以看到该项目中已经添加了一个新目录。</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 人（举例来说），使用列表将变得更加困难。其次，该文档看起来是简单的，不大可能很美观地插入大多数 Web 站点的设计，特别是有很强图形特征的设计。我们将通过组合使用 jQuery 可折叠面板窗口部件和 jQuery UI 的默认主题来解决这些问题。</li> |
| |
| <li>要生成可折叠面板效果，请导航至计算机上下载可折叠面板窗口部件的位置。在下载的文件夹中，您将发现一个名为 "<code>development-bundle</code>" 的文件夹。在 <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 组合键；在 Mac 上为 ⌘-C 组合键）这三个脚本，回到 IDE 中，将其粘贴到您之前在 <code>jqproject</code> 文件夹中<a href="#js">创建</a>的 <code>js</code> 文件夹。<br><br> 可以通过按 Ctrl-V 组合键（在 Mac 上为 ⌘-V 组合键）或右键单击 <code>js</code> 文件夹并选择 "Paste"（粘贴）来进行粘贴。 |
| |
| <p class="tips"><code>development-bundle</code> > <code>ui</code> 文件夹也包含一个名为 <code>jquery-ui-1.8.1.custom.js</code> 的文件。此文件将上面所列的三个脚本组合为一个脚本。也可以将此文件粘贴到项目中，以代替三个单独的脚本。</p></li> |
| |
| <li>通过输入三个链接到这些新 JavaScript 文件的 <code><script></code> 标记来引用 <code>index.html</code> 页面中的脚本。可在紧随引用核心 jQuery 库 <code>jquery-1.4.2.js</code> 的 <code><script></code> 标记之后的位置添加 <code><script></code> 标记。使用现有的 <code><script></code> 标记作为模型。</li> |
| |
| <li>删除我们在 <code>(document).ready</code> 函数中创建的测试代码。我们不再需要这些代码了。<br><br> 现在，文件的 <code><head></code> 标记应如下所示。 |
| |
| <pre class="examplecode"><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></pre></li> |
| |
| <li>让静态、无样式的列表接受折叠行为就和添加一行 jQuery 代码一样简单。将此行输入 <code>(document).ready</code> 函数中。（更改内容以<strong>粗体</strong>显示。） |
| |
| <pre class="examplecode">$(document).ready(function(){ |
| <strong>$("#infolist").accordion({ |
| autoHeight: false |
| });</strong> |
| });</pre> |
| |
| 在此行代码中，<code>#infolist</code> 是一个 CSS 选择器，连接到一个唯一的 DOM 元素中，该元素有一个值为 <code>infolist</code>（换言之，即联系列表）的 <code>id</code> 属性。 它使用典型的 JavaScript 点表示法 ("<code>.</code>") 连接到使用 <code>accordion()</code> 方法的 jQuery 指令，以显示此元素。 |
| |
| <p class="tips">您还在上面的代码片段中指定了 "<code>autoHeight: false</code>"。这样可以防止可折叠面板窗口部件根据标记内包含的最高内容部分设置每个面板的高度。有关详细信息，请参见<a href="http://docs.jquery.com/UI/Accordion">可折叠面板 API 文档</a>。</p></li> |
| |
| <li>保存文件（Ctrl-S；在 Mac 上为 ⌘-S）。</li> |
| |
| <li>返回 Web 浏览器并刷新。单击其中一个姓名（除了顶部第一个），查看实际的折叠效果。jQuery 可折叠面板窗口部件可处理有关处理 DOM 和响应用户鼠标单击的所有详细信息。 <br> <img alt="显示在浏览器中的可折叠面板列表" class="margin-around b-all" src="../../../images_www/articles/73/web/js-toolkits-jquery/accordion-list.png" title="可折叠面板窗口部件处理用户单击并生成可折叠面板效果"> |
| </li> |
| </ol> |
| |
| |
| <br> |
| <h2 id="usingcss">将 jQuery 的默认主题用于样式增强</h2> |
| |
| <p>我们的项目现有具有了我们想要的行为。现在，我们通过并入 jQuery 的默认 "<code>UI lightness</code>" 主题来解决此问题。</p> |
| |
| <ol> |
| <li>导航至计算机中下载可折叠面板窗口部件的位置。在下载的文件夹中，展开 <code>development-bundle</code> > <code>themes</code> > <code>ui-lightness</code> 文件夹。</li> |
| |
| <li>在 <code>ui-lightness</code> 文件夹中，复制（Ctrl-C 组合键；在 Mac 上为 ⌘-C 组合键）<code>jquery-ui-1.8.1.custom.css</code> 文件和 <code>images</code> 文件夹，其中包含正确呈现主题所需的所有图像。</li> |
| |
| <li>在 IDE 中，在名为 <code>css</code> 的项目中创建一个新文件夹。此文件夹将包含可折叠面板窗口部件的 "<code>UI lightness</code>" 主题。<br><br> 为此，请右键单击项目节点并选择 "New"（新建）> "Folder"（文件夹）。（如果文件夹未显示为选项，请单击 IDE 工具栏中的 "New File"（新建文件）(<img alt=""New File"（新建文件）按钮" src="../../../images_www/articles/73/web/js-toolkits-jquery/new-file-btn.png">) 按钮，然后在新建文件向导中选择 "Other"（其他）> "Folder"（文件夹）。）将该文件夹命名为 <code>css</code> 并将其与 <code>index.html</code> 文件放在同一目录中。<br><br> <span class="alert">对于 Java Web 项目，请确保将 <code>css</code> 文件夹放在项目的 Web 根中。为此，请在 <strong>Parent Folder</strong>（父文件夹）字段中输入 <code>web</code>。</span></li> |
| |
| <li>将这两项直接粘贴到新的 <code>css</code> 文件夹中。为此，请右键单击 <code>css</code> 文件夹节点并选择 "Paste"（粘贴）。项目文件夹应如下所示。 <br> |
| <table class="margin-around"> |
| <tr> |
| <td><h4>PHP 项目：</h4></td> |
| <td><h4>Java Web 项目：</h4></td> |
| </tr> |
| <tr> |
| <td><img alt=""Projects"（项目）窗口 - 包含在项目中的 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=""Projects"（项目）窗口 - 包含在项目中的 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>index.html</code> Web 页中引用 <code>jquery-ui-1.8.1.custom.css</code> 文件。在页的头中添加以下 <code><link></code> 标记。 |
| |
| <pre class="examplecode"><link rel="stylesheet" href="css/jquery-ui-1.8.1.custom.css" type="text/css"></pre></li> |
| |
| <li>保存文件（Ctrl-S；在 Mac 上为 ⌘-S）。</li> |
| |
| <li>返回到 Web 浏览器并刷新页面。请注意，现在使用 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 默认主题增强可折叠面板窗口部件的外观"> |
| </li> |
| </ol> |
| |
| |
| <br> |
| <h2 id="summary">小结</h2> |
| |
| <p>在本教程中，您了解了如何在项目中添加 jQuery 库以及如何使用 jQuery 语法编写一些基本指令。您还了解了 jQuery 如何使用和 CSS 选择器类似的变量与 DOM（文档对象模型）进行交互，从而影响 Web 页面中元素的外观和行为。</p> |
| |
| <p>最后，通过将可折叠面板窗口部件应用于简单的联系人列表，您简要地了解了 jQuery UI 库的功能。在实现可折叠面板效果后，您将 jQuery 的默认样式主题应用于该列表。现在，您应该能更好地体会到如何使用 jQuery 来创建动态 Web 页，并改进整体外观和可用性。</p> |
| |
| <div class="feedback-box"> |
| <a href="/about/contact_form.html?to=3&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>有关 <a href="https://netbeans.org/">netbeans.org</a> 上的 IDE 中 HTML5 应用程序和 JavaScript 支持的详细信息，请参见以下资源：</p> |
| |
| <ul> |
| <li><a href="../webclient/html5-gettingstarted.html">HTML5 应用程序入门</a>。此文档说明如何安装用于 Chrome 的 NetBeans Connector 扩展以及创建和运行简单 HTML5 应用程序。</li> |
| <li><a href="../webclient/html5-editing-css.html">在 HTML5 应用程序中使用 CSS 样式表</a>。该文档继续使用在本教程中创建的应用程序，说明如何在 IDE 中使用部分 CSS 向导和窗口，以及如何在 Chrome 浏览器中使用检测模式以直观地在项目源代码中查找元素。</li> |
| <li><a href="../webclient/html5-js-support.html">在 HTML5 应用程序中调试和测试 JavaScript</a>。此文档说明 IDE 如何提供工具来帮助您在 IDE 中调试和测试 JavaScript 文件。</li> |
| <li><a href="js-toolkits-dojo.html">使用 JSON 将 Dojo 树连接至 ArrayList</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>。介绍如何使用 Servlet 技术构建简单的应用程序，同时讲解了 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>UI 演示和文档：<a href="http://jqueryui.com/demos/">http://jqueryui.com/demos/</a></li> |
| </ul> |
| |
| <br> |
| |
| </body> |
| </html> |
