book

jQuery UI

Name: jQuery UI
Author: Eric Sarrion
ISBN: 9781449316990

by Eric Sarrion

March 2012

Intermediate to advanced

244 pages

5h 3m

English

O'Reilly Media, Inc.

Read now

Unlock full access

jQuery UI
Preface
Who Should Read This BookStructure of the BookConventions Used in This BookUsing Code ExamplesSafari® Books OnlineHow to Contact UsAcknowledgments
1. Introduction to jQuery UI
jQuery UI InstallationOverview of jQuery UIWhat Is a CSS Theme?Which Files Should We Include in Our HTML Pages?Uncompressed FilesJavaScript filesCSS filesSample HTML page including uncompressed filesCompressed FilesJavaScript filesCSS filesSample HTML page including compressed filesChange the CSS ThemeAnd Now?
2. Tabs
Basic Principles of TabsFormatting ContentThe tabs () MethodThe tabs (options) MethodTab appearance and behaviorManaging events associated with tabsThe tabs (“action”, params) MethodThe bind () MethodExamples of Using TabsDynamic Creation of TabsModifying the Contents of a Tab Using AjaxTransmitting the Information to the Server via AjaxUsing the Tabs add MethodUsing the tabsadd Event
3. Accordion Menus
Basic Principles of Accordion MenusFormatting ContentThe accordion () MethodThe accordion (options) MethodOptions for managing accordion menusManaging the height of the menu contentsManaging events related to menusThe accordion (“action”, params) MethodEvent Management in Accordion Menus with bind ()Examples of Using Accordion MenusOpening Any MenuLoading the Contents of a Menu with Ajax: Using optionsLoading the contents of a menu with Ajax: Using accordionchange
4. Dialog Boxes
Basic Principles of Dialog BoxesFormatting ContentThe dialog () MethodThe dialog (options) MethodManaging the visual effects on the dialog boxManaging the behavior of the dialog boxManaging events in the dialog boxThe dialog (“action”, params) MethodEvent Handling in Dialog Boxes with bind ()Examples of Using Dialog BoxesOpening and Closing a Dialog BoxApplying an Effect When Opening or Closing the Dialog BoxVerifying the Closure of the Dialog BoxHiding the Close ButtonInserting Buttons in the Dialog BoxInserting Content Using AjaxChanging the Behavior of a Dialog Box with Effects
5. Buttons
Basic Principles of ButtonsFormatting ContentThe button () MethodThe button (options) MethodThe button (“action”, params) MethodEvent Handling on Buttons with bind ()Radio ButtonsDisplaying Radio ButtonsImproving the Display with buttonset ()CheckboxesDisplaying CheckboxesImproving the Display with buttonset ()Examples of Using ButtonsDisplaying Icons in ButtonsCreating a CalculatorBasic programImproving the program
6. Progress Bars
Basic Principles of Progress BarsFormatting ContentThe progressbar () MethodThe progressbar (options) MethodThe progressbar (“action”, params) MethodHandling Events in Progress Bars with bind ()Examples of Using Progress BarsIncrementing a Progress BarPerforming Processing at Different Stages of Completion
7. Sliders
Basic Principles of SlidersFormatting ContentThe slider () MethodThe slider (options) MethodManaging the appearance and behavior of slidersManaging the values of cursorsManaging events on the sliderThe slider (“action”, params) MethodEvent Management on the Sliders with bind ()Examples of Using SlidersDisplaying the Value of One IndicatorDisplaying the Values of Two IndicatorsAdjusting the Opacity of an Image Using a Slider
8. Datepickers
Basic Principles of DatepickersFormatting ContentThe datepicker () MethodThe datepicker (options) MethodManaging the appearance and visual effects associated with the calendarInternationalization optionsManaging date selectionManaging events on the calendarThe datepicker (“action”, params) MethodExamples of Using DatepickersDisplaying a Calendar in Another LanguageDisplaying Multiple Months in the CalendarDisplaying a Static CalendarIndicating Minimum and Maximum DatesPreventing the Selection of Specific DatesPreselecting Any DateUsing options.defaultDateUsing datepicker (“setDate”, date)Special case of dates in foreign formatsPerforming an Ajax Request When Selecting a Date

9. Autocompletion
Basic Principles of AutocompletionFormatting ContentThe autocomplete () MethodThe autocomplete (options) MethodManaging autocompletionManaging events in the list of suggestionsThe autocomplete (“action”, params) MethodEvent Management on the List of Suggestions with bind ()Examples of Using the Autocompletion MechanismSpecifying the Width of the List of SuggestionsDisplaying a List of Suggestions at the Opening of the HTML PageDisplaying a List of Suggestions at the Entry of the Cursor in the Input FieldProducing an Effect on the Appearance of the List of SuggestionsDynamically Creating a List of SuggestionsDynamically Creating a List of Suggestions Based on the Input DataInserting Images in the List of Suggestions
10. Drag-and-Drop
The draggable () MethodThe draggable (options) MethodSpecifying the movable elementsManaging element movementManaging the effect at the end of displacementManaging displacement constraintsManaging window scrollManaging movable element eventsThe draggable (“action”, params) MethodEvent Management on the Moved Elements with bind ()Examples of Using Drag FunctionalityCarrying Out a Treatment When MovingImposing Limits on DisplacementConstraining the displacement to a given spaceConstraining the displacement horizontally or verticallyMoving an Object by DuplicatingThe droppable () MethodThe droppable (options) MethodManaging the behavior of the elements of depositIndicating which elements can be droppedManaging the appearance of elements of depositManaging events on the elements of depositThe droppable (“action”, params) MethodEvent Management on the Elements of Deposit with bind ()Examples of Using the Drop Functionality: A Shopping CartCreating a Shopping Cart with Drag-and-DropAdding a Visual Effect to Shopping Cart DepositsRemoving an Item from the Cart
11. Selecting Items
Basic Principles of Selecting ItemsFormatting ContentThe selectable () MethodThe selectable (options) MethodManaging selected itemsManaging events on selected itemsThe selectable (“action”, params) MethodEvent Management in the Selection with bind ()Examples of Using the Selection MechanismDisplaying the Order of the Events During the SelectionPreventing the Selection of an ElementInhibiting Clicks to Select an ItemManaging a Shopping Cart
12. Permutation of Elements in the Page
Basic Principles of Permutation of ElementsFormatting ContentThe sortable () MethodThe sortable (options) MethodSpecifying and managing the movable elementsSpecifying and managing swappable elementsManaging empty spacesManaging effects at the end of displacementManaging displacement constraintsManaging window scrollingManaging events on swappable elementsThe sortable (“action”, params) MethodEvent Management of the Permutation with bind ()Examples of Using the Permutation MechanismDisplaying the Order in Which Events AppearWhen swapping in one listWhen switching between two listsDropping any Element in the ListInserting images into a list of titlesAdding a visual treatment
13. Resizing
Basic Principles of ResizingFormatting ContentThe resizable () MethodThe resizable (options) MethodManaging resizable elementsManaging resizing effectsManaging events on resized elementsThe resizable (“action”, params) MethodHandling Events when Resizing with bind ()Examples of Using the Resizing MechanismDisplaying Dimensions of the Element When ResizingDisplaying the Position of the Element When ResizingPerforming an Animation While ResizingCreating a Resizable Text BoxInput on a single lineMulti-line input
14. Visual Effects in jQuery UI
New Visual EffectsThe effect (effectName, options, duration, callback) MethodThe blind EffectThe bounce EffectThe shake EffectThe clip EffectThe drop EffectThe explode EffectThe fold EffectThe highlight EffectThe puff EffectThe pulsate EffectThe scale EffectThe size EffectThe slide EffectThe show (), hide (), and toggle () MethodsThe animate () method Improved by jQuery UICSS Properties for Managing ColorsNew Values for the easing OptionProducing Effects with CSS ClassesThe addClass (), removeClass (), and toggleClass () Improved MethodsThe switchClass () MethodExample of Using the toggleClass () Method
About the Author
Copyright

Content preview from jQuery UI

Chapter 5. Buttons

jQuery UI allows us to give a different appearance to interface elements of the HTML page, such as buttons, radio buttons, and checkboxes.

Basic Principles of Buttons

Suppose we want to write the HTML code to display the buttons shown in Figure 5-1.

There are two buttons with a different aspect than the usual buttons. To view them, you must write a <span> containing the button text. You can replace the <span> element with another HTML element, such as <div> or <button>, but the button layout will be different (e.g., one above the other for a <div>):

<!DOCTYPE html>
<script src = jquery.js></script>
<script src = jqueryui/js/jquery-ui-1.8.16.custom.min.js></script>

<link rel=stylesheet type=text/css
      href=jqueryui/css/smoothness/jquery-ui-1.8.16.custom.css />

<span id="button1"> Button 1 </span>
<span id="button2"> Button 2 </span>

<script>

$("#button1, #button2").button ();

</script>

The button () method transforms the HTML elements into buttons, with automatic management of mouse movements on them, all managed transparently by jQuery UI.

The <!DOCTYPE html> directive is mandatory for improving the display in Internet Explorer.

Figure 5-1. Buttons in the HTML page

Formatting Content

Here, the HTML code that appears after the button () instruction has been changed (Figure 5-2). This code was retrieved using the Firebug extension in Firefox.

Figure 5-2. HTML generated by the ...

Become an O’Reilly member and get unlimited access to this title plus top books and audiobooks from O’Reilly and nearly 200 top publishers, thousands of courses curated by job role, 150+ live events each month,
and much more.

Read now

Unlock full access

More than 5,000 organizations count on O’Reilly

O’Reilly covers everything we've got, with content to help us build a world-class technology community, upgrade the capabilities and competencies of our teams, and improve overall team performance as well as their engagement.

Julian F.

Head of Cybersecurity

I wanted to learn C and C++, but it didn't click for me until I picked up an O'Reilly book. When I went on the O’Reilly platform, I was astonished to find all the books there, plus live events and sandboxes so you could play around with the technology.

Addison B.

Field Engineer

I’ve been on the O’Reilly platform for more than eight years. I use a couple of learning platforms, but I'm on O'Reilly more than anybody else. When you're there, you start learning. I'm never disappointed.

Amir M.

Data Platform Tech Lead

I'm always learning. So when I got on to O'Reilly, I was like a kid in a candy store. There are playlists. There are answers. There's on-demand training. It's worth its weight in gold, in terms of what it allows me to do.

Mark W.

Embedded Software Engineer

Publisher Resources

ISBN: 9781449325176Errata

Cloud Computing

Data Engineering

Data Science

AI & ML

Programming Languages

Software Architecture

IT/Ops

Security

Design