利用yahoo YUI制作WEB界面

最新推荐文章于 2018-11-15 00:33:39 发布

原创最新推荐文章于 2018-11-15 00:33:39 发布 · 1.2k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#yahoo #yui #web #stylesheet #basic #date

页面界面专栏收录该内容

4 篇文章

订阅专栏

本文展示了一个使用 Yahoo YUI 库创建的 Web 页面示例，该页面利用 YUI 库的功能展示了数据表格的基本特性，包括自定义样式、数据填充及格式化显示。

偶然发现，用yahoo YUI制作WEB界面挺方便的，上个例子。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>Basic Example</title>
<style type="text/css">
/*margin and padding on body element
  can introduce errors in determining
  element position and are not recommended;
  we turn them off as a foundation for YUI
  CSS treatments. */
body {
    margin:0;
    padding:0;
}
</style>
<link rel="stylesheet" type="text/css" href="../../build/fonts/fonts-min.css" />
<link rel="stylesheet" type="text/css" href="../../build/datatable/assets/skins/sam/datatable.css" />
<script type="text/javascript" src="../../build/yahoo-dom-event/yahoo-dom-event.js"></script>
<script type="text/javascript" src="../../build/dragdrop/dragdrop-min.js"></script>
<script type="text/javascript" src="../../build/element/element-beta-min.js"></script>
<script type="text/javascript" src="../../build/datasource/datasource-beta-min.js"></script>
<script type="text/javascript" src="../../build/datatable/datatable-beta-min.js"></script>
<!--begin custom header content for this example-->
<style type="text/css">
/* custom styles for this example */
.yui-skin-sam .yui-dt-liner { white-space:nowrap; } 
</style>
<!--end custom header content for this example-->
</head>
<body class=" yui-skin-sam">
<h1>Basic Example</h1>
<div class="exampleIntro">
    <p>A demonstration of the DataTable's basic feature set.</p>
            
</div>
<!--=======内容插入的位置======================== -->
<div id="basic"></div>
<script type="text/javascript">
//填充到表格的数据
YAHOO.example.Data = {
    bookorders: [
        {id:"po22-0167", date:new Date(1980, 2, 24), quantity:1, amount:4, title:"A Book About Nothing"},
        {id:"po22-0783", date:new Date("January 3, 1983"), quantity:null, amount:12.12345, title:"The Meaning of Life"},
        {id:"po33-0297", date:new Date(1978, 11, 12), quantity:12, amount:1.25, title:"This Book Was Meant to Be Read Aloud"},
        {id:"po-1482", date:new Date("March 11, 1985"), quantity:6, amount:3.5, title:"Read Me Twice"}
    ]
}
YAHOO.util.Event.addListener(window, "load", function() {
    YAHOO.example.Basic = new function() {
       //定义表头，并设置现示格式    
        var myColumnDefs = [
            {key:"id", sortable:true, resizeable:true},
            {key:"date", formatter:YAHOO.widget.DataTable.formatDate, sortable:true, sortOptions:{defaultDir:YAHOO.widget.DataTable.CLASS_DESC},resizeable:true},
            {key:"quantity", formatter:YAHOO.widget.DataTable.formatNumber, sortable:true, resizeable:true},
            {key:"amount", formatter:YAHOO.widget.DataTable.formatCurrency, sortable:true, resizeable:true},
            {key:"title", sortable:true, resizeable:true}
        ];
        //填充表格的数据
        this.myDataSource = new YAHOO.util.DataSource(YAHOO.example.Data.bookorders);
        this.myDataSource.responseType = YAHOO.util.DataSource.TYPE_JSARRAY;
        this.myDataSource.responseSchema = {
            fields: ["id","date","quantity","amount","title"]
        };
        this.myDataTable = new YAHOO.widget.DataTable("basic",
                myColumnDefs, this.myDataSource, {caption:"DataTable Caption"});
    };
});
</script>
<!--END SOURCE CODE FOR EXAMPLE =============================== -->
</body>
</html>