menu.html | searchcode

/src/menu/assets/menu.html

https://github.com/timeflows/kissy
HTML | 83 lines | 63 code | 20 blank | 0 comment | 0 complexity | e6f20f7db3f2ee5d50032b5e1dee4106 MD5 | raw file

<!doctype html>
<html>
<head>
<meta charset="utf-8"/>
<title>menu 测试</title>

<link href="menu.css" rel="stylesheet"/>
<link href="menuitem.css" rel="stylesheet"/>
</head>
<body>

<h1 id="describe">menu 测试</h1>

<div id="menu_container" style="width:500px;height:200px;">

</div>

<label>禁用：<input type="checkbox" id='dis'/></label>

<script src="../../../build/seed.js"></script>
<script src="../../../build/ua.js"></script>
<script src="../../../build/node.js"></script>
<script src="../../../build/dom.js"></script>
<script src="../../../build/event.js"></script>
<script src="../../../build/base.js"></script>
<script src="../../../build/json.js"></script>
<script src="../../../build/uibase.js"></script>
<script src="../../component.js"></script>
<script src="../../component/modelcontrol.js"></script>
<script src="../../component/render.js"></script>
<script src="../menuitem.js"></script>
<script src="../menuitemrender.js"></script>
<script src="../menu.js"></script>
<script src="../menurender.js"></script>

<script>
    KISSY.use("node,menu/menuitem,menu/menuitemrender,menu/menu,menu/menurender",
            function(S, Node, MenuItem, MenuItemRender, Menu, MenuRender) {

                //model and control
                //view as a parameter
                var b = new MenuItem({
                    content:"测试"
                });


                var b2 = new MenuItem({
                    content:"测试2"
                });

                var b3 = new MenuItem({
                    content:"测试3"
                });

                var menu = new Menu({
                    children:[b,b2,b3],
                    render:"#menu_container"
                });

                menu.render();

                menu.on("menuItemSelected", function(ev) {
                    alert("selected : " + menu.get("selectedItem").get("el").text());
                });


                var dis = Node.one("#dis");

                dis.on("click", function() {
                    menu.set("disabled", !!dis[0].checked);
                    var children = menu.get("children");
                    S.each(children, function(child) {
                        child.set("disabled", !!dis[0].checked);
                    });
                });

                dis[0].checked = false;


            });
</script>
</body>
</html>