Search icon CANCEL
Subscription
0
Cart icon
Cart
Close icon
You have no products in your basket yet
Save more on your purchases!
Savings automatically calculated. No voucher code required
Arrow left icon
All Products
Best Sellers
New Releases
Books
Videos
Audiobooks
Learning Hub
Newsletters
Free Learning
Arrow right icon
Arrow up icon
GO TO TOP
jQuery UI Cookbook

You're reading from  jQuery UI Cookbook

Product type Book
Published in Jul 2013
Publisher Packt
ISBN-13 9781782162186
Pages 290 pages
Edition 1st Edition
Languages
Author (1):
Adam Boduch Adam Boduch
Profile icon Adam Boduch
Toc

Table of Contents (19) Chapters close

jQuery UI Cookbook
Credits
About the Author
About the Reviewers
www.PacktPub.com
Preface
1. Creating Accordions 2. Including Autocompletes 3. Crafting Buttons 4. Developing Datepickers 5. Adding Dialogs 6. Making Menus 7. Progress Bars 8. Using Sliders 9. Using Spinners 10. Using Tabs 11. Using Tooltips 12. Widgets and More! Index

Index

A

  • $.ajax() call / How it works..., How it works...
  • $.ajax() function / How it works...
  • accordion
    • about / Introduction, Accordions to tabs, and back again
    • sections, sorting / Sorting accordion sections, How to do it..., How it works...
    • drag-and-drop / Dragging-and-dropping between accordions, Getting ready, How to do it..., How it works...
    • extending / How to do it..., How it works...
  • accordion() method / How it works...
  • active tab
    • setting, hre used / Setting the active tab using href, How to do it..., How it works..., There's more...
  • addClass() jQuery function / Using effects with the button hover state
  • animate() function / There's more...
  • animateHover option / How to do it..., How it works...
  • animate option / How to do it..., How to do it...
  • animateResize / How to do it...
  • animateResize option / How it works...
  • API data
    • loading / Waiting for API data to load, Getting ready..., How to do it...
  • AppRouter class / How it works...
  • autocompleteChange() method / How it works...
  • autocompleteCreate() method / How it works...
  • autocomplete filtering
    • about / Remote autocomplete filtering, How to do it..., There's more...
    • remote / Remote autocomplete filtering, How it works..., There's more...
  • autocompleteSearch() method / How it works...
  • autocompleteSelect method / How it works...
  • autocomplete widget
    • about / Introduction
    • default input, styling with themes / Styling the default input with themes, How to do it..., How it works...
  • autoOpen option / How it works...

B

  • backbone application
    • widgets, using with / Using widgets with Backbone applications, How to do it..., How it works...
  • border-color CSS property / How it works...
  • button.explode tooltip / How it works...
  • button hover state
    • effects, using / Using effects with the button hover state, How it works...
  • buttons
    • about / Introduction
    • spaces, filling automatically / Filling space with buttons automatically, How to do it..., How it works..., There's more...
    • within group, sorting / Sorting buttons within a group, How to do it...
    • icons / Button icons and hiding text, How to do it..., How it works...
  • buttonset
    • about / Introduction
  • buttonsets
    • used, for controlling spacing / Controlling the spacing with buttonsets, How to do it...

C

  • #container element / How it works...
  • $content variable / How it works...
  • cache / There's more...
  • calendar data
    • about / Additional calendar data and controls, How to do it...
  • callback function / There's more...
  • categories
    • custom categories / Custom data and categories, How to do it..., There's more...
  • change*selected event / How it works...
  • changeMonth / How it works...
  • changeYear / How it works...
  • check() method / How it works...
  • checked event handler / How it works...
  • checklists
    • creating / Making simple checklists, Getting ready, How to do it..., How it works...
  • child slider
    • about / Using master sliders and child sliders, How to do it..., How it works...
  • click event / How it works..., How it works...
  • clip effect / How it works...
  • close() method / How it works...
  • cnt counter variable / How it works...
  • connectToSortable option / How it works...
  • conten option / Using custom markup in tooltips
  • content function / How it works...
  • controls
    • about / Additional calendar data and controls, How to do it..., How it works...
  • create() method / How it works...
  • create callback / How it works...
  • create function / How it works...
  • culture option / How it works...
  • currencies
    • formatting, for local cultures / Formatting currencies for local cultures, How to do it..., How it works...

D

  • $.datepicker instance / How it works...
  • $.datepicker object / How it works...
  • data
    • custom data / Custom data and categories, How to do it..., There's more...
  • data-icon attribute / How it works...
  • data sources
    • building, select options used / Building data sources using select options, How to do it..., How it works...
    • multiple data sources, using / Using multiple data sources, How to do it..., How it works...
  • dateFormat option / Working with different date formats, There's more...
  • date formats
    • working with / Working with different date formats, How to do it..., There's more...
  • datepicker widget
    • date formats / Working with different date formats, How to do it..., There's more...
    • full-sized calendar widget, creating / Making a full-sized calendar widget
    • month-to-month effects, displaying / Displaying month-to-month effects, Getting ready, How it works...
    • date range, restricting / Restricting the date range, How it works...
    • input field, handling / Hiding the input field, Getting ready, How to do it..., How it works..., How to do it..., How it works...
  • date range
    • restricting / Restricting the date range, How to do it..., There's more...
  • deferred.promise() object / How it works...
  • destroy() method / How it works...
  • dialog
    • effects, applying to / Applying effects to dialog components
    • icons, using in title / Using icons in the dialog title, How to do it..., How it works...
    • actions, adding to title / Adding actions to the dialog title
    • actions, adding / How to do it..., How it works...
    • resize interactions, effects applying to / Applying effects to dialog resize interactions, How it works...
    • modal, using for messages / Using modal dialogs for messages, How to do it..., How it works...
  • drop-down menu
    • effects, applying / Applying effects to the drop-down menu, How to do it..., How it works...
  • drop effect / How it works...

E

  • effect object / How it works...
  • effects
    • applying, to drop-down menu / Applying effects to the drop-down menu, How to do it..., How it works...
  • error option / How it works...
  • exploded option / How it works...
  • extend() function / How it works...

F

  • fade animation / Applying effects to dialog components, How to do it...
  • file upload
    • progress, displaying / Displaying file upload progress, How to do it..., How it works...
  • filter() function / How it works...
  • filter() method / How it works...
  • fold effect / How it works..., How it works...
  • for attribute / How it works...
  • formatTerms() method / There's more...
  • full-sized calendar widget
    • creating / Making a full-sized calendar widget, How to do it..., How it works...

G

  • Globalize.cultures object / How it works...
  • Globalize.format() function / How it works...

H

  • height property / How it works...
  • height style
    • changing, dynamically / Dynamically changing the height style, Getting ready, How to do it..., How it works...
  • heightStyle option / Getting ready, How it works...
  • heightStyle property / Resizable content sections
  • hide option / Applying effects to dialog components
  • highlight option / How it works...
  • horizontal slider
    • about / Controlling the size of the slider handle
  • hre
    • used, for setting active tab / Setting the active tab using href, How to do it...

I

  • iconButtons array / How it works...
  • iconButtons option / How it works...
  • icon option / How it works...
  • incremental callback function / How it works...
  • incremental option / How it works...
  • inheritState option / There's more...
  • initialize() method / How it works...
  • input element / Introduction
  • input field
    • hiding / Hiding the input field, How to do it..., How it works...
  • input focus outline
    • removing / Removing the input focus outline, How to do it..., How it works...
  • inputOutline option / How it works...
  • isCallback argument / How it works...
  • items option / There's more...

J

  • JavaScript Object Notation (JSON) / Building menus dynamically
  • jQuery UI
    • about / Introduction
  • jqXHR object / How it works...

K

  • keypress event / How it works...

L

  • LanguageCollection class / How it works...
  • load() method / How it works...
  • local cultures
    • currencies, formatting / Formatting currencies for local cultures, How to do it..., How it works...
    • time, formatting / Formatting time for local cultures, How to do it..., How it works...

M

  • margin-left CSS property / How it works...
  • margin-top property / How to do it...
  • master slider
    • about / Using master sliders and child sliders, How to do it..., How it works...
  • maxDate option / How it works...
  • max option / How it works...
  • menus
    • sortable menu items, creating / Creating sortable menu items, Getting ready, How it works...
    • active menu item, highlighting / Highlighting the active menu item, How to do it..., How it works...
    • effects, using / Using effects with menu navigation, How to do it..., How it works...
    • building, dynamically / Building menus dynamically, How to do it..., There's more...
    • submenus position, controlling / Controlling the position of submenus, How to do it..., How it works...
    • themes, applying to submenus / Applying themes to submenus, How to do it...
  • messages
    • dialog modal, using / Using modal dialogs for messages, How to do it..., How it works...
  • minDate option / How it works...
  • modal option / Using modal dialogs for messages
  • month-to-month effects
    • displaying / Displaying month-to-month effects, How to do it..., How it works...
  • mouse
    • movement, displaying / Displaying the mouse movement, How to do it..., How it works...

N

  • navigation links
    • tabs, using as / Using tabs as URL navigation links, How to do it..., How it works...
  • newHeaders element / How it works...
  • next()function / How it works...
  • notify widget / How it works...
  • numberFormat option / How it works..., How it works...

O

  • observables option / How it works...
  • observer widget
    • building / Building an observer widget, How to do it..., How it works...
  • oldHeaders variable / How it works...
  • onprogress event / Displaying file upload progress
  • onprogress event handler / How to do it...
  • onprogress event handler function / How it works...
  • open() method / How it works..., How it works..., How it works...
  • options object / How it works..., How it works..., There's more...
  • orientation option / How it works...
  • original slider / How it works...
  • overflow CSS property / How it works...

P

  • padding set / How it works...
  • percent option / How it works...
  • progressbar-label class / How it works...
  • progressbar widget
    • about / Introduction, Giving progressbars labels, How to do it..., How it works..., There's more...
    • changes, animating / Animating progress changes, How to do it..., There's more...
  • progressindicator() constructor / How it works...
  • progressindicator widget
    • creating / Creating progressindicator widgets, How it works..., There's more...
  • promises option / How it works...

R

  • range values
    • getting / Getting range values, How to do it...
  • refresh() function / How it works...
  • refresh() menu method / How it works...
  • refresh() method / How it works..., How it works..., There's more..., How it works...
  • relative option / How it works...
  • reminders
    • appointing, as tooltips / Appointment reminders as tooltips, How to do it..., How it works...
  • remote tab content
    • about / Working with remote tab content, How to do it...
  • removeClass() jQuery function / Using effects with the button hover state
  • render() method / How it works...
  • resizable() interaction widget / Applying effects to dialog resize interactions
  • resizable() widget / How it works...
  • resizable content sections
    • about / Resizable content sections, How to do it..., How it works...
  • resizable option / There's more...
  • response() function / How it works...
  • Rotten Tomatoes API / There's more...
  • routeLang() method / How it works...

S

  • #start datepicker / There's more...
  • selected attribute / How it works...
  • select element options / Waiting for API data to load
  • select options
    • used, for building data sources / Building data sources using select options, How to do it..., How it works...
  • self.element / How it works...
  • showButtonPanel / How it works...
  • show effect / How it works..., How it works...
  • showOtherMonths / How it works...
  • showWeek / How it works...
  • slider
    • handle size, controlling / Controlling the size of the slider handle, How to do it..., How it works...
    • handle focus outline, removing / Removing the handle focus outline, How to do it..., How it works...
    • orientation, changing / Changing the slider orientation, How it works...
  • sortable() interaction widget / How it works..., Sorting buttons within a group
  • sortable interaction widget / How it works...
    • used, for sorting tabs / Sorting tabs using the sortable interaction, How to do it..., How it works..., There's more...
  • sortable option / How it works...
  • source() function / Remote autocomplete filtering
  • spacing,
    • between themes, controlling / How it works...
  • span element / There's more...
  • spinDelay option / There's more...
  • spinner buttons
    • simplifying / Simplifying the spinner buttons, How to do it..., How it works...
  • spin overflow
    • specifying / Specifying the spin overflow, How to do it..., How it works..., There's more...
  • states
    • using, to warn thresholds / Using states to warn about thresholds, How to do it..., How it works..., How to do it..., How it works..., There's more...
  • step
    • between values, controlling / Controlling the step between values, How to do it..., How it works..., There's more...
  • step increments
    • creating / Marking step increments, How to do it..., How it works...
  • stop option / How it works...
  • submenus
    • position, controlling / Controlling the position of submenus, How to do it..., How it works...
    • themes, applying to / Applying themes to submenus, How to do it...

T

  • Tab key
    • used, for selection navigation / Section navigation using the Tab key, How to do it..., How it works...
  • tabkeydown() event handler / How it works...
  • tabkeydown() handler / How it works...
  • tabs
    • about / Introduction
    • remote tab content / Working with remote tab content, How to do it..., There's more...
    • icon, giving / Giving tabs an icon, How to do it..., How it works...
    • theme, simplifying / Simplifying the tab theme, How to do it..., How it works..., There's more...
    • using, as navigation links / Using tabs as URL navigation links, How to do it..., How it works...
    • transitions, effects creating between / Creating effects between tab transitions, How to do it..., How it works...
    • sorting, sortable interaction widget used / Sorting tabs using the sortable interaction
    • sorting, sortable interaction used / How to do it..., There's more...
  • tabs() method / How it works...
  • tabs widget
    • about / Accordions to tabs, and back again
    • extending / How to do it..., How it works...
  • text option / How to do it...
  • theme.accordion.css / How to do it...
  • themes
    • spacing, controlling / Controlling spacing with themes
    • default input, styling / Styling the default input with themes, How to do it..., How it works...
  • this.uiSpinner property / How it works...
  • threshold option / How it works...
  • thresholds
    • about / How to do it..., How it works...
  • ticks option / How it works...
  • time
    • formatting, for local cultures / Formatting time for local cultures, How it works...
  • title, dialog
    • icons, using / Using icons in the dialog title, How to do it...
    • actions, adding / Adding actions to the dialog title, How to do it..., How it works...
  • toggle button widget / How to do it...
  • tooltip
    • state, changing / Changing the tooltip state, How to do it..., How it works..., There's more...
    • custom markup, using / Using custom markup in tooltips, How to do it..., How it works..., There's more...
    • display, effects applying to / Applying effects to the tooltip display, How to do it..., How it works...
    • for selected text / Tooltips for selected text, How to do it..., How it works..., There's more...
  • tooltipClass option / How it works..., There's more...
  • tooltips
    • reminders, appointing as / Appointment reminders as tooltips, How to do it..., How it works...
  • track tooltip option / How it works...
  • tt-error class / How it works...
  • ttPos attribute / How it works...

U

  • $.ui.progressbar.prototype.options object / How it works...
  • ui-autocomplete-category class / How it works...
  • ui-autocomplete-item class / How it works...
  • ui-buttonset-exploded class / How it works...
  • ui-checklist class / How it works...
  • ui-corner-all class / How it works..., How it works...
  • ui-dialog-icon class / How it works...
  • ui-helper-hidden class / How it works...
  • ui-slider-handle class / How it works...
  • ui-state-error class / There's more...
  • ui-state-highlight class / How it works...
  • ui-state-hover class / How it works...
  • ui-tabs-icon class / How it works...
  • ui-widget-content class / How it works...
  • ui-widget class / How it works...
  • ui.panel object / How it works...
  • ul element / How it works...

V

  • #vslider instance / How it works...
  • values() method / How it works...

W

  • $.when() function / How it works...
  • widget
    • datepicker widget / Introduction
    • dialog widget / Introduction
  • widgetClasses option / How it works...
  • widgetEventPrefix property / How it works...
  • widgets
    • slider widget / Introduction
    • tabs widget / Introduction
    • custom widget, building from scratch / Building a custom widget from scratch, How to do it...
    • options / How it works...
    • private methods / How it works...
    • create method / How it works...
    • destroy method / How it works...
    • API / How it works...
    • check method / How it works...
    • main application / How it works...
    • creating, with backbone application / Using widgets with Backbone applications, How to do it..., How it works...

X

  • xhr object / How it works...
  • xhr option / How it works...
  • XMLHTTPRequest type / How it works...
lock icon The rest of the chapter is locked
arrow left Previous Section
Register for a free Packt account to unlock a world of extra content!
A free Packt account unlocks extra newsletters, articles, discounted offers, and much more. Start advancing your knowledge today.
Unlock this book and the full library FREE for 7 days
Get unlimited access to 7000+ expert-authored eBooks and videos courses covering every tech area you can think of
Renews at $15.99/month. Cancel anytime