如果看了我上一篇对于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
重庆理工小子 阅读(1879)
评论(1) 编辑 收藏 所属分类:
ajax编程