YUI

使用 YUI 函式庫快速建立 Web 2.0 程式

講者：josephj

http://josephj.com/training/yui

http://www.slideshare.net/josephj/yui-yzu-presentation

http://www.slideshare.net/josephj/yui-yzu-presentation

@josephj6802http://josephj.com

[email protected]

http://josephj.com

http://josephj.com

http://josephj.com

http://josephj.com

http://josephj.com

http://josephj.com


[email protected]

Hi! 我是 josephj（啊嗚）

http://josephj.com

http://josephj.com

http://josephj.com

http://josephj.com

http://josephj.com

http://josephj.com

• 2.5 年前端工程師（F2E）


[email protected]


http://josephj.com

http://josephj.com

http://josephj.com

http://josephj.com

http://josephj.com

http://josephj.com


• 0.5 年科技推廣傳教士（Evangelist）


[email protected]


http://josephj.com

http://josephj.com

http://josephj.com

http://josephj.com

http://josephj.com

http://josephj.com


• 0.5 年科技推廣傳教士（Evangelist）

•目前在無名小站擔任工程師（SDE）


[email protected]


http://josephj.com

http://josephj.com

http://josephj.com

http://josephj.com

http://josephj.com

http://josephj.com

2008.5 跑步環島ITHome 的報導：http://farm4.static.flickr.com/3251/3017901989_9252512e77_o.jpg

http://farm4.static.flickr.com/3251/3017901989_9252512e77_o.jpg

http://farm4.static.flickr.com/3251/3017901989_9252512e77_o.jpg

Agenda

Agenda

•什麼是前端工程（F2E）

Agenda

•什麼是前端工程（F2E）•認識 YUI

Agenda

•什麼是前端工程（F2E）•認識 YUI•實例演練

前端工程師

Front-end Engineer

什麼是前端工程師？


• 撰寫 HTML / CSS / JavaScript



• 告訴瀏覽器該怎麼做



• 告訴瀏覽器該怎麼做

• 所有「檢視原始碼」看得到的都是處理的範圍

SOUNDS SIMPLE!

no.

server

(X)HTML

server

(X)HTML

Specification

server

(X)HTML

Specification Implementation

server

(X)HTML


Bugs

server

(X)HTML


Bugs [ Theory / Practice ]

server

Dat

a Tr

ansp

ort

data

: cus

tom

, xm

l,

js

onbe

havi

or: j

sm

ixed

: new

xht

ml

(X)HTML DOM JavaScript



BOM API

DOM API

CSS

server

Dat

a Tr

ansp

ort

data

: cus

tom

, xm

l,

js

onbe

havi

or: j

sm

ixed

: new

xht

ml




BOM API

DOM API

CSS

server

Macintosh

Safari Firefox Opera

Windows

OperaIE5, 6, 7 Firefox

Linux, Unix, Mobile

10,000+ UAs

Dat

a Tr

ansp

ort

data

: cus

tom

, xm

l,

js

onbe

havi

or: j

sm

ixed

: new

xht

ml,



Defects [ Theory / Practice ]

BOM API

DOM API

CSS

server

MacintoshSafari Firefox Opera

WindowsOperaIE5, 6, 7 Firefox

Linux, Unix, Mobile10,000+ UAs

Dat

a Tr

ansp

ort

data

: cus

tom

, xm

l,

js

onbe

havi

or: j

sm

ixed

: new

xht

ml,



Defects [ Theory / Practice ]

BOM API

DOM API

CSS

server

MacintoshSafari Firefox Opera

WindowsOperaIE5, 6, 7 Firefox

Linux, Unix, Mobile10,000+ UAs

knowledge areas: 7dimensions: x 4

platforms: x 3browsers per platform: x 4

rendering modes: x 2

=672

usability, internationalization, localization, visual design,

accessibility, information architecture, security, build processes, performance,

benchmarking, devices, portability

有人知道以上的圖在 Yahoo 的哪個服務嗎？

CSS Sprites


CSS Sprites


TabView 在沒有 JavaScript 的支援

圖片在 No Image、Not Loaded 的處理

字型大小放大數倍後仍維持完美

<link rel="stylesheet" type="text/css" href=".../i8/ykp_qack_min_20080707.css" media="screen">

不同的設備製作不同的樣式表：Screen

http://l.yimg.com/us.js.yimg.com/lib/ks/tw/i8/ykp_qack_min_20080707.css


<link rel="stylesheet" type="text/css" href=".../i8/ykp_print_min_20080707.css" media="print">

不同的設備製作不同的樣式表：Print



15 種不同瀏覽器與系統的相容性

from Lifted©2007 Pixar Animation Studios

所以我們建立了...

http://developer.yahoo.com/yui



在瀏覽器上建立使用者 UI（控制項）傳統內建 UI 使用 YUI 所建立的 UI

在瀏覽器上建立使用者 UI（控制項）

Def. But.Button

Label Menu

Label Text Field

Label

Label

Text Area

click me

傳統內建 UI 使用 YUI 所建立的 UI


Def. But.Button

Label Menu

Label Text Field

Label

Label

Text Area

click me



Def. But.Button

Label Menu

Label Text Field

Label

Label

Text Area

click me



Def. But.Button

Label Menu

Label Text Field

Label

Label

Text Area

click me



Def. But.Button

Label Menu

Label Text Field

Label

Label

Text Area

click me



Def. But.Button

Label Menu

Label Text Field

Label

Label

Text Area

click me



Def. But.Button

Label Menu

Label Text Field

Label

Label

Text Area

click me



Def. But.Button

Label Menu

Label Text Field

Label

Label

Text Area

click me



Def. But.Button

Label Menu

Label Text Field

Label

Label

Text Area

click me



Def. But.Button

Label Menu

Label Text Field

Label

Label

Text Area

click me



Def. But.Button

Label Menu

Label Text Field

Label

Label

Text Area

click me



Def. But.Button

Label Menu

Label Text Field

Label

Label

Text Area

click me



Def. But.Button

Label Menu

Label Text Field

Label

Label

Text Area

click me



Def. But.Button

Label Menu

Label Text Field

Label

Label

Text Area

click me



Def. But.Button

Label Menu

Label Text Field

Label

Label

Text Area

click me



Def. But.Button

Label Menu

Label Text Field

Label

Label

Text Area

click me



Def. But.Button

Label Menu

Label Text Field

Label

Label

Text Area

click me


即使是 iPhone 上的瀏覽器，YUI 也支援

http://blogs.computerworld.com/nytimes_iphone_browser_marketshare

即使是 iPhone 上的瀏覽器，YUI 也支援



http://marketshare.hitslink.com/report.aspx?sample=21&qprid=43&qpcustom=Chrome+0.2

Google Chrome 也一視同仁 ;)











Button + Menu + Container + ... = RTE Editor

結構複雜、但使用起來簡單愉快

結構複雜、但使用起來簡單愉快

且保證在每個主流瀏覽器都支援

且保證在每個主流瀏覽器都支援

無障礙網頁（Accessbility）

YUI CSS 基礎

YUI開發工具

YUI 函式集

YUI 控制項

1. YUI 函式集YAHOO.util.* : 好用的 Web 2.0 功能


• AJAX 相關一般 AJAX 功能、跨網域存取、JSON 解析、資料來源處理、歷史紀錄



• 炫麗技巧拖拉、動畫、縮放區塊大小



• 炫麗技巧拖拉、動畫、縮放區塊大小

• 實用功能Cookie 存取、Selector 存取、物件導向

Browser History Manager解決 AJAX 沒有上一頁、下一頁的問題

http://tw.knowledge.yahoo.com/my/my_trace?show=AC00668153



點選下方的資料會更新

更新內容離頂端過遠，用傳統作法會讓使用者不便且個人資料較少 SEO 的問題因此決定採用 AJAX

更新內容離頂端過遠，用傳統作法會讓使用者不便且個人資料較少 SEO 的問題因此決定採用 AJAX

一般的 AJAX 程式網址不會更新

多了這一串，可以回到上一頁或把此網址加入最愛但還是維持下面的狀態

2. YUI 控制項

• 自動完成• 按鈕• 日曆• 圖表• 顏色選取• 視窗• 資料表格• 截圖

• 版面管理員• 選單• HTML 編輯器

• Slider

• 頁籤組• 樹狀瀏覽• 上傳

YAHOO.widget.* : 功能強大的且易擴充的控制項

讓你的開發及產出更順暢

3. YUI 開發工具集

YUI Compressor

YUI Compressor

YUI Compressor

Y! Slow檢測網頁效能的好工具

http://developer.yahoo.com/yslow

http://developer.yahoo.com/yui/yslow

http://developer.yahoo.com/yui/yslow

4. YUI CSS 基礎

• Reset 將所有標籤預設樣式歸零

4. YUI CSS 基礎


• Fonts相對字型大小、可被縮放

4. YUI CSS 基礎


• Fonts相對字型大小、可被縮放

• Grids快速製作彈性 DIVs+CSS 版面

4. YUI CSS 基礎

reset.css 讓每個瀏覽器的預設樣式相同

reset.css

fonts.css 讓使用者可縮放字型大小

讓每個瀏覽器的預設樣式相同

grids.css

reset.css

fonts.css

輕鬆建立版型

讓使用者可縮放字型大小

讓每個瀏覽器的預設樣式相同

側邊欄寬度為 240px

平均分配 50%, 50%

版面寬度 950px

＃doc3 = 989px.yui-t6 = Right, 300px

＃doc4 = 974px.yui-t3 = Left, 300px

只需更換兩個屬性值，版面就會完全不一樣

YUI 有哪些優點？

最符合使用者需求你每天都在用的網站是？

所有的 Library 必需符合使用者經驗的設計

Problem Summary

The user needs to enter an item into a text box which could ambiguous or hard to

remember and therefore has the potential to be mis-typed.

EXAMPLE:

Auto completion of contacts in Yahoo! Mail Beta

Use When

The suggestions can be pulled from a manageable set of data.

The input item can be entered in multiple ways.

The input item can be matched with a specific data item in the system.

Speed and accuracy of entry is an important goal.

The total number of items would be too large or inconvenient for displaying in a

standard drop down box.

Solution

Layout

Use a standard text box for input.

Label the text box to match the user's expection of what field will be searched against.

Interaction

As the user types, display a list of suggested items that most closely match what the

user has typed. Continue to narrow or broaden the list of suggested items based on the

user's input.

Display the suggested items list in a drop down box directly underneath the text box.

The suggested items list may be based on the complete set of data or more narrowly

based on other criteria such as each item's frequency of use.

When available, show multiple fields of information for each suggested item. In the

Yahoo! Mail example above, two fields are presented: the contact's full name and the

contact's email address.

Highlight the closest matching item within the suggested items list.

Show the matched item as first in the list.

Highlight the background of the matched item.

When multiple fields are shown for each suggested item the match may occur

with the initial characters of any of the fields presented.

For each suggested item in the suggest items list show the characters that exactly

match the user's input. When multiple fields are shown in a suggested item the

matching characters may appear in any of the fields presented. In the example below,

the characters 'Yu' have been typed by the user. The match is on three items. Notice

that the first item matched on the contact's email address '<yuiblogger.com>' whereas

the second and third items are matched on the contact's name (e.g., 'Yusef Jones'.)

Allow the user to delete a character of input and display the previous suggested items

list.

Allow the user to complete the input field by pressing the Tab key or Enter; key. The

current matched item in the suggested items list will be accepted as the value for the

input field.

Allow the user to optionally highlight an item of their choice from the suggested item list

with the mouse or with the up and down arrow keys.

Allow the user to cancel the suggested items list by pressing the Esc key. The drop

down list will close. Subsequently pressing the Tab key or Enter key will accept the

value from the input field. However, typing more characters after hitting the Esc key will

restart the auto completion behavior displaying the suggested items list.

If multiple input items are allowed in a single input field, allow the user to use the

Comma key to separate each input item.

Pressing the comma key will complete an individual item match.

The auto complete behavior restarts when the user begins typing characters for

the next input item.

Rationale

Reducing the number of keystrokes allows for faster user input.

Showing additional formatting information in the suggested items list (like the email

address in the example above) removes ambiguity.

Continual feedback helps the user narrow in on the correct choice.

Accessibility

Label the text box to match the user's expection of what field will be searched against.

Allow the user to highlight a desired match either using a mouse or navigating to it with

the up or down arrow keys.

Allow the user to complete the form by pressing the Tab or Enter keys.

Allow the user to cancel suggestions by pressing the Esc key.

Allow the input field to receive keyboard focus by pressing the Tab key.

Once the edit field is in focus make sure that the focus stays in the edit field during

autocomplete.

Do not send any page refreshes when updating the field (page refreshes will signal

assistive technology to start reading the page again.)

The insertion cursor should move as the left/right arrow keys are pressed in the text

field.

QUICK JUMP

Solution

Rationale

Accessibility

RELATED PATTERNS

Calendar Picker

AS USED ON YAHOO!

Yahoo! Mail Beta

Yahoo! Maps Beta

Yahoo! My Web 2

BLOG

Blog Article

Y! UI CODE EXAMPLES

Auto Complete

Component

Y! Search (JSON)

Y! Search (XML)

In-Memory (array)

In-Memory (function)

Flickr (XML)

Flat data

Playground

Show with revisions

This work is licensed under a

Creative Commons Attribution 2.5

License.

Design Pattern Library

Auto Complete

Copyright © 2005-2007 Yahoo! Inc. All rights reserved.

Privacy Policy - Terms of Service - Copyright Policy - Job Openings

Developer Network Home Help Site Search

Yahoo! Developer Network > Design Pattern Library > Auto Complete

超完整的範例目前在 YUI 官網上超過 300 個範例

各類文件把你教到會

Yahoo! User Interface Blog

In the Wild for November 30thNate Koechley 11/30/07 19:45:25

Implementation Focus: TripItEric Miraglia 11/14/07 11:22:42

Caridy Patiño Mayea’s Bubbling Library UpdatedEric Miraglia 11/07/07 09:23:45

Implementation Focus: NestoriaEric Miraglia 11/06/07 17:58:27

Using the Yahoo Global Object to Manage ObjectInheritance and Composition: Four New YUIExamplesEric Miraglia 11/06/07 17:54:03

YUI Forum on Yahoo! Groups

Using DataTable with Drag and Dropguiltyspark05 12/03/07 21:52:02

Re: autocomplete and ie layoutGopal Venkatesan 12/03/07 20:29:02

Re: connection manager problemGopal Venkatesan 12/03/07 20:20:00

Re: Cant get a connect manager return from.ASMX webservice into a Jtssha 12/03/07 20:19:06

Please tell me the reason (about treeview)liaolliso.2007 12/03/07 19:09:31

Cant get a connect manager return from .ASMXwebservice into a JSONfredpal99 12/03/07 17:01:09

Re: fixed-width layout with 100% background - is itpossible?Jim Davis 12/03/07 15:38:13

YUI on del.icio.us

bookmark on del.icio.us

tags: css yui javascript library webdesign ajaxweb2.0 programming ui development yahoo

saved by 7335 people

Getting Started

1. Check out the examples of YUI in action. We recommend starting withthe Event Utility and Dom Collection examples; Event and Dom are part ofthe YUI Core (along with the YAHOO Global Object) and provide animportant foundation for JavaScript developers using YUI. Once you'vereviewed those foundational pieces, go on to explore utilities like Drag andDrop and Animation or UI controls like Button, Calendar and TabView. Ifyou're interested in YUI's CSS components, read through the examples forReset, Base, Fonts, and Grids in that order.

2. Remember that there are full user's guides for each component here onthe website. If you have any questions about a component as you play withthe examples, check out the component's user's guide (by following any ofthe links along the left side of the page) or the searchable APIdocumentation.

3. You have cheat sheets for each component available on landing pagesand downloadable as a full set. These documents support the online user'sguides by providing concise print documentation for YUI components.

4. Start building. You can include YUI scripts and CSS from the YUIdownload (in the /build directory) or directly from Yahoo! servers. The

YUI Loader Utility is a client-side loading package that can dynamically pullin YUI scripts as needed, whether from your servers or from ours.

5. Become a member of the YUI community. YUI developers andimplementers share thoughts and solutions and provide a helping hand inour forums. YUI developers also contribute to the YUIBlog, where you'll findin-depth articles, videos and other great content about YUI and the world offrontend engineering.

Licensing

All of the YUI Library components are provided free of charge under a liberalBSD license.

Articles

Graded Browser Support: This article details the browser-supportphilosophy we use in developing the YUI Library. Graded BrowserSupport provides a sane path to achieving accessibility and gracefuldegradation while still building richly interactive interfaces in thebrowser.Skinning YUI: YUI components get their look and feel from a visual"skin" that you can modify or replace in your own applications.

Cheat Sheets

Cheat Sheets for the YUI Library provide quick references to the key methods,properties, and syntax patterns of each component. When you find yourselfelbow-deep in a coding problem, sometimes it's quicker to turn to these ratherthan firing up a browser to review documentation and examples — and reviewingthe cheat sheets can help you discover hidden gems you didn't know were there.

These one page references aren't comprehensive, but we think you'll find themvaluable to have on hand. (Cheat Sheets are currently provided for all YUIUtilities, nearly all UI Controls, and for the YUI CSS foundation.)

Support & Community

The YUI Library and related topics are discussed on the on the ydn-javascriptmailing list.

In addition, please visit the YUIBlog for updates and articles about the YUILibrary written by the library's developers.

Filing Bugs & Feature Requests

The YUI Library's public bug tracking and feature request repositories are locatedon the YUI SourceForge project site. Before filing new feature requests or bugreports, please review our reporting guidelines.

Guidelines for YUI feature requests and bug reports.Review current bug list or file a new bug.Review current feature requests or file a new feature request.

Copyright © 2007 Yahoo! Inc. All rights reserved.

Privacy Policy - Terms of Service - Copyright Policy - Job Openings

Developer Network Home Help

[more videos ]YUI Theater

Nate Koechley — "The YUI CSS

Foundation"

Senior YUI engineer Nate Koechley guides youthrough the YUI CSS foundation in this October 2007tech talk.

enter email address

Site Search Search

The Yahoo! User Interface Library (YUI)

Using YUI:

FAQ

Getting Started

Licensing

Articles

Cheat Sheets

Support &Community

Filing Bugs &Feature Requests

Searchable APIDocumentation:

API docs are availabefor every YUIcomponent. You cansearch the APIdocumentation withinstant filtering on themain API page.

The YUI Compressor:

The YUI Compressor isa build-processcomponent that helpsyou minify yourJavaScript and CSS.Documentation anddownload informationare available here.

YUI Core:

The YAHOOGlobal Object(base requirementfor all YUIcomponents)

DOM Collection(conveniencemethods for DOMinteractions)

Event Utility (eventnormalization andtools)

YUI Library Utilities:

Animation Utility

Browser HistoryManager

ConnectionManager (forXHR/Ajax)

DataSource Utility

Drag and DropUtility

Element Utility

ImageLoader Utility[experimental]

The YUILoaderUtility

The YUI TestUtility

YUI LibraryControls/Widgets:

AutoComplete

Button Control

Calendar

Color Picker

Container(including Module,Overlay, Panel,Tooltip, Dialog,SimpleDialog)

DataTable

Logger

Menu

Rich Text Editor

Slider

TabView

TreeView

YUI Library CSSTools:

CSS Reset(neutralizesbrowser CSSstyles)

CSS Base (appliesconsistent stylefoundation forcommon elements)

CSS Fonts(foundation fortypography andfont-sizing)

CSS Grids (morethan 1,000 CSS-driven wireframesin a 4KB file)

The Yahoo! User Interface Library (YUI)

The Yahoo! User Interface (YUI) Library is a set of utilities andcontrols, written in JavaScript, for building richly interactive webapplications using techniques such as DOM scripting, DHTML andAJAX. The YUI Library also includes several core CSS resources. Allcomponents in the YUI Library have been released as open sourceunder a BSD license and are free for all uses.

Download YUI version 2.3.1, including full APIdocumentation and more than 200 functional examples

from Sourceforge.

The library's developers blog at the YUI Blog and the YUI Library communityexchanges ideas at YDN-JavaScript on Yahoo! Groups.

Yahoo! UI Library

Home

YUIBlog

YUI Discussion Forum

YUI on Sourceforge

API Documentation

YUI Examples Gallery

Powered by YUI

YUI Theater

YUI License

YUI Articles

YUI FAQ

Graded Browser Support

Skinning YUI

Bug Reports/Feature Requests

Serving YUI Files from Yahoo!

Security Best Practices

YUI Components

Animation

AutoComplete

Browser History Manager

Button

Calendar

Color Picker

Connection Manager

Container

DataSource

DataTable

Dom

Drag & Drop

Element

Event

ImageLoader [experimental]

Logger

Menu

Rich Text Editor

Slider

TabView

TreeView

Yahoo Global Object

YUI Loader

YUI Test

Reset CSS

Base CSS

Fonts CSS

Grids CSS

YUI Tools

YUI Compressor

Yahoo! Developer Network

Home

About Us

Developer Network Blog

YDN FAQ

Support Communities

Working Examples

每個元件都提供了三種版本

有完整註解的版本

-debug 偵錯版

-min 最小化版

版本改進的歷程說明

完整 API 文件

每個元件最常使用的方法

節省每次查詢的時間

速查表

YUI 劇場

共計約 50 個小時講者由 YUI 成員或專家所組成developer.yahoo.com/yui/theater

YUI 的書

雜誌評比名列前茅

控制項的量

維護是否容易

下載速度

文件齊全度

客製化容易

密碼強度顯示器

跟桌面一樣的選取方式

用 YUI 來製作簡報系統（為去年的 OSDC 所做的）

翻頁（Carousel）模組

手風琴模組

用於「知識+名片」的手風琴模組

用 YUI 做的俄羅斯方塊

提供專業視覺設計師的樣式

有哪些網站使用 YUI？

Q & A

問：YUI 是否會收費？

YUI 是基於最鬆散的 BSD License 條款授權

你可以自由引用、修改、甚至放在商業軟體販售

問：為什麼 Open Source ?

• Fasten Improvement 回應使用者的需求


• Fun 與使用者互動



• Innovation 有更多創新的應用




• Recruiting 培養前端工程師





• 也沒辦法不開放，檢視原始碼就看光了





• 也沒辦法不開放，檢視原始碼就看光了

• 現在你可以簽約成為 YUI Contributor

問：跟別的函式庫

jQuery、Prototype、Dojo、GWT

有何差別？

• 純 JavaScript 函式庫


• 最齊全的文件



• 不改變 JavaScript 原本的結構




• 不污染、違反網頁標準化的精神





• 客製化最容易






• 經過完整的 QA 流程測試






• 經過完整的 QA 流程測試

• 在標準瀏覽器上皆能正常運作

問：有沒有 IDE 編輯器？

問：有沒有 IDE 編輯器？為什麼不體驗一下打字的爽快感呢...？

Aptana

問：有沒有跟後端程式

結合的計劃？

no.

• 無法滿足所有族群需求

• ASP, PHP, RoR, Python, JAVA...

• 必需考慮後續維護的問題

• 但有 3rd Party 自行研發

YUI 實例演練

YUI 練功坊

http://www.wallpapergate.com/wallpaper22725.html

練習網站：http://josephj.com/training/nctu/



http://josephj.com/training/yzu/

http://josephj.com/training/yzu/

HTML 模組在 Yahoo! 每一頁都是由許多的模組所構成

依照功能性切成一塊塊的模組檔案

/index.php

這邊的 HTML 只負責 Layout（YUI Grids）

依照功能性切成一塊塊的模組檔案

/index.php

這邊的 HTML 只負責 Layout（YUI Grids）

以這個模組為例子

<div id=”nav”> <div class=”hd”> <h2>標題</h2> </div> <div class=”bd”> <p>內文</p> </div> <div class=”ft”> <a href=”...”>更多... </a> </div></div>

模組的結構



模組的結構



模組的結構

一個 ID 代表一個模組不能重複



模組的結構

一個 ID 代表一個模組不能重複

.hd, .bd, .ft 分別代表模組的header、body、footer

模組：inc/search_box.php

＃ykpsb


＃ykpsb

• ykp 為知識+ 的 prefixhttp://twiki.corp.yahoo.com/view/Devel/PropertyPrefixesForNaming


http://twiki.corp.yahoo.com/view/Devel/PropertyPrefixesForNaming


＃ykpsb

• ykp 為知識+ 的 prefixhttp://twiki.corp.yahoo.com/view/Devel/PropertyPrefixesForNaming

• sb 為 search box 的縮寫




<div id=”ykpsb”> <div class=”bd clearfix”> <form ...> ... </form> <div class=”extra”> ... </div> </div></div>

form .extra

[HTML]<style>#ykpsb { margin-bottom:10px;}#ykpsb form { float:left;}#ykpsb .extra { float:right;}</style>

[CSS]

因每個模組有 id，所以 CSS 可以寫得很 namespace

好處就是很安全，不同模組不會互相干擾

＃ykpsb

＃yhtw_masthead

＃ykpmt

＃ykpsb

＃ykpimt

＃ykpimqa ＃ykpimr

＃ykpadv

＃ykpug

＃ykpiht＃ykpiht

練習：HTML 模組http://josephj.com/training/nctu/html-module.html

1. 替此文章模組取個適合的 id2. 加上 hd, bd, ft 的 class3. 利用前頁的方法設定 CSS

color:#369;background:#ffe;

font-weight:bold;font-size:16px;

http://josephj.com/training/ncu/html-module.html


YUI Gridshttp://developer.yahoo.com/yui/grids/builder/

快速 DIV + CSS 版面產生器

http://developer.yahoo.com/yui/grids/builder/



YUI Grid Builder



版面寬度 950px


版面寬度 950px


版面寬度 950px


平均分配 50%, 50%

版面寬度 950px

YUI AJAXhttp://josephj.com/training/nctu/yui-ajax.html

Web 2.0 的基礎

http://josephj.com/training/yui-monday/connection-manager/


YUI AJAXYUI 用來做 AJAX 叫做 Connection Manager

使用者瀏覽器

A 網站

傳統流程：


使用者瀏覽器

A 網站

1. 發出 Request

傳統流程：


使用者瀏覽器

A 網站

1. 發出 Request

A 網站伺服器

2. 伺服器處理 Request

傳統流程：


使用者瀏覽器

A 網站

1. 發出 Request

A 網站伺服器


3. 伺服器回傳

傳統流程：


使用者瀏覽器

A 網站

1. 發出 Request

A 網站伺服器


3. 伺服器回傳

4. 整份網頁重新整理

傳統流程：

使用者瀏覽器

A 網站

AJAX流程：

YUI AJAX

使用者瀏覽器

A 網站

1. 用 JavaScript 發出 Request

AJAX流程：

YUI AJAX

使用者瀏覽器

A 網站


A 網站伺服器


AJAX流程：

YUI AJAX

使用者瀏覽器

A 網站


A 網站伺服器


3. 伺服器回傳

AJAX流程：

YUI AJAX

使用者瀏覽器

A 網站


A 網站伺服器


3. 伺服器回傳

4. 只有小部分更新

AJAX流程：

YUI AJAX

練習：YUI Connectionhttp://josephj.com/training/nctu/yui-ajax.html



YUI Get Utilityhttp://josephj.com/training/nctu/yui-get.html

存取跨網域的資料



利用外部 JavaScript 的特性

利用外部 JavaScript 的特性AJAX 不能做跨網域的存取！

http://tw.yahoo.com http://tw.lifestyle.yahoo.com

http://tw.yahoo.com

http://tw.yahoo.com

http://tw.yahoo.com

http://tw.yahoo.com



但 <script src=”...”></script> 可以

http://tw.yahoo.com

http://tw.yahoo.com

http://tw.yahoo.com

http://tw.yahoo.com




http://josephj.com/training/ncu-tsung/script.html

http://tw.yahoo.com

http://tw.yahoo.com

http://tw.yahoo.com

http://tw.yahoo.com







http://www.josephjiang.com/training/ncu-tsung/data.js<script src=” “></script>

http://tw.yahoo.com

http://tw.yahoo.com

http://tw.yahoo.com

http://tw.yahoo.com










var outputString = ‘hello’;getData(outputString);

http://tw.yahoo.com

http://tw.yahoo.com

http://tw.yahoo.com

http://tw.yahoo.com










<script>function getData (data) { alert(data);} </script>

var outputString = ‘hello’;getData(outputString);

http://tw.yahoo.com

http://tw.yahoo.com

http://tw.yahoo.com

http://tw.yahoo.com





用 JavaScript 把照片抓到你的網站上？

搜尋 “交大資工”

http://api.flickr.com/services/rest/?method=flickr.photos.search&api_key=d498ec869768ecea276a7cb3906241d9&text=交大資工&format=json

http://api.flickr.com/services/feeds/photos_public.gne?tags=yzu&lang=en-us&format=json






http://api.flickr.com/services/rest/?method=flickr.photos.search&api_key=d498ec869768ecea276a7cb3906241d9&text=交大資工&format=json

<script src=”

“></script>









YUI Get Utility

YUI Get Utility•動態新增 <script/> 節點

YUI Get Utility•動態新增 <script/> 節點• YAHOO.util.Get.script(url)


• ex1. 載入函式庫（YUI、jQuery...）


• ex1. 載入函式庫（YUI、jQuery...）• ex2. 載入外部資料（JSON）



•動態新增 <link/> 節點



•動態新增 <link/> 節點• YAHOO.util.Get.css(url)



•動態新增 <link/> 節點• YAHOO.util.Get.css(url)

• ex. 動態更換佈景主題

練習：YUI Get Utilityhttp://josephj.com/training/nctu/yui-get.html



YUI 選單輕鬆地做出巢狀式浮動選單

練習：YUI 選單http://josephj.com/training/nctu/yui-menu.html

1.請以 new YAHOO.widget.MenuBar([模組id]); 新增一個 YUI 選單物件

2.執行這個物件的 render() 方法



練習：YUI 選單http://josephj.com/training/nctu/yui-menu.html

autosubmenudisplay (true 或 false) 是否自動顯示子選單

hidedelay （毫秒）滑鼠移開 n 毫秒後才隱藏

lazyload (true 或 false) 是否滑過去時才建立子選單

常用屬性：



YUI 按鈕輕鬆做出互動性豐富的按鈕 UI

YUI Button

一個按鈕該有的互動效果， YUI Button 都提供

更提供各種形式的按鈕

HTML 預設的按鈕醜又缺乏互動

練習：YUI 按鈕http://josephj.com/training/nctu/yui-button.html

1.請以 new YAHOO.widget.Button([連結 id]); 將連結轉換為按鈕



練習：YUI 按鈕http://josephj.com/training/nctu/yui-button.html

1.請以 new YAHOO.widget.Button([連結 id]); 將連結轉換為按鈕



YUI 視窗Web 2.0 的「開新視窗」

YUI Container 家族


YAHOO.widget.Panel


YAHOO.widget.Panel

YAHOO.widget.Dialog


YAHOO.widget.Panel

YAHOO.widget.Panel

YAHOO.widget.Dialog


YAHOO.widget.Panel

YAHOO.widget.Panel

YAHOO.widget.Dialog

YAHOO.widget.SimpleDialog

練習：YUI 視窗http://josephj.com/training/nctu/yui-panel.html

1. 請以 var oPanel = new YAHOO.widget.Panel([模組 id], [屬性]); 將 #panel 模組轉換為視窗（屬性設定請看下一頁）

2. oPanel.render(document.body)：將模組 append 到最外層3. oButton.addListener(‘click’, onButtonClick)

onButtonClick 函式：oPanel.show();



練習：YUI 視窗http://josephj.com/training/nctu/yui-panel.html

close 是否要有關閉的按鈕

fixedcenter 是否要置中對齊

modal 是否為獨佔模式

underlay shadow’, ‘matte’

visible 預設是否顯示

width 視窗的寬度

{屬性1 : 屬性值 1, 屬性 2 : 屬性值 2}



Questions?

Thank You！

http://developer.yahoo.com/yui/[email protected]

http://developer.yahoo.com/yui/

http://developer.yahoo.com/yui/

mailto:[email protected]

mailto:[email protected]

Documents

YUI