1 / 27

善用 Yahoo! UI Library 及 Ajax 拿手絕技

善用 Yahoo! UI Library 及 Ajax 拿手絕技. Engineer, Dec 30th, 2006 F2E– 小正正. Agenda. Yahoo! User Interface Library 簡介 Grid : 快速配置網頁版面 CSS 編排內容技巧 Calendar : 使用月曆 TabView : 加入標籤頁瀏覽方式 Connection Manager : 輕鬆建立 Ajax 效果. YUI Library CSS Tools: CSS Reset CSS Fonts CSS Grids 版面配置.

albina
Download Presentation

善用 Yahoo! UI Library 及 Ajax 拿手絕技

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

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

  2. Agenda • Yahoo! User Interface Library 簡介 • Grid : 快速配置網頁版面 • CSS編排內容技巧 • Calendar : 使用月曆 • TabView : 加入標籤頁瀏覽方式 • Connection Manager : 輕鬆建立Ajax效果

  3. YUI Library CSS Tools: CSS Reset CSS Fonts CSS Grids 版面配置 YUI Library Utilities: The YAHOO Global Object Event Utility 事件 DOM Collection DOM Connection ManagerAjax Drag and Drop Utility 拖曳 Animation Utility 動畫 YUI Library Controls: AutoComplete 自動完成 Calendar 月曆 Container 視窗/對話框 Logger 除錯 Menu 選單 Slider 滑桿 TabView 標籤頁 TreeView 樹狀圖 Introduction to Yahoo! User Interface Library (YUI)

  4. Yahoo! UI Library : CSS 網頁版面編排 Header Prim. Sec. Footer

  5. Yahoo! UI Library CSS Tools :The Basic • 頁面最開頭，使用正確的DocType :<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> • 連結 YUI 的 (外部) CSS檔案 :<link type="text/css" rel="stylesheet" href="reset-fonts-grids.css">

  6. Yahoo! UI Library CSS Tools : Grid 頁面結構HTML : <body> <div id="doc2" class="yui-t2" > <div id=”hd”> <!--header / masthead --> </div> <div id=”bd”> <!--body--> <div id=”yui-main”> <div class=”yui-b”><!--prim. block--></div> </div> <div class=”yui-b”><!--sec. block--></div> </div> <div id=”ft”> <!--footer--> </div> </div> </body>

  7. Yahoo! UI Library CSS Tools : Grid

  8. Yahoo! UI Library CSS Tools : Grid 頁面寬度 (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

  9. Header & Footer • 在 #hd 輸入 Header 內容 – Flash • 在 #ft 輸入 Footer 內容 – 版權資訊 • 建立外部 CSS 檔案 • 輸入 CSS • 連結外部 CSS

  10. Adding Content • 輸入”假的”文字內容 • 將同一個模組用<div>括起來，並且取id • 設定 CSS: 標題、內文、清單 • 設定 CSS: 模組外框 Layered Semantic Markup (LSM)所有關於外觀與樣式的設定都必須用CSS，HTML只包含文件的結構和內容，這樣才能符合有語意的標籤語言。達到Accessibility & SEO的效用。

  11. Yahoo! UI Library Controls : Calendar • 載入相關的函數庫和CSS :<link type="text/css" rel="stylesheet" href="calendar.css"><script src="calendar.js" type="text/javascript"></script> • 建立container <div><div id="cal-con"> </div>

  12. Yahoo! UI Library Controls : Calendar • 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);

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

  14. Yahoo! UI Library Controls : TabView • 載入相關的函數庫和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>

  15. Yahoo! UI Library Controls : TabView • 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>

  16. Yahoo! UI Library Controls : TabView • Javascript : var showTabs = function() { var myTabs = new YAHOO.widget.TabView('mytabs'); }; YAHOO.util.Event.onContentReady('mytabs',showTabs);

  17. 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; } Yahoo! UI Library Controls : TabView

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

  19. Yahoo! UI Library Utilities: Connection 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);

  20. Ajax Example : Article List & Content 文章內容 標題列表

  21. Ajax Basic 1.Event 2.XHR Server Side (PHP) HTML Javascript 4.Response Data 3. 5. Database Client Server

  22. YUI Connection Manager : 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> ......

  23. Connection Manager : 取得列表 – 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);

  24. YUI Connection Manager : Ajax 取得列表 伺服器傳回HTML資料（get_content.php）： <h2>文章標題</h2> <p>一大篇的文章內容….</p> <p>一大篇的文章內容….</p>

  25. Connection Manager : 取得內文 - Javascript var responseSuccess = function(o){ dUl.innerHTML = o.responseText; var cLinks = dUl.getElementsByTagName('a'); YAHOO.util.Event.addListener(cLinks,'click',getContent); } 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); };

  26. Connection Manager : 取得內文 – Javascript 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 };

  27. YUI官方網站http://developer.yahoo.com/yui/ 小正正の部落格 http://www.class2u.com Thank you!

More Related