jQuery refresher

Exclusive offer: get 50% off this eBook here
Instant jQuery UI Starter [Instant]

Instant jQuery UI Starter [Instant] — Save 50%

Discover how you can create rich end-user experiences for your web applications with jQuery UI with this book and ebook

$12.99    $6.50
by Jesse Boyer | August 2013 | Open Source Web Development

In this article by Jesse Boyer, author of the book, Instant jQuery UI Starter, will make your learning experience easy and fun by providing examples to build along with. You'll fully understand what the different libraries in UI do and how to use them. You'll also learn the pattern which allows you to customize any UI widget and interaction. You will quickly find yourself churning out UI code to create a better user experience!

(For more resources related to this topic, see here.)

If you haven't used jQuery in a while, that's okay, we'll get you up to speed very quickly. The first thing to realize is that the Document.Ready function is extremely important when using UI. Although page loading happens incredibly fast, we always want our DOM (the HTML content) to be loaded before our UI code gets applied. Otherwise we have nothing to apply it to!

We want to place our code inside the Document.Ready function, and we will be writing it the shorthand way as we did previously. Please remove the previous UI checking code in your header that you had previously:

$(function() {
// Your code here is called only once the DOM is completely
loaded
});

Easy enough. Let's refresh on some jQuery selectors. We'll be using these a lot in our examples so we can manipulate our page. I'll write out a few DOM elements next and how you can select them. I will apply hide() to them so we know what's been selected and hidden. Feel free to place the JavaScript portion in your header script tags and the HTML elements within your <body> tags as follows:

  • Selecting elements (unchanging the HTML entities) as follows:

    $('p').hide();
    <p>This is a paragraph</p>
    <p>And here is another</p>
    <p>All paragraphs will go hidden!</p>

  • Selecting classes as follows:

    $('.edit').hide();
    <p>This is an intro paragraph</p>
    <p class="edit">But this will go hidden!</p>
    <p>Another paragraph</p>
    <p class="edit">This will also go hidden!</p>

  • Selecting IDs as follows:

    <div id="box">Hide the Box </div>
    <div id="house">Just a random divider</div>

Those are the three basic selectors. We can get more advanced and use the CSS3 selectors as follows:

$("input[type=submit]").hide();
<form>
<input type="text" name="name" />
<input type="submit" />
</form>

Lastly, you can chain your DOM tree to hide elements more specifically:

$("table tr td.hidden").hide(); <table> <tbody> <tr> <td>Data</td> <td class="hidden">Hide Me</td> </tr> </tbody> </table>

Step 3 – console.log is your best friend

I brought up that developing with the console open is very helpful. When you need to know details about a JavaScript item you have, whether it be the typeof type or value, a friend of yours is the console.log() method. Notice that it is always in lowercase. This allows you to place things in the console rather than somewhere on your page.

For example, if I were having trouble figuring out what a value was returning to me, I would simply do the following:

function add(a, b) {
return a + b;
}
var total = add(5, 20);
console.log(total);

This will give me the result I wanted to know quickly and easily. Internet Explorer does not support console logging, it will prevent your JavaScript from running once it hits a console.log method. Make sure to comment out or remove all the console logs before releasing a live project or else all the IE users will have a serious problem.

Step 4 – creating the slider widget

Let's get busy! Open your template file and let's create a DOM element to attach a slider widget to. And to make it more interesting, we are also going to add an additional DIV to show a text value. Here is what I placed in my <body> tag:

<div id="slider"></div>
<div id="text"></div>

It doesn't have to be a <div> tag, but it's a good generic block-level element to use. Next, to attach a slider element we place the following in our <script> tags (the empty ones):

$(function() {
var my_slider = $("#slider").slider();
});

Refresh your page, and you will have a widget that can slide along a bar. If you don't see a slider, first check your browser's development tools console to see if there are any JavaScript errors. If you don't see any still, make sure you don't have a JavaScript blocker on!

The reason we assign a variable to the slider is because, later on, we may want to reference the options, which you'll see next. You are not required to do this, but if you want to access the slider outside of its initial setup, you must give it a variable name.

Our widget doesn't do much now, but it feels cool to finally make something, whatever it is! Let's break down a few things we can customize. There are three categories:

  • Options: These are defined in a JavaScript object ({}) and will determine how you want your widget to behave when it's loaded, for example, you could set your slider to have minimum and maximum values.
  • Events: These are always a function and they are triggered when a user does something to your item.
  • Methods: You can use methods to destroy a widget, get and set values from outside of the widget, and even set different options from what you started with.

To play with a few categories, the easiest start is to adjust the options. Let's do it by creating an empty object inside our slider:

var my_slider = $("#slider").slider({});

Then we'll create a minimum and maximum value for our slider using the following code:

var my_slider = $("#slider").slider({
min: 1,
max: 50
});

Now our slider will accept and move along a bar with 50 values. There are many more options at UI API located at api.jquery.com under slider. You'll find many other options we won't have time to cover such as a step option to make the slider count every two digits, as follows:

var my_slider = $("#slider").slider({
min: 1,
max: 50,
step: 2
});

If we want to attach this to a text field we created in the DOM, a good way to start is by assigning the minimum value in the DIV, as this way we only have to change it once:

var min = my_slider.slider('option', 'min');
$("#text").html(min);

Next we want to update the text value every time the slider is moved, easy enough; this will introduce us to our first event. Let's add it:

var my_slider = $("#slider").slider({
min: 1,
max: 50,
step: 2,
change: function(event, ui) {
$("#text").html(ui.value);
}
});

Summary

This article describes the basis for all widgets. Creating them, setting the options, events, and methods. That is the very simple pattern that handles everything for us.

Resources for Article:


Further resources on this subject:


Instant jQuery UI Starter [Instant] Discover how you can create rich end-user experiences for your web applications with jQuery UI with this book and ebook
Published: May 2013
eBook Price: $12.99
See more
Select your format and quantity:

About the Author :


Jesse Boyer

Jesse Boyer began his programming adventure in 1997 when he was 12 years old. In his teenage years he had trouble in school, partly because it was uninteresting. Yet he loved creating ideas from nothing, with the help of a computer. Jesse's parents encouraged his learning by giving him programming books throughout the years. He now has a career as a programmer.

Jesse lives in Florida with his wife Ana Sofia.

Books From Packt


jQuery UI 1.8: The User Interface Library for jQuery
jQuery UI 1.8: The User Interface Library for jQuery

jQuery UI Cookbook
jQuery UI Cookbook

jQuery UI 1.7: The User Interface Library for jQuery
jQuery UI 1.7: The User Interface Library for jQuery

jQuery UI Themes Beginner's Guide
jQuery UI Themes Beginner's Guide

jQuery UI 1.6: The User Interface Library for jQuery
jQuery UI 1.6: The User Interface Library for jQuery

jQuery Tools UI Library
jQuery Tools UI Library

 jQuery Mobile Web Development Essentials
jQuery Mobile Web Development Essentials

 Learning jQuery, Third Edition
Learning jQuery, Third Edition


Code Download and Errata
Packt Anytime, Anywhere
Register Books
Print Upgrades
eBook Downloads
Video Support
Contact Us
Awards Voting Nominations Previous Winners
Judges Open Source CMS Hall Of Fame CMS Most Promising Open Source Project Open Source E-Commerce Applications Open Source JavaScript Library Open Source Graphics Software
Resources
Open Source CMS Hall Of Fame CMS Most Promising Open Source Project Open Source E-Commerce Applications Open Source JavaScript Library Open Source Graphics Software