Home > Developer > JavaScript
JQuery UI is used with Ajax to create a customizable Web interface, jqueryajax
Today, websites are more customizable than ever before, allowing users to change their spaces and personalize them based on their preferences. Personalized homepage or dashboard page (such as iGoogle, MyYahoo! And MyAOL), and most Web applications even integrate similar functions. The jQuery library simplifies the compilation of such complex JavaScript interactions. With the introduction of jQuery UI, this function is further simplified, this library provides common user interface types in the form of easy-to-access jQuery plug-ins.
This article describes how to use Ajax and jQuery UI to create highly customizable UIS with various customization functions. You will learn how to customize all aspects of Web pages and how to save your preferences using Ajax. In addition, you will also use drag-and-drop techniques to sort list items, as well as organize page elements and UI widgets to switch between themes and color schemes-everything can be done on a separate Web page.
Create custom UI
JQuery UI is a UI library that contains easy-to-write interactions, animations, and effects, as well as widgets that allow you to easily customize themes. You can customize the download, select the theme you want to include, and extract components, such as UI kernel (required), interaction, widgets, or effects. To use jQuery UI, you also need the latest jQuery library. The download part contains this library, but you can also download the latest library from the jQuery website when you need to update this library later. Listing 1 shows how to include the jQuery UI Library and other necessary files on the Web page.
Listing 1.Create a Web page containing jQuery UI code
<!DOCTYPE html>The first CSS contains the ui-lightness code of the selected topic. This is the default topic selected during the jQuery UI download process, but you can change it to any provided topic. If you have downloaded the library and want to update the topic in use, you only need to access ThemeRoller, download the existing topic from the library, or use it to customize your own topic. The second CSS in the Code provides a custom class to set the page style or overwrite the attributes used in the selected topic. Finally, the JavaScript files contained in the Code are jQuery and jQuery UI libraries.
Use jQuery UI to create a drag-and-drop interface
The drag-and-drop feature is increasingly common today and can be used to sort lists and organize page elements. This feature is also used in personalized home pages of many Web applications. The jQuery UISortable plug-in provides a shortcut to add the sorting function for Web pages. It has many options and events and allows you to customize interaction as you wish.
The example in Listing 2 shows how to use the Sortable plug-in to create a simple sortedlist. You can use this plug-in to make a simple HTML list A sorteddrag-and-drop list. First, add an identifier to the list. In this example, specify sortable as the ID so that jQuery can easily locate the list and add a sortable function call to it. You also need to add the ui-state-default class for each item to keep its style consistent with that of the selected topic.List 2.Use the jQuery UI Sortable plug-in to create a simple Sortable list
<! DOCTYPE html>If you want to save the location of the list items, you may have to save the detailed information to the cookie or database to correctly display the page, so that you can view the subsequent page. If you are using a database, you can use Ajax to send the data to the server script so that the value can be written to the database, then, when the initial Page is loaded, an XML or JSON response with the appropriate position is returned to place each element in the correct position. The sample code in listing 3 shows how to send the Location value to the PHP script on the server.
Listing 3.Send the Location value to the server 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 items in the sortedlist, you need to use an event to determine the time of the sorting items. You can use multiple sortedevents, but this example requires a stop event, because only this event can be triggered after all sortedelements are sorted. This is important because you need to ensure that all elements are in the new location before trying to save the location. After the stop event is triggered, You need to traverse each list item to obtain its index in the list, then retrieve the IDs of each item, and then send these values to a PHP file using Ajax, this saves the results to the database to sort the elements when you return to the page later.
The Sortable plug-in also provides many customization options, such:
---- Define a placeholder class and set the style of the placeholder element when dragging an item
---- Connection list, allowing elements to be dragged to another sortable list on the same Web page
---- Display and limit sortable elements in the grid
---- Create a multi-column interface. You can drag and sort elements between columns.
The example in Listing 4 shows how to create a three-column interface containing drag-and-drop elements.The three columns are represented by three <div> elements adjacent to each other in CSS. To enable the Sortable plug-in to process the column structure, you only need to use the connectWith option and set its value to the column Class used on each column element. The connectWith option allows you to drag and sort elements between columns on the Multi-bar interface.Listing 4.Three-column drag-and-drop interface
<!DOCTYPE html>To ensure that the style of these elements is consistent with the jQuery UI topic you selected, you need to use some CSS classes to define each element as a portlet containing the header and content. These CSS classes constitute the jQuery ui css framework, allowing you to easily set the themes of UI elements.
JQuery ui css framework
So far, you have used some classes in the jQuery ui css framework. In this section, we will further explore how to use these classes to allow users to dynamically change the appearance of their personalized dashboard pages. The Framework contains many classes that cover common UI elements. When these classes are applied, they automatically set themes for your widgets Based on the selected themes. Available classes include layout help elements, widget containers, InterAction statuses, InterAction clues, icons (including statuses, images, and Icon types), and other visualization elements, for example, help elements, overwrites, and shadows of rounded corners.
When using the classes in this framework, you can easily switch between available topics. Listing 5 shows how easy it is to use ThemeRoller's theme switch tool to complete this process.Listing 5.Add the JavaScript and HTML of the theme switch for the custom portlet on the 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 easy you can add a theme switch tool to the portlet in the existing sample Web page. By adding a JavaScript file to a widget and creating a <div> container, you can easily locate the <div> and apply themeswitcher to it. In this way, a drop-down menu containing the available topics provided by jQuery UI is obtained. When a topic is selected, the entire page is updated immediately to match the topic. This type of widget is useful when users are allowed to customize their pages. Its options can even be saved to the database described above, to save the element location (however, this tool already has cookie-based storage, and the previously selected topic remains available when the user refreshes the page ).
This library also contains useful pre-built widgets that you can easily add to your own page. Each widget is structured as your custom topic or a selected topic. The example in Listing 6 shows how to use the Tab widget on the page to organize some content for the user and present it with an existing topic.Listing 6.Add jQuery UI widgets to an existing topic
<!DOCTYPE html>The option card interface contains a <div> element used as a container, which has a tab ID and two list items used as the actual tab, including the tab name, the two tabs with ids match the anchor tag in the tab list. As you can see, you can easily add appropriate HTML to display tabs and Tab content, and then easily apply the Tab widget to Tab containers. This will automatically display an option card interface and apply the selected topic based on the selected class.
Enhance UI with effects
Using the jQuery UI library, you can use the effects of many categories. Many of the transitions are simple extensions of existing jQuery methods. Each category contains methods with custom parameters, for example:
Color transitions:
------ Animate. Used to achieve animation and color effects for a Web page
Visibility transitions:
------ Toggle. enable or disable the visibility of an element to hide or display it.
------ Show. displays an element. You can use any of the following animation types to achieve the animation effect.
------ Hide. Hide an element. You can use any of the following animation types to achieve the animation effect.
Class transitions:
------ AddClass. It can be used to add a class to an element. It can contain the animation effect between two different display states of the class.
------ RemoveClass. It can be used to delete a class for an element. It can contain animations between two different display states of the class.
------ SwitchClass. It can be used to switch between two classes, and can include the animation effect between two different display States presented by the class.
------ ToggleClass. You can add or delete a class for an element based on whether the class is included in the element. It can include the animation effect between two different display states of the class.
As shown in some method descriptions, there are some animation effects that can be used together with other effects. These effects include Blind, Bounce, Clip, Drop, Explode, Fade, Fold, Highlight, Puff, Pulsate, Scale, Shake, Size, Slide, and Transfer. In addition, with the jQuery plug-in, you can easily apply other advanced technologies.
Similar to other content in the jQuery UI library, it is very easy to apply effects. You only need to locate an HTML element or element group on the Web page, and then apply the appropriate method. Listing 7 shows how to apply the content of each portlet on 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 leads to Content Switching between hiding and display.Listing 7.Hide and display the portlet content using the Toggle Effect
<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. Then, the jQuery find method is used to locate related elements with the portlet-content class.
Conclusion
It is very easy to use jQuery UI to Enhance Web pages. Basically, you only need to include the appropriate files and execute the callback function call. Before libraries such as jQuery and jQuery UI appeared, it was extremely difficult to build a highly interactive interface, because the Code had to be written from scratch, in addition, a large number of tests are required to ensure that the code works properly in all mainstream browsers. Now, you only need to include a file and execute the explain function call to create effect and sortable elements, or change the topic.The above is all the content of this article. I hope it will be helpful for your learning and support for helping customers.
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
