729g26 interaction programming729g26/course-material/lectures/l5-h16.pdf · ⁃ jquery ui makes it...
TRANSCRIPT
![Page 1: 729G26 Interaction programming729G26/course-material/lectures/l5-h16.pdf · ⁃ jQuery UI makes it easier to create standard UI components. ⁃ jQuery plugins extend the functionality](https://reader034.vdocuments.net/reader034/viewer/2022051812/602eaa1f6231a742597c5d1d/html5/thumbnails/1.jpg)
729G26 Interaction programmingLecture 5
![Page 2: 729G26 Interaction programming729G26/course-material/lectures/l5-h16.pdf · ⁃ jQuery UI makes it easier to create standard UI components. ⁃ jQuery plugins extend the functionality](https://reader034.vdocuments.net/reader034/viewer/2022051812/602eaa1f6231a742597c5d1d/html5/thumbnails/2.jpg)
Lecture overview⁃ Project
⁃ Describing interaction
⁃ Assignment 4
⁃ The API documentation
⁃ jQuery UI
What is it? How do I set it up?
Widgets: How do I use them?
Interaction: Drag and drop
⁃ Using plugins/third party scripts
⁃ Github
![Page 3: 729G26 Interaction programming729G26/course-material/lectures/l5-h16.pdf · ⁃ jQuery UI makes it easier to create standard UI components. ⁃ jQuery plugins extend the functionality](https://reader034.vdocuments.net/reader034/viewer/2022051812/602eaa1f6231a742597c5d1d/html5/thumbnails/3.jpg)
Todays lecture in the context of the course⁃ Knowing how to approach and read API documentation is a
core programming skill.
⁃ jQuery UI makes it easier to create standard UI components.
⁃ jQuery plugins extend the functionality of jQuery.
⁃ Using standard UI components and using plugins written by other people will be very useful when you get to your project!
⁃ Lots of web related stuff can be found on Github, you should not be afraid of it.
![Page 4: 729G26 Interaction programming729G26/course-material/lectures/l5-h16.pdf · ⁃ jQuery UI makes it easier to create standard UI components. ⁃ jQuery plugins extend the functionality](https://reader034.vdocuments.net/reader034/viewer/2022051812/602eaa1f6231a742597c5d1d/html5/thumbnails/4.jpg)
Describing interaction⁃ Words are not enough. We need to use visual descriptions.
⁃ Images are not enough. Interaction is movement.
⁃ Wireframes
⁃ State transition diagrams
![Page 5: 729G26 Interaction programming729G26/course-material/lectures/l5-h16.pdf · ⁃ jQuery UI makes it easier to create standard UI components. ⁃ jQuery plugins extend the functionality](https://reader034.vdocuments.net/reader034/viewer/2022051812/602eaa1f6231a742597c5d1d/html5/thumbnails/5.jpg)
WireframesPaper prototyping
Plan layout for content
![Page 6: 729G26 Interaction programming729G26/course-material/lectures/l5-h16.pdf · ⁃ jQuery UI makes it easier to create standard UI components. ⁃ jQuery plugins extend the functionality](https://reader034.vdocuments.net/reader034/viewer/2022051812/602eaa1f6231a742597c5d1d/html5/thumbnails/6.jpg)
![Page 7: 729G26 Interaction programming729G26/course-material/lectures/l5-h16.pdf · ⁃ jQuery UI makes it easier to create standard UI components. ⁃ jQuery plugins extend the functionality](https://reader034.vdocuments.net/reader034/viewer/2022051812/602eaa1f6231a742597c5d1d/html5/thumbnails/7.jpg)
![Page 8: 729G26 Interaction programming729G26/course-material/lectures/l5-h16.pdf · ⁃ jQuery UI makes it easier to create standard UI components. ⁃ jQuery plugins extend the functionality](https://reader034.vdocuments.net/reader034/viewer/2022051812/602eaa1f6231a742597c5d1d/html5/thumbnails/8.jpg)
For describing interaction, we can combine these two
![Page 9: 729G26 Interaction programming729G26/course-material/lectures/l5-h16.pdf · ⁃ jQuery UI makes it easier to create standard UI components. ⁃ jQuery plugins extend the functionality](https://reader034.vdocuments.net/reader034/viewer/2022051812/602eaa1f6231a742597c5d1d/html5/thumbnails/9.jpg)
![Page 10: 729G26 Interaction programming729G26/course-material/lectures/l5-h16.pdf · ⁃ jQuery UI makes it easier to create standard UI components. ⁃ jQuery plugins extend the functionality](https://reader034.vdocuments.net/reader034/viewer/2022051812/602eaa1f6231a742597c5d1d/html5/thumbnails/10.jpg)
![Page 11: 729G26 Interaction programming729G26/course-material/lectures/l5-h16.pdf · ⁃ jQuery UI makes it easier to create standard UI components. ⁃ jQuery plugins extend the functionality](https://reader034.vdocuments.net/reader034/viewer/2022051812/602eaa1f6231a742597c5d1d/html5/thumbnails/11.jpg)
![Page 12: 729G26 Interaction programming729G26/course-material/lectures/l5-h16.pdf · ⁃ jQuery UI makes it easier to create standard UI components. ⁃ jQuery plugins extend the functionality](https://reader034.vdocuments.net/reader034/viewer/2022051812/602eaa1f6231a742597c5d1d/html5/thumbnails/12.jpg)
![Page 13: 729G26 Interaction programming729G26/course-material/lectures/l5-h16.pdf · ⁃ jQuery UI makes it easier to create standard UI components. ⁃ jQuery plugins extend the functionality](https://reader034.vdocuments.net/reader034/viewer/2022051812/602eaa1f6231a742597c5d1d/html5/thumbnails/13.jpg)
Assignment 4⁃ You will use jQuery UI + plugins
⁃ Reading plugin documentation
⁃ Keeping track of jQuery and jQuery UI version requirements
⁃ Keeping your folders tidy
![Page 14: 729G26 Interaction programming729G26/course-material/lectures/l5-h16.pdf · ⁃ jQuery UI makes it easier to create standard UI components. ⁃ jQuery plugins extend the functionality](https://reader034.vdocuments.net/reader034/viewer/2022051812/602eaa1f6231a742597c5d1d/html5/thumbnails/14.jpg)
The API⁃ API - Application Programming Interface
⁃ Specifies how to interact with software using code.
⁃ Think “GUI” for software.
![Page 15: 729G26 Interaction programming729G26/course-material/lectures/l5-h16.pdf · ⁃ jQuery UI makes it easier to create standard UI components. ⁃ jQuery plugins extend the functionality](https://reader034.vdocuments.net/reader034/viewer/2022051812/602eaa1f6231a742597c5d1d/html5/thumbnails/15.jpg)
Examples from the jQuery API⁃ .attr() http://api.jquery.com/attr/
⁃ .animate() http://api.jquery.com/animate/
![Page 16: 729G26 Interaction programming729G26/course-material/lectures/l5-h16.pdf · ⁃ jQuery UI makes it easier to create standard UI components. ⁃ jQuery plugins extend the functionality](https://reader034.vdocuments.net/reader034/viewer/2022051812/602eaa1f6231a742597c5d1d/html5/thumbnails/16.jpg)
Return type is important!
Pay attention to parameter type!
![Page 17: 729G26 Interaction programming729G26/course-material/lectures/l5-h16.pdf · ⁃ jQuery UI makes it easier to create standard UI components. ⁃ jQuery plugins extend the functionality](https://reader034.vdocuments.net/reader034/viewer/2022051812/602eaa1f6231a742597c5d1d/html5/thumbnails/17.jpg)
Parameters in [brackets] are optional!
![Page 18: 729G26 Interaction programming729G26/course-material/lectures/l5-h16.pdf · ⁃ jQuery UI makes it easier to create standard UI components. ⁃ jQuery plugins extend the functionality](https://reader034.vdocuments.net/reader034/viewer/2022051812/602eaa1f6231a742597c5d1d/html5/thumbnails/18.jpg)
PlainObjectvarcssPlainObject={width:"200px",height:"200px"};
$(selector).animate(cssPlainObject);
A PlainObject has the form { attribute: value, attribute: value ... }
![Page 19: 729G26 Interaction programming729G26/course-material/lectures/l5-h16.pdf · ⁃ jQuery UI makes it easier to create standard UI components. ⁃ jQuery plugins extend the functionality](https://reader034.vdocuments.net/reader034/viewer/2022051812/602eaa1f6231a742597c5d1d/html5/thumbnails/19.jpg)
![Page 20: 729G26 Interaction programming729G26/course-material/lectures/l5-h16.pdf · ⁃ jQuery UI makes it easier to create standard UI components. ⁃ jQuery plugins extend the functionality](https://reader034.vdocuments.net/reader034/viewer/2022051812/602eaa1f6231a742597c5d1d/html5/thumbnails/20.jpg)
What is jQuery UI?⁃ “jQuery UI is a widget and interaction library built on top of
the jQuery JavaScript Library that you can use to build highly interactive web applications.”
![Page 21: 729G26 Interaction programming729G26/course-material/lectures/l5-h16.pdf · ⁃ jQuery UI makes it easier to create standard UI components. ⁃ jQuery plugins extend the functionality](https://reader034.vdocuments.net/reader034/viewer/2022051812/602eaa1f6231a742597c5d1d/html5/thumbnails/21.jpg)
Example widgets⁃ Accordion
⁃ Dialog
⁃ Date picker
⁃ Menu
⁃ Tooltip
![Page 22: 729G26 Interaction programming729G26/course-material/lectures/l5-h16.pdf · ⁃ jQuery UI makes it easier to create standard UI components. ⁃ jQuery plugins extend the functionality](https://reader034.vdocuments.net/reader034/viewer/2022051812/602eaa1f6231a742597c5d1d/html5/thumbnails/22.jpg)
Accordion<divid="accordion"><h3>Section1</h3><div><p>Maurismaurisante,blanditet,ultricesa,suscipiteget,quam.Integerutneque.Vivamusnisimetus,molestievel,gravidain,condimentumsitamet,nunc.</p></div><h3>Section2</h3><div><p>Sednonurna.Donecetante.Phaselluseuligula.Vestibulumsitametpurus.Vivamushendrerit,dolorataliquetlaoreet,mauristurpisporttitorvelit,faucibusinterdumtellusliberoacjusto.</p></div><h3>Section3</h3><div><p>Namenimrisus,molestieet,portaac,aliquamac,risus.Quisquelobortis.Phaselluspellentesquepurusinmassa.Aeneaninpede.Phasellusacliberoactelluspellentesquesemper.</p><ul><li>Listitemone</li><li>Listitemtwo</li><li>Listitemthree</li></ul></div><h3>Section4</h3><div><p>Crasdictum.Pellentesquehabitantmorbitristiquesenectusetnetusetmalesuadafamesacturpisegestas.</p><p>Suspendisseeunisl.Nullamutlibero.Integerdignissimconsequatlectus.</p></div></div>
<script>$(function(){$("#accordion").accordion();});</script>
<h3>Section1</h3><div><p>Maurismaurisante,blanditet,ultricesa,suscipiteget,quam.Integerutneque.Vivamusnisimetus,molestievel,gravidain,condimentumsitamet,nunc.</p></div>
![Page 23: 729G26 Interaction programming729G26/course-material/lectures/l5-h16.pdf · ⁃ jQuery UI makes it easier to create standard UI components. ⁃ jQuery plugins extend the functionality](https://reader034.vdocuments.net/reader034/viewer/2022051812/602eaa1f6231a742597c5d1d/html5/thumbnails/23.jpg)
Accordion examplehttps://trinket.io/html/0d9ed71d12
![Page 24: 729G26 Interaction programming729G26/course-material/lectures/l5-h16.pdf · ⁃ jQuery UI makes it easier to create standard UI components. ⁃ jQuery plugins extend the functionality](https://reader034.vdocuments.net/reader034/viewer/2022051812/602eaa1f6231a742597c5d1d/html5/thumbnails/24.jpg)
Basic pattern to use jQuery UI element1. Add content using specified structure
2. Add jQuery UI call in script, associating content with a jQuery widget:$(selector).jQueryUIfunction()
![Page 25: 729G26 Interaction programming729G26/course-material/lectures/l5-h16.pdf · ⁃ jQuery UI makes it easier to create standard UI components. ⁃ jQuery plugins extend the functionality](https://reader034.vdocuments.net/reader034/viewer/2022051812/602eaa1f6231a742597c5d1d/html5/thumbnails/25.jpg)
Accordion<divid="accordion"><h3>Section1</h3><div><p>Maurismaurisante,blanditet,ultricesa,suscipiteget,quam.Integerutneque.Vivamusnisimetus,molestievel,gravidain,condimentumsitamet,nunc.</p></div><h3>Section2</h3><div><p>Sednonurna.Donecetante.Phaselluseuligula.Vestibulumsitametpurus.Vivamushendrerit,dolorataliquetlaoreet,mauristurpisporttitorvelit,faucibusinterdumtellusliberoacjusto.</p></div><h3>Section3</h3><div><p>Namenimrisus,molestieet,portaac,aliquamac,risus.Quisquelobortis.Phaselluspellentesquepurusinmassa.Aeneaninpede.Phasellusacliberoactelluspellentesquesemper.</p><ul><li>Listitemone</li><li>Listitemtwo</li><li>Listitemthree</li></ul></div><h3>Section4</h3><div><p>Crasdictum.Pellentesquehabitantmorbitristiquesenectusetnetusetmalesuadafamesacturpisegestas.</p><p>Suspendisseeunisl.Nullamutlibero.Integerdignissimconsequatlectus.</p></div></div>
<script>$(function(){$("#accordion").accordion();});</script>
<h3>Section1</h3><div><p>Maurismaurisante,blanditet,ultricesa,suscipiteget,quam.Integerutneque.Vivamusnisimetus,molestievel,gravidain,condimentumsitamet,nunc.</p></div>
![Page 26: 729G26 Interaction programming729G26/course-material/lectures/l5-h16.pdf · ⁃ jQuery UI makes it easier to create standard UI components. ⁃ jQuery plugins extend the functionality](https://reader034.vdocuments.net/reader034/viewer/2022051812/602eaa1f6231a742597c5d1d/html5/thumbnails/26.jpg)
jQuery UI Widgets: options, methods, events⁃ Options
PlainObject passed on initialization
⁃ Methods
Call by passing a string to the jQuery UI functione.g. $("#accordion").accordion("disable");
⁃ Events
Specify event handlers in options during init
![Page 27: 729G26 Interaction programming729G26/course-material/lectures/l5-h16.pdf · ⁃ jQuery UI makes it easier to create standard UI components. ⁃ jQuery plugins extend the functionality](https://reader034.vdocuments.net/reader034/viewer/2022051812/602eaa1f6231a742597c5d1d/html5/thumbnails/27.jpg)
![Page 28: 729G26 Interaction programming729G26/course-material/lectures/l5-h16.pdf · ⁃ jQuery UI makes it easier to create standard UI components. ⁃ jQuery plugins extend the functionality](https://reader034.vdocuments.net/reader034/viewer/2022051812/602eaa1f6231a742597c5d1d/html5/thumbnails/28.jpg)
![Page 29: 729G26 Interaction programming729G26/course-material/lectures/l5-h16.pdf · ⁃ jQuery UI makes it easier to create standard UI components. ⁃ jQuery plugins extend the functionality](https://reader034.vdocuments.net/reader034/viewer/2022051812/602eaa1f6231a742597c5d1d/html5/thumbnails/29.jpg)
Menuhttps://trinket.io/html/fc3d097bd2
![Page 30: 729G26 Interaction programming729G26/course-material/lectures/l5-h16.pdf · ⁃ jQuery UI makes it easier to create standard UI components. ⁃ jQuery plugins extend the functionality](https://reader034.vdocuments.net/reader034/viewer/2022051812/602eaa1f6231a742597c5d1d/html5/thumbnails/30.jpg)
Buttonhttp://jqueryui.com/button/
![Page 31: 729G26 Interaction programming729G26/course-material/lectures/l5-h16.pdf · ⁃ jQuery UI makes it easier to create standard UI components. ⁃ jQuery plugins extend the functionality](https://reader034.vdocuments.net/reader034/viewer/2022051812/602eaa1f6231a742597c5d1d/html5/thumbnails/31.jpg)
Sliderhttp://jqueryui.com/slider/
![Page 32: 729G26 Interaction programming729G26/course-material/lectures/l5-h16.pdf · ⁃ jQuery UI makes it easier to create standard UI components. ⁃ jQuery plugins extend the functionality](https://reader034.vdocuments.net/reader034/viewer/2022051812/602eaa1f6231a742597c5d1d/html5/thumbnails/32.jpg)
jQuery UI setup1. Download/link to jQuery library
2. Download/link to jQuery UI library
3. Download/link to jQuery UI CSS theme
![Page 33: 729G26 Interaction programming729G26/course-material/lectures/l5-h16.pdf · ⁃ jQuery UI makes it easier to create standard UI components. ⁃ jQuery plugins extend the functionality](https://reader034.vdocuments.net/reader034/viewer/2022051812/602eaa1f6231a742597c5d1d/html5/thumbnails/33.jpg)
jQuery UI themes⁃ Different jQuery UI themes can be used.
⁃ A theme is a CSS.
⁃ Themes can be downloaded and created athttp://jqueryui.com/themeroller/
![Page 34: 729G26 Interaction programming729G26/course-material/lectures/l5-h16.pdf · ⁃ jQuery UI makes it easier to create standard UI components. ⁃ jQuery plugins extend the functionality](https://reader034.vdocuments.net/reader034/viewer/2022051812/602eaa1f6231a742597c5d1d/html5/thumbnails/34.jpg)
Drag and drop using jQuery UI
![Page 35: 729G26 Interaction programming729G26/course-material/lectures/l5-h16.pdf · ⁃ jQuery UI makes it easier to create standard UI components. ⁃ jQuery plugins extend the functionality](https://reader034.vdocuments.net/reader034/viewer/2022051812/602eaa1f6231a742597c5d1d/html5/thumbnails/35.jpg)
Making something draggable⁃ Call
$(selector).draggable()
![Page 36: 729G26 Interaction programming729G26/course-material/lectures/l5-h16.pdf · ⁃ jQuery UI makes it easier to create standard UI components. ⁃ jQuery plugins extend the functionality](https://reader034.vdocuments.net/reader034/viewer/2022051812/602eaa1f6231a742597c5d1d/html5/thumbnails/36.jpg)
Droppable - a target for something draggable$(".selector").droppable({drop:function(event,ui){//ui.draggableisthejQueryoftheelementdragged}});
The drop option specifies the function handler for the drop event. UI is a plain object with the property draggable. The drop target is $(this)
![Page 37: 729G26 Interaction programming729G26/course-material/lectures/l5-h16.pdf · ⁃ jQuery UI makes it easier to create standard UI components. ⁃ jQuery plugins extend the functionality](https://reader034.vdocuments.net/reader034/viewer/2022051812/602eaa1f6231a742597c5d1d/html5/thumbnails/37.jpg)
Drag and drop Trinkethttps://trinket.io/html/71ea1f4fcf
![Page 38: 729G26 Interaction programming729G26/course-material/lectures/l5-h16.pdf · ⁃ jQuery UI makes it easier to create standard UI components. ⁃ jQuery plugins extend the functionality](https://reader034.vdocuments.net/reader034/viewer/2022051812/602eaa1f6231a742597c5d1d/html5/thumbnails/38.jpg)
jQuery plugins⁃ jQuery plugins extend the functionality of jQuery using a
pattern similar to jQuery UI
⁃ In fact, jQuery UI can be seen as a jQuery plugin.
![Page 39: 729G26 Interaction programming729G26/course-material/lectures/l5-h16.pdf · ⁃ jQuery UI makes it easier to create standard UI components. ⁃ jQuery plugins extend the functionality](https://reader034.vdocuments.net/reader034/viewer/2022051812/602eaa1f6231a742597c5d1d/html5/thumbnails/39.jpg)
Example plugins⁃ jQuery Waypoints: http://imakewebthings.com/waypoints
⁃ jQuery Knob: http://anthonyterrien.com/knob/
⁃ PowerTip: http://stevenbenner.github.io/jquery-powertip/
⁃ Isotope: http://isotope.metafizzy.co/
⁃ Transit: http://ricostacruz.com/jquery.transit/
⁃ AnimateScroll: http://plugins.compzets.com/animatescroll/
⁃ Masonry: http://masonry.desandro.com/
⁃ Datedropper: http://felicegattuso.com/projects/datedropper/
⁃ Animsion: http://git.blivesta.com/animsition/
![Page 40: 729G26 Interaction programming729G26/course-material/lectures/l5-h16.pdf · ⁃ jQuery UI makes it easier to create standard UI components. ⁃ jQuery plugins extend the functionality](https://reader034.vdocuments.net/reader034/viewer/2022051812/602eaa1f6231a742597c5d1d/html5/thumbnails/40.jpg)
Using a plugin1. Find a plugin you want to use
2. Visit the plugin web page
3. Read the install guide
4. Download the plugin
5. Follow instructions either on the plugin web page or look for a README file in the unpacked archive.
![Page 41: 729G26 Interaction programming729G26/course-material/lectures/l5-h16.pdf · ⁃ jQuery UI makes it easier to create standard UI components. ⁃ jQuery plugins extend the functionality](https://reader034.vdocuments.net/reader034/viewer/2022051812/602eaa1f6231a742597c5d1d/html5/thumbnails/41.jpg)
What is this thing called github?http://www.github.com
![Page 42: 729G26 Interaction programming729G26/course-material/lectures/l5-h16.pdf · ⁃ jQuery UI makes it easier to create standard UI components. ⁃ jQuery plugins extend the functionality](https://reader034.vdocuments.net/reader034/viewer/2022051812/602eaa1f6231a742597c5d1d/html5/thumbnails/42.jpg)
Project