黑馬javaee云計算大數(shù)據(jù)視頻jquery ui18the user interface library for

1、jQuery UI 1.8The User Interface Library for jQueryBuild highly interactive web applications with y-to-use widgets from the jQuery UserInterface LibraryDan WellmanBIRHAM - MUMBAIjQuery UI 1.8The User Interface Library for jQueryCopyright 2011 Packt Publishing. No part of this book may be reproduced,

2、stored in a retrieval system, or transmitted in any form or by any means, without the prior written permission of the publisher, except in the case of brief quotations embedded in critical articles or reviews.Every effort has beenin the preparation of this book to ensure the accuracyof the informati

3、on presented. However, the information contained in this book is sold without warranty, either express or implied. Neither the author, nor Packt Publishing, and its dealers and distributors will be held liable for any damages caused or alleged to be caused directly or indirectly by this book.Packt P

4、ublishing has endeavored to provide trademark information about all of the companies and products mentioned in this book by the appropriate use of capitals. However, Packt Publishing cannot guarantee the accuracy of this information.First published: August 2011Production Reference: 1120811Published

5、by Packt Publishing Livery Place35 Livery StreetBirham B3 2PB, UK.ISBN 978-1-849516-52-5.Cover Image by Karl Swedberg (k a r le ng li s h r u l e s . c om)CreditsAuthorDan WellmanProoferAaron NashReviewersVijay JoshiJake KronikaIndexersTejal DaruwaleHemangini BariAcquisition EditorSarah CullingtonGr

6、aphicsNilesh MohiteDevelopment EditorHithesh UchilProduction CoordinatorsAparna BhagatNilesh MohiteTechnical EditorsLubna ShaikhMerwine MachadoCover WorkAparna BhagatNilesh MohiteProject CoordinatorMichelle QuadrosAbout the AuthorDan Wellman is an author and web developer based on the South Coast of

7、 the UK. By day he works alongside some of the most talented people he has had the pleasure of calling colleagues, for a small, yet accomplished digital agency called Design Haus. By night he writes books and tutorials on a range of front-end topics. He is hopelessly addicted to jQuery. His life is

8、enriched by his four wonderful children,a beautiful wife, and acircle of family and friends. This is his sixth book.Thanks to everyone who was involved in the book, the editorial team at Packt, the reviewers, and the hugely talented team responsiblefor jQuery UI. Props to my friends Steev Bishop, An

9、drew Herman, Dan Goodall, Aaron Matheson, James Zabiela, Jon Adams, Eamon ODonoghue, and Dan Isles.About the ReviewersVijay Joshi is a programmer with over six years of experience on various platforms. He discovered his passion for open source four years back when he started playing with PHP on a ho

10、bby project after completing his Masters in Computer Applications.Vijay is now alance web developer, independent consultant for a few selectedcompanies, and a blogger at. He specializes in develocustom web applications, mashups, creating apps using PHP frameworks, andenhng existing web apps using PH

11、P and front-end libraries like jQuery, jQUI, and so on.Vijay is also the author of PHP jQuery Cookbook and a technical reviewer of PHP AJAX Cookbook both of which have been published by Packt.Outside of work, he enjoys with fitness.ing, trekking, and sometimes gets obsessedJake Kronika is a web desi

12、gner and developer with over fifteen years of experience, and brings to this book a strong background in front-end development with JavaScript and jQuery, as well as significant training in server-side languages and frameworks.Having earned a Bachelors of Science degree in Computer Science from Illi

13、nois Wesleyan University in 2005, with a minor in Business Administration, he went on to become Senior User Interface (UI) Specialist for Imaginary Landscape, LLC, a small web development firm in the Ravenswood neighborhood on the north side of Chicago. In this role, the foundations of his strengths

14、 in Cascading Style Sheets (CSS) and JavaScript (JS) weoned and finely tuned.From there, Jake went on to work for the Sun-Times News Group, owner of the Chicago Sun-Times and numerous suburban newspapers in Chicagoland. It was in this role that he was initially exposed and rapidly gained expert skil

15、ls with the jQuery framework for JS.Following intermediate positions as Technology Consultant with Objective Arts, Inc, and as UI Prototyper for JP Morgan Chase, Jake moved across the contiguous United States to Seattle, WA, whee assumed his current role of Senior UI Software Engineer with the Cobal

16、t Group, a marketing division of ADPs Dealer Services.Since 1999, he has also operated Gridline Design & Development (so named in 2009), a sole proprietorship for web design, development, and administration.Jake has also reviewed Django JavaScript Integration: AJAX and jQuery, a Packt Publishing tex

17、t authored by Jonathan Howard and published in January of 2011.Support files, eBooks, discount offers and moreYou might want to visit to your book.for support files and downloads relatedDid you know that Packt offers eBook versions of every book published, with PDFand ePub files available? You can u

18、pgrade to the eBook version at.c om and as a print book customer, you are entitled to a discount on the eBook copy.Get in touch with us at s e r v i cep ac k t pub . c om for mores.Atup for a range of books and eBooks., you can alsoa collection oftechnical articles, signnewsletters and receive exclu

19、sive discounts and offers on PacktDo you need instant solutions to your IT questions? PacktLib is Packts onlinedigital book library. Here, you can access, library of books.and search across PacktireWhy Subscribe?Fully searchable across every book published by Packt Copy and paste, print and bookmark

20、 contentOn demand and accessible via web browserAccess for Packtholders, you can use this to access books. Simply use your login credentialsIf you have anwith Packt atPacktLib today and view nine entirely for immediate access.For my wonderful mother SueTable of Contents1PrefaceChapter 1: Introducing

21、 jQuery UI7Downloading the librarySetting up a development environment The structure of the library ThemeRollerComponent categories Browser supportBook examples Library licensing API introductionEvents and callbacks Callback argumentsSummaryChapter 2: The CSS Framework and Other Utilities81112131617

22、18181922232325The files that make up the frameworkjquery.ui.all.css jquery.ui.base.css jquery.ui.core.cssThe individual component framework filesjquery.ui.theme.cssLinking to the required framework files Using the framework classes ContainersInteractions Icons Interaction cuesSwitching themes quickl

23、y and easily25272727292930313133343537Table of ContentsOverriding the theme The position utilityUsing the position utility Collision avoidance Positioning with a function The widget factory Creating the widgetThe _create functionThe common API methods Adding custom methods The widget style sheet Usi

24、ng the widget SummaryChapter 3: Using the Tabs Widget3842434547484950535457575961A basic tab implementation Tab CSS framework classesApplying a custom theme to the tabs Configurable optionsSelecting a tab Disabling a tab Transition effects Collapsible tabsTab eventsBinding to eventsUsing tab methods

25、Enabling and disabling tabs Adding and removing tabs Simulating clicksCreating a tab carousel Getting and setting optionsAJAX tabsChanging the URL of a remote tabs content Reloading a remote tabDisplaying data obtained via JSONP SummaryChapter 4: The Accordion Widget626466686970707172747576777879818

26、28384848689Accordions structure Styling the accordion Configuring an accordionChanging the trigger event90939596 ii Table of ContentsChanging the default active header Filling the height of its container Accordion animationAccordion eventsUsing the change event The changestart eventAccordion navigat

27、ion Accordion methodsHeader activationResizing an accordion panel Accordion interoperability SummaryChapter 5: The Dialog969899101102103104106107107109111113Creating a basic dialog Dialog optionsShowing the dialog The title of the dialog ModalityAdding buttonsEnabling dialog animations Configuring t

28、he dialogs dimensions StackingDialogs event mControlling a dialog programmaticallyToggling the dialogGetting data from the dialog Dialog interoperabilityCreating a dynamic image-based dialog SummaryChapter 6: The Slider Widget114117118118119121122123123124127127128129132137139Implementing a slider C

29、ustom styling Configurable optionsCreating a vertical slider140141142143144144145145145146Minimum and Slider steps Slider animationum valuesSetting the sliders value Using multiple handles The range element iii Table of ContentsUsing sliders event API Slider methods Practical usesA color slider Summ

30、aryChapter 7: The Datepicker Widget147149151154157159The defauatepicker160162164166167169171172174176177180184185185186187190193Configurable options of the datepickerBasic optionsMinimum andum datesChanging the elements in the datepicker UI Adding a trigger buttonConfiguring alternative animations M

31、ultiple monthsChanging the date formatUpdating an additional input element LocalizationCallback propertiesUtility methodsDate picking methodsSelecting a date programmatically Showing the datepicker in a dialog boxAn AJAX datepicker SummaryChapter 8: The Progressbar WidgetThe default progressbar impl

32、ementation Progressbars configuration optionsSetting progressbars value Progressbars event API Progressbar methodsUser initiated progressRich uploads with progressbar SummaryChapter 9: The Button and Autocomplete Widgets194195195196198199203207209The button widget Standard implementations TheConfigu

33、rable options Button iconsInput icons210210212212213214 iv Table of ContentsButton events ButtonsetsCheckbox buttonsets Radio buttonsetsButton methodsThe autocomplete widgetWorking with local data sourcesUsing an array of objects as the data sourceConfigurable autocomplete optionsConfiguring minimum

34、 lengthAppending the suggestion list to an alternative elementAutocomplete events Autocomplete methodsWorking with remote data sourcesUsing a string as the value of the source option Using a function as the value of the source optionDisplaying HTML in the list of suggestionsSummaryChapter 10: Drag a

35、nd Drop215217218219219220221223224225225226228229229230236239241The deal with drag and droppables DraggablesA basic drag implementationConfiguring draggable options Using the configuration options Resetting dragged elements Drag handlesHelper elements Constraining the drag SnapDraggable event callba

36、cks Draggables methods DroppablesConfiguring droppables Configuring accepted draggables ToleranceDroppable event callbacksScope GreedyDroppable methodsA drag and drop game Summary242242243244247248249250252254256258259261261264265268271274274279 v Table of ContentsChapter 11: The Resizable Component

37、281A basic resizable Resizable optionsConfiguring resize handles Adding additional handle images Defining size limitsResizing ghosts Containing the resize Handling aspect ratio Resizable animations Simultaneous resizingPreventing unwanted resizes Resizable callbacks Resizable methods Resizable tabsS

38、ummaryChapter 12: The Selectables Component282284285286287288290291292293294295297298300301Basic implementation Selectee class namesConfigurable options of the selectable componentFiltering selectables Canceling the selectionSelectable callbacksWorking with vast amounts of selectablesSelectable meth

39、odsRefreshing selectablesA selectable image viewer Styling the image selector Adding the behaviourSummaryChapter 13: The Sortables Component301304306306308308311313313315317318321323The default implementation Configuring sortable optionsPlaceholders Sortable helpers Sortable items Connected lists324

40、326332333334335 vi Table of ContentsReacting to sortable events Connected callbacks Sortable methodsSerializingWidget compatibilityAdding draggablesSummaryChapter 14: UI Effects337340342343345347351353The core effects file Using color animations Using class transitions Advanced easingHighlighting sp

41、ecified elementsAdditional effect argumentsBouncingShaking an elementTransferring an elements outlineElement scaling Element explosion The puff effect The pulsate effect354354356358358360361362363365368370371373375379381382383385387Dropelements onto the pageSliding elements open orUsing easingThe wi

42、ndow-blind effectdClipelementsFolding elements SummaryIndex vii PrefaceModern web application user interface design requires rapid development and proven results. jQuery UI, a trusted suite of official plugins for the jQuery JavaScript library, gives you a solid platform on which you can build rich

43、and engaginginterfaces withum compatibility, stability, and a minimum of time and effort.jQuery UI has a series ofy-, great-looking user interface widgets anda compensive set of core interaction helpers designed to be implemented ina consistent and developer-friendly way. With all this, the amount o

44、f code thatyou need to write drastically reduced.ally to take a project from conception to completion isSpecially revised for version 1.8+ of jQuery UI, this book has been written to ize your experience with the library by breaking down each componentand walking you through examples that progressive

45、ly build upon your knowledge, taking you from beginner to advanced usage in a series of easy-to-follow steps.In this book, youll learn how each component can be initialized in a basic default implementation and then see how easy it is to customize its appearance and configure its behavior to tailor

46、it to the requirements of your application. Youll look at the configuration options and the methods exposed by each components API to see how these can be used to bring out the best of the library.Events play a key role in any modern web application if it is to meet the expected minimum requirements

47、 of interactivity and responsiveness, and each chapter will show you the custom events fired by the component covered and how these events can be intercepted and acted upon.PrefaceWhat this book coversChapter 1, Introducing jQuery UI, lets you find out exactly what the library is, where it can be do

48、wnloaded from, and how the files within it are structured. We also look at ThemeRoller, which browsers support the library, how it is licensed, and how the API has been simplified to give the components a consistent and easy-to-useprogramm.Chapter 2, The CSS Framework and Other Utilities, looks inat

49、 the extensive CSSframework, which provides a rich environment for integrated thethroughThemeroller, or allows developers to easily supply their own custom themes orskins. We also cover the new position utility, as well as a whole section dedicated to writing your own jQuery UI plugins using the wid

50、get factory.Chapter 3, Using the Tabs Component, looks at the first widget, which is the tabs component, a simple but effective means of presenting structured content in an engaging and interactive widget.Chapter 4, The Accordion Widget, looks at the accordion widget, another component dedicated to

51、the effective display of content. Highly engaging and interactive, theaccordion makes a valuable addition to any w to show exactly how it can be used.ge and its API is exposed in fullChapter 5, The Dialog, focuses on the dialog widget. The dialog behaves in the same way as a standard browser alert,

52、but it does so in a much less intrusive and more visitor-friendly manner. We look at how it can be configured and controlled toprovideum benefit and appeal.Chapter 6, The Slider Widget, provides a less commonly used, but no less valuableuser interface tool for collecting input from your visitors. We

53、 lookly at its APIthroughout this chapter to see the variety of ways in which it can be implemented.Chapter 7, The Datepicker Widget, looks at the date picker. This component packs ahuge amount of functionality into an attractive and highly usable tool, allowing your visitors to effortlessly select

54、dates. We look at the wide range of configurations that its API makes possible as well as seeing how easy common tasks such as skinningand localization are.Chapter 8, The Progressbar Widget, looks at the progressbar widget, examining its compact API and seeing a number of ways in which it can be put

55、 to good use in our web applications. 2 PrefaceChapter 9, The Button and Autocomplete Widgets, looks at the brand new button, and recently revivied autocomplete. Longtime users of the library will remember the autocomplete from a previous version of the library. The widget is now back, fully updated to fit in with the latest version of the library and in this chapter we get to see how it can be used to great effect.Chapter 10, Drag and Drop, begins to look at the low-level interaction helpers, tackling