?清清月兒整理

?

[yui][譯]Yahoo!User Interface Libray 介紹

Yahoo! User Interface Library(簡稱yui) 是一個使用JavaScript編寫的工具和控件庫。它利用DOM腳本,DHTML和AJAX來構造具有豐富交互功能的Web程序。yui也包含幾個核心的CSS文件。yui中的所有組件已經(jīng)以開源的形式發(fā)布，它們遵循BSD協(xié)議并且可以免費使用。可以從Sourceforge站點下載完整的項目文件，同時包含相關文檔和示例。

?

? －Written by 浪子@cnblogs.com?

Yui組件分成2類：工具包和控件庫

Yui 工具包

Yui 工具包利用DOM腳本來簡化瀏覽器內(nèi)的開發(fā)（in-browser devolvement），使用DHTML和AJAX的特性開發(fā)所有的Web程序。

動畫（Animation）：在你的頁面中通過指定位置，大小，透明度或者頁面元素的其他特性來創(chuàng)建一個“電影效果（cinematic effects）”。這些效果將在你的頁面發(fā)生變化的時候給用戶更好的體驗。

連接管理（Connection Manager ）：這個工具包幫助你管理XMLHttpRequest（一般被稱為AJAX）事務，它提供對表單提交（form posts），錯誤捕獲（error handling）和callbacks的全面支持。該工具包也支持文件的上傳管理。

DOM：DOM工具包提供更簡單的DOM腳本的功能調(diào)用方式，包含元素的位置和CSS樣式的管理。

拖放（Drag and Drop）：創(chuàng)建可拖放的對象。為了提供豐富的交互功能（比如拖動一個對象到目標位置）你可能需要編寫很多代碼。這個工具包可以在所有支持的瀏覽器中捕獲所有的操作事務并保證其穩(wěn)定地運行。

事件（Event）：這個神奇的管理類庫給你提供一種簡單安全的方法訪問瀏覽器的事件（比如點擊和鍵盤操作）。這個事件封包中還包含了自定義事件對象，它為你的程序交互提供一種發(fā)布和訂閱事件的機制。

yui控件：

yui控件庫為你頁面提供一組高交互性性的可視化元素。這些元素完全在客戶端創(chuàng)建維護，不需要請求服務器進行頁面刷新。

這些控件包括：

自動完成（AutoComplete）控件：自動完成控件為文本輸入提供一種漸進式的用戶體驗（streamline user interactions）。控件會提供相似項列表和基于多樣化的數(shù)據(jù)格式的提前鍵入功能（type-ahead functionality based on a variety of data-source formats），并且可以通過XMLHttpRequest訪問服務端的數(shù)據(jù)。

日歷（Calendar）控件：一個用來日期選擇的動態(tài)圖形控件。

容器（Container）控件：一組模仿windows樣式的控件，他們包括Tooltip, Panel, Dialog?和 SimpleDialog。其中Module?和 Overlay控件提供一個可擴展的平臺，你可以控制自定義的模仿windows樣式的控件。

日志（Logger）控件：提供一個快速和簡單的記錄日志的方式，它直接將日志信息輸出到屏幕控制臺（on-screen console）、Firefox的擴展組件FireBug，或者Safari的Javascript控制臺。yui的Debug組件將完整的記錄輸出信息和調(diào)試信息。

菜單（Menu）控件：利用此控件只需要幾行簡單的代碼就可以設計一個動態(tài)樣式的菜單。可以完全使用javascript構造一個菜單，can be layered on top of semantic unordered lists。

滑塊（Slider）控件：提供一個可滑動的組件，它允許使用者在一定的范圍內(nèi)（x軸，y軸）改變滑塊的位置。

樹形（TreeView）控件：提供一個節(jié)點可縮放的樹形控件。節(jié)點可以是鏈接，自定義屬性，并且可以動態(tài)加載。節(jié)點元素的展現(xiàn)可以通過CSS修改，比如文件夾視圖，TO－DO任務列表或者其他可視化處理

第三章 yui的CSS資源

為了讓CSS能符合不同等級的瀏覽器（A-Grade browsers）的標準，我們想了很多。我們把這些作為yui類庫的一部分共享出來，希望能在這里得到促進，獲得一個簡潔的，可維護并在瀏覽器中表現(xiàn)優(yōu)秀的設計。

頁面網(wǎng)格樣式（CSS Page Grids）：7個基本的用css組織子組件的頁面框架，支持130種不通的頁面布局。

標準的CSS字體（Standard CSS Fonts）：標準的跨瀏覽器字體樣式和大小展現(xiàn)。

標準的CSS排列（Standard CSS Reset）：使用這些CSS聲明來排除頁面的空白部分并且公共元素的樣式兼容各種瀏覽器的展現(xiàn)。

?

YUI Team于美國時間5月28日發(fā)布了YUI 2.5.2，主要變化：
1. 這一版針對Firefox3和Opera9.5解決了幾個關鍵性Bug。
2. 修復了DataTable、Menu、RTE、Button的幾個主要Bug。
3. Charts組件增加3種新風格。
4. 從這版開始，在YUI下載包中增加了ActionScript源文件，方便開發(fā)者深入了解Charts和Uploader組件。
詳情請見YUI Blog。

?

主頁：http://developer.yahoo.com/yui/

?

?清清月兒整理

控件：

• YUI Components
• Animation
• AutoComplete
• Browser History Manager
• Button
• Calendar
• Charts (experimental)
• Color Picker
• Connection Manager
• Cookie
• Container
• DataSource
• DataTable
• Dom
• Drag & Drop
• Element
• Event
• Get
• ImageCropper
• ImageLoader
• JSON
• Layout Manager
• Logger
• Menu
• Profiler
• ProfilerViewer
• Resize
• Rich Text Editor
• Selector
• Slider
• TabView
• TreeView
• Uploader (experimental)
• Yahoo Global Object
• YUI Loader
• YUI Test
• Reset CSS
• Base CSS
• Fonts CSS
• Grids CSS

  ?

  Filter

  -min -debug raw
  Options

  Load Optional Combine All JS Files Allow Rollupbase:
  YUI JavaScript Core

  Dom Collection Event Utility Yahoo Global Object
  YUI JavaScript Utilities

  Animation Utility Connection Manager Cookie Utility DataSource Utility Drag & Drop Utility Element Utility Get Utility Browser History Manager ImageLoader Utility JSON Utility Resize Utility Selector Utility YUI Loader Utility
  YUI Aggregate (Rollup) Files

  reset-fonts.css reset-fonts-grids.css utilities.js yahoo-dom-event.js yuiloader-dom-event.js
  YUI CSS Packages

  Base CSS Package Fonts CSS Package Grids CSS Package Reset CSS Package
  YUI User Interface Widgets

  AutoComplete Control Button Control Calendar Control Charts Control Color Picker Control Container Family Container Core (Module, Overlay) DataTable Control Rich Text Editor ImageCropper Control Layout Manager Menu Control Simple Editor Slider Control TabView Control TreeView Control Uploader
  YUI Developer Tools

  Logger Control Profiler ProfilerViewer Control YUI Test Utility

  ?

  ?

  ?

  EXT介紹

  ext是一個強大的js類庫,以前是基于YAHOO-UI,現(xiàn)在已經(jīng)完全獨立了,
  
  主要包括data,widget,form,gird,dd,menu,其中最強大的應該算gird了,編程思想是基于面對對象編程(oop),擴展性相當?shù)暮?可以自己寫擴展.自己定義命名空間.web應用可能感覺太大.不過您可以根據(jù)需要按需加載您想要的類庫就可以了.
  
  主要包括三個大的文件ext-all.css,ext-base.js,ext-all.js(包括所有的類庫,您可以根據(jù)需要進行刪減.官方網(wǎng)站提供這一接口),在引用ext類庫的時候.這三個文件必不可少.
  
  主頁： http://extjs.com/downloads
  中文：http://www.ajaxjs.com/????????????? 文檔：http://www.ajaxjs.com/docs/ Combination SamplesGrid SamplesTabPanel SamplesWindow SamplesTree SamplesLayout ManagersComboBox SamplesForm SamplesToolbars and MenusTemplates and DataViewMisc Samples

  Combination Samples

  Feed Viewer 2.0

  RSS 2.0 feed reader sample application that features a swappable reader panel layout.

  Simple Tasks 2.0

  Complete personal task management application sample that runs on Adobe AIR.

  Simple Tasks

  Personal task management application sample that uses Google Gears for data storage.

  Image Organizer

  DataView and TreePanel sample that demonstrates dragging data items from a DataView into a TreePanel.

  Web Desktop

  Demonstrates how one could build a desktop in the browser using Ext components including a module plugin system.

  Grid Samples

  Basic Array Grid

  A basic read-only grid loaded from local array data that demonstrates the use of custom column renderer functions.

  Editable Grid

  An editable grid loaded from XML that shows multiple types of grid ediors as well as defining custom data records.

  XML Grid

  A simple read-only grid loaded from XML data.

  Paging

  A grid with paging, cross-domain data loading and custom- rendered expandable row bodies.

  Grouping

  A basic grouping grid showing collapsible data groups that can be customized via the "Group By" header menu option.

  Live Group Summary

  Advanced grouping grid that allows cell editing and includes custom dynamic summary calculations.

  Grid Plugins

  Multiple grids customized via plugins: expander rows, checkbox selection and row numbering.

  Grid Filtering

  New! Grid plugins providing custom data filtering menus that support various data types.

  Grid From Markup

  Custom GridPanel extension that can convert a plain HTML table into a dynamic grid at runtime.

  Binding: Grid (basic)

  New! Data binding a grid to a detail preview panel via the grid's RowSelectionModel.

  Binding: Grid (advanced)

  New! Refactoring the basic data binding example to use a class-based application design model.

  TabPanel Samples

  Basic Tabs

  Basic tab functionality including autoHeight, tabs from markup, Ajax loading and tab events.

  Advanced Tabs

  Advanced tab features including tab scrolling, adding tabs programmatically and a context menu plugin.

  Window Samples

  Hello World

  Simple "Hello World" window that contains a basic TabPanel.

  MessageBox

  Different styles include confirm, alert, prompt, progress and wait and also support custom icons.

  Layout Window

  A window containing a basic BorderLayout with nested TabPanel.

  Tree Samples

  Drag and Drop Reordering

  A TreePanel loaded asynchronously via a JSON TreeLoader that shows drag and drop with container scroll.

  Multiple trees

  Drag and drop between two different sorted TreePanels.

  Column Tree

  A custom TreePanel implementation that demonstrates extending an existing component.

  Layout Managers

  Layout Browser

  New! Includes examples for each standard Ext layout, several custom layouts and combination examples.

  Border Layout

  A complex BorderLayout implementation that shows nesting multiple components and sub-layouts.

  Anchor Layout

  A simple example of anchoring form fields to a window for flexible form resizing.

  Portal Demo

  A page layout using several custom extensions to provide a web portal interface.

  ComboBox Samples

  Basic ComboBox

  Basic combos, combos rendered from markup and customized list layout to provide item tooltips.

  ComboBox Templates

  Customized combo with template-based list rendering, remote loading and paging.

  Form Samples

  Dynamic Forms

  Various example forms showing collapsible fieldsets, column layout, nested TabPanels and more.

  Ajax with XML Forms

  Ajax-loaded form fields from remote XML data and remote field validation on submit.

  Custom Search Field

  A TriggerField search extension combined with an XTemplate for custom results rendering.

  Binding: Grid -> Form

  New! A grid embedded within a FormPanel that automatically loads records into the form on row selection.

  Advanced Validation

  New! Relational form field validation using custom vtypes.

  Toolbars and Menus

  Basic Toolbar

  Toolbar and menus that contain various components like date pickers, color pickers, sub-menus and more.

  Ext Actions

  Bind the same behavior to multiple buttons, toolbar and menu items using the Ext.Action class.

  Templates and DataView

  Templates

  A simple example of rendering views from templates bound to data objects.

  DataView

  A basic DataView with custom plugins for editable labels and drag selection of items.

  DataView (advanced)

  New! A more customized DataView supporting sorting and filtering with multiple templates.

  Misc Samples

  StatusBar

  New! A simple StatusBar that can be dropped into the bottom of any panel to display status text and icons.

  StatusBar (advanced)

  New! Customizing the StatusBar via a plugin to provide automatic form validation monitoring and error linking.

  Slider

  New! A slider component that supports vertical mode, snapping, tooltips, customized styles and more.

  Custom Drag and Drop

  New! Enabling drag and drop between a DataView and a grid using DragZone and DropZone extensions.

  QuickTips

  Various tooltip and quick tip configuration options including Ajax loading and mouse tracking.

  Progress Bar

  A basic progress bar component shown in various configurations and with custom styles.

  Panels

  A basic collapsible panel example.

  Resizable

  Examples of making any element resizable with various configuration options.

  Spotlight

  A utility for masking everything except a single element on the page to visually highlight it.

  Localization (static)

  Demonstrates fully localizing a form by including a custom locale script.

  Localization (dynamic)

  Dynamically render various Ext components in different locales by selecting from a locale list.

  
  ?

總結

以上是生活随笔為你收集整理的Yahoo javascript 开源界面库YUI 和EXT的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。