如果看了我上一篇對于YUI的總結的同志，應該知道，YUI提供的東西挺多的。看了這么多控件，用了一下connecttion,其它的還無從下手，我決定先從calendar下手，這是一個日歷，感覺上相對關聯的類庫應該少一些，比較簡單。先看看examples里面的例子，好多啊，先來一個最簡單的Quickstart Tutorial，查看下頁面源代碼，總體對Yahoo UI的使用有了一個大致的了解.
一共分為三塊，
第一塊導入依賴的JS文件和CSS文件；
第二塊控件實現的JS代碼；
第三塊插入到<body>當中的控件，實際就是<div>。
一、首先建立一個工程，導入需要的js文件和css文件,放的地方你自己定。
文件分別為：
yahoo.js
event.js
dom.js
calendar.js
calendar.css
代碼如下：
1 <script type="text/javascript" src="js/yahoo.js"></script>
2 <script type="text/javascript" src="js/event.js"></script>
3 <script type="text/javascript" src="js/dom.js"></script>
4 <script type="text/javascript" src="js/calendar.js"></script>
5 <link type="text/css" rel="stylesheet" href="js/calendar.css" />
6 <script>
二，寫控制實現的JS代碼
代碼如下：
1 <script>
2 YAHOO.namespace("example.calendar");
3 function init() {
4 YAHOO.example.calendar.cal = new YAHOO.widget.Calendar("cal","calendar");
5 YAHOO.example.calendar.cal.render();
6 }
7 YAHOO.util.Event.addListener(window, "load", init);
8 </script>
說明：
（1）這段代碼放首部或body都可以。
第二行 這里面大家首先看到一個namespce這里必須要的，不是后面的東西找不到。第二行
第四行 cal和calendar參數的值隨便自己取，第二個參數值將要用到第三個模塊中。
第七行 load窗口事件并調用init方法.
三、在body中加入代碼
1
<div id="calendar"></div>
我用的是myeclipse,所以點一下文檔左下角的preview，日歷就出來了！
posted on 2009-04-22 16:07
重慶理工小子 閱讀(1889)
評論(1) 編輯 收藏 所屬分類:
ajax編程