Yahoo javascript 开源界面库YUI 和EXT
?清清月兒整理
?
[yui][譯]Yahoo!User Interface Libray 介紹
Yahoo! User Interface Library(簡稱yui) 是一個(gè)使用JavaScript編寫的工具和控件庫。它利用DOM腳本,DHTML和AJAX來構(gòu)造具有豐富交互功能的Web程序。yui也包含幾個(gè)核心的CSS文件。yui中的所有組件已經(jīng)以開源的形式發(fā)布，它們遵循BSD協(xié)議并且可以免費(fèi)使用。可以從Sourceforge站點(diǎn)下載完整的項(xiàng)目文件，同時(shí)包含相關(guān)文檔和示例。
?
? －Written by 浪子@cnblogs.com?
Yui組件分成2類：工具包和控件庫
Yui 工具包
Yui 工具包利用DOM腳本來簡化瀏覽器內(nèi)的開發(fā)（in-browser devolvement），使用DHTML和AJAX的特性開發(fā)所有的Web程序。
動畫（Animation）：在你的頁面中通過指定位置，大小，透明度或者頁面元素的其他特性來創(chuàng)建一個(gè)“電影效果（cinematic effects）”。這些效果將在你的頁面發(fā)生變化的時(shí)候給用戶更好的體驗(yàn)。
連接管理（Connection Manager ）：這個(gè)工具包幫助你管理XMLHttpRequest（一般被稱為AJAX）事務(wù)，它提供對表單提交（form posts），錯(cuò)誤捕獲（error handling）和callbacks的全面支持。該工具包也支持文件的上傳管理。
DOM：DOM工具包提供更簡單的DOM腳本的功能調(diào)用方式，包含元素的位置和CSS樣式的管理。
拖放（Drag and Drop）：創(chuàng)建可拖放的對象。為了提供豐富的交互功能（比如拖動一個(gè)對象到目標(biāo)位置）你可能需要編寫很多代碼。這個(gè)工具包可以在所有支持的瀏覽器中捕獲所有的操作事務(wù)并保證其穩(wěn)定地運(yùn)行。
事件（Event）：這個(gè)神奇的管理類庫給你提供一種簡單安全的方法訪問瀏覽器的事件（比如點(diǎn)擊和鍵盤操作）。這個(gè)事件封包中還包含了自定義事件對象，它為你的程序交互提供一種發(fā)布和訂閱事件的機(jī)制。
yui控件：
yui控件庫為你頁面提供一組高交互性性的可視化元素。這些元素完全在客戶端創(chuàng)建維護(hù)，不需要請求服務(wù)器進(jìn)行頁面刷新。
這些控件包括：
自動完成（AutoComplete）控件：自動完成控件為文本輸入提供一種漸進(jìn)式的用戶體驗(yàn)（streamline user interactions）。控件會提供相似項(xiàng)列表和基于多樣化的數(shù)據(jù)格式的提前鍵入功能（type-ahead functionality based on a variety of data-source formats），并且可以通過XMLHttpRequest訪問服務(wù)端的數(shù)據(jù)。
日歷（Calendar）控件：一個(gè)用來日期選擇的動態(tài)圖形控件。
容器（Container）控件：一組模仿windows樣式的控件，他們包括Tooltip, Panel, Dialog?和 SimpleDialog。其中Module?和 Overlay控件提供一個(gè)可擴(kuò)展的平臺，你可以控制自定義的模仿windows樣式的控件。
日志（Logger）控件：提供一個(gè)快速和簡單的記錄日志的方式，它直接將日志信息輸出到屏幕控制臺（on-screen console）、Firefox的擴(kuò)展組件FireBug，或者Safari的Javascript控制臺。yui的Debug組件將完整的記錄輸出信息和調(diào)試信息。
菜單（Menu）控件：利用此控件只需要幾行簡單的代碼就可以設(shè)計(jì)一個(gè)動態(tài)樣式的菜單。可以完全使用javascript構(gòu)造一個(gè)菜單，can be layered on top of semantic unordered lists。
滑塊（Slider）控件：提供一個(gè)可滑動的組件，它允許使用者在一定的范圍內(nèi)（x軸，y軸）改變滑塊的位置。
樹形（TreeView）控件：提供一個(gè)節(jié)點(diǎn)可縮放的樹形控件。節(jié)點(diǎn)可以是鏈接，自定義屬性，并且可以動態(tài)加載。節(jié)點(diǎn)元素的展現(xiàn)可以通過CSS修改，比如文件夾視圖，TO－DO任務(wù)列表或者其他可視化處理
第三章 yui的CSS資源
為了讓CSS能符合不同等級的瀏覽器（A-Grade browsers）的標(biāo)準(zhǔn)，我們想了很多。我們把這些作為yui類庫的一部分共享出來，希望能在這里得到促進(jìn)，獲得一個(gè)簡潔的，可維護(hù)并在瀏覽器中表現(xiàn)優(yōu)秀的設(shè)計(jì)。
頁面網(wǎng)格樣式（CSS Page Grids）：7個(gè)基本的用css組織子組件的頁面框架，支持130種不通的頁面布局。
標(biāo)準(zhǔn)的CSS字體（Standard CSS Fonts）：標(biāo)準(zhǔn)的跨瀏覽器字體樣式和大小展現(xiàn)。
標(biāo)準(zhǔn)的CSS排列（Standard CSS Reset）：使用這些CSS聲明來排除頁面的空白部分并且公共元素的樣式兼容各種瀏覽器的展現(xiàn)。
?
YUI Team于美國時(shí)間5月28日發(fā)布了YUI 2.5.2，主要變化：
1. 這一版針對Firefox3和Opera9.5解決了幾個(gè)關(guān)鍵性Bug。
2. 修復(fù)了DataTable、Menu、RTE、Button的幾個(gè)主要Bug。
3. Charts組件增加3種新風(fēng)格。
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
?
?
?
?
EXT介紹
ext是一個(gè)強(qiáng)大的js類庫,以前是基于YAHOO-UI,現(xiàn)在已經(jīng)完全獨(dú)立了,
主要包括data,widget,form,gird,dd,menu,其中最強(qiáng)大的應(yīng)該算gird了,編程思想是基于面對對象編程(oop),擴(kuò)展性相當(dāng)?shù)暮?可以自己寫擴(kuò)展.自己定義命名空間.web應(yīng)用可能感覺太大.不過您可以根據(jù)需要按需加載您想要的類庫就可以了.
主要包括三個(gè)大的文件ext-all.css,ext-base.js,ext-all.js(包括所有的類庫,您可以根據(jù)需要進(jìn)行刪減.官方網(wǎng)站提供這一接口),在引用ext類庫的時(shí)候.這三個(gè)文件必不可少.
主頁： 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 SamplesCombination 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.
? -
總結(jié)
以上是生活随笔為你收集整理的Yahoo javascript 开源界面库YUI 和EXT的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： c嘞c嘞是什么歌呢？
- 下一篇： 白斑遮盖液价格多少钱？