JavaScript, jQuery, and jQuery UI

JavaScript vs jQuery

The goal of this article is to outlines the relationship between JavaScript and some of its most popular libraries (SenchaTouch and jQuery) and sub-libraries (jQuery Mobile and jQuery UI) and takes a closer look at one of my favorite sub-libraries: jQuery UI.

What is JavaScript?

JavaScript is a programming language that interacts directly with a Web browser to provide a more complex, desktop-like front-end than what can be built with HTML alone. It improves user interface (UI) response speed and UI element sophistication to make websites more dynamic from the user’s perspective. Unfortunately, from the coder’s perspective, it can make websites more complex to develop.

JavaScript Libraries

The complexity of coding and testing pure JavaScript has created the need for a simpler but just as powerful language to be adopted by many developers to work with a library, pre-written code that allows for easier development. SenchaTouch is a recently released example of a JavaScript library that provides a mobile app like functionality in a web application. But by far the most popular JavaScript Library is jQuery created by John Resig and released at BarCampNYC in 2006.

jQuery: A JavaScript Library

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

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.

jQuery UI

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.

Simple Colorpicker



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.

Section 1

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.

Section 2

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.

Section 3

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

Section 4

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 use the show and hide options.

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.





Conclusion

jQuery UI is an efficient way to tap the power of JavaScript and make your website sizzle. The fact that jQuery UI also has a significant following in the programming world means that new functionality will continue to be produced in the future and help is only a forum message away. For these reasons, I am a strong supporter of jQuery UI, and I hope I was able to share with you some its value today.








 

 

 

 

10 Comments

  1. This is really interesting! You are a very skilled blogger.

    I’ve joined your RSS feed and look forward to seeing more of your magnificent posts. Also, I’ve shared your web site on my social networks!

  2. rice cooking

    Whoah, this blog is excellent! I love studying your articles. Keep up the good work! You recognize that many people are searching for this information and you can aid them greatly.

  3. We stumbled over here from a different website and thought I might check things out. I like what I see, so now I am following you.

    Look forward to exploring your website again.

  4. eletronic cigarette

    My brother recommended I might like this web site. He was totally right. This post truly made my day. You can’t imagine how much time I
    had spent looking for this info! Thanks!

  5. e cig

    Hurrah, that’s what I was seeking, how informative! Thanks, admin of this site.

  6. I could not resist commenting. Perfectly written!

  7. Keep this going please, great job!

  8. MuoiCPflum

    I like it whenever people come together and share ideas. Great site, ensure that it stays up!

  9. Nice post! I learn something totally new and challenging on blogs I stumble upon every day. It’s always useful to read articles from other authors and from other sites.

  10. borvestinkral

    You should take part in a contest for one of the best blogs on the web. I will recommend this site!

Leave a Reply