1. Building Web Application

    UI's with jQuery UI

    jQuery Conference 2011: Boston

    Ralph Whitbeck

  2. What to Expect

    • What is jQuery UI
    • Build something
  3. What is jQuery UI

    • Interactions
    • Animations
    • Effects
    • Widgets
    • Themeable
  4. Interactions

    • Draggable
    • Droppable
    • Resizable
    • Selectable
    • Sortable
  5. Widgets

    • Accordion
    • Autocomplete
    • Button
    • Datepicker
    • Dialog
    • Progressbar
    • Slider
    • Tabs
  6. Themes

    • jQuery UI CSS Framework
    • Prebuilt themes
    • ThemeRoller
  7. Examples of jQuery UI

    • Grooveshark
    • Pandora
  8. Downloading jQuery UI

    • jQuery UI Web site
    • Google CDN
    • Microsoft CDN
  9. Installing jQuery UI

    <!doctype html>
        <link href="/css/ui-lightness.css" />
        <link href="/css/style.css" />
      <script src="/js/jquery.js"></script>
      <script src="/js/jqueryui.js"></script>
      <!-- add your plugins and custom script tags here -->
  10. Let's Build Something

    • Build a fully functioning UI
    • Use jQuery UI
    • Front-end only
    • State persistence (outside scoop)
    • Use the jQuery UI Themes
  11. To-Do List

  12. To Do list

    • Login screen (Not in this demo)
    • Ability to add new projects
    • Separate tasks per project
    • Add/Remove projects
    • Add/Complete tasks
    • Sort task list
  13. Tasks

    • Title
    • Description
    • Due date
  14. Which Widget would work best for tasks?

    • Accordion
    • Autocomplete
    • Button
    • Datepicker
    • Dialog
    • Progressbar
    • Slider
    • Tabs
  15. Which Widget works best for tasks

    • Accordion
  16. HTML

    <div class="accordion">
        <h3><a href="#">Download jQuery UI</a></h3>
          <input type="checkbox" class="completed">
          <strong>Download jQuery UI</strong>
            Go to 
            <a href="http://jqueryui.com/download">
            to download jQuery UI.
            <strong>Date due:</strong> 11/15/2011
  17. jQuery

      // setting the active option to false allows for no item 
      // to be open and active. The default is that one item 
      // is always open.  
      active: false,
      // setting autoHeight to false allows for each item to 
      // have a dynamic height.  
      autoHeight: false,
      // collapsible set to true allows the accordion to have no open items.  
      collapsible: true,
      // header defines the element of the item that is the header.
      header: "> div > h3"
  18. Demo

  19. Adding a Task

    • Add a button
    • Button will open a Dialog
    • Dialog will hold a form to collect task data
    • Submit button inserts the new task
  20. We need a button

    <button class="AddToDo">Add Task</button>
  21. Let's define a Dialog

    <div id="AddToDoItem" title="Add To Do Item">
      <p>Use the form below to add a to do item 
           to the list.
        <label for="task">Task:</label> 
        <input type="text" id="task">
        <label for="description">Description:</label> 
        <textarea id="description"></textarea>
        <label for="duedate">Date due:</label> 
        <input type="text" id="duedate">
  22. Let's define a Dialog

        modal: true,
        autoOpen: false,
        buttons: {
           "Add to do item": function() {
               // Takes the input and creates a new accordion item
               // Add a new task
            "Cancel": function() {
               // Clears all the input fields.
               // Close the dialog
  23. Cancel Button

    "Cancel": function() {
      // Clear the field in the dialog
      $("#task, #description, #duedate").val("");
    		// close the dialog
  24. Add a task Button

    "Add to do item": function() {
       //create a JSON object to pass the data from the form to the template.
       var newItem = [{
         task: $("#task").val(),
         description: $("#description").val(),
         duedate: $("#duedate").val()
         // Select the template, render it with the JSON data above and append it to 
         // the visible accordion.
         // Call the refreshAccordion to add the new item to the accordion 
         // Close the dialog
         // Clear the fields in the dialog
         $("#task, #description, #duedate").val("");
  25. Datepicker

  26. Open the Dialog

    $(".AddToDo").live("click", function() {
      // Select the DOM that represents the dialog
  27. Demo

  28. Sorting Tasks

      // constrain movement to the y axis only
      axis: "y",
      // define which element will be the handle when sorting.
      handle: "h3",
      // stop: event that handles when the element being sorted has stopped.
      //       In this instance we are setting the global stop variable which 
      //       helps determine if the todo item is in movement. 
      stop: function() {
        stop = true;
        // Don't sort elements with class ui-state-disabled.
        cancel : ".ui-state-disabled"
  29. Disable accordion click

    // If an item is moving during a sort we want to override the default click 
    // function of the accordion header to allow the sort to happen unimpeded.
    $( ".accordion h3" ).click(function( event ) {
    // if the item is moving disable the click event for the accordion widget.
      if ( stop ) {
        // keeps other handlers from being executed and prevents the event from 
        // bubbling up the DOM tree.
        // this will prevent the default action of the event from being triggered.
        // reset the stop variable 
        stop = false;
  30. Demo

  31. Completing a Task

    $("input[type=checkbox]").live("click", function(){
        // Search up through the DOM tree to find the first instance of the selection.
        // We are looking for the first parent item with a data attribute of sortable-item.
        // This data attribute is set from the sortable interaction widget.
          // find the H3 element and trigger a click event to activate and close
          // the accordion item.
        // return the set of matched elements to it's previous state.
        // Hide the item we are completing with a sliding motion.  upon completion
        // of the animation fire the callback function.
        .slideUp(function () {
          // remove this todo item from the DOM.
  32. Demo

  33. Create Projects

    <div id="tabs">
        <li><a href="#project1">Project 1</a></li>
      <div id="project1">
        All of our existing code goes here.
  34. Let's Add a Project

    • Button
    • Dialog
    • A way to insert a bunch of HTML.
  35. Define our Tabs

      // tabTemplate: HTML template from which a new tab is created and added. 
      //              The placeholders #{href} and #{label} are replaced with the
      //              url and tab label that are passed as arguments to 
      //              the add method.
      tabTemplate: "<li><a href='#{href}'>#{label}</a>\
        <span class='ui-icon ui-icon-close'>Remove Tab</span></li>",
      // add (event): This event is triggered when a tab is added.
      add: function( event, ui ) {
        // Setup a tab based on a jQuery Template defined in the HTML.			
        // append the template results to the selected contents.
        // We need to recreate our To Do list accordions to setup the new 
        // accordion that was created with the new project tab.
  36. When Adding a Tab

    "Add new project" : function() {
      // using the date to create a unique tab id.
      var foo = new Date();
      $tabs.tabs("add", "#project-" + foo.getTime(), $("#project").val())
      // Select the new tab to make it active.
      .tabs("select", $tabs.tabs("length") - 1);
      // Close the dialog
      // Clear the value on the form field in the dialog.
  37. Demo

  38. Get the code

    • http://github.com/RedWolves/
    • http://jsfiddle.net/RWhitbeck/ZyYFG/
    • Script Junkie - Introduction to Complex UIs Using jQuery UI (http://scriptjunkie.com)
  39. Thank you

    Any Questions?