How to Download the jQuery UI Library for HTML5 and CSS3 Programming
How to Use AJAX jQuery for HTML5 and CSS3 Programming
How to Make an AJAX Request with jQuery for HTML5 and CSS3 Programming

How to Make Selectable Elements in AJAX for HTML5 and CSS3 Programming

You may have a situation where you want the user to choose from a list of elements. AJAX allows HTML5 and CSS3 programmers that option. The selectable widget is a great way to create this functionality from an ordinary list. The user can drag or Ctrl+click items to select them. Special CSS classes are automatically applied to indicate that the item is being considered for selecting or selected.

image0.jpg

Follow these steps to make a selectable element:

  1. Begin with an unordered list.

    Build a standard unordered list in your HTML. Give the ul an ID so that it can be identified as a jQuery node:

     <div id = "selectableTab">
      <h2>selectable</h2>
      <ul id = "selectable">
      <li>alpha</li>
      <li>beta</li>
      <li>gamma</li>
      <li>delta</li>
      </ul>
     </div>
  2. Add CSS classes for selecting and selected states.

    If you want the selectable items to change appearance when the items are being selected or have been selected, add CSS classes as shown. Some special classes (ui-selecting and ui-selected) are predefined and will be added to the elements at the appropriate times:

     <style type = "text/css">
     h1 {
      text-align: center;
     }
     #selectable .ui-selecting {
      background-color: gray;
     }
     #selectable .ui-selected {
      background-color: black;
      color: white;
     }
     </style>
  3. In the init() function, specify the list as a selectable node.

    Use the standard jQuery syntax: selectable().

      $("#selectable").selectable();

The class is attached to all elements when they have been selected. Be sure to add some kind of CSS to this class, or you won't be able to tell that items have been selected.

If you want to do something with all the items that have been selected, just create a jQuery group of elements with the ui-selected class:

var selectedItems = $(".ui-selected");
  • Add a Comment
  • Print
  • Share
blog comments powered by Disqus
How to Build a Tabbed Interface in AJAX for HTML5 and CSS3 Programming
How to Create a Custom Dialog Box in AJAX for HTML5 and CSS3 Programming
How to Use the Accordion Widget in AJAX for HTML5 and CSS3 Programming
How to Use AJAX to Create an Initialization Function for HTML5 and CSS3 Programming
How to Make a Responsive Mobile Site in AJAX for HTML5 and CSS3 Programming
Advertisement

Inside Dummies.com