alt
Advertisement
Sponsored links
Online Training
Career Series
Exforsys
Sponsored Links
Exforsys arrow jQuery


jQuery
“What exactly is jQuery anyway?”  Well simply put jQuery is an extensive and vast JavaScript library that offers a tier of functions that are meant to ease and simplify normally complicated JavaScript development.  Learning jQuery: Better Interaction Design and Web Development with Simple JavaScript Techniques is a wonderful introduction to JQuery framework. The book offers many informative code samples and extremely helpful tutorials about how to make JQuery work for you and how to deal with common issues as well as not so common issues such as; acquiring information with the use of AJAX and manipulating tubular data.
Start Here
Learning jQuery - Table Manipulation By Karl Swedberg, Jonathan Chaffer Better Interaction Design and Web Development with Simple JavaScript Techniques

Tutorial Index
  1. Learning jQuery - Sorting In this chapter, we will use jQuery to apply techniques for increasing the readability, usability, and visual appeal of tables, though we are not dealing with tables used for layout and design. In fact, as the web standards movement has become more pervasive in the last fe...
  1. Learning jQuery - JavaScript Sorting There are times, though, when we either don't want to wait for server responses when sorting, or don't have a server-side scripting language available to us. A viable alternative in this case is to perform the sorting entirely on the browser using JavaScript cli...
  1. Learning jQuery - Basic Alphabetical Sorting Now let's perform a sort on the Title column of the table. We'll need a class on the table header cell so that we can select it properly:
  1. Learning jQuery - The Power of Plug-ins The alternateRowColors() function that we wrote is a perfect candidate to become a jQuery plug-in. In fact, any operation that we wish to apply to a set of DOM elements can easily be expressed as a plug-in. In this case, we only need to modify our existing fu...
  1. Learning jQuery - Finessing the Sort Keys Now we want to apply the same kind of sorting behavior to the Author(s) column of our table. By adding the sort-alpha class to its table header cell, the Author(s) column can be sorted with our existing code. But ideally authors should be sorted by last nam...
  1. Learning jQuery - Sorting Other Types of Data Our sort routine should be able to handle not just the Title and Author columns, but the Publish Dates and Price as well. Since we streamlined our comparator function, it can handle all kinds of data, but the computed keys will need to be adjusted for o...
  1. Learning jQuery - Column Highlighting It can be a nice user interface enhancement to visually remind the user of what has been done in the past. By highlighting the column that was most recently used for sorting, we can focus the user's attention on the part of the table that is most likely to be ...
  1. Learning jQuery - Pagination Sorting is a great way to wade through a large amount of data to find information. We can also help the user focus on a portion of a large data set by paginating the data. Pagination can be done in two ways—Server-Side Pagination and JavaScript Pagination.
  1. Learning jQuery - JavaScript Pagination Let's examine how we would add JavaScript pagination to the table we have already made sortable in the browser. First, we'll focus on displaying a particular page of data, disregarding user interaction for now:
  1. Learning jQuery - Enabling the Pager Buttons To make these new buttons actually work, we need to update the currentPage variable and then run our pagination routine. At first blush, it seems we should be able to do this by setting currentPage to page, which is the current value of the iterator that...
  1. Learning jQuery - Marking the Current Page Our pager can be made more user-friendly by highlighting the current page number. We just need to update the classes on the buttons every time one is clicked:
  1. Learning jQuery - The Finished Code The completed sorting and paging code in its entirety follows:
  1. Learning jQuery - Advanced Row Striping As we saw earlier in the chapter, row striping can be as simple as two lines of code to alternate the background color:
  1. Learning jQuery - Three-color Alternating Pattern There may be times when we want to apply more complex striping. For example, we can apply a pattern of three alternating row colors rather than just two. To do so, we first need to define another CSS rule for the third row. We'll also reuse the odd ...
  1. Learning jQuery - Alternating Triplets Suppose we want to use two colors, but have each one display three rows at a time. For this, we can employ the odd and even classes again, as well as the modulus operator. But we'll also reset the class each time we're presented with a row containing elements...
  1. jQuery Row Highlighting Another visual enhancement that we can apply to our news article table is row highlighting based on user interaction. Here we'll respond to clicking on an author's name by highlighting all rows that have the same name in their author cell. Just as we did with the row stripin...
  1. jQuery Tooltips Although the row highlighting might be a useful feature, so far it's not apparent to the user that the feature even exists. We can begin to remedy this situation by giving all author cells a clickable class, which will change the cursor to a pointer when a user hovers the mouse curs...
  1. jQuery Collapsing and Expanding Table Rows When large sets of data are grouped in tables, as each year's set of articles are in our News page, collapsing, or hiding, a section's contents can be a convenient way to get a broad view of all of the table's data without having to scroll so much.
  1. jQuery Table Row Filtering Earlier we examined sorting and paging as techniques for helping users focus on relevant portions of a table's data. We saw that both could be implemented either with server-side technology or with JavaScript. Filtering completes this arsenal of data arrangement strategie...
  1. jQuery Collecting Filter Options from Content Now we need to expand the filter options to cover the range of available topics in the table. Rather than hard-coding all of the topics, we can gather them from the text that has been entered in the table. We can change the definition of keywords to re...
  1. jQuery Interacting with Other Code We learned with our sorting and paging code that we can't treat the various features we write as islands. The behaviors we build can interact in sometimes surprising ways; for this reason, it is worth revisiting our earlier efforts to examine how they coexist with...
  1. jQuery Expanding and Collapsing Table Rows The expanding and collapsing behavior added earlier also conflicts with our filters. If a section is collapsed and a new filter is chosen, then the matching items are displayed, even if in the collapsed section. Conversely, if the table is filtered and a s...
  1. jQuery Table Row Finished Code The Finished Code Our second example page has demonstrated table row striping, highlighting, tooltips, collapsing/expanding, and filtering. Taken together, the JavaScript code for this page is:
  1. jQuery Reference Guide by Jonathan Chaffer and Karl Swedberg A Comprehensive Exploration of the Popular JavaScript Library

 

 
Exforsys Offers
© 2008 Exforsys.com
Joomla! is Free Software released under the GNU/GPL License.
Page copy protected against web site content infringement by Copyscape