Today, Web sites are more customizable than ever, allowing users to change their space and personalize them according to their preferences. Personalized home page or dashboard page (for example, IGoogle, myyahoo! and Myaol) are becoming increasingly popular, and similar functionality is even being integrated into most WEB applications. The jquery library simplifies the writing of such complex JavaScript interactions, which is further simplified with the introduction of the jquery UI, which provides a common user interface type in the form of an accessible jquery plug-in.
This article describes how to use Ajax and the JQuery UI to create highly customizable UIs with a variety of customization capabilities. You'll learn how to customize all aspects of a Web page and how to save your preferences with Ajax. In addition, you will use techniques such as drag-and-drop operations to sort list items, and to organize page and UI widgets to switch themes and color schemes-everything can be done on a single Web page.
Creating custom UI features
The JQuery UI is a UI library that contains easy to write interactions, animations, and effects, as well as widgets that can easily customize the theme. You can customize the download, select the topics you want to include, and extract components, such as the UI kernel (required), interactions, widgets, or effects. To use the jquery UI, you also need the latest version of the jquery library. This library is included in the download section, but you can also download the latest version of the library directly from the JQuery Web site when you need to update the library later. Listing 1 shows how to include the JQuery UI library and other prerequisite files in a Web page.
Listing 1. Create a Web page that contains jQuery UI code
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> Creating Customizable Web Interfaces with the jQuery UI and Ajax </title> <link type="text/css" href="css/ui-lightness/jquery-ui-1.8.6.custom.css" rel="stylesheet" /> <link type="text/css" href="css/custom.css" rel="stylesheet" /> <script type="text/javascript" src="js/jquery-1.4.2.min.js"></script> <script type="text/javascript" src="js/jquery-ui-1.8.6.custom.min.js"> </script> </head> <body> </body> </html>
The first CSS that is included provides the code for the selected subject ui-lightness. This is the default theme, selected during the jQuery UI download process, but you can change it to any of the topics provided. If you've already downloaded the library, you want to update the topic you're using, just visit Themeroller, download the existing topic from the library, or use it to customize your own theme. The second CSS contained in the code provides a custom class for setting page styles, or for overwriting the properties used within the selected theme. Finally, the JavaScript files included in the code are the jquery and jquery UI libraries.
Create a drag-and-drop interface with the JQuery UI
Drag-and-drop features are now becoming more common and can be used to sort lists and organize page elements, as well as using this functionality in the personalized home pages of many WEB applications. The JQuery Uisortable plug-in provides a quick way to add sortable functionality to Web pages, with many options and events that support customizing your interactions in the way you want them to be.
The example in Listing 2 shows how to use the sortable plug-in to create a simple sortable list. You can use this plug-in to make a simple HTML list a sortable drag-and-drop list. First you add an identifier for this list-this example specifies sortable as an ID so that you can easily find this list using JQuery and add a sortable function call to it. You also add the Ui-state-default class for each item to keep its style consistent with the selected theme.
Listing 2. Create a simple sortable list using the JQuery UI sortable plugin
<! DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>
Creating Customizable Web Interfaces with the jQuery UI and Ajax
</title>
<link type="text/css" href="css/ui-lightness/jquery-ui-1.8.6.custom.css"
rel="stylesheet" />
<link type="text/css" href="css/custom.css" rel="stylesheet" />
<script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.8.6.custom.min.js">
</script>
<script type="text/javascript">
$(function(){
$( "#sortable" ).sortable();
});
</script>
</head>
<body>
<h1>
Creating Customizable Web Interfaces with the jQuery UI and Ajax
</h1>
<ul id="sortable">
<li id="item1" class="ui-state-default">Item 1</li>
<li id="item2" class="ui-state-default">Item 2</li>
<li id="item3" class="ui-state-default">Item 3</li>
<li id="item4" class="ui-state-default">Item 4</li>
<li id="item5" class="ui-state-default">Item 5</li>
<li id="item6" class="ui-state-default">Item 6</li>
<li id="item7" class="ui-state-default">Item 7</li>
</ul>
</body>
</html>
If you need to save a list item location, you may have to save the details to a cookie or database so that the page is rendered correctly to support subsequent page views. If you are using a database, you can use Ajax to send this data to a server-side script that can write values to the database, and then return an XML or JSON response with the appropriate location when the initial page loads, to place the elements in the correct location. The sample code in Listing 3 shows how to send a location value to a server-side PHP script.
Listing 3. Send Location value to server-side script
$ ("#sortable"). Sortable ({
stop:function (event, UI) {
$ ("#sortable Li"). each (
function (index) {
$. Ajax ({
type: ' POST ',
URL: ' filename.php ',
data: ' method=updateposition&id= ' +$ (This). attr (' id ') + ' &positions= ' +index,
success:function (XML) {
//Success
}
}
);});
To save the position of an item in a sortable list, you use an event to determine the time of the sorted item. You can take advantage of a variety of sortable events, but this example requires a stop event because only the event can be triggered after all sortable elements have finished sorting. This is important because you need to make sure that all elements are in a new location before you try to save the location. After the stop event is triggered, you go through the list items to get their index in the list, retrieve the IDs of each item, and then use Ajax to send the values to a PHP file, which saves the results to the database so that you can sort the elements when you return to the page later.
The sortable plug-in also provides a number of options for implementing other customizations, such as:
----Define a placeholder class that sets the style of a placeholder element when dragging an item
----A list of connections so that elements can be dragged and dropped into another sortable list on the same Web page
----to display and restrict sortable elements in a grid
----Create a multiple-column interface that enables you to drag and sort elements between columns
The example in Listing 4 shows how to create a three-column interface that contains drag-and-drop elements. These three columns are represented by three adjacent <div> elements in the CSS. For the sortable plug-in to work with the column structure, simply use the Connectwith option and set its value to the column class used on each column element. Option Connectwith allows you to use a multiple-column interface to drag and sort elements between columns.
Listing 4. Three-column drag-and-drop interface
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> Creating Customizable Web Interfaces with the jQuery UI and Ajax </title> <link type="text/css" href="css/ui-lightness/jquery-ui-1.8.6.custom.css" rel="stylesheet" /> <link type="text/css" href="css/custom.css" rel="stylesheet" /> <script type="text/javascript" src="js/jquery-1.4.2.min.js"></script> <script type="text/javascript" src="js/jquery-ui-1.8.6.custom.min.js"> </script> <script type="text/javascript"> $(function(){ $( ".column" ).sortable({ connectWith:".column" }); $( "#sortable" ).sortable(); }); </script> </head> <body> <h1> Creating Customizable Web Interfaces with the jQuery UI and Ajax </h1> <ul id="page"> <li class="column"> <div class="portlet ui-widget ui-widget-content ui-helper-clearfix ui-corner-all"> <div class="portlet-header ui-widget-header ui-corner-all">ToDo List</div> <div class="portlet-content"> <ul id="sortable"> <li class="ui-state-default">Item 1</li> <li class="ui-state-default">Item 2</li> <li class="ui-state-default">Item 3</li> <li class="ui-state-default">Item 4</li> <li class="ui-state-default">Item 5</li> <li class="ui-state-default">Item 6</li> <li class="ui-state-default">Item 7</li> </ul> </div> </div> <div class="portlet ui-widget ui-widget-content ui-helper-clearfix ui-corner-all"> <div class="portlet-header ui-widget-header ui-corner-all">Header</div> <div class="portlet-content">content</div> </div> </li> <li class="column"> <div class="portlet ui-widget ui-widget-content ui-helper-clearfix ui-corner-all"> <div class="portlet-header ui-widget-header ui-corner-all">Header</div> <div class="portlet-content">content</div> </div> </li> <li class="column"> <div class="portlet ui-widget ui-widget-content ui-helper-clearfix ui-corner-all"> <div class="portlet-header ui-widget-header ui-corner-all">Header</div> <div class="portlet-content">content</div> </div> <div class="portlet ui-widget ui-widget-content ui-helper-clearfix ui-corner-all"> <div class="portlet-header ui-widget-header ui-corner-all">Header</div> <div class="portlet-content">content</div> </div> </li> </ul> </body> </html>
To keep the styles of these elements consistent with your chosen jQuery UI theme, you use some CSS classes to define each element as a portlet that contains headers and content. These CSS classes form the JQuery UI CSS framework, allowing you to easily set themes for UI elements.
jQuery UI CSS Framework
so far, you've used some of the classes in the JQuery UI CSS framework. In this section, we'll explore further and learn how to leverage these classes to enable users to dynamically change the appearance of their personalized dashboard pages. The framework contains a number of classes that cover common UI elements. When you apply these classes, they automatically set topics for your widgets based on the theme you choose. Categories of available classes include layout help elements, widget containers, interaction states, interaction threads, icons (including status, image and Icon types), and other visual elements, such as rounded help elements, overlays, and shadows.
When you use the classes in this frame, you can easily switch between the available topics. Listing 5 shows how easily this process can be accomplished with the theme switcher tools provided by Themeroller.
Listing 5. JavaScript and HTML for adding a theme switcher to a custom portlet on a sample Web page
<script type= "Text/javascript" >
$ (function () {
$ (' #switcher '). Themeswitcher ();
$ (". Column"). Sortable ({
connectwith: ". Column"
});
$ ("#sortable"). sortable ();
</script>
<div class= "portlet-content" >
<script type= "Text/javascript" src= "http://"
jqueryui.com/themeroller/themeswitchertool/"></script>
<div id=" Switcher "></div>
</div>
</div>
The example in Listing 5 shows how easily you can add a theme Switcher tool to portlets in an existing sample Web page. You can easily locate and apply Themeswitcher to a widget by including the associated JavaScript file and creating a <div> as a container. This approach will get a Drop-down menu that contains the available themes provided by the JQuery UI. When a theme is selected, the entire page is updated immediately to match the topic. Such widgets are useful when users are allowed to customize their pages, and their options can even be saved to the previously described database to hold the element location (but the tool itself already has a cookie based storage that will remain available when the user refreshes the page).
The library also contains useful pre-built widgets that you can easily add to your own pages. Each widget has been structured to your custom theme or to the theme you have selected for rendering. The example in Listing 6 shows how to use the Tab widget in a page to organize some content for the user and render it using an existing theme.
Listing 6. Add jQuery UI widget
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>
Creating Customizable Web Interfaces with the jQuery UI and Ajax
</title>
<link type="text/css" href="css/ui-lightness/jquery-ui-1.8.6.custom.css"
rel="stylesheet" />
<link type="text/css" href="css/custom.css" rel="stylesheet" />
<script type="text/javascript" src="js/jquery-1.4.2.min.js">
</script>
<script type="text/javascript" src="js/jquery-ui-1.8.6.custom.min.js">
</script>
<script type="text/javascript">
$(function(){
$( "#tabs" ).tabs();
$('#switcher').themeswitcher();
$( ".column" ).sortable({
connectWith:".column"
});
$( "#sortable" ).sortable();
});
</script>
</head>
<body>
<h1>
Creating Customizable Web Interfaces with the jQuery UI and Ajax
</h1>
<div id="tabs">
<ul>
<li>
<a href="#tabs-1">Portlets</a>
</li>
<li>
<a href="#tabs-2">Profile information</a>
</li>
</ul>
<div id="tabs-1">
<ul id="page">
<li class="column">
<div class="portlet
ui-widget
ui-widget-content
ui-helper-clearfix
ui-corner-all">
<div class="portlet-header ui-widget-header ui-corner-all">
ToDo List
</div>
<div class="portlet-content">
<ul id="sortable">
<li class="ui-state-default">Item 1</li>
<li class="ui-state-default">Item 2</li>
<li class="ui-state-default">Item 3</li>
<li class="ui-state-default">Item 4</li>
<li class="ui-state-default">Item 5</li>
<li class="ui-state-default">Item 6</li>
<li class="ui-state-default">Item 7</li>
</ul>
</div>
</div>
<div class="portlet
ui-widget
ui-widget-content
ui-helper-clearfix
ui-corner-all">
<div class="portlet-header ui-widget-header ui-corner-all">
Header
</div>
<div class="portlet-content">content</div>
</div>
</li>
<li class="column">
<div class="portlet
ui-widget
ui-widget-content
ui-helper-clearfix
ui-corner-all">
<div class="portlet-header ui-widget-header ui-corner-all">
Header
</div>
<div class="portlet-content">content</div>
</div>
</li>
<li class="column">
<div class="portlet
ui-widget
ui-widget-content
ui-helper-clearfix
ui-corner-all">
<div class="portlet-header ui-widget-header ui-corner-all">
Theme
</div>
<div class="portlet-content">
<script
type="text/javascript"
src="http://jqueryui.com/themeroller/themeswitchertool/">
</script>
<div id="switcher"></div>
</div>
</div>
<div class="portlet
ui-widget
ui-widget-content
ui-helper-clearfix
ui-corner-all">
<div class="portlet-header ui-widget-header ui-corner-all">
Header
</div>
<div class="portlet-content">content</div>
</div>
</li>
</ul>
<br class="clear" />
</div>
<div id="tabs-2">
<p>Show profile information here</p>
</div>
</div>
</body>
</html>
The tabbed interface contains a <div> element as a container that has the ID of the tab, as well as two list items used as the actual tab, contains the tab name, and two tabs with IDs match the anchor tags in the tab list items. As you can see, it's easy to add the right HTML to display tabs and tab content, and then easily apply the tab widget to the tab container. This automatically displays a tabbed interface and applies the selected theme based on the class that you selected.
using effects to enhance the UI
Many categories of effects can be leveraged through the JQuery UI Library, many of which are simple extensions to existing jQuery methods. Each category contains a method with a custom parameter, such as:
Color Transitions:
------Animate. Used to animate and color effects for a Web page
Visibility Transitions:
------Toggle. Switch whether or not an element is visible or not, hide or display this element
------show. Displays an element that can be animated using any of the following animation types
------hide. Hides an element that can be animated using any of the following animation types
Class Transitions:
------addclass. Can be used to add a class to an element that can contain animation effects between two different display states of the class rendering
------removeclass. Can be used to delete a class for an element, which can contain animation effects between two different display states that the class renders
------Switchclass. Can be used to switch between two classes to include animation effects between two different display states of the class rendering
------Toggleclass. You can add or remove a class for an element based on whether it already contains a class, and you may include animation effects between the two different display states that the class renders
There are also animation effects that can be used in conjunction with other effect methods, as shown in part of the method description. These effects include blind, bounce, Clip, Drop, Explode, Fade, Fold, highlight, Puff, pulsate, Scale, Shake, Size, Slide, and Transfer. With the JQuery plug-in, you can also easily apply some of the other advanced technologies.
As with other content in the JQuery UI Library, the effect is easy to use, simply locate an HTML element or group of elements in a Web page, and then apply the appropriate method. Listing 7 shows how to apply a method to each portlet content in the sample Web page to use the Toggle effect. In this example, the Toggle effect is triggered by double-clicking the title of a Portlet, which causes the content to switch between hiding and displaying.
Listing 7. Apply the Toggle effect to hide and display portlet content
<script type= "Text/javascript" >
$ (function () {
$ (". Portlet-header"). DblClick (function () {
$ ( This). Parent (). Find (". Portlet-content"). Toggle ();
</script>
The content of the portlet is implemented by traversing the header element, and then using the JQuery Find method to locate the related element with the Portlet-content class.
Concluding remarks
Using the JQuery UI to enhance your Web pages is very simple, basically you just need to include the right files and perform a function call. Building a highly interactive interface is extremely difficult before libraries such as the jquery and jquery UI appear, because code must be written from scratch, and a lot of testing needs to be done to ensure that the code works correctly in all major browsers. Today, you can create effects and sortable elements by including one file and perform a function call, or change the theme.
The above is the entire content of this article, I hope to help you learn, but also hope that we support the cloud habitat community.
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
