Yahoo! UI Library Ajax Engineer, Dec 30th, 2006 F2E–

善用 Yahoo! UI Library及 Ajax 拿手絕技 Engineer, Dec 30th, 2006 F2E– 小正正

• Yahoo! User Interface Library 簡介

• Grid : 快速配置網頁版面

• CSS 編排內容技巧

• Calendar : 使用月曆

• TabView : 加入標籤頁瀏覽方式

• Connection Manager : 輕鬆建立 Ajax 效果

AgendaAgenda

Introduction to Introduction to Yahoo! User Interface Yahoo! User Interface LibrarLibrary (YUI)y (YUI)

YUI Library CSS Tools:– CSS Reset– CSS Fonts– CSS Grids

版面配置

YUI Library Utilities:– The YAHOO Global Object– Event Utility 事件– DOM Collection DOM– Connection Manager Ajax– Drag and Drop Utility 拖曳– Animation Utility 動畫

YUI Library Controls:– AutoComplete 自動完成– Calendar 月曆– Container 視窗

/ 對話框– Logger 除錯– Menu 選單– Slider 滑桿– TabView 標籤頁– TreeView 樹狀圖

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

Yahoo! Yahoo! UIUI Librar Library : CSS y : CSS 網頁版面編排網頁版面編排

Header

Footer

Prim.Sec.

Yahoo! Yahoo! UIUI Librar Library CSS Tools :y CSS Tools :The BasicThe Basic

1. 頁面最開頭，使用正確的 DocType :

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

2. 連結 YUI 的 ( 外部 ) CSS 檔案 :

<link type="text/css" rel="stylesheet" href="reset-fonts-grids.css">

Yahoo! Yahoo! UIUI Librar Library CSS Tools : Gridy CSS Tools : Grid

頁面結構 HTML :<body>

<div id="doc2" class="yui-t2" >

<div id=”hd”>  </div>

<div id=”bd”> 

<div id=”yui-main”>

<div class=”yui-b”>  </div>

</div>

<div class=”yui-b”>  </div>

</div>

<div id=”ft”>  </div>

</div>

</body>


http://localhost/yuidemo/a_grid_sample.html


頁面寬度 (id) : #doc - 750px centered (good for 800x600) #doc2 - 950px centered (good for 1024x768) #doc3 - 100% fluid (good for everybody) #doc-custom - an example of a custom page width

版型 (class) : .yui-t1 - Two columns, narrow on left, 160px .yui-t2 - Two columns, narrow on left, 180px .yui-t3 - Two columns, narrow on left, 300px .yui-t4 - Two columns, narrow on right, 180px .yui-t5 - Two columns, narrow on right, 240px .yui-t6 - Two columns, narrow on right, 300px .yui-t7 - One full-width column

Header & FooterHeader & Footer

1. 在 #hd 輸入 Header 內容 – Flash

2. 在 #ft 輸入 Footer 內容 – 版權資訊3. 建立外部 CSS 檔案4. 輸入 CSS

5. 連結外部 CSS

http://localhost/yuidemo/b_header_footer.html

Adding ContentAdding Content

1. 輸入”假的”文字內容2. 將同一個模組用 <div> 括起來，並且取 id

3. 設定 CSS: 標題、內文、清單4. 設定 CSS: 模組外框

Layered Semantic Markup (LSM) 所有關於外觀與樣式的設定都必須用 CSS ， HTML 只包含文件的結構和內容，這樣才能符合有語意的標籤語言。達到 Accessibility & SEO的效用。

http://localhost/yuidemo/c_content.html

Yahoo! Yahoo! UIUI Librar Library Controls : Calendary Controls : Calendar

1. 載入相關的函數庫和 CSS :

<link type="text/css" rel="stylesheet" href="calendar.css">

<script src="calendar.js" type="text/javascript"></script>

2. 建立 container <div>

<div id="cal-con"> </div>

http://localhost/yuidemo/d_calender.html


3. Javascript :

var showCalender = function() {

var cal = new YAHOO.widget.Calendar('cal','cal-con', {iframe:false});

// Date labels for localize

cal.cfg.setProperty("MONTHS_LONG", [" 一月 ", " 二月 ", " 三月 ", " 四月 ", " 五月 ", " 六月 ", " 七月 ", " 八月 ", " 九月 ", " 十月 ", " 十一月 ", " 十

二月 "]);

cal.cfg.setProperty("WEEKDAYS_SHORT", [" 日 ", " 一 ", " 二 ", " 三 ", " 四 ", " 五 ", " 六 "]);

cal.render();

};

YAHOO.util.Event.onContentReady('cal-con',showCalender);


更多功能 :– 一次選擇多個日期– 指定可選擇或不可選擇的日期– 同時顯示兩個月曆（雙月份顯示）– 與表單的文字欄位與下拉選單整合– 彈出式的月曆– 自訂顯示的語言– 用 CSS 自訂外觀與色彩– 多種事件：例如選擇與取消選擇某個日期…

http://developer.yahoo.com/yui/examples/calendar/formsel/2.html

Yahoo! Yahoo! UIUI Librar Library Controls : TabViewy Controls : TabView

1. 載入相關的函數庫和 CSS :

<link type="text/css" rel="stylesheet" href=“tabs.css">

<link type="text/css" rel="stylesheet" href=“border_tabs.css">

<script src=“tabview.js" type="text/javascript"></script>


2. HTML :

<div id="mytabs" class=”yui-navset”><ul class="yui-nav">

<li><a href=”#”>tab 1</a></li><li><a href=”#”>tab 2</a></li>

</ul><div class=”yui-content”>

<div><p>Tab 1 content…</p></div><div><p>Tab 2 content…</p></div>

</div></div>


3. Javascript :

var showTabs = function() {

var myTabs = new YAHOO.widget.TabView('mytabs');

};

YAHOO.util.Event.onContentReady('mytabs',showTabs);


4. CSS :#mytabs .yui-content{

height:10em;padding:1em;background-color:#FFFFFF;

}#mytabs{

background:url(images/bg_tech.gif) 100% 0 no-repeat #debede;padding:50px 10px 20px;

}#mytabs .yui-nav li a{

cursor:pointer;color:#666666;

}#mytabs .yui-nav li em{

float:left;display:block;padding:10px 0 0 10px;height:20px;font-weight:bold; font-size:122%;

}

#mytabs .yui-nav li i{float:left;display:block;width:23px;height:30px;

}#mytabs .yui-nav li.selected em{

background:url(images/tab_left.gif) 0 0 no-repeat;color:#663333;

}#mytabs .yui-nav li.selected i{

background:url(images/tab_right.gif) 100% 0 no-repeat;width:23px;height:30px;

}#mytabs .yui-nav li.selected a:hover

{text-decoration:none;cursor:default;

}


更多功能 :– 將模組變成標籤頁瀏覽– 透過 Javascript 動態新增和移除標籤頁– 利用 Ajax 動態載入標籤頁內容– 上下左右、水平或垂直的標籤頁– 用 CSS 自訂外觀與色彩– 多種事件：例如切換標籤頁、內容變更…– 標籤頁切換時的動畫效果

http://games.yahoo.com/

Yahoo! Yahoo! UIUI Librar Library y UtilitiesUtilities: : Connection ManagerConnection Manager

標準 Ajax 語法 :if (typeof XMLHttpRequest == "undefined" && window.ActiveXObject) {

function XMLHttpRequest() {

var arrSignatures = ["MSXML2.XMLHTTP.5.0", "MSXML2.XMLHTTP.4.0", "MSXML2.XMLHTTP.3.0", "MSXML2.XMLHTTP", "Microsoft.XMLHTTP"];

for (var i=0; i < arrSignatures.length; i++) {

try {

var oRequest = new ActiveXObject(arrSignatures[i]);

return oRequest;

} catch (oError) {

//ignore

}

}

throw new Error("MSXML is not installed on your system.");

}

}

var oRequest = new XMLHttpRequest();

oRequest.open("get", sURL, true);

oRequest.onreadystatechange = function() {

if(oRequest.readyState == 4) {

oCateList.disabled = false;

if(oRequest.status == 200 ){

json = "json=" + oRequest.responseText;

json = eval(json);

}

} else {

alert(oRequest.statusText);

oGameList.options[0] = new Option("資料載入錯誤 ",0);

}

}

YUI 的寫法 ( 只有幾行 !!!):var callback = { success: function(o) { document.getElementById(‘someEl’).innerHTML = o.responseText; }}var connObj = YAHOO.util.Connect.asyncRequest('GET',‘file.php’, callback);

Ajax Example : Article List & ContentAjax Example : Article List & Content

標題列表

文章內容

http://localhost/yuidemo/e_tabview.html

Ajax BasicAjax Basic

Client Server

HT

ML

Javascript

Server Side (PHP)

Database

1.Event 2.XHR

3.4.Response Data

5.

YUI Connection Manager : YUI Connection Manager : Ajax Ajax 取得列表取得列表

伺服器傳回 HTML 資料（ get_list.php ）：

<li><a href=“#” id=“11”> AutoComplete </a></li>

<li><a href=“#” id=“12”> Calendar </a></li>

<li><a href=“#” id=“13”> Container </a></li>

<li><a href=“#” id=“14”> Logger </a></li>

<li><a href=“#” id=“15”> Menu </a></li>

<li><a href=“#” id=“16”> Slider </a></li>

<li><a href=“#” id=“17”> Event </a></li>

......

http://localhost/yuidemo/get_list.php

Connection Manager : Connection Manager : 取得列表 – 取得列表 – Javascript Javascript

var showList = function() {var sUrl = 'get_list.php'var dListModule = document.getElementById('article-list');var dUl = dListModule.getElementsByTagName('ul')[0];

var responseSuccess = function(o){ dUl.innerHTML = o.responseText;

}

var responseFailure = function(o){dUl.innerHTML = '<li>Fail to load list!!</li>';

};

var callback = { success:responseSuccess, failure:responseFailure};

var ajax = YAHOO.util.Connect.asyncRequest('GET', sUrl, callback, null);};

YAHOO.util.Event.onContentReady('article-list',showList);

YUI Connection Manager : YUI Connection Manager : Ajax Ajax 取得列表取得列表

伺服器傳回 HTML 資料（ get_content.php ）：

<h2> 文章標題 </h2>

<p> 一大篇的文章內容… .</p> <p> 一大篇的文章內容… .</p>

http://localhost/yuidemo/e_tabview.html

Connection Manager : Connection Manager : 取得內文取得內文 - Javascript- Javascript

var responseSuccess = function(o){ dUl.innerHTML = o.responseText;

var cLinks = dUl.getElementsByTagName('a');YAHOO.util.Event.addListener(cLinks,'click',getConten

t);}

var sUrlContent = 'get_content.php?id=';

var getContent = function(e) {var transaction = YAHOO.util.Connect.asyncRequest('GET',

sUrlContent+this.id, callbackContent, null);

YAHOO.util.Event.stopEvent(e);

};

Connection Manager : Connection Manager : 取得內文 – 取得內文 – Javascript callbackJavascript callback

var dContentDiv = document.getElementById('article-content');

var responseSuccessContent = function(o){ dContentDiv.innerHTML = o.responseText;

}

var responseFailureContent = function(o){dContentDiv.innerHTML = '<h2>Fail to load content!!</h2>';

};

var callbackContent = { success:responseSuccessContent, failure:responseFailureContent};

YUI 官方網站http://developer.yahoo.com/yui/

小正正の部落格http://www.class2u.com

Thank

you!

Thank

you!

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

http://www.class2u.com/

Yahoo! UI Library Ajax Engineer, Dec 30th, 2006 F2E–

Documents

Transcript of Yahoo! UI Library Ajax Engineer, Dec 30th, 2006 F2E–