CSC 3084: Web Development and Programming

1. CSC 3084:Web Development and Programming Chapter 12: Get Off to a Fast Start with jQuery UI Themes and Widgets

2. Chapter Overview • By the end of this chapter, you should be able to: • Use any of the jQuery UI widgets in your web pages. • In general terms, describe jQuery UI and the four type of components it provides. • In general terms, describe how to build a jQuery UI download. • Describe the three files that jQuery UI requires, and explain how to include them in your web pages. • Describe the use of jQuery UI themes. • In general terms, describe the use of any jQuery UI widget.

3. What is jQuery UI? • jQuery UI is built on jQuery and provides a set of user interface interactions, effects, widgets and other visual effects • The nice thing here is that a lot of these effects can be achieved by writing very little code • CSS can be used to change the appearance of the visual elements

4. www.jqueryui.com

5. What jQuery Provides • Themes: 24 pre-defined themes, as well as a ThemeRoller application that lets you create a custom theme. A theme is implemented as a CSS style sheet • Widgets: accordions, tabbed panes, data pickers, and more • Interactions: draggable, droppable, resizable, and more • Effects: color animations, class transitions, and more

6. Examples on jqueryui.com • The easiest way to see some examples of jQuery UI in action is to go to www.jqueryui.com and try out the examples on the left • Try all the Interactions, Widgets and Effects examples

7. Some jQuery UI Components • UI Core Components • Core • Widget • Mouse • Position • Interactions • Draggable • Droppable • Resizable • Selectable • Sortable • Effects • Blind • Bounce • Clip • Drop • Explode • Fade • Fold • Highlight • Pulsate • Scale • Shake • Slide • Transfer • Widgets • Accordion • Autocomplete • Button • Datepicker • Dialog • Progressbar • Slider • Tabs

8. How to Build a jQuery UI Download • There is no need to have visitors to your website download the entirety of jQuery UI • Rather, you can use the jQuery UI Download Builder to create a custom library with just the jQuery UI components you need • You can see it by clicking on the Download link on www.jqueryui.com

9. The Download Builder Page

10. The ThemeRoller Page

11. The jQuery UI Documentation • Click on the API Documentation • Navigate to Widgets and then Accordion Widget • Look through the web page – it shows the HTML and JavaScript you need to add an accordion • Generic syntax for using a widget:$(document).ready(function(){ $("selector").widgetMethod({ // option settings });});

12. An Accordion Widget

13. The HTML for the Accordion <div id="accordion"> <h3><a href="#">What is jQuery?</a></h3> <div> <!-- the content for the panel --> </div> <h3><a href="#"> Why is jQuery becoming so popular? </a></h3> <div> <!-- the content for the panel --> </div> <h3><a href="#">Which is harder to learn: jQuery or JavaScript?</a></h3> <div> <!-- the content for the panel --> </div> </div>

14. The jQuery for the Accordion $(document).ready(function(){ $("#accordion").accordion({ event: "mouseover", collapsible: true }); });

15. A Tabs Widget

16. The HTML for the Tabs <div id="tabs"> <ul> <li><a href="#tabs-1">Book description</a></li> <li><a href="#tabs-2">About the author</a></li> <li><a href="#tabs-3">Who this book is for</a></li> </ul> <div id="tabs-1"><!-- the content --></div> <div id="tabs-2"><!-- the content --></div> <div id="tabs-3"><!-- the content --></div> </div>

17. The jQuery for the Tabs $(document).ready(function(){ $("#tabs").tabs(); });

18. A Dialog Widget

19. The HTML for the Dialog Widget <a id="book"> <imgsrc="images/javascriptbook.jpg" alt="JavaScript book" width="159" height="192" /> </a> <div id="dialog" title="JavaScript and DOM Scripting" style="display:none;"> <!-- the content for the dialog box --> </div>

20. The jQuery for the Dialog Widget $(document).ready(function(){ $("#book").button(); $("#book").click(function() { $("#dialog").dialog({ modal: true }); }); });

21. An Autocomplete Widget

22. The HTML for the Autocomplete Widget <div class="ui-widget"> <label for="books">Book: </label> <input id="books"> </div>

23. The jQuery for the Autocomplete Widget $(document).ready(function(){ varmurachBooks = ["ADO.NET", "ASP.NET", "C#", "C++", "CICS", "CSS", "COBOL", "DB2", "HTML", "IMS", "Java", "JavaScript", "LINQ", "MySQL", "Oracle SQL", "OS/390", "PHP", "VB", "Web Development", "Web Programming", "XHTML", "z/OS JCL"]; $("#books").autocomplete({ source: murachBooks }); });

24. A DatepickerWidget

25. The HTML for the Datepicker <label>Arrival date:</label> <label><input type="text" id="datepicker"></label>

26. The jQuery for the Datepicker • With no options: $(document).ready(function(){ $("#datepicker").datepicker(); }); • With three options: $(document).ready(function(){ $("#datepicker").datepicker({ minDate: new Date(), maxDate: +45, showButtonPanel: true }); });

27. A Slider Widget • The HTML for the Slider widget: <div id="size"> <label>Company size: </label> <input type="text" id="employees" style="border:0;"> </div> <div id="slider" style="width:100px;"></div>

28. The jQuery for the Slider Widget $(document).ready(function(){ $("#slider").slider({ value: 50, min: 1, max: 100, slide: function(event, ui) { $("#employees").val(ui.value); } }); $("#employees").val(50); });

29. A ProgressbarWidget • HTML and jQuery:<div id="progressbar" style="width:300px; height:25px;"></div> • For activating the widget: $(document).ready(function(){ $("#progressbar").progressbar({value: 10}); }); • For changing the value of the widget:$("#progressbar").progressbar("value", 25);

30. A Comprehensive Example • See JS Textbook Files/book_apps/ch12/vecta_corp/index.html