学习使用YUI 2 的Menu组件

最新推荐文章于 2018-09-26 22:31:00 发布

surreyk

最新推荐文章于 2018-09-26 22:31:00 发布

阅读量148

点赞数

文章标签： YUI Yahoo JavaScript CSS HTML ViewUI

文章为surreykong原创，转载要指明出处，来自于http://surrey.iteye.com
此文是07年所写，发布在csdn博客上的，现在转移到这里来。

YUI的例子似乎过于复杂，其实它的使用是很简单的，最近在做毕业设计，选用了YUI作为客户端的库，一起看看如何使用YUI的Menu控件。

YUI的Menu既可以从javascript代码中生成，也可以选择从已有的HTML标签中呈递(render)。下面将讨论第二种方法。

从已有的标签中呈递，是使用menu最简单的方法。

[b]第一步在html文件中引入必要文件[/b]


<script src="yui/build/utilities.js"></script>
<script src="yui/build/menu/menu-min.js"></script>
<link rel="stylesheet" type="text/css" href="yui/build/menu/assets/menu.css">

第一个文件是YUI的基础utilities
第二个文件是menu的类定义文件；
第三个文件是一个样式表，用以描绘menu的外观。

[b]第二步在HTML文件中写入相应的菜单[/b]


<div id="someid">
    <div class="bd">
        <ul>
            <li><a href="">Test 1</a></li>
            <li><a href="">Test 2</a></li>
            <li><a href="">Test 3</a></li>
            <li><a href="">Test 4</a></li>
            <li><a href="">Test 5</a></li>
        </ul>
    </div>
</div>

其中<div id="someid"> 是作为menu的容器，someid可以自定义，<div class="bd">作为YUI选择呈递的类标签，是必须的，即必须存在一个class="bd"的标签，YUI才可以正确的呈递，其中bd这个css类在menu.css中定义过了。下面的<ul>.......</ul>的内容可以替换为自己的列表内容。

第三步在HTML文件中写入相应的代码


Example = function(){
    var oMenu = new YAHOO.widget.Menu('someid', { fixedcenter: false});     //(1)
    oMenu.render();                                                                                                     //(2)
    function onMenuToggle(p_oEvent)                                                                    //(3)
    {
        YAHOO.util.Event.stopPropagation(p_oEvent);
        oMenu.show();
    }
    YAHOO.util.Event.addListener("ss", "click", onMenuToggle);                       //(4)
}

YAHOO.util.Event.onContentReady("someid", Example );                                //(5)

(1) 实例化menu类，两个参数，分别是与HTML中menu容器标签对应的Id 和menu的参数设置，fixedcenter:false意思是不使按钮处在页面正中间，而是显示在id为ss的标签旁边[见(4)]。

(2) 将menu呈递。（不是显示）

(3) 定义了一个函数，该函数负责显示menu。

(4) 在稍后的html中会有一个id为ss的标签，当该标签被点击("click")的时候，调用onMenuToggle函数来显示menu。

(5) 当someid标签的内容可用的时候调用Example函数来进行上述操作。

[b]最后在html中加入一个id为ss的标签[/b]


<input type="button" id="ss" />

附完整的代码:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script type="text/javascript" src="yui/build/yahoo-dom-event/yahoo-dom-event.js"></script>
<script type="text/javascript" src="yui/build/container/container_core-min.js"></script>
<script type="text/javascript" src="yui/build/menu/menu-min.js"></script>
<link rel="stylesheet" type="text/css" href="yui/build/menu/assets/menu.css">

<script type="text/javascript">
Example = function() {
    var oMenu = new YAHOO.widget.Menu('someid', { fixedcenter: false,constraintoviewport: false });
    oMenu.render();
    function onMenuToggle(p_oEvent)
    {
        YAHOO.util.Event.stopPropagation(p_oEvent);
        oMenu.show();
    }
    YAHOO.util.Event.addListener("ss", "click", onMenuToggle);
}
YAHOO.util.Event.onContentReady("someid", Example);

</script>
</head>

<body>
<input type="button" id="ss" />
<div id="someid">
    <div class="bd">
        <ul>
            <li><a href="">Test 1</a></li>
            <li><a href="">Test 2</a></li>
            <li><a href="">Test 3</a></li>
            <li><a href="">Test 4</a></li>
            <li><a href="">Test 5</a></li>
        </ul>
    </div>
</div>
</body>
</html>

surreyk

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
学习使用YUI 2 的Menu组件

文章为surreykong原创，转载要指明出处，来自于http://surrey.iteye.com此文是07年所写，发布在csdn博客上的，现在转移到这里来。YUI的例子似乎过于复杂，其实它的使用是很简单的，最近在做毕业设计，选用了YUI作为客户端的库，一起看看如何使用YUI的Menu控件。YUI的Menu既可以从javascript代码中生成，也可以选择从已有的HTML标签...
复制链接

扫一扫