The number of sites using jQuery has steadily increased over the years and now stands at 56%, compared to less than 5% for its closest competitor. Not only that, but it is used on more high traffic sites than other libraries, sites like amazon.com and microsoft.com (see W3 Tech Surveys). jQuery’s innovative design pattern in which every function returns a jQuery object has contributed to its popularity. The pattern lets you chain together functions and produce very concise code. For example, the line $(“div”).filter(“.error-message”).hide() finds all div tags on a page, selects those assigned the CSS class “error-message,” and hides them.
jQuery Sub-Libraries which add more functionality and simplify coding, are usually focused on a particular subset of functionality. For example, jQuery Mobile has commands specific to mobile devices. This sub-library includes appearance and behaviour functions specific to mobile devices, such as rounded buttons and swipe screens using touch functionality.
Sub-library provides many pre-packed UI elements and effects such as accordions, tooltips, fade in, fade out, etc. The main benefit of jQuery UI is its concise pre-packaged code that can be modified to fit your needs. This makes it easier for beginners to use and learn from and makes developing more complex functionality quicker for advanced users. Additionally, jQuery UI is a curated library with contributions from many different developers. So as more elements are added developers can learn from each other and see what is possible to construct with jQuery and its sub-libraries.
jQuery UI Examples
Below are some jQuery UI widget examples that illustrate both the power and simplicity of jQuery UI. Enjoy!
Example 1: Color Picker Slider
Widget Details on jQuery UI
Aside from just being a really cool effect, this color picker demonstrates two aspects of jQuery and jQuery UI. It shows how jQuery can be used to manipulate CSS color values through the use of a slider.
Example 2: Accordion
Accordions are used when you have a large amount of written material that needs to be grouped into sections and compressed into a smaller space. Perfect when screen real estate is scarce. In the example below, jQuery provides the accordion behaviour and CSS defines their styling.
Mauris mauris ante, blandit et, ultrices a, suscipit eget, quam. Integer ut neque. Vivamus nisi metus, molestie vel, gravida in, condimentum sit amet, nunc. Nam a nibh. Donec suscipit eros. Nam mi. Proin viverra leo ut odio. Curabitur malesuada. Vestibulum a velit eu ante scelerisque vulputate.
Sed non urna. Donec et ante. Phasellus eu ligula. Vestibulum sit amet purus. Vivamus hendrerit, dolor at aliquet laoreet, mauris turpis porttitor velit, faucibus interdum tellus libero ac justo. Vivamus non quam. In suscipit faucibus urna.
Nam enim risus, molestie et, porta ac, aliquam ac, risus. Quisque lobortis. Phasellus pellentesque purus in massa. Aenean in pede. Phasellus ac libero ac tellus pellentesque semper. Sed ac felis. Sed commodo, magna quis lacinia ornare, quam ante aliquam nisi, eu iaculis leo purus venenatis dui.
- First List Item
- Second List Item
- Third List Item
Cras dictum. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Aenean lacinia mauris vel est.
Suspendisse eu nisl. Nullam ut libero. Integer dignissim consequat lectus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.
Example 3: Tooltips
Tooltips are used to give hints about otherwise confusing or unexplained features of a website.
There are various ways to customize the animation of a tooltip.
You can also use the open event.
Example 4: Date Picker
Date pickers are a neat widget that can be used to input dates efficiently and accurately.