6 min read

(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:

Packt

LEAVE A REPLY

Please enter your comment!
Please enter your name here