| <!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>Using jQuery to Enhance the Appearance and Usability of a Web Page - NetBeans Tutorial</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>Using jQuery to Enhance the Appearance and Usability of a Web Page</h1> |
| |
| <p><a href="http://jquery.com/">jQuery</a> is a light-weight JavaScript library that |
| allows programmers to easily and quickly add enhancements to the appearance and |
| behaviors of their web pages. jQuery's syntax is concise and makes use of variables |
| in the form of CSS selectors as a way of connecting an effect with any targeted |
| element of the DOM, be it a unique element (<code>id</code>), or set of elements |
| (<code>class</code>), or arbitrarily chosen. Because jQuery is JavaScript, it can |
| be embedded in any project where JavaScript can be applied.</p> |
| |
| <p>This tutorial demonstrates how to get started using jQuery in NetBeans projects, |
| and take advantage of the IDE when working in any front-end project involving |
| HTML, CSS, and JavaScript files. Primarily, you'll be shown how to invoke code |
| completion on functions, and use the integrated API support. You'll also be |
| introduced to key jQuery concepts, including the <code>$(document).ready</code> |
| function call, the use of CSS-selector-like jQuery objects, and the chaining |
| together of jQuery effects and behaviors. You'll also explore the benefits of |
| the <a href="http://jqueryui.com">jQuery UI libary</a> by setting up a simple |
| 'contacts list' example document, and applying the |
| <a href="http://jqueryui.com/demos/accordion/">jQuery accordion widget</a> to it.</p> |
| |
| <p class="tips">For an example of how to use jQuery in an HTML5 application, see the |
| <a href="../webclient/html5-gettingstarted.html">Getting Started with HTML5 Applications</a> tutorial.</p> |
| |
| |
| <h3>Contents</h3> |
| <img src="../../../images_www/articles/73/netbeans-stamp-80-74-73.png" class="stamp" alt="Content on this page applies to NetBeans IDE 7.2, 7.3, 7.4 and 8.0" title="Content on this page applies to the NetBeans IDE 7.2, 7.3, 7.4 and 8.0" > |
| |
| <ul class="toc"> |
| <li><a href="#settingup">Setting Up a NetBeans Project</a></li> |
| <li><a href="#addingjquery">Adding the jQuery Library to the Project</a></li> |
| <li><a href="#gettingacquainted">Getting Acquainted with jQuery</a></li> |
| <li><a href="#addingaccordion">Adding the jQuery Accordion Widget to the Project</a></li> |
| <li><a href="#usingcss">Using jQuery's Default Theme for Style Enhancement</a></li> |
| <li><a href="#summary">Summary</a></li> |
| <li><a href="#seealso">See Also</a></li> |
| </ul> |
| |
| <h4>To complete this tutorial, you will need the following resources.</h4> |
| |
| <table id="requiredSoftware"> |
| <tbody> |
| <tr> |
| <th class="tblheader" scope="col">Software or Resource</th> |
| <th class="tblheader" scope="col">Version Required</th> |
| </tr> |
| <tr> |
| <td class="tbltd1"><a href="https://netbeans.org/downloads/index.html">NetBeans IDE, Java EE or HTML5 & PHP bundle</a></td> |
| <td class="tbltd1">7.0 or later</td> |
| </tr> |
| <tr> |
| <td class="tbltd1"><a href="http://www.oracle.com/technetwork/java/javase/downloads/index.html">Java Development Kit (JDK)</a></td> |
| <td class="tbltd1">7 or 8</td> |
| </tr> |
| <tr> |
| <td class="tbltd1"><a href="http://docs.jquery.com/Downloading_jQuery#Current_Release">jQuery Core Library</a></td> |
| <td class="tbltd1">1.4.2 or later</td> |
| </tr> |
| <tr> |
| <td class="tbltd1"><a href="http://jqueryui.com/download">jQuery Accordion Widget</a></td> |
| <td class="tbltd1">1.8.1 or later</td> |
| </tr> |
| <tr> |
| <td class="tbltd1"><a href="https://netbeans.org/projects/samples/downloads/download/Samples%252FJavaScript%252Fpix.zip">Project Resources</a></td> |
| <td class="tbltd1">n/a</td> |
| </tr> |
| </tbody> |
| </table> |
| |
| <p><strong class="notes">Notes:</strong></p> |
| |
| <ul> |
| <li>The <a href="https://netbeans.org/projects/samples/downloads/download/Samples%252FJavaScript%252FjQueryProjectFiles.zip">project |
| resources</a> contain JPG files needed to complete this tutorial.</li> |
| |
| <li>If you need to compare your project with a working solution, you can |
| <a href="https://netbeans.org/projects/samples/downloads/download/Samples%252FJavaScript%252FjQueryProjectFiles.zip">download |
| the sample project</a>. (Includes both PHP and Java Web versions.)</li> |
| |
| <li>If plan to work in a Java project, you should consider configuring a server for your |
| development environment. The GlassFish server is included with the IDE's Java download, |
| and is configured to run from NetBeans by default.</li> |
| |
| <li>If you plan to work in a PHP project, you'll need to download PHP and configure your |
| environment. For more information, see the <a href="../../trails/php.html">PHP Learning |
| Trail</a>.</li> |
| |
| <li>This document assumes you have some basic knowledge of, or programming experience with |
| HTML, CSS, and JavaScript.</li> |
| </ul> |
| |
| |
| <br> |
| <h2 id="settingup">Setting Up a NetBeans Project</h2> |
| |
| <ol> |
| <li>Start by creating a new project. Select File > New Project (Ctrl-Shift-N; ⌘-Shift-N on Mac).</li> |
| |
| <li>If you want to work in a PHP project, select the <strong>PHP</strong> category, |
| then select or <strong>PHP Application</strong>. |
| |
| <br><br> |
| If you want to work in a Java Web project, select the <strong>Java Web</strong> |
| category, then select <strong>Web Application</strong>.</li> |
| |
| <li>Click Next and name the project <code>jqproject</code>. Also, specify the |
| directory on your computer where you want save the project. Click Next.</li> |
| |
| <li>In Step 3, for purposes of this tutorial, accept default settings provided in |
| the wizard. |
| |
| <br><br> |
| <p><strong class="notes">Note:</strong> If you are creating a PHP project for |
| the first time and need help, see Configuring Your Environment for PHP |
| Development in the <a href="../../trails/php.html">PHP |
| Learning Trail</a>.</p></li> |
| |
| <li>Click <strong>Finish</strong> to complete the wizard and create a new project. |
| The <code>jqproject</code> opens in the Projects window, and the project |
| welcome file opens in the editor.</li> |
| |
| <li>Create a plain HTML file, which you can work in for the remainder of this |
| tutorial. Because the jQuery code that we'll be adding does not require any |
| communication with a back-end server, we'll just run the HTML file in a |
| browser to view results. |
| |
| <p>Right-click the project node and choose New > HTML file (Ctrl-N).</p></li> |
| |
| <li>Name the file <code>index</code>, then click <strong>Finish</strong>. In the |
| Projects window, note that the new <code>index.html</code> file is listed |
| within the project, and that the file opens in the editor.</li> |
| |
| <li>Take a look at what the welcome page looks like in a browser. To do so, |
| right-click the <code>index.html</code> node in the Projects window and |
| choose View. (You can also choose View from the file's right-click menu |
| in the editor.) The page displays in a browser window. |
| |
| <br> |
| <img src="../../../images_www/articles/73/web/js-toolkits-jquery/browser-test.png" |
| class="margin-around b-all" alt="index.html displayed in browser" |
| title="View the empty HTML template in a browser window"></li> |
| |
| <li>In the <code>index.html</code> file in the NetBeans editor, type in |
| <code>jQuery Test Project</code> between the <code><title></code> |
| tags, and create a pair of <code><style></code> tags within the page's |
| <code><head></code> tags. (Changes in <strong>bold</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>Configure your project so that the <code>index.html</code> file displays |
| as the welcome file when the application is deployed and run. To do so, |
| right-click the <code>jqproject</code> node in the Projects window and |
| choose Properties. |
| |
| <ul> |
| <li><strong>PHP projects:</strong> Select the <strong>Run Configuration</strong> |
| category, then type in <code>index.html</code> in the <strong>Index File</strong> |
| field.</li> |
| |
| <li><strong>Java Web projects:</strong> Select the <strong>Run</strong> category, |
| then type in <code>index.html</code> in the <strong>Relative URL</strong> field.</li> |
| </ul></li> |
| |
| <li>Click OK to close the Project Properties window and save changes.</li> |
| |
| <li>At this stage, you can delete the original index file that was created |
| with your project. In PHP projects, this is the <code>index.php</code> |
| file; in Java Web projects, this is the <code>index.jsp</code> file. |
| |
| <br><br> |
| To delete the file, right-click the file in the Projects window and choose Delete. |
| In the confirmation dialog that displays, click <strong>Yes</strong>.</li> |
| </ol> |
| |
| |
| <br> |
| <h2 id="addingjquery">Adding the jQuery Library to the Project</h2> |
| |
| <p>Before we can begin working with jQuery, we must add the jQuery library to |
| the project. If you haven't done so already, download the jQuery library |
| from <a href="http://jquery.com/">http://jquery.com/</a>.</p> |
| |
| <p class="tips">Choose the uncompressed version, i.e., 'Development', before |
| downloading. Using the uncompressed version will allow you to examine the |
| JavaScript code in the editor, and aid in any debugging processes.</p> |
| |
| <p>To add the jQuery library to your NetBeans project, simply copy the library |
| folder from its location on your computer, and paste it directly into your |
| project in the IDE's Projects window. Details follow.</p> |
| |
| <ol> |
| <li id="js">In the IDE, create a folder named <code>js</code>, and add it |
| to your project. To do so, click the New File ( |
| <img src="../../../images_www/articles/73/web/js-toolkits-jquery/new-file-btn.png" |
| alt="New File button"> ) button in the IDE's toolbar. (Alternatively, |
| press Ctrl-N; ⌘-N on Mac.)</li> |
| |
| <li>Select the <strong>Other</strong> category, then select <strong>Folder</strong>.</li> |
| |
| <li>Name the folder <code>js</code>. |
| |
| <br><br> |
| <span class="alert">For Java Web projects, ensure that you place the <code>js</code> |
| folder in the project's web root. To do so, enter <code>web</code> in the |
| <strong>Parent Folder</strong> field.</span></li> |
| |
| <li>Click <strong>Finish</strong> to exit the wizard.</li> |
| |
| <li>Locate the jQuery library that you downloaded onto your computer. To date, |
| the current library version is 1.4.2, so the file is typically named |
| <code>jquery-1.4.2.js</code>. Copy the file to your clipboard (Ctrl-C; ⌘-C |
| on Mac).</li> |
| |
| <li>Paste the library file into the new <code>js</code> folder. To do so, right-click |
| the <code>js</code> and choose Paste (Ctrl-V; ⌘-V on Mac). The <code>jquery-1.4.2.js</code> |
| file node appears within the folder. |
| |
| <br> |
| <table class="margin-around"> |
| <tr> |
| <td><h4>PHP project:</h4></td> |
| <td><h4>Java Web project:</h4></td> |
| </tr> |
| <tr> |
| <td><img src="../../../images_www/articles/73/web/js-toolkits-jquery/jquery-lib-php.png" |
| class="margin-around b-all" alt="jQuery library displayed in IDE's Projects window" |
| title="Paste the jQuery library directly into your project"></td> |
| |
| <td><img src="../../../images_www/articles/73/web/js-toolkits-jquery/jquery-lib-java.png" |
| class="margin-around b-all" alt="jQuery library displayed in IDE's Projects window" |
| title="Paste the jQuery library directly into your project"></td> |
| </tr> |
| </table> |
| </li> |
| |
| <li>In the editor, reference the jQuery library from the <code>index.html</code> |
| file. To do so, add a pair of <code><script></code> tags and use the |
| <code>src</code> attribute to point to the library location. (Changes in |
| <strong>bold</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>Save the file (Ctrl-S; ⌘-S on Mac).</li> |
| </ol> |
| |
| <p>The jQuery library is now included in the <code>jqproject</code> project, and |
| referenced from our <code>index.html</code> file. We can begin adding jQuery |
| functionality to the page.</p> |
| |
| |
| <br> |
| <h2 id="gettingacquainted">Getting Acquainted with jQuery</h2> |
| |
| <p>jQuery works by connecting dynamically-applied JavaScript attributes and behaviors |
| to elements of the DOM (Document Object Model). Let's add an element to the DOM |
| and try to affect its properties. We'll create a heading that changes color |
| from black to blue when we click on it.</p> |
| |
| <ol> |
| <li>We start by creating the heading, structurally an <code><h1></code> |
| element. Remove the '<code>TODO write content</code>' comment and enter the |
| following between the <code><body></code> tags: |
| |
| <pre class="examplecode"><h1>Test.</h1></pre></li> |
| |
| <li>Now we'll create a CSS class that makes an element appear blue when it is |
| applied. Enter the following between the <code><style></code> tags in |
| the <code><head></code> of the document: |
| |
| <pre class="examplecode">.blue { color: blue; }</pre></li> |
| |
| <li>Next we'll set up a place to put our jQuery commands. Add a new set of |
| <code><script></code> tags to the <code><head></code> of the |
| document, e.g., after the <code><script></code> tags linking to the |
| jQuery library. (Changes in <strong>bold</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">You can tidy up your code by right-clicking in the editor and |
| choosing Format.</p> |
| |
| The jQuery instructions that we will add must be executed only after all of |
| the elements of the DOM have been loaded by the browser. This is important |
| because jQuery behaviors connect to elements of the DOM, and these elements |
| must be available to jQuery in order to get the results we expect. jQuery takes |
| care of this for us through its built-in <code>(document).ready</code> |
| function, which follows the jQuery object, represented by <code>$</code>.</li> |
| |
| <li>Enter this construction between the script tags you just created: |
| |
| <pre class="examplecode">$(document).ready(function(){ |
| |
| });</pre> |
| |
| <p class="tips">There is also an abbreviated version of this function that can |
| alternately be used:</p> |
| |
| <pre class="examplecode">$(function(){ |
| |
| });</pre> |
| |
| Our instructions for jQuery take the form of a JavaScript method, with an |
| optional object literal representing an array of parameters, and must be |
| placed between the curly braces <code>{}</code> inside the <code>(document).ready</code> |
| function in order to execute only at the proper time, which is after the |
| DOM has completely loaded. |
| |
| <br><br> |
| At this stage, the <code>index.html</code> file should look as follows: |
| |
| <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>To demonstrate how jQuery syntax works, let's try something simple. We'll |
| add jQuery instructions to our page that will make the word 'Test' turn blue |
| when we click on it. To accomplish this, we want jQuery to add the CSS class |
| <code>.blue</code> to the <code><h1></code> element of the DOM when it |
| receives a mouse click. |
| |
| <br><br> |
| Enter the following code inside the <code>(document).ready</code> function, |
| between the braces <code>{}</code>: |
| |
| <pre class="examplecode">$("h1").click(function(){ |
| $(this).addClass("blue"); |
| });</pre></li> |
| |
| <li>Save the document (Ctrl-S; ⌘-S on Mac), then right-click in the editor and choose View |
| to load it in your web browser. Test it to see if it works. When you click |
| on the word 'Test', it should turn blue. |
| |
| <br> |
| <img src="../../../images_www/articles/73/web/js-toolkits-jquery/blue-test.png" |
| class="margin-around b-all" alt="Blue text in browser" |
| title="Text turns blue when clicked upon"> |
| |
| <br><br> |
| This example uses the jQuery <code>click()</code> function to invoke the jQuery |
| <code>addClass()</code> function when an element matching the CSS selector |
| "<code>h1</code>" is encountered. The <code>$(this)</code> refers |
| back to the calling element. If we were to add more <code><h1></code>s |
| to our page, the same behavior will be applied to all of them with this single |
| set of rules, and each will interact with jQuery independently. (You can try |
| this yourself as a quick exercise.)</li> |
| |
| <li>Another important quality of jQuery is that functions can be simply chained |
| together to create more complicated or even sequenced behaviors. To demonstrate |
| this let's add a jQuery instruction for a slow fadeOut to our <code>click()</code> |
| function. Place a <code>fadeOut("slow")</code> jQuery function after |
| the <code>addClass</code> function so that the line of code looks like this: |
| |
| <pre class="examplecode">$(this).addClass("blue").fadeOut("slow");</pre> |
| |
| The complete jQuery function should now look like this: |
| |
| <pre class="examplecode">$(document).ready(function(){ |
| $("h1").click(function(){ |
| $(this).addClass("blue").fadeOut("slow"); |
| }); |
| });</pre> |
| |
| <li>In the browser, refresh the page and then click 'Test.' You will see that it |
| turns blue, and then fades out, disappearing from the page. (To try it again, |
| you must refresh the page.)</li> |
| </ol> |
| |
| <div class="indent"> |
| <div class="feedback-box float-left" style="width:700px"> |
| <h3>NetBeans Code Completion and API Support</h3> |
| |
| <p>Whenever you type in the editor, you can invoke code-completion by pressing |
| Ctrl-Space. The IDE presents a list of suggestions which you can choose from, |
| as well as an API documentation window that defines the listed items, provides |
| code snippet examples, and shows target browser support.</p> |
| |
| <img src="../../../images_www/articles/73/web/js-toolkits-jquery/code-completion.png" |
| alt="Code completion and API documentation windows displayed in editor" |
| title="Press Ctrl-Space to view code completion and API documentation windows" |
| class="margin-around b-all"> |
| |
| <p>You can specify the target browsers for code completion and API documentation |
| by opening the IDE's JavaScript options window. Choose Tools > Options |
| (NetBeans > Preferences on Mac), then choose Miscellaneous > JavaScript.</p> |
| </div> |
| </div> |
| |
| <br style="clear:both;"> |
| |
| |
| <br> |
| <h2 id="addingaccordion">Adding the jQuery Accordion Widget to the Project</h2> |
| |
| <p>We created the simple test above by using JavaScript behaviors that are included in |
| the core jQuery library. Now let's examine a more real-world example by setting up |
| an employee contact list using basic HTML markup. We'll then apply the |
| <a href="http://jqueryui.com/demos/accordion/">jQuery accordion widget</a> to the |
| contact list.</p> |
| |
| <p>The accordion widget is part of the <a href="http://jqueryui.com/">jQuery UI library</a>. |
| The UI library is built on top of the core library, and provides a modular approach |
| to enabling interactions, widgets and effects to your web pages. You can keep file sizes |
| to a mininum and conveniently select only the components you need from the jQuery's |
| download interface at <a href="http://jqueryui.com/download">http://jqueryui.com/download</a>.</p> |
| |
| <p>If you have not already done so, visit <a href="http://jqueryui.com/download">http://jqueryui.com/download</a> |
| and download the accordion navigation widget. Note that when you select the accordion |
| widget, the UI Core library, and Widget Factory are also automatically selected. Also |
| note that from the download page, the '<code>UI lightness</code>' theme is selected by |
| default, and is included in your download package. We'll be applying this theme to our |
| contact list in the <a href="#usingcss">following section</a>.</p> |
| |
| <ol> |
| <li>Paste the following code into your document in place of |
| <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> |
| |
| Observe that the overall enclosing <code><div></code> element is |
| given an <code>id</code> attribute with a value of <code>infolist</code>. |
| Within this <code><div></code> element, there are four sets of <code><h3></code> |
| tags and <code><div></code> tags that contain an image and unordered list.</li> |
| |
| <li>Add a few inline CSS rules to the above markup. Delete the <code>.blue</code> |
| style rule you created for testing purposes above. In its place, add the |
| following rules. (Changes in <strong>bold</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">When you type within <code><style></code> tags, take |
| advantage of the IDE's built-in CSS code-completion by pressing Ctrl-Space.</p> |
| </li> |
| |
| <li>Save the file (Ctrl-S; ⌘-S on Mac).</li> |
| |
| <li>Now we'll add the the JPG portraits that are referenced in the above code |
| fragment to our project. Retrieve the <code>pix</code> directory from the |
| <a href="#requiredSoftware">project resources you downloaded earlier</a> and |
| copy the entire directory to your project folder, placing it at the same level |
| as <code>index.html</code>. After a brief moment, NetBeans automatically updates |
| the Projects window to reflect that a new directory has been manually added to |
| the project.</li> |
| |
| <li>Switch to your browser and refresh the page. |
| |
| <br> |
| <img src="../../../images_www/articles/73/web/js-toolkits-jquery/structured-list.png" |
| alt="Structured list displayed in browser" |
| title="Structured list displays in a browser" |
| class="margin-around b-all"> |
| |
| <br><br> |
| There are a number of problems with this document that we will address. Firstly, |
| it is more difficult than it needs to be to scan the list quickly to find the |
| person you're looking for: one must scroll the page and visually inspect a lot |
| of information that may not be of immediate interest. Four contacts in a list |
| might be manageable, but if the number grew to say, 50, then the list would |
| become much more difficult to use. Secondly, the document is visually plain, |
| and is unlikely to blend in esthetically with most web site designs, particularly |
| designs that have a strong graphic identity. We will address these issues by using |
| the jQuery accordion widget, in combination with jQuery UI's default theme.</li> |
| |
| <li>To produce the accordion effect, navigate to the location on your computer |
| where you downloaded the accordion widget. Within the downloaded folder, you'll |
| find a folder named '<code>development-bundle</code>'. Within the <code>development-bundle</code> |
| folder, expand the <code>ui</code> folder and locate the following three scripts: |
| |
| <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">Development versions of toolkit scripts are <em>unminimized</em>, |
| meaning that their code is human-readable when viewed in an editor. Normally, |
| you would want to switch to the compressed, minimized versions for a production-ready |
| application in order to conserve download times.</p></li> |
| |
| <li>Copy (Ctrl-C; ⌘-C on Mac) the three scripts and, back in the IDE, paste them in the <code>js</code> |
| folder you <a href="#js">created earlier</a> in your <code>jqproject</code> folder. |
| |
| <br><br> |
| You can paste by either pressing Ctrl-V (⌘-V on Mac), or right-clicking the <code>js</code> |
| folder and choosing Paste. |
| |
| <p class="tips">The <code>development-bundle</code> > <code>ui</code> folder also |
| contains a file named <code>jquery-ui-1.8.1.custom.js</code>. This file combines |
| the three scripts listed above into a single script. You could equally paste this |
| file into your project in place of the three individual scripts.</p></li> |
| |
| <li>Reference the scripts in your <code>index.html</code> page by entering three |
| <code><script></code> tags linking to these new JavaScript files. You |
| can add the <code><script></code> tags immediately after the <code><script></code> |
| tags that refers to the core jQuery library <code>jquery-1.4.2.js</code>. Use |
| the existing <code><script></code> tags as a model.</li> |
| |
| <li>Delete the test code we created inside the <code>(document).ready</code> |
| function. You no longer need it. |
| |
| <br><br> |
| The <code><head></code> tags of your file should now look as follows. |
| |
| <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>To make our static, unstyled list take on the accordion behavior is as |
| simple as adding a single line of jQuery code. Enter this line into the |
| <code>(document).ready</code> function. (Changes in <strong>bold</strong>.) |
| |
| <pre class="examplecode">$(document).ready(function(){ |
| <strong>$("#infolist").accordion({ |
| autoHeight: false |
| });</strong> |
| });</pre> |
| |
| In this line of code, <code>#infolist</code> is a CSS selector connected to |
| a unique DOM element that has an <code>id</code> attribute with the value |
| <code>infolist</code>; in other words, our contacts list. It is connected |
| using typical JavaScript dot notation ('<code>.</code>') to the jQuery |
| instruction that uses the <code>accordion()</code> method to display this |
| element. |
| |
| <p class="tips">You've also specified '<code>autoHeight: false</code>' in |
| the above snippet. This prevents the accordion widget from setting the |
| height of each panel based on the highest content part contained within |
| the markup. For more information, consult the |
| <a href="http://docs.jquery.com/UI/Accordion">accordion API documentation</a>.</p></li> |
| |
| <li>Save the file (Ctrl-S; ⌘-S on Mac).</li> |
| |
| <li>Go back to the web browser and refresh. Click on one of the names (other |
| than the top one) to see the accordion effect in action. The jQuery accordion |
| widget handles all the details of handling the DOM and responding to user mouse |
| clicks. |
| |
| <br> |
| <img src="../../../images_www/articles/73/web/js-toolkits-jquery/accordion-list.png" |
| title="Accordion widget handles user clicks and produces the accordion effect" |
| alt="Accordion list displayed in browser" class="margin-around b-all"> |
| </li> |
| </ol> |
| |
| |
| <br> |
| <h2 id="usingcss">Using jQuery's Default Theme for Style Enhancement</h2> |
| |
| <p>Our project now has the behavior we want, but it looks quite plain and still lacks |
| a well-organized appearance. Let's address this by incorporating jQuery's default |
| '<code>UI lightness</code>' theme.</p> |
| |
| <ol> |
| <li>Navigate to the location on your computer where you downloaded the accordion |
| widget. Within the downloaded folder, expand the <code>development-bundle</code> |
| > <code>themes</code> > <code>ui-lightness</code> folder.</li> |
| |
| <li>Within the <code>ui-lightness</code> folder, copy (Ctrl-C; ⌘-C on Mac) the |
| <code>jquery-ui-1.8.1.custom.css</code> file, and the <code>images</code> |
| folder, which contains all of the images necessary for the theme to render |
| properly.</li> |
| |
| <li>In the IDE, create a new folder within your project named <code>css</code>. |
| This folder will contain the '<code>UI lightness</code>' theme for the |
| accordion widget. |
| |
| <br><br> |
| To do so, right-click the project node and choose New > Folder. (If Folder doesn't |
| appear as an option, click the New File ( |
| <img src="../../../images_www/articles/73/web/js-toolkits-jquery/new-file-btn.png" |
| alt="New File button"> ) button in the IDE's toolbar, then choose Other > |
| Folder in the New File wizard.) Name the folder <code>css</code> and place it |
| within the same directory as your <code>index.html</code> file. |
| |
| <br><br> |
| <span class="alert">For Java Web projects, ensure that you place the <code>css</code> |
| folder in the project's web root. To do so, enter <code>web</code> in the |
| <strong>Parent Folder</strong> field.</span></li> |
| |
| <li>Paste the two items directly into the new <code>css</code> folder. To do |
| so, right-click the <code>css</code> folder node and choose Paste. Your project |
| folder should look as follows. |
| |
| <br> |
| <table class="margin-around"> |
| <tr> |
| <td><h4>PHP project:</h4></td> |
| <td><h4>Java Web project:</h4></td> |
| </tr> |
| <tr> |
| <td><img src="../../../images_www/articles/73/web/js-toolkits-jquery/proj-win-php.png" |
| class="margin-around b-all" alt="Projects window - jQuery default theme contained in project" |
| title="Project contains the jQuery default theme"></td> |
| |
| <td><img src="../../../images_www/articles/73/web/js-toolkits-jquery/proj-win-java.png" |
| class="margin-around b-all" alt="Projects window - jQuery default theme contained in project" |
| title="Project contains the jQuery default theme"></td> |
| </tr> |
| </table> |
| </li> |
| |
| <li>Reference the <code>jquery-ui-1.8.1.custom.css</code> file from within your |
| <code>index.html</code> web page. Add the following <code><link></code> |
| tag within the page's head. |
| |
| <pre class="examplecode"><link rel="stylesheet" href="css/jquery-ui-1.8.1.custom.css" type="text/css"></pre></li> |
| |
| <li>Save the file (Ctrl-S; ⌘-S on Mac).</li> |
| |
| <li>Return to the web browser and refresh the page. Notice that the list now displays |
| using jQuery's default theme, which is an esthetic improvement over the plain, |
| unstylized version. |
| |
| <br> |
| <img src="../../../images_www/articles/73/web/js-toolkits-jquery/ui-lightness-theme.png" |
| title="jQuery default theme enhances the appearance of the accordion widget" |
| alt="Accordion list displayed in browser with default jQuery theme" |
| class="margin-around b-all"> |
| </li> |
| </ol> |
| |
| |
| <br> |
| <h2 id="summary">Summary</h2> |
| |
| <p>In this tutorial, you have learned how to add jQuery libraries to your project, |
| as well as how to write some basic instructions using the jQuery syntax. You also |
| learned how jQuery interacts with the DOM (Document Object Model) using variables |
| that resemble CSS selectors to affect the appearance and behavior of elements on |
| a web page.</p> |
| |
| <p>Finally, you briefly explored the capabilities of the jQuery UI library by applying |
| the accordion widget to a simple contact list. After implementing the accordion |
| effect, you applied jQuery's default style theme to the list. You should now be |
| better able to appreciate how jQuery can be used to create dynamic web pages, while |
| improving overall appearance and usability.</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">Send Feedback on This Tutorial</a> |
| </div> |
| |
| <br style="clear:both;"> |
| |
| <br> |
| <h2 id="seealso">See Also</h2> |
| |
| <p>For more information about support for HTML5 applications and JavaScript in the IDE on |
| <a href="https://netbeans.org/">netbeans.org</a>, see the following resources:</p> |
| |
| <ul> |
| <li><a href="../webclient/html5-gettingstarted.html">Getting Started with HTML5 Applications</a>. |
| A document that demonstrates how to install the NetBeans Connector extension for Chrome |
| and creating and running a simple HTML5 application.</li> |
| <li><a href="../webclient/html5-editing-css.html">Working with CSS Style Sheets in HTML5 Applications</a>. |
| A document that continues with the application that you created in this tutorial that demonstrates |
| how to use some of the CSS wizards and windows in the IDE and how to use the Inspect mode in the |
| Chrome browser to visually locate elements in your project sources.</li> |
| <li><a href="../webclient/html5-js-support.html">Debugging and Testing JavaScript in HTML5 Applications</a>. |
| A document that demonstrates how the IDE provides tools that can help you debug and test |
| JavaScript files in the IDE.</li> |
| <li><a href="js-toolkits-dojo.html">Connecting a Dojo Tree to an ArrayList using JSON</a>. |
| An introduction to the Dojo toolkit is provided, and steps are given showing |
| how to interact with a back-end server using Ajax and JSON.</li> |
| |
| |
| <li><a href="../../docs/php/ajax-quickstart.html">Introduction to Ajax (PHP)</a>. Describes |
| how to build a simple application using PHP technology while teaching the underlying |
| process flow of an Ajax request.</li> |
| |
| <li><a href="ajax-quickstart.html">Introduction to Ajax (Java)</a>. Describes how to |
| build a simple application using servlet technology while teaching the underlying |
| process flow of an Ajax request.</li> |
| |
| </ul> |
| |
| |
| <p>For more information about jQuery, refer to the official documentation:</p> |
| |
| <ul> |
| <li>Official Home Page: <a href="http://jquery.com">http://jquery.com</a></li> |
| <li>UI Home Page: <a href="http://jqueryui.com/">http://jqueryui.com/</a></li> |
| <li>Tutorials: <a href="http://docs.jquery.com/Tutorials">http://docs.jquery.com/Tutorials</a></li> |
| <li>Documentation Main Page: <a href="http://docs.jquery.com/Main_Page">http://docs.jquery.com/Main_Page</a></li> |
| <li>UI Demos and Documentation: <a href="http://jqueryui.com/demos/">http://jqueryui.com/demos/</a></li> |
| </ul> |
| |
| <br> |
| |
| </body> |
| </html> |
