1. Download the YUI library.下载YUI库.
YUI库咦zip压缩文件的方式存在于 YUI Sourceforge project page(http://jaist.dl.sourceforge.net/sourceforge/yui/yui_0.12.1.zip). 这个压缩文件包含文档,示例,和源代码. 注意:Yahoo!不提供YUI的主机服务,你必须将YUI 库放在你的web server上.
2. Include one or more library files in your web page.将一个或者多个库文件包含在你的页面中.
将组件的具体路径放在<script>这个tag中就能引入和使用该组件.由于一些组件依赖于别的组件,你可能需要引入多个<script>标记.
3. Include a CSS file , if necessary 如果必要,包含css文件
一些YUI控件有决定其外观的css文件.你必须将这样的文件包含在页面的<style>标记中.尽管CSS文件可以任意更改,但如果你以YUI提供的CSS文件作为基础,修改工作将会更加容易.
4. Explore the documentation and examples 文档和示例浏览
每一个组件都包含详细的 API文档, 以及帮助你更快使用的示例.如果要很好地实现YUI,你最好提前了解API.
以YUI自带的Calendar为例:
1. 用EditPlus创建一个简单的Html页面
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="">
<META NAME="Keywords" CONTENT="">
<META NAME="Description" CONTENT="">
</HEAD>
<BODY>
</BODY>
</HTML>
2. 添加必要的js and css files.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="">
<META NAME="Keywords" CONTENT="">
<META NAME="Description" CONTENT="">
<!--通用css-->
<link type="text/css" rel="stylesheet" href="./css/fonts/fonts.css">
<link type="text/css" rel="stylesheet" href="./css/build/reset/reset.css">
<!--依赖的组件-->
<script type="text/javascript" src="./js/yahoo/yahoo.js"></script>
<script type="text/javascript" src="./js/event/event.js" ></script>
<script type="text/javascript" src="./js/dom/dom.js" ></script>
<!--引入calendar组件-->
<script type="text/javascript" src="./js/calendar/calendar.js"></script>
<link type="text/css" rel="stylesheet" href="./js/calendar/assets/calendar.css">
</HEAD>
<BODY>
</BODY>
</HTML>
3. 创建Calendar.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="">
<META NAME="Keywords" CONTENT="">
<META NAME="Description" CONTENT="">
<!--通用css-->
<link type="text/css" rel="stylesheet" href="./css/fonts/fonts.css">
<link type="text/css" rel="stylesheet" href="./css/build/reset/reset.css">
<!--依赖的组件-->
<script type="text/javascript" src="./js/yahoo/yahoo.js"></script>
<script type="text/javascript" src="./js/event/event.js" ></script>
<script type="text/javascript" src="./js/dom/dom.js" ></script>
<!--引入calendar组件-->
<script type="text/javascript" src="./js/calendar/calendar.js"></script>
<link type="text/css" rel="stylesheet" href="./js/calendar/assets/calendar.css">
</HEAD>
<script>
YAHOO.namespace("example.calendar");
function init() {
YAHOO.example.calendar.cal1 = new YAHOO.widget.Calendar("cal1","cal1Container");
YAHOO.example.calendar.cal1.render();
}
YAHOO.util.Event.addListener(window, "load", init);
</script>
<BODY>
<div id="cal1Container"></div>
</BODY>
</HTML>
4 .运行
