Monday, May 14, 2012

last class: jQuery UI makes it easy to include complex interactions & advanced effects

http://feliciachamberlain.com/syllabi/larrySample.html

jQuery UI is built on top of the jQuery library. You need to link to a copy of jQuery first, before evoking any of the effects, widgets or interactions in jQuery UI.
jQuery UI makes it easy to include complex interactions, advanced effects and some of the more common UI components in the form of widgets. All widgets come with a nice selection of skins called "themes." the themes are written in CSS with images and are highly customizable. You can find a complete description of the library and complete documentation at:
http://jqueryui.com/home

Downloading jQuery UI

You can customize your download of the jQUery UI library. The download page lets you pick and choose which parts of the library you need so that you can trim the size of your sites and optimize the experience for your users. You can down the library at:
http://jqueryui.com/download
You will see that the download page is organized to let you pick and choose what you need.
UI Core: These are the core classes that make up the jQUery UI library. They are the foundation and are required as they contain the basic functions and initializers. These include
  • Core -- base class for jQuery UI. This class is required for all interactions, widgets and effects.
  • Widget: this is the factory class for the creation of all widgets. It is required for all widgets.
  • Mouse: the Mouse class is required for all widgets and interactions that make extensive use of the mouse.
  • Position: the Position class is used to help position elements of the library relative to each other.
Interactions: The Interactions are the basic behaviors. Be aware that many of the widgets depend on these basic interactions. We're going to look at two of the interactions in depth, the draggable and the droppable interactions. Here are some of the more popular interactions:
  • Draggable
  • Droppable
  • Resizeable
  • Selectable
  • Sortable
Widgets: The widgets are components. They are easy to initialize and come with with a variety of basic themes. The themes are easy to customize to suit the needs of your designs. The widgets full featured with a range of options. We are going to look at both the accordion and slider widgets in depth.
  • Accodion
  • Autocomplete
  • Button
  • Datepicker
  • Dialog
  • Progress Bar
  • Sliders
  • Tabs
Effects: There is also a rich library of handsome effects. These are fun to use and easy to initialize. There are lots of different effects available here a few to give you an idea, there are more and you can explore them in the documentation:
  • Bounce
  • Explode
  • Fold
  • Pusate
  • Scale
  • Shake
  • Slide
The library is downloaded with the required CSS and images. The download page lets you pick a theme, or download a customized theme. For the purposes of this module, we are going to download the entire library and make our lives simpler, then use it!
http://feliciachamberlain.com/m14_examples.zip 

http://feliciachamberlain.com//artsmart2012/_wnm608/m14/m14_examples/m14_drag.html


http://feliciachamberlain.com//artsmart2012/_wnm608/m14/m14_examples/m14_drop.html

http://feliciachamberlain.com//artsmart2012/_wnm608/m14/m14_examples/m14_accordion.html

http://feliciachamberlain.com/syllabi/walrus.swf

http://feliciachamberlain.com//artsmart2012/_wnm608/m14/m14_examples/m14_slider.html

http://feliciachamberlain.com/artsmart2012/_wnm608/wnm608_examples/m14_examples//m14_jqui_1.html

m14_jqui_2.htmlhttp://feliciachamberlain.com/artsmart2012/_wnm608/wnm608_examples/m14_examples//m14_jqui_2.html

No comments:

Post a Comment