Visit our archive

 

 

 

 

This post 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 led 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. 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 sublibraries 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 prepacked UI elements and effects such as accordions, tooltips, fade in, fade out, etc. The main benefit of jQuery UI is its concise prepackaged 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.

  • List item one
  • List item two
  • List item three

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.








  • This is really interesting, You are a very skilled blogger.

    I’ve joined your rss feed and look forward to seeking more of your magnificent
    post. Also, I’ve shared your web site in my social networks!

  • rice cooking Jun 13, 2014 Reply

    whoah this blog is excellent i love studying your
    articles. Stay up the good work! You recognize, many
    people are searching around for this information, you can aid them greatly.

  • best acne treatment Jun 24, 2014 Reply

    We stumbled over here from a different web page and
    thought I might check things out. I like what I see so now i am following you.

    Look forward to exploring your web page again.

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

  • e cig Jul 2, 2014 Reply

    Hurrah, that’s what I was seeking for, what a information! present here at this web site, thanks admin of this site.

  • I could not resist commenting. Perfectly written!

  • MuoiCPflum Oct 8, 2016 Reply

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

  • Name (Required)

  • Email (Required, but not published)

  • Url (Optional)

  • Comment (Required)