News

An expert guide to jQuery UI

Discover how to code beautiful and functional interfaces with this library

jqueryui

DRAG & DROP

Dragging and dropping files is a popular function . jQuery UI-based websites can implement this pattern using two classes known as draggable and droppable

jQuery UI-derived controls are instantiated in code. Due to this, their declaration is relatively simple in the markup. Draggable and droppable are made up of <div> tags as per the following scheme:

<body>
  <div id=”draggable” class=”ui-widget-content”>
    <p>Drag me to my target</p>
  </div>
  <div id=”droppable” class=”ui-widget-header”>
    <p>Drop here</p>
  </div>

The actual activation is performed in a script tag:

<script>
  $(function() {
    $( “#draggable” ).draggable();
    $( “#droppable” ).droppable({

  drop: function( event, ui ) {
    $( this )
      .addClass( “ui-state-highlight” )
      .find( “p” )
      .html( “Dropped!” );
}

});
});
</script>

Draggable objects are instantiated by invoking the draggable() function on a pointer to the <div> tag in question – in our case, we use a jQuery selector to retrieve the widget from the DOM. Their constructor doesn’t take a lot of extra options – normally, invoking draggable() on a <div> tag is good practice.

Droppable objects act as bases for the incoming objects. They fire a variety of events as elements are dumped onto them. In our case, we use drop in order to receive notifications of incoming elements; when an element has been received, we proceed to changing the look of the widget in question. A pointer to the draggable can be obtained by accessing the draggable member of the UI element.
Droppables provide a large selection of configuration settings that can be used to adjust their behaviour. For example, set the tolerance property in order to modify the collision detection algorithm used for detecting whether an element has been dropped:

$( “.selector” ).droppable( “option”, “tolerance”, “fit” );

SELECT & SORT

jQuery UI provides two helper classes that add valuable intelligence to stock HTML lists

Lists tend to be used for selecting and/or sorting elements. Sortable permits the user to rearrange items, while selectable can be used in order to create a list where interesting elements can be highlighted. Applying them to an existing list is straightforward and can be accomplished using the methods described in the section on drag and drop.

Combining the two helper classes is not recommended as it tends to lead to usability issues: users don’t expect to be able to use drag and drop on a list of selectable items. It nevertheless is possible via a small trick found out by users of StackOverflow (bit.ly/1k2N4jD).
First of all, you need to declare the list via an <ul> tag. Then, proceed to setting it all up using
the following code snippet:

$( “#list” )
  .sortable({ handle: “.handle” })
  .selectable({ filter: “li”, cancel:“.handle” })
  .find( “li” )
  .addClass( “ui-corner-all” )
  .prepend( “<div class=’handle’>
  <span class=’ui-icon ui-icon-
  carat-2-n-s’></span></div>” );
    

Finally, add custom intelligence via CSS:

001    ul { width: 300px; list-style: none; 
margin: 0; padding: 0; }
002    li { background: white; position:
relative;margin: 1em 0; padding: 1em; 
border: 2px solid gray; list-style: 
none; padding-left: 42px; }
003    li .handle { background: #f8f8f8; 
position:absolute; left: 0; top: 0; 
bottom: 0; padding:8px; }
004    .ui-selecting { background: #eee; }
005    .ui-selecting .handle { background:     #ddd; }
006    .ui-selected { background: #def; }
007    .ui-selected .handle { background:     #cde; }

This workaround will result in a list that has visible sorting handles that can be used for dragging the elements around.

RESIZABLE

Users can change the size of a group of elements on screen with Resizable

Most instances of this class are a rectangular area, containing the content to be resized. The declaration of the area is outlined via a <div> tag:

001    <div id=”resizable” class=”ui-widget    -content”>
002        <h3 class=”ui-widget-header”> Resizable</h3>
003    </div>

Initialisation is done in JavaScript:

001        <script>
002        $(function() {
003            $( “#resizable” ).resizable();
004        });
005        </script>

Here we give the area a border and title:

001        <style>
002        #resizable { width: 150px; height: 150px; padding: 0.5em; }
003        #resizable h3 { text-align: center; margin: 0; }
004        </style>

TAB ELEMENTS

Users can be overwhelmed by screens containing loads of options, so make use of tabs to break down into smaller, thematically coherent units of content

Creating the markup for tabs is an involved process. Create a <div> containing the ID of the tabs. Inside of it, declare an unordered list with hyperlink elements.

001     <div id=”tabs”>
002    <ul>
003    <li><a href=”#tabs-1”>Buttons</a></li>
004    <li><a href=”#tabs-2”>Some text</a></li>
005    </ul>

The first element usually is the one that will be activated once the page loads. Actual tab content is supplied in a group of <div> tags, which are assigned to the tab headings via their IDs. In our case, two tabs are created with varying contents:

001 <div id=”tabs-1”>

Even though tabs tend to contain a lot of text, we can also use them to showcase jQuery UI buttons.

This is THE stock OPTION:

001 <button>A button element</button>
002 

This is THE jQuery OPTION:

001 <a href=”#” id=”aBtn”>A button</a>
002 </div>
003 <div id=”tabs-2”>
004 This contains some text...</div>
005 </div>

Finally, inform the jQuery UI engine of the necessity to create tabs by invoking the tabs() function on the mother <div> in the DOM. Member elements such as the jQuery UI-generated button should be initialised after the invocation of tabs() is complete.

CHOOSE THE PERFECT TIME

Forcing users to enter dates using their keyboard is annoying and error-prone. Provide a pop-up calendar for a much more convenient and efficient form of input

Date pickers are put on top of input widgets, which should be created with this markup sequence:

001    <p>Date: <input type=”text” id=”datepicker”></p>

Proceed to calling the datepicker() method on a pointer to the element to get the date picker set up:

001    <script>
002    $(function() {
003        $( “#datepicker” ).datepicker();
004    });
005    </script>

By default, the range of dates accepted by the datepicker is limited only by the JavaScript engine. If your application requires a different approach, the values can be limited by passing in appropriate configuration values:

001    $(function() {
002        $( “#datepicker” ).datepicker({ 
minDate: -20, maxDate: “+1M +10D” });
003    });
004

This would enforce that the values shown in the picker range from twenty days before to one month and ten days after the current system date set up on the user’s computer. Keep in mind that this can be modified easily, which is why server-side validation is a must in production systems.

START A DIALOG

The alert () command can be used for annoying pop-ups – thankfully, jQuery UI uses dialog for more informative purposes

The dialog widget included in jQuery UI is not a system-modal, and does not prevent the closing of browser windows or other important programs. What it does do is provide a very attractive way to bring content to the attention of your customers. Creating the structure of the dialog is as easy as adding a <div> tag to your markup:

001    <body>
002    <div id=”dialog-confirm” title=”Hello     Dialog!”>
003    <p><span class=”ui-icon ui-icon-alert”   style=”float:left; margin:0 7px 20px     0;”>
</  span>I am a dialog!</p>
004    </div>
005    <p>This text will be greyed out as the  dialog pops up!</p>
006    </body>

The configuration takes place in the dialog function. It takes an array of subobjects describing the buttons that are to be created in the dialog window:

001    <script>
002    $(function() {
003    $( “#dialog-confirm” ).dialog({
004    resizable: false,
005    height:140,
006    modal: true,
007    buttons: {
001    “Hello!”: function() {
002    $( this ).dialog( “close” );
003    },
004    Cancel: function() {
005    $( this ).dialog( “close” );
006    }
007    }
008    });
009    });
010    </script>

HIDE & SEEK

Use accordions to break complex processes down into smaller steps that can be better understood

An accordion is a group of paragraphs that can be opened and closed simply by clicking their header bars. This way, the user sees only those controls that are relevant to the task at hand, but does not lose the big picture.

Accordions are set up in the HTML markup of your web application. Each ‘tab’ is made up of a level three heading tag (h3), which is followed by a <div> containing the content of the tab in question. The whole structure is then wrapped into a container <div>, which will be passed on to the constructor function during initialisation:

001    <div id=”accordion”>
002    <h3>Cut up ingredients</h3>
003    <div>
004    <p>

This is the first tab, containing only text.

001    </p>
002    </div>
003    <h3>Fry long running ingredients</h3>
004    <div>
005    <p>

The individual pages of the accordion can contain almost all other types of markup. Feel free to add a table, an image or even a button.

001    </p>
002    </div>
003    <h3>Mind while serving</h3>
004    <div>
005    <p>

Finally, let us add a list for fun and profit:

001    </p>
002    <ul>
003    <li>List item one</li>
004    <li>List item two</li>
005    <li>List item three</li>
006    </ul>
007    </div>
008    <h3>Well done</h3>
009    <div>
010    <p>
001    </p>
002    </div>
003    </div>
004    

The somewhat complex nature of the markup is required in order to keep the accordion working, even on a non-JavaScript-capable browser. Finally, call the accordion function in order to fully complete the set-up process:

001    <script>
002    $(function() {
003    $( “#accordion” ).accordion();
004    });
005    </script>

When in use, accordions will fire a large amount of events, allowing you to keep a close eye on the way the user navigates through your website.

TOGGLE ITEMS

Showing and hiding elements as they are needed is very helpful when it comes to reducing the amount of visual clutter on screen

Toggle effects are specialised on showing and hiding elements. They are called in via the toggle() function, which usually requires three parameters:

001 $( “#effect” ).toggle( selectedEffect, options, 500 );

selectedEffect is a string that names the effect in question. The options parameter usually is an empty object, but can be used in order to customise the effect further. Finally, the integer parameter devises how long the actual event rendering should take.

jQuery UI contains a dozen different effects to make use of, which are described in the documentation referenced at the end of this article.

TALKING CLASSES

Make use of these key classes to power up your pages and create great effects

Toggle
The toggle class differs from the normal toggle command in that it can be used to add and remove CSS classes from the widget at hand, providing you with an amazing level of control over the transitions. For example, add a CSS style that changes the colour and the font size of an element to create a flashy effect highlighting a text box or a similar element. Invoking the toggle class feature is as easy as calling its corresponding function on a pointer to the object:

001    $( “#effect” ).toggleClass
( “newClass”, 1000 );

Switch
Many transitions can be expressed as a ‘swap’ between two classes. This can be achieved by using the switch function, which expects parameters pointing to two CSS classes:

001          $( “.newClass” )
.switchClass( “newClass”, 
“anotherNewClass”, 1000 );

The two are used as keyframes for a transitional animation. All elements changed during the swap get animated at the same time, which can create a quite impressive animation that is sure to grab attention. Of course, the duration of the transition can be set via the integer.

Remove
Adding classes to objects tends to affect their look. The remove class function is the antagonist of the add function and the two methods are really easy to use:

001          $( “#effect” )
.removeClass( “newClass”, 1000, 
callback );

The first parameter informs the framework about which CSS class should be added or removed. The second one indicates the duration of the resulting animation, while the callback gets invoked once the processing of the animations has been completed successfully.

×