6. Creating Application Interfaces
The jQuery library makes creating potent, interactive, Web application interfaces easier by providing methods and functions that excel at supporting the synergy required to turn dull, lifeless, Web application interfaces into full-featured, user-centric powerhouses that can help you to make Web applications interfaces that are intuitive and fun to use.
In this chapter, you’ll learn how to apply techniques you have learned in previous chapters along with other jQuery, HTML, and CSS techniques to create a solid foundation for a Web-based application interface. You’ll start with the basic markup and style information in detail and add to that as the interface is developed. Along the way you’ll learn about advanced techniques for using sprites and AJAX to breathe life into the interface.
ESTABLISHING THE FOUNDATION
Figure 6.1. The basic layout for the Web application interface.
The first step you need to complete for any Web application is to establish the requirements for the application followed by defining a data model. Once those items are complete, you can begin defining the layout for each of the user interfaces required for the application.
When designing the layouts, you must always keep the Web application users in mind. Navigation items must be logically grouped, and content must be consistent. The user should be able to find elements easily while relying on their intuition to guide them. For example, you might have a main navigation component along the top of the interface. When the main item is clicked, secondary navigation is loaded that reflects the choice the user initially makes. The choices must make sense for the user while supporting the actions required by the application.
Once you’ve decided on the layouts, you can then establish some baseline HTML markup and CSS. The interface that you’ll build in this chapter is very basic: Primary navigation will be located at the top of the browser window, secondary navigation will be along the left side of the window, and the primary content will be displayed in a large area on the right (Figure 6.1).
The basic layout is completed by providing an area in the browser window for a footer where you can display additional purpose-driven content.
The primary goal for this layout is to keep every element visible on the browser to avoid scrolling. Scrolling will be allowed as necessary, but only within the container that holds more content than can be displayed within that element.
With a layout plan in hand, you’ll begin by creating the baseline markup for the project next.
CREATING THE HTML
The HTML markup creates the bedrock on which the rest of the interface will stand. You will define the containers that will hold the content and navigation elements, which will be enhanced by the CSS and jQuery.
After you define the basic HTML markup, you won’t have to modify it much except to add declarations for additional jQuery and CSS functions. In keeping with earlier markup layouts, the HTML for the application interface will be very simple. Let’s get started.
1. Create a file called 6-1.php and save it in the chap6 folder. Open the HTML with the DOCTYPE declaration (in this case the declaration is for HTML5):
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;
charset=UTF-8" />
2. Apply the no-cache directives to prevent caching of the application’s content. For Web applications, it is desirable that none of the data is cached (held in temporary storage):
<meta http-equiv="pragma" content="no-cache" />
<meta http-equiv="cache-control"
content="no-cache" />
3. Declare the title of the application:
<title>jQuery Application Interface</title>
4. Create the declarations for the CSS and jQuery/JavaScript files, starting with the style sheet you will create:
<link rel="stylesheet" href="css/interface.css"
type="text/css" />
<link type="text/css" rel="stylesheet"
href="css/ui/jquery-ui-1.8.12.custom.css" />
<script type="text/javascript"
src="inc/jQuery/jquery-1.5.min.js"></script>
<script type="text/javascript"
src="inc/jQuery/jquery-ui-1.8.12.custom.min.
js"></script>
</head>
The standard jQuery file as well as the CSS and JavaScript file for the jQuery UI are included in the base markup, so you won’t have to worry about adding them later.
5. Add the elements that will hold the navigation and content for the application interface:
<body>
<div id="mainNavBar"></div>
<div id="content1">
<div id="contentArea1">
<!-- nav items -->
</div>
</div>
<div id="content2">
<div id="contentArea2">
<!-- content items -->
</div>
</div>
<div id="footer"></div>
</body>
</html>
The markup contained in the body of the HTML is very simple and easy to read. Each element is clearly declared, and comments make the markup easy to understand.
Next, you’ll add some style to the basic HTML markup.
APPLYING THE CSS
The style sheet for your application interface defines the properties for the areas where you’ll display content. You need to clearly describe these areas so that the CSS can be effectively applied to your markup.
Let’s get the basic CSS properties in place and also include some additional properties that will add borders to each area for visual guidance. After the design is complete, you can remove the borders.
1. Create a file in your text editor called interface.css, save it in the chap6/css folder, and then establish the overall layout:
body, html {
height:100%;
margin: 0px auto;
overflow-y: hidden ! important;
overflow-x: auto ! important;
}
The CSS property ! important is always applied to the markup regardless of any other CSS entry that may attempt to override the property. CSS is read from top to bottom, and a CSS property marked as ! important will always be applied no matter where it appears in the CSS document.
body {
margin: 0px;
font-family: Tahoma, Arial, Helvetica, sans-serif;
font-size: 11px;
background-color: #000000;
}
The CSS rules established here ensure that the document body is as tall as the browser window will allow and set all margins to 0. All overflow will be hidden, and no scroll bars will appear on the main body of the interface document. Finally, the background is declared to be black using hexadecimal notation.
2. Set the :focus pseudo selector to have no outline, which will prevent outlines from appearing around clickable items:
:focus {
outline: 0;
}
A word of caution here; you should never turn off the outline on the :focus element in public Web sites because the element aids in making your Web pages more accessible. If you need your Web applications to be accessible to people using screen readers, you should omit this :focus CSS rule from the CSS document.
3. Set up the container for the secondary navigation. There are two parts, the outer container and the inner container. Declare the outer container first:
#content1 {
width: 20%;
height: 80%;
background-color: transparent;
vertical-align: bottom;
float: left;
margin: 5px 5px 0px 10px;
position: relative;
bottom: 0px;
}
#contentArea1 {
position: relative;
padding: 10px;
}
The outer container #content1 is designed to hold the navigation items that will appear along the left side of the interface. Because the application interface is designed to be fluid (all elements resize with the screen to remain proportional), percentages are used to configure height and width.
4. Construct the CSS to hold the main content with an outer container:
#content2 {
position: relative;
width: 77%;
height: 80%;
background-color: transparent;
vertical-align: top;
float: left;
margin: 5px 5px 0px 0px;
}
5. Create the inner container for the main content area, and set the overflow property to auto. The inner container will have a scroll bar appear when the content is longer than the outer container will allow:
#contentArea2 {
position: relative;
padding: 10px;
overflow: auto;
}
6. Declare the space for the primary navigation area, including an image that will be used as the background for the navigation:
#mainNavBar {
height: 75px;
background-image: url('../grfx/large_gray_gradient.png');
background-repeat: repeat-x;
padding: 0px 0px 0px 25px;
}
7. Create the rule and properties for the footer section:
#footer {
position: absolute;
bottom: 0px;
height: 75px;
width: 99%;
margin: 5px 5px 0px 5px;
}
The footer is aligned to the bottom of the browser window so that the window resizing function, which you’ll create later in the chapter, can account for the known fixed space created by the footer element.
Figure 6.2. The primary and secondary navigation areas along with the content and footer areas have been created and are ready for modification.
8. Create the last portion of the CSS style sheet, which contains the rules for the borders that will provide visual guides while the interface is developed:
#content1, #content2, #footer {
border: 1px dashed #FFFF00;
}
#contentArea1, #contentArea2 {
border: 1px dashed #00FF00;
}
After the interface is complete, you can remove these rules.
The base CSS is not complex, yet it is needed to achieve the layout and interactivity necessary for the application interface.
With the basic CSS and HTML created, you can load chap6/6-1.php into a browser (Figure 6.2). You should see the yellow borders (outer containers) and green borders (inner containers) for each of the major areas of the application interface.
Notice that some of the navigation and content areas overlap slightly. You’ll correct that overlap when you add the jQuery resize function in the next section.
MAKING THE INTERFACE RESIZABLE
For an application interface, it is important that every element be in the proper place at the proper size, not only when the browser is opened, but also when a user decides to resize the browser window. Using jQuery’s resize method allows you to accomplish this subtle but important task.
To make sure that the elements are the proper size when the browser window is initially opened, you’ll need to know the total height of the window once open. Then you can apply the appropriate heights to the content container elements.
In this exercise, you’ll create the jQuery functions to automatically apply the proper heights to all of the container elements based on the size of the browser window when it is opened. Then you’ll create the jQuery function that resizes the container elements when the browser window size is changed by the user.
1. Create a new file called interface.js and save it in the chap6/inc/jQuery folder. Then create the document ready wrapper function:
$(document).ready(function() {
$(document).ready(function() {
2. Use jQuery’s height method to get the height of the browser window, and place that information in a variable called windowHeight:
var windowHeight = $(window).height();
3. Set the height of both content outer containers and both content inner containers. The height of the outer containers needs to take into account the height of the mainNavBar (75 pixels) element plus the footer element (75 pixels). Add an additional 25 pixels for padding :
$("#content1").height(windowHeight - 175 + "px");
$("#contentArea1").height(windowHeight - 205 + "px");
$("#content2").height(windowHeight - 175 + "px");
$("#contentArea2").height(windowHeight - 205 + "px");
Make sure that the inner containers, contentArea1 and contentArea2, have their total height set so that they stay inside the outer containers by subtracting an additional 30 pixels from the height of the inner containers.
Next, you’ll create a jQuery resize function to ensure that the content areas are resized when the browser window size is changed. The same functions that are used to set the content container’s size when the browser is opened are used during the resize event, too.
4. Bind the browser window to jQuery’s resize function:
$(window).resize(function() {
5. Copy and paste the functions previously used to set the content container heights, and then close the resize function with the appropriate brackets:
var windowHeight = $(window).height();
$("#content1").height(windowHeight - 175 + "px");
$("#contentArea1").height(windowHeight - 205 + "px");
$("#content2").height(windowHeight - 175 + "px");
$("#contentArea2").height(windowHeight - 205 + "px");
});
6. Close out the document ready function:
});
Now you are ready to include interface.js in the HTML declarations.
7. Make a copy of chap6/6-1.php, save it as chap6/6-2.php, and place a script tag to call the source of chap6/ inc/jQuery/interface.js in the head section of the HTML:
<script type="text/javascript" src="inc/jQuery/interface.js"></script>
Figure 6.3. The content areas overlap the footer element prior to applying the jQuery function that processes the sizes of the content areas.
8. Open chap6/6-2.php in a browser window. You’ll see that the content areas no longer overlap the footer section of the page (Figure 6.3). Resize the browser window to observe the content areas resizing properly.
The basic layout is complete and ready for further development as your Web application interface. Let’s start that development by including a robust sprite element as the primary navigation for the application.
If you try to make the browser window really small, and for all practical purposes unusable, the content areas will begin to overlap each other again because there is no place for them to go within the space allotted by the browser.
IMPROVING THE APPLICATION INTERFACE
Figure 6.4. The sprite to be used in the Web application interface.
After the basic framework has been established for the Web application interface, you can start to apply the jQuery functions and widgets that will create a rich interactive experience for the application users.
You’ll apply some of the techniques that you learned in earlier chapters, including working with events and using the jQuery UI widgets. These techniques and widgets will lend intuitive user interaction to your application while using the efficiency provided by the jQuery library to enable your applications to run smoothly.
To start, let’s take the simple sprite navigation technique you learned in Chapter 2 and ramp up the technique’s capabilities to make it operate differently, but more effectively, in a Web software application.
CREATING BETTER SPRITES
The interaction of the sprite you worked with previously in Chapter 2 was fairly simple: Hover over an element and it changes. Move the cursor away from the element and it reverts back to its normal appearance. For the Web application interface you are creating in this chapter, the interaction needs to be a bit more complex. Not only will the sprite need to reflect the hover states, but it will also need to reflect a third status (selected) for the area of the application that the user has chosen to work in.
Therefore, you’ll need to configure a sprite image with three rows (Figure 6.4). You can find this image in the download files in chap6/grfx/main_nav.png.
When the mouse cursor hovers over an item in the sprite, the icon will turn yellow and then fade back to gray when the cursor is removed from that icon. This is the same action that occurs with the sprite created previously. The twist is that a selected item does not change when the cursor is hovered over it, and a clicked sprite item will gain the state of selected, turning the icon white.
There are two critical aspects to making the sprite react as you want it to, the CSS and the jQuery. After you have the CSS and jQuery code in place, you’ll add the sprite to the HTML. Let’s create the CSS first.
STYLING THE SPRITE
Critical to making the sprite work properly is styling the container for the sprite in the page and making sure that each element of the sprite has been defined within the CSS.
1. Create a CSS file called spritenav.css in the folder chap6/css/spritenav, and set up the first property that will set the height for the sprite. The rule will also have a property to remove default styling from the unordered list that will be used for the sprite:
#spriteNav {
height: 75px;
list-style: none;
margin: 0;
padding: 0;
}
2. Make sure that all of the list items float to the left so that they will line up next to each other:
#spriteNav li {
float: left;
}
3. Style the anchor tags within the sprite container. The background image for the anchor tags is the graphic that defines the sprite:
#spriteNav li a {
background: url(../../grfx/main_nav.png) no-repeat;
display: block;
height: 75px;
position: relative;
}
4. Add the styling for the sprite’s span elements. The span elements are the image items in the sprite that appear when the cursor is positioned over the element for hover. The background image for the spans is the same sprite graphic that was used for the anchor elements, chap6/grfx/main_nav.jpg:
#spriteNav li a span {
background: url(../../grfx/main_nav.png) no-repeat;
display: block;
position: absolute;
top: 0;
left: 0;
height: 75px;
width: 100%;
}
5. Set up the starting base width and background-position for each item. Each navigation item in the sprite must have a starting width and location. Because the starting position is the top row of the sprite, the y coordinate for each item is 0px. All of the sprite items are 100 pixels wide:
#spriteNav li a#users {
width: 100px;
}
#spriteNav li a#notes {
width: 100px;
background-position: -100px 0px;
}
#spriteNav li a#stats {
width: 100px;
background-position: -200px 0px;
}
#spriteNav li a#processes {
width: 100px;
background-position: -300px 0px;
}
#spriteNav li a#security {
width: 100px;
background-position: -400px 0px;
}
6. Add the next set of style rules to define the position of the sprite items for the span elements. The span elements provide the hover effect. The sprite items are in the second row of the sprite, so the y coordinate for these has to be -75px:
#spriteNav li a#users span {
background-position: 0px -75px;
}
#spriteNav li a#notes span {
background-position: -100px -75px;
}
#spriteNav li a#stats span {
background-position: -200px -75px;
}
#spriteNav li a#processes span {
background-position: -300px -75px;
}
#spriteNav li a#security span {
background-position: -400px -75px;
}
7. Prepare the last row of sprite items—the images to be shown when an item is selected—with a y coordinate of -150px:
#spriteNav li a#users span.selected {
background-position: 0px -150px;
}
#spriteNav li a#notes span.selected {
background-position: -100px -150px;
}
#spriteNav li a#stats span.selected {
background-position: -200px -150px;
}
#spriteNav li a#processes span.selected {
background-position: -300px -150px;
}
#spriteNav li a#security span.selected {
background-position: -400px -150px;
text-decoration: none;
}
The styling for the sprite-based navigation is now complete. It’s time to turn your attention to the jQuery that will add flair to the sprite.
CREATING THE SPRITE INTERACTION
The jQuery code for the sprite is defined by two functions, one to handle the hover operations and another to handle the clicked or selected sprite item.
1. Create a file named spreitenav.js in the folder chap6/inc/jQuery and establish the document ready function:
$(document).ready(function() {
2. Wrap both the hover function and click function into a singular function call to relate them to each other:
$(function() {
It is not necessary to take this additional step, but it pays great dividends where code organization is concerned.
3. Set up default values for the visibility of the span and span selected elements:
$("#spriteNav span").css("opacity", "0");
$("#spriteNav span.selected").css("opacity", "1");
4. Begin the hover function by binding the hover method to the #spritenav span element:
$("#spriteNav span").hover(function() {
5. Create a conditional to test to see if the span element currently hovered over has a CSS class attribute defined for it. If there is no CSS class defined, apply the jQuery animation to fade in the yellow sprite item for this element:
if($(this).attr("class").length == 0) {
$(this).stop().animate({
opacity: 1
}, 75);
6. Set the element’s opacity to 1, fully visible, if there is a CSS class attached to the element that the mouse cursor is over:
} else {
$(this).css("opacity", "1"); // end mousein
};
The mouseover portion of the hover method is now fully defined, so you’ll move on to the mouseout section of the hover event.
7. Make the fade-out last a little longer by setting the timing of the fade to 250 milliseconds if the element does not have a CSS class attached to it:
}, function(){
if($(this).attr("class").length == 0) {
$(this).stop().animate({
opacity: 0
}, 250);
8. Leave the item fully visible regardless of the mouse cursor position if there is a class attached to the element. The class indicates that this item is the currently selected element:
} else {
$(this).css("opacity", "1"); // end mouseout
};
9. Close out the hover method with the proper closing brackets and braces:
}); // end hover function
10. Begin defining the click function by binding jQuery’s click method to the #spritenav span element:
$("#spriteNav span").click(function() {
11. Remove the selected class from all of the #spritenav elements first, making the current element the only selected element:
$("#spriteNav span").removeClass("selected");
12. Use the jQuery addClass method to add the selected class to this element:
$(this).addClass("selected");
13. Fade all of the #spritenav elements that do not have the selected class to the state that colors them gray:
$("#spriteNav span:not(.selected)").stop().animate({
opacity: 0
}, 0);
This will turn the previously selected item back to its gray or nonselected or hovered state.
14. Add the appropriate closing brackets and braces:
});
});
});
Now that the CSS and jQuery are in place to provide functionality to the sprite, all you have left to do is to add the markup that will place your sprite into the application interface.
ADDING THE SPRITE TO THE INTERFACE
You’ve done a lot of prep work to get to the point where you can begin adding functionality to the Web application interface. You can rely on the HTML markup and CSS that you constructed earlier to act as a guide for placing new elements into the Web application interface.
1. Make a copy of chap6/6-2.php and save it in the chap6 folder as 6-3.php.
2. Add the declarations that will link your spritenav.css and spritenav.js to the head section of your new file’s HTML markup as highlighted here:
<link rel="stylesheet" href="css/interface.css" type="text/css" />
<link rel="stylesheet" href="css/spritenav/spritenav.css" type="text/css" />
<link type="text/css" rel="stylesheet" href="css/ui/jquery-ui -1.8.12.custom.css" />
<script type="text/javascript" src="inc/jQuery/jquery-1.5.min.js"></script>
<script type="text/javascript" src="inc/jQuery/jquery-ui-1.8.12.custom.min.js"></script>
<script type="text/javascript" src="inc/jQuery/interface.js"></script>
<script type="text/javascript" src="inc/jQuery/spritenav.js"></script>
Figure 6.5. Users is the selected item while the mouse cursor is hovered over the Processes item.
3. Locate the div element with an id of mainNavBar and place the unordered list within that element:
<div id="mainNavBar">
<ul id="spriteNav">
4. Set a default element to have the selected class like this (optional):
<li><a id="users"><span class="selected"></span></a></li>
5. Make sure that you have a list element for each sprite item:
<li><a id="notes"><span></span></a></li>
<li><a id="stats"><span></span></a></li>
<li><a id="processes"><span></span></a></li>
<li><a id="security"><span></span></a></li>
</ul>
</div>
The sprite navigation is complete and ready to test.
6. Load chap6/6-3.php into your browser to see the navigation (Figure 6.5).
The application interface is starting to take shape with the primary navigation in place. You’ll no longer need to make changes to the basic layout that you defined in chap6/6-3.php. All of the changes to be made from this point on are made in files—the CSS and jQuery files—that will load content into the interface from other files.
Next, you’ll learn how to have the primary navigation load the secondary navigation items and primary content.
Figure 6.6. Clicking on any one of the headers will reveal the content in an accordion by sliding the content and header either up or down as needed.
LOADING CONTENT WITH AJAX
It is easy to target content areas of the Web application interface using jQuery selectors. Once an area is targeted, it is quite simple to use one of jQuery’s AJAX methods to call external content into the interface.
You are not limited on the content that you can load into these content areas. Content that you create, as well as jQuery plugins and jQuery UI widgets, are all available to be included into the application interface.
You can also load content into multiple areas at the same time. For instance, with one click event you can load content into the secondary navigation area while other content is loaded into the primary content area.
Let’s look at a technique for loading a jQuery UI Accordion widget into the navigation area first.
INCLUDING jQUERY UI WIDGETS
A popular widget for displaying a lot of content in a small space is the jQuery UI Accordion widget. The accordion takes up a fixed amount of space, and sliding windows of content are made available by clicking on the headers of the accordion. Figure 6.6 shows a jQuery UI accordion with three sections and shows the content in section Content C.
You’ll use a jQuery UI Accordion widget to facilitate secondary navigation. Let’s prepare that widget and then add the call from the primary navigation that will open the accordion.
1. Create a new page called users.php in chap6/inc/nav. This folder is where all of the secondary navigation files will be stored.
2. Add the following jQuery to bind the jQuery UI accordion method to the element with an id of accordion:
<script type="text/javascript">
$(document).ready(function() {
$('#accordion').accordion();
});
</script>
3. Create the div that will hold the accordion element:
<div id="accordion">
4. Add a title and the content for each section of the accordion. Note that the title is contained in a header (h3) tag:
<h3><a href="#">Manage Users</a></h3>
<div>
<ul>
<li><a href="#" id="addUser">Add User</a></li>
<li><a href="#" id="addUser">Edit User</a></li>
</ul>
</div>
<h3><a href="#">Manage Roles</a></h3>
<div>
<ul>
<li><a href="#" id="addUser">Add Role</a></li>
<li><a href="#" id="addUser">Edit Role</a></li>
</ul>
</div>
5. Add the last accordion section and close out the accordion element:
<h3><a href="#">Manage Groups</a></h3>
<div>
<ul>
<li><a href="#" id="addUser">Add Group</a></li>
<li><a href="#" id="addUser">Edit Group</a></li>
</ul>
</div>
</div>
The jQuery UI library, including the CSS that comes with the library, handles the details of creating the accordion and managing the animation; all that is left to do is to add the jQuery code to load the accordion into the interface.
Rather than creating a new file to create the jQuery code for loading items into the application interface, you’ll add the code to the script file created earlier, chap6/inc/jQuery/interface.js.
1. Open the interface.js file and prepare to add code after the window resize function that was placed in the file earlier.
2. In the first line, bind the click function to the primary navigation element contained in a #spritenav list item anchor tag:
$('#spriteNav li a').click(function(){
3. Get the value of the id attribute of the item that was clicked and place it in the variable clicked:
var clicked = $(this).attr('id');
If you’re smart about the way you name files, you can use attribute values, like the id attribute in the previous line of code, to aid in creating singular functions that will work over a wide range of events. In this case, the navigation file to be loaded is called users.php. That means that the filename relates well to the item clicked.
Figure 6.7. The jQuery UI Accordion widget is ready to perform as the secondary navigation element for the Web application interface.
4. Create a variable called loadNav to hold the filename and path of the file to be loaded. Note that the variable clicked is used to complete the text for the path:
var loadNav = 'inc/nav/' + clicked + '.php';
5. Finish the function by using the jQuery AJAX shorthand method load to get the accordion into contentArea1:
$('#contentArea1').load(loadNav);
});
Figure 6.7 reveals the results of your hard work. The jQuery UI Accordion widget is loaded into the secondary navigation area and is ready to use.
It is important to note that you did not have to modify the primary interface because the jQuery UI script file and CSS were already included. Additionally, the technique of binding the UI widget within the file where it is used is the best way to avoid complicated script files.
Additional jQuery will be used in loaded files because it’s a better way to organize the application. Keeping the jQuery code isolated within separate files where needed helps to compartmentalize functions for use where they are called instead of having all functions loaded into the interface all the time. Load time is reduced and issues in the code are more easily tracked. The application interface becomes easier to extend as well because new code can be placed into the modules extending the application.
LOADING MULTIPLE ITEMS SIMULTANEOUSLY
With jQuery it is easy to extend functions so that they are capable of processing multiple events at the same time. To demonstrate this capability, you’ll create a small form that will be loaded into the primary content area at the same time as the jQuery UI Accordion widget is loaded into the secondary navigation area of the Web application interface.
1. Create a form called users_search.php and save it in the chap6/inc/content folder.
2. Add the HTML markup for a small form:
<form action="#" method="post" id="search_form">
<fieldset>
<label>First Name</label><input type="text"
name="first_name" id="first_name" /><br />
<label>Last Name</label><input type="text"
name="last_name" id="last_name" /><br />
<label></label><input type="submit" name="search"
id="search" value="Search" /><br />
</fieldset>
</form>
3. Extend the click function defined in the previous section (chap6/inc/jQuery/interface.js) by adding two lines, one line to define the path and filename to be loaded and the other for the load method that applies to the new file:
$('#spriteNav li a').click(function(){
var clicked = $(this).attr('id');
var loadNav = 'inc/nav/' + clicked + '.php';
var loadContent = 'inc/content/' + clicked + '_search.php';
$('#contentArea1').load(loadNav);
$("#contentArea2").load(loadContent);
});
Figure 6.8. Multiple items have been processed by the load method and placed into various portions of the Web application interface.
Figure 6.8 shows the result of clicking the Users icon in the primary navigation area. The form is loaded into the primary content area, and the jQuery UI Accordion widget appears in the secondary navigation area.
As you can imagine, loading content from various sources into the content areas of a Web application interface is not complex as long as you plan well and keep your code organized. Even large amounts of content are easy to display in the interface.
HANDLING LARGE AMOUNTS OF CONTENT
When you have forms with multiple segments or tabular data that extends for hundreds of rows, it is best to keep that information displayed within the Web application interface without having to scroll the entire content of the window. Scrolling the entire window would move the navigation elements and content identifying headers out of view and possibly confuse users or at the very least cause users to scroll up and down to discern certain information about the data. Any pertinent footer would not be immediately visible, and users might never scroll down far enough to get the information from that element.
That is not to say that you shouldn’t build interfaces that cause the entire content window to scroll. If you do allow this in a design element, you need to make sure that there is a way to identify the content and data regardless of where the user has scrolled to. Most designers will do this by including content identification immediately adjacent to the content or by repeating the column headers for tables every few rows.
The CSS that you constructed for the Web application interface provides the proper structure to keep your content available without losing the ability to display the primary and secondary navigation areas as well as the footer should it contain any content.
A large form is available in the download package called users_add.php that you can use to test your interface. The form is located in the chap6/inc/content folder and contains some jQuery functions, including the jQuery UI Tabs widget.
To load the form into the content area, you’ll need to modify the users.php file that you created earlier in chap6/inc/nav.
1. Open the users.php file and add the following (highlighted) jQuery code:
$(document).ready(function() {
$('#accordion').accordion();
$('#addUser').click(function(event) {
event.preventDefault();
$('#contentArea2').load('inc/content/users_add.php');
});
});
The element identified by addUser is bound to the jQuery click method to load the form inc/content/users_add.php into contentArea2.
Figure 6.9. The form loaded into the Web application interface.
2. Reload 6-4.php into your browser and click the Users icon.
3. When the jQuery UI Accordion widget loads, you can then click Add User. The tabbed form should appear in the content area (Figure 6.9).
Figure 6.10. The scroll bar appears automatically because the content exceeds the size of the screen area that it has been positioned in.
Content that would normally extend beyond the bottom of the browser window is now contained within the bounds of the content area. That area of the interface will gain a scroll bar when needed. Figure 6.10 shows the appearance of a scroll bar when the Security tab is clicked due to the amount of content contained on that tab.
Now that you have the basic Web application interface configured and you are able to load content into various areas easily, let’s look at some additional features that will enhance the Web application interface.
Figure 6.11. The standard context menu in Mozilla’s Firefox Web browser. The options would not be very helpful in most Web-based applications.
CONFIGURING ADDITIONAL ENHANCEMENTS
Because you are building a Web application, you’ll need to pay attention to how your users are interacting with your application. Are they using the right-click mouse function? Are they clicking the back button instead of using navigation elements? Do you want to limit or modify the user’s ability to access the built-in functionality provided by the browser? With the answers to these questions in hand, you can apply some jQuery techniques to accomplish these enhancements.
DISABLING THE RIGHT-CLICK CONTEXT MENU
Many of the action items available from the context menu (Figure 6.11) activated by a right-click of the mouse button are not applicable in a Web-based application. Therefore, you can choose to disable the context menu from appearing when the mouse is right-clicked by a user. With jQuery, you only need to apply a short bit of code to accomplish this.
Open the jQuery script file that you created earlier, interface.js (located in chap6/inc/jQuery), and insert the following code before the closing brackets of the document ready wrapper function:
$(document).bind("contextmenu",function(e){
e.preventDefault();
});
The jQuery snippet binds the contextmenu event to the document and then applies the preventDefault handler to the context menu. This will keep the context menu from popping up when the right mouse button is clicked.
As you might have guessed, some jQuery context menu plugins are also available. These plugins allow you to create custom context menus for your Web applications. Check out my favorite jQuery context menu plugin at http://abeautifulsite.net/blog/2008/09/jquery-context-menu-plugin. Let’s add a custom context menu to one of the interface elements.
1. Open interface.js in the chap6/inc/jQuery folder and place comments around the code that you created to disable the right-click context menu:
/*$(document).bind("contextmenu",function(e){
e.preventDefault();
});*/
After you have added the comment, you can save the file. The right-click is now available again; it will be needed for the custom context menu.
2. Open 6-3.php and save a copy as 6-4.php in the chap6 folder. You could add the code to 6-3.php, but for consistency sake (and a backup of your original work) making a copy is the prudent route to take.
3. Add the source calls for the jQuery Context Menu CSS and jQuery files to the head section of chap6/6-4.php (highlighted):
<link rel="stylesheet" href="css/interface.css" type="text/css" />
<link rel="stylesheet" href="css/spritenav/spritenav.css" type="text/css" />
<link type="text/css" rel="stylesheet" href="css/ui/jquery-ui-1.8.12.custom.css" />
<link type="text/css" rel="stylesheet" href="css/contextmenu/jquery.contextMenu.css" />
<script type="text/javascript" src="inc/jQuery/jquery -1.5.min.js"></script>
<script type="text/javascript" src="inc/jQuery/jquery-ui -1.8.12.custom.min.js"></script>
<script type="text/javascript" src="inc/jQuery/interface.js"></script>
<script type="text/javascript" src="inc/jQuery/spritenav.js"></script>
<script type="text/javascript" src="inc/jQuery/jquery.ContextMenu.js"></script>
The jQuery Context Menu plugin comes with a folder called images. It is very important that you put this folder into the same folder where you place the jquery.contextMenu.css file.
4. Create a file called notes.php and save it in the chap6/inc/nav folder.
5. Add the jQuery code to the notes.php file for the jQuery UI Accordion widget:
<script type="text/javascript">
$(document).ready(function() {
$('#accordion').accordion();
6. Bind the click method to the addNotes element:
$('#addNotes').click(function(event) {
event.preventDefault();
7. Define the jQuery AJAX load function to retrieve the proper file, and then close the script section of the file:
$('#contentArea2').load('inc/content/notes_add.php');
});
});
</script>
8. Build the HTML markup for the navigation accordion:
<div id="accordion">
<h3><a href="#">Manage Notes</a></h3>
<div>
<ul>
<li><a href="#" id="addNotes">Add Note</a></li>
<li>Edit Note</li>
</ul>
</div>
</div>
Because of the work that you did constructing a solid sprite-based navigation function in interface.js, you can now load chap6/6-4.php into your browser and click on Notes to make note.php appear in the left content area of the interface. With this working, you can set your sites on creating content that will feature the jQuery Context Menu plugin.
1. Create a file called notes_add.php in the chap6/inc/content folder.
2. Enter the jQuery code to bind the contextMenu to the noteBody element:
<script type="text/javascript">
$(document).ready(function() {
$("#noteBody").contextMenu({
3. Assign the id notesContext to the menu option of the jQuery Context Menu plugin, and then close out the script tags:
menu: 'notesContext'
});
});
</script>
4. Create an HTML form for the content of notes_add.php:
<form action="#" method="post" id="search_form">
<fieldset>
<label>Note Title</label><input type="text"
name="noteTitle" id="noteTitle" size="64" /><br />
<label>Content</label><textarea name="noteBody"
id="noteBody" cols="64" rows="16"></textarea>
<label></label><input type="submit" name="saveNote"
id="saveNote" value="Save Note" /><br />
</fieldset>
</form>
5. Build an unordered HTML list to contain each of the items to display in your custom context menu:
<ul id="notesContext" class="contextMenu">
<li class="edit">
<a href="#edit">Edit</a>
</li>
<li class="cut separator">
<a href="#cut">Cut</a>
</li>
<li class="copy">
<a href="#copy">Copy</a>
</li>
<li class="paste">
<a href="#paste">Paste</a>
</li>
<li class="delete">
<a href="#delete">Delete</a>
</li>
<li class="quit separator">
<a href="#quit">Quit</a>
</li>
</ul>
6. Reload chap6/6-4.php into your Web browser and click Notes to load the Manage Notes menu.
7. Click Add Note to see the notes interface appear in the primary content area of the interface.
Figure 6.12. The new jQuery Custom Context Menu widget is displayed on the Web application interface.
Because you bound the custom context menu to the noteBody element, you can now right-click in the text area of the interface to see the custom context menu (Figure 6.12).
Because the jQuery Custom Context Menu is built on a basic unordered HTML list, you can easily bind functionality to all of the elements in the list. The CSS for the jQuery Custom Context Menu is easy to understand and a breeze to extend with additional icons to support any action that you would like to add to the menu. You can declare and assign custom context menus to any of your interfaces.
A more vexing issue than the context menu is the often troublesome back button. Dealing with the back button, and consequently browser history, is an important factor in developing Web application interfaces.
HANDLING THE BACK BUTTON
If you want to be a pro at creating Web applications, you must take into account the browser’s back button and the way that the browser manages history. The back button is a Web-browser feature that cannot be disabled, so it is best to incorporate how you will handle the browser’s history and how users will operate the back button while planning your Web application.
Rather than dealing with the back button from scratch, a better solution is to turn directly to a jQuery plugin, the Back Button and Query (BBQ) Library by developer “Cowboy” Ben Alman. The plugin is available at http://benalman.com/projects/jquery-bbq-plugin and is a small but very effective plugin that allows you to control the browser history in your Web application. The jQuery BBQ plugin also allows you to set bookmarks for “pages” within your Web application should you choose to allow that feature.
Because of the flexibility of the BBQ plugin, it gives the developer a wide array of options for guiding the user through a Web application’s history. The jQuery BBQ plugin will give you the power to manage the history of multiple widgets on a page (e.g., you can control the history of an accordion used for navigation and a tabbed interface used for data entry at the same time). More important, when the BBQ plugin is used correctly, it allows you to leave the back button enabled in your Web application interfaces.
Because there are many ways to apply the jQuery BBQ plugin, I encourage you to visit Ben’s Web site, read the documentation, and view the examples. Then download the plugin and build some small-scale examples to get a feel for how the plugin works and the options that BBQ provides. Once you do that, you’ll be ready to apply the jQuery BBQ plugin to some of your bigger Web application interface projects.
One last item you need to attend to when developing Web application interfaces is to give users of your application helpful hints.
PROVIDING CONTEXTUAL HELP
When you are designing complex Web application interfaces, you should provide documentation, either printed or online, for your users. The documentation is intended to guide them through the process of using the application. All too often you’ll hear people cry, “I don’t need to read the instructions!” and users will dive into using the application guided by little more than their intuition.
Figure 6.13. Hovering above an element on the Web application interface displays a contextual help box.
As the Web application developer, you can give visitors using the application graceful hints when the application may not be quite as intuitive as they (or you) think it is. To do this, you can provide contextual help.
The contextual help function provides users with more information when they hover their mouse cursor over elements that have been assigned a particular class and attribute (Figure 6.13). The contextual help window appears only when the mouse cursor lingers over the element to avoid driving users crazy with too much information and too many pop-ups.
To set up the contextual help function, you need to set up the CSS first. Open the CSS file you created earlier, interface.css, which is located in the chap6/css folder. Add the following two CSS rules at the end of the file:
.contextHelp {
cursor: help;
position: relative;
}
.contextHelpWrapper {
width: 175px;
padding: 10px;
border: 4px solid #0066CC;
background-color: #FFFFCC;
color: #000000;
position: absolute;
top: 20px;
display: none;
font-weight: bold;
font-size: 9pt;
z-index: 10000;
}
The CSS rules change the cursor to alert a user that contextual help is available for an element and style the contextual help box.
Let’s create the jQuery function to support the contextual help interface.
1. Open the interface.js file you created earlier in the chap6/inc/jQuery folder to add the contextual help function.
2. Attach the mouseover and mouseout events to the contextHelp class selector using the delegate method:
$('body').delegate('.contextHelp', 'mouseover mouseout', function(event){
The delegate method is used here to ensure that the contextual help function is available for all elements with the proper class, even if those elements do not yet exist in the DOM. For instance, when you load an interface element that has the contextHelp class by clicking a link, the delegate method ensures that the element gets attached to the contextual help function.
3. Test to see if the mouseover event has occurred:
if(event.type == 'mouseover'){
4. Get the title information from the element and store it in the variable this.helpText:
this.helpText = $(this).attr('title');
5. Append a div to the current element, which has a class of contextHelp:
$(this).append('<div class="contextHelpWrapper">' +
this.helpText + '</div>');
The div is set up to contain the text from the title attribute. This text is the contextual help information that will be displayed to the user.
6. Remove the title to thwart the normal behavior:
$(this).removeAttr('title');
Under normal circumstances, the browser will show a title attribute as a small tool tip.
7. Place the width of the element that has a class of contextHelp into the variable helpWidth:
var helpWidth = $(this).width();
The width information will be used to set up where the contextual help is displayed in relation to the current element.
8. Apply the CSS to define the left edge of the contextual help box based on the variable helpWidth:
$('.contextHelpWrapper').css({left:helpWidth-25});
9. Create a function to hold the fadeIn method for the contextual help element:
function helpDisplay() {
$('.contextHelpWrapper').fadeIn(400);
}
The helpDisplay function will be used by JavaScript’s setTimeout method to delay the appearance of the contextual help element.
10. Set up the setTimeout method to call the helpDisplay function and delay the visibility by 1250 milliseconds:
setTimeout(helpDisplay, 1250);
11. Test to see if the mouseout method has been invoked:
} else if (event.type == 'mouseout') {
12. Restore the title attribute to the contextHelp element so that it can be used again:
$(this).attr('title', this.helpText);
13. Make the contextual help element disappear by using jQuery’s fadeOut method:
$('.contextHelpWrapper').fadeOut(100);
14. Remove the contextual help box and close out the function with the proper braces and brackets:
$('.contextHelpWrapper').remove();
};
});
To use the contextual help function, you apply the contextHelp class along with a title attribute to any element for which you want to display a helpful tip. Look at these two markup examples:
<label class="contextHelp" title="Make sure to use a strong password">Password</label>
<a href="#" class="contextHelp" title="Add, edit and manage application users">
Figure 6.14. The contextual help function is attached to a form element to prompt the user to provide a strong password.
The class attribute is the hook for the jQuery function, whereas the title attribute contains the text that will be displayed to the user (Figure 6.14).
You can adjust the position of contextual help boxes and delay timing to suit your tastes and use in your Web applications and Web sites.
WRAPPING UP
The Web application interface has provided you with many additional jQuery techniques to apply to your Web sites and Web-based applications. You can also apply the tools provided earlier in the book to create exciting interactivity for your clients when they are using your applications and Web sites.
In this chapter, you learned how to combine all of your jQuery knowledge into a package that will serve the needs of a highly interactive Web application. You applied jQuery UI widgets and developer plugins, along with hand-crafted jQuery scripts, to create an attractive and useful Web-application template.
Be sure to visit the book’s Web site at www.appliedjquery.com for additional examples, articles, plugins, and much, much more about Applied jQuery.
There are so many more functions and interfaces that you can create for the Web application interface. Use the foundation provided in this chapter to experiment with jQuery events, widgets, and plugins. The interface is far from complete, which will give you many opportunities to apply what you have learned and to learn more about the wonderful world of jQuery.