CSC 3084: Web Development and Programming

1. CSC 3084:Web Development and Programming Chapter 13: How to Use jQuery UI Interactions and Effects

2. Chapter Overview • By the end of this chapter, you should be able to: • Use any of the jQuery UI interactions or effects in your web pages. • Describe any of these jQuery UI interactions: draggable, droppable, resizable, selectable, or sortable. • In general terms, describe the use of the jQuery UI effects. • Describe any of these jQuery UI transitions: color, class, or visibility.

3. Back to jqueryui.com • Try the Interactions listed on the left-hand side of the page • For each interaction, try the Examples on the right-hand side

4. Resizable Interaction <div id="dialog" class="ui-widget-content"> <h3 class="ui-widget-header">Resizable Element</h3> </div>

5. Resizable Interaction $(document).ready(function() { $("#dialog").resizable({ maxHeight: 250, maxWidth: 350, minHeight: 150, minWidth: 200 }); });

6. A Text Area That Can Be Resized <p>Questions / Comments:</p> <textarea id="questions"></textarea>

7. The jQuery and CSS for the Resizable Interaction $(document).ready(function() { $("#questions").resizable({ handles: "se" // se means “southeast” corner }); }); .ui-resizable-se { bottom: 13px; right: 2px; }

8. Draggable and Droppable Interaction • A draggableelement as it’s being dragged onto a droppable element

9. The HTML for Both Elements <div id="vprospect"> <imgsrc="images/vprospect.png"></div> <div id="vconvert"> <imgsrc="images/vconvert.png"></div> <div id="vretain"> <imgsrc="images/vretain.png"></div> <div id="cart"><p>Your Cart</p></div>

10. The jQuery for the Elements $(document).ready(function() { ("#vprospect, #vconvert, #vretain").draggable( { cursor: "move" }); $("#cart").droppable({ drop: function() { $(this).addClass( "ui-state-highlight").find("p").html( "vSolution added!"); } }); }); • Have a look at the Shopping Cart Demo’s source code at jqueryui.com to see how you can determine what item(s) were dropped

11. A List of Selectable Elements

12. The HTML for the List of Selectable Elements Select the product that you're interested in:<br> <ol id="solutions"> <li id="vProspect"> <imgsrc="images/logo_vprospect.gif"></li> <li id="vConvert"> <imgsrc="images/logo_vconvert.gif"></li> <li id="vRetain"> <imgsrc="images/logo_vretain.gif"></li> </ol> <label><span id="selected"></span></label>

13. The jQuery for the List of Selectable Elements $(document).ready(function() { $("#solutions").selectable({ stop: function() { // for each selected element do this: $(".ui-selected").each(function() { $("#selected").html( "Product selected: " + this.id); }); } }); });

14. The CSS for the Selectable Interaction .ui-selected { border: 1px solid #000; }

15. A Sortable List as One of the Items is Dragged

16. The HTML for the Sortable List <ul id="vsupport"> <li class="ui-state-default">Blog / How-To Articles </li> <li class="ui-state-default">Discussion Forum</li> <li class="ui-state-default">Knowledge Base</li> <li class="ui-state-default">Phone Support</li> <li class="ui-state-default">Wiki Support</li> </ul>

17. The jQuery for the Sortable Interaction $(document).ready(function() { $("#vsupport").sortable({ placeholder: "ui-state-highlight" }); });

18. The CSS for the Sortable Interaction .ui-state-highlight { height: 1.5em; }

19. jQuery UI Core Effects • Color transitions • Class transitions • Easing • Visibility transitions

20. jQuery UI Individual Effects • blind • bounce • clip • drop • explode • fade • fold • highlight • puff • pulsate • scale • shake • size • slide • transfer • See: jqueryui.com/effect/#easing

21. A Sortable List that Uses Highlight and Pulsate Effects

22. The HTML for the Sortable List <ul id="vsupport"> <li class="ui-state-default">Blog / How-To Articles </li> <li class="ui-state-default">Discussion Forum</li> <li class="ui-state-default">Knowledge Base</li> <li class="ui-state-default">Phone Support</li> <li class="ui-state-default">Wiki Support</li> </ul>

23. The jQuery for the Effects $(document).ready(function() { $("#vsupport").sortable({ placeholder: "ui-state-highlight", start: function(event, ui) { $(ui.item).effect("pulsate", { times: 3 }, 1000); } update: function(event, ui) { $(ui.item).effect("highlight", { color: "#7fffd4" }, 2000); } }); });

24. A Text Area that Grows and Changes Color When a Link is Clicked

25. The HTML for the Text Area and Link <textarea id="comments" style="width:350px;height:125px;"> <textarea><br> <a href="#" id="grow_textarea">Increase text area</a>

26. The jQuery for the Transition $(document).ready(function() { $("#grow_textarea").click(function() { $("#comments").animate({ width: 500, height: 200, backgroundColor: "#ededed", color: "green" }, 1000 ); }); });

27. Color Properties that Can Be Animated • color • backgroundColor • borderBottomColor • borderLeftColor • borderRightColor • borderTopColor • outlineColor

28. The Syntax of the Methods for Class Transitions addClass(className[, duration]) removeClass([className][, duration]) toggleClass(className[, duration]) switchClass(removeName, addName[, duration])

29. Text Before and After Its Size is Changed

30. The HTML for the Class Transition Change text size: <input type="button" id="button1" value="Medium"> <input type="button" id="button2" value="Large"> <input type="button" id="button3" value="X-Large"> <h2>Welcome</h2> <p id="p1">... INSERT CONTENT HERE ...</p>

31. The jQuery for the Class Transitions $(document).ready(function() { $("#button1").click(function() { setSize("medium"); }); $("#button2").click(function() { setSize("large"); }); $("#button3").click(function() { setSize("x_large"); }); function setSize(size) { $("#p1").removeClass(); $("#p1").addClass(size, 1000); } });

32. The CSS for the Classes .medium {font-size: 100%;} .large {font-size: 120%;} .x_large {font-size: 150%;}

33. A Visibility Transition that’s Used to Show and Hide a Submenu

34. The HTML for a Menu with an Item that Contains a Submenu <ul> <li><a href="index.html">Home</a></li> <li><a href="aboutus.html">About Us</a></li> <li><a href="#" id="solutions">Solutions</a></li> <div id="solutions_menu"> <a href="solutions.html#vprospect"> vProspect 2.0</a> <a href="solutions.html#vconvert"> vConvert 2.0</a> <a href="solutions.html#vretain">vRetain 1.0</a> </div> <li><a href="support.html">Support</a></li> <li><a href="contactus.html">Contact Us</a></li> </ul>

35. The jQuery for the Visibility Transition $(document).ready(function() { $("#solutions").click(function() { $("#solutions_menu").toggle("blind", 500); }); });