《ajax设计之道》由会员分享，可在线阅读，更多相关《ajax设计之道（123页珍藏版）》请在金锄头文库上搜索。
1、Bill W. Scott, Y! Ajax Evangelistbscottyahoo-Principles and Patterns for Designing Rich Internet ApplicationsDesigning for AjaxDesigning for AjaxBackgroundGames, research, science, military, bizApps, frameworks, widget setsDeveloper, designerObject-oriented backgroundSoftware architect, user experie
2、nce managerCurrent: Yahoo! Ajax Evangelist http:/ /2Designing for Ajax3Ajax YahooDesigning for AjaxYahoo! Pattern Library Release4http:/ / for A5http:/ /Designing for AjaxYahoo! Patterns Discussion Group6http:/ / for AjaxInitial Set of Yahoo! Patterns Released on 2/137Breadcrumbs. Module Tabs. Navig
3、ation Tabs. Auto Complete. Pagination. Item Pagination. Search Pagination. Ratings and Reviews. Architecture of a Review. Rating an Object. Writing a Review. Drag and Drop. Drag and Drop Modules.Designing for AjaxRich Design PatternsDrag and Drop. Drag and Drop Modules. In Page Editing. In Page Cust
4、om Editing. Direct State Editing. Grid Cell Editing. Inline Custom Editing. Inline Tag Editing. Popup Custom Editing. Slide-out Custom Editing. Inline Text Editing. Persistent Portals. Inline Reordering. Indication. Busy Indication. Cursor Busy. In Context Busy. In Context Progress. Inline Status. C
5、haracter Counter. Auto Complete. Balloon Error Tip. Deferred Content Loading. Dynamic Goal. Narrowing Choices. Refining Search. Live Search. Dynamic Filter. Invitation. Cursor Invitation. Drop Invitation. Tool Tip Invitation. Hover Invitation. Detail Zoom. Opacity Focus. Configurable Module - Facepl
6、ate. Configurable Module - Flip It. Configurable Module - Inline Configure. Configurable Module - Slide Out Drawer. Slide Out. Flip. Opacity Fade. Endless Scrolling. Expandable Paging Boundary. Fresh Content. Hover Detail. In Place Drill Down. Inline Assistant. Inline Validation. Validate Then Sugge
7、st. On Demand Refresh. Periodic Refresh. Resizable Modules. Scrolling Modules. Auto Save. In Context Tools. Remembered Collection. Remembered Preferences. Auto Form Fill. Rating an Object. Transition. Brighten Transition. Cross Fade Transition. Dim Transition. Expand Transition. Fade In Transition.
8、Fade Out Transition. Flip Transition. Move Transition. Self-Healing Transition. Collapse Transition. Slide Transition. Rich Internet Object. Available. Selected. Identifiable Object.8Designing for AjaxYahoo! UI LibraryNormalization (Event Utility)Messaging (Connection Manager for AJAX)Direct Represe
9、ntation (Animation and Position)Direct Manipulation (Drag and Drop)Rich Interactive Widgets (Slider, TreeView, Calendar, AutoComplete9Designing for AjaxDesigning for AjaxRichness What is richness?Ajax Patterns DNA of an Ajax Pattern Principles Principles for Ajax Design10Designing for Ajax11Richness
10、Designing for AjaxDefining Richness: Web in 3DInteraction DimensionData DimensionPresentation Dimension 12InteractionDataPresentationeventresponseDesigning for AjaxClassic WebInteraction course-grained Data loaded with the page or obtained via refreshPresentation: page-based updates13InteractionData
11、PresentationpageDatarefresh boundaryDesigning for AjaxServerHttp RequestHttp ResponseMy ProfileName Gender AgeEditJoe Smith Male 27My ProfileName Gender AgePhotoSubmitClassic Web Illustrated14ServerHttp RequestHttp ResponseInteractionDataPresentation eventresponsebrowserDesigning for AjaxAjax = Just
12、-in-Time. Immediacy.15Just-in-time dataJust-in-time presentationJust-in-time logicDesigning for AjaxAjax Model - New & Improved!Now with Deeper Interaction!Now with Just-in-Time Data & Just-in-Time Logic!XMLHttpRequest (XHR) is the secret sauce!Now with Richer Interface!All dimensions are closer16In
13、teractionDataPresentationDesigning for AjaxMy ProfileName Gender AgeJoe Smith Male 27Ajax Illustrated17XHR ObjectServerSaveTim Jonessend()onreadystatechangeInteractionDataPresentation eventresponsebrowserDesigning for AjaxAJAX vs AjaxAJAX = Asynchronous JavaScript and XMLStrict definition is using X
14、MLHttpRequest (XHR) to retrieve XML within a web pageAjax = The set of technologies that allow web applications to provide rich interaction, just-in-time information and dynamic interfaces without required page refreshThe Secret SauceAjax = XHR + DHTML (HTML, CSS, JavaScript) + Rich design18XHRDesig
15、ning for AjaxOther Remote Scripting TechniquesHidden IFrame src src hackCSS href hackJS to faceless Java appletsJS to faceless FlashNO CONTENT ResponseCookies19Designing for AjaxAjax Patterns20Designing for AjaxRich Design PatternsDrag and Drop. Drag and Drop Modules. In Page Editing. In Page Custom Editing. Direct State Editing. Grid Cell Editing. Inline Custom Editing. Inline Tag Editing. Popup Custom Editing. Slide-out Custom Editing. Inline Text Editing. Persistent Portals. Inline Re
