demo.html | searchcode

/src/menubutton/demo.html

https://github.com/xiiiiiin/kissy
HTML | 315 lines | 268 code | 44 blank | 3 comment | 0 complexity | 5c2dcf497d8fc49cdb87dfe0678177ef MD5 | raw file

<!doctype html>
<html>
<head>
<meta charset="utf-8"/>
<title>menubutton 测试</title>
<link href="../button/tests/common.css" rel="stylesheet"/>
<link href="../button/tests/custombutton.css" rel="stylesheet"/>
<link href="tests/menubutton.css" rel="stylesheet"/>
<link href="../overlay/assets/cool.css" rel="stylesheet"/>
<link href="../menu/tests/menu.css" rel="stylesheet"/>
<link href="../menu/tests/menuitem.css" rel="stylesheet"/>
<link href="../menu/tests/submenu.css" rel="stylesheet"/>
<link href="../menu/tests/c2c-ui.css" rel="stylesheet"/>
<style>
    .ks-menu {
        background: white;
        border: 1px solid red;
    }

    li {
        padding: 5px;
        border: 1px solid white;
    }
</style>
</head>
<body>

<h1 id="describe">菜单按钮演示</h1>
<div style="height:200px;overflow: auto;border:1px solid red;">
    <h2>设计说明</h2>
    <ol>
        <li>支持键盘，鼠标互操作</li>
        <li>符合 wai-aria 规范</li>
        <li>构建组件层次</li>
    </ol>

    <h2>使用说明</h2>
    <ol>
        <li>
            tab 移动焦点到按钮：按钮周边粉框
        </li>
        <li>
            按钮获得焦点时点击上或下键，弹出菜单
            <ol>
                <li>或点击按钮弹出菜单</li>
            </ol>
        </li>


        <li>
            菜单弹出后，上下键选择菜单项
            <ol>
                <li>或通过鼠标掠过</li>
            </ol>
        </li>

        <li>
            带有子菜单的菜单项通过右键激活子菜单，左键收缩子菜单
            <ol>
                <li>或通过鼠标掠过，自动弹出子菜单</li>
            </ol>
        </li>

        <li>
            菜单项弹出后，按下 enter 或 space 则选中当前高亮菜单项
            <ol>
                <li>或通过鼠标点击选中任意菜单项</li>
            </ol>
        </li>

        <li>
            esc 隐藏下拉菜单（焦点仍然在按钮上）
            <ol>
                <li>或通过鼠标点击文档空白区域（按钮失去焦点）</li>
            </ol>
        </li>
    </ol>
</div>

<h1>普通菜单</h1>
<div id="button_container" role='application'>

</div>
<br/>
<div id="log" style="height:300px;border:1px solid green;overflow:auto;display: none;">

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

<h2>checked menu</h2>

<div role='application' id="exist">
</div>

<h2>
    从 select 生成
</h2>
<div id="parentSelect">
    <select name="decorateSelect" id="decorateSelect">
    </select>
</div>

<h2>层联 select</h2>
<a href="demo/cascade-select.html" target="_blank">cascade select</a>

<script src="../../build/kissy.js"></script>
<script src="../../build/uibase.js"></script>
<script src="../component/modelcontrol.js"></script>
<script src="../component/render.js"></script>
<script src="../component/container.js"></script>
<script src="../component.js"></script>
<script src="../button/base.js"></script>
<script src="../button/buttonrender.js"></script>
<script src="../button/nativerender.js"></script>
<script src="../button/css3render.js"></script>
<script src="../button/customrender.js"></script>
<script src="../button.js"></script>
<script src="../menu/menuitemrender.js"></script>
<script src="../menu/menuitem.js"></script>
<script src="../menu/submenurender.js"></script>
<script src="../menu/submenu.js"></script>
<script src="../menu/menurender.js"></script>
<script src="../menu/menu.js"></script>

<script src="../menu/popupmenurender.js"></script>
<script src="../menu/separatorrender.js"></script>
<script src="../menu/popupmenu.js"></script>
<script src="../menu/separator.js"></script>

<script src="../menu.js"></script>
<script src="menubuttonrender.js"></script>
<script src="menubutton.js"></script>
<script src="select.js"></script>
<script src="option.js"></script>
<script src="../menubutton.js"></script>
<!--
<script src="http://assets.daily.taobao.net/s/kissy/1.2.0/kissy.js"></script>
-->

<script>
    KISSY.ready(function(S) {
        var s = S.one("#decorateSelect");
        for (var i = 0; i < 20; i++) {
            s.append("<option value='" + i + "'>项目" + i + "</option>")
        }
    });
    KISSY.ready(function(S) {
        KISSY.use("node,menubutton,menu", function(S, Node, MenuButton, Menu) {
            function log(s) {
                Node.one("#log").append(new Node("<p>" + s + "</p>"));
                Node.one("#log")[0].scrollTop = Node.one("#log")[0].scrollHeight;
            }

            if (true)
                (function() {

                    var sb = new Menu.PopupMenu({
                        prefixCls:"goog-"
                    });

                    sb.addChild(new Menu.Item({content:"已买到的宝贝",
                        prefixCls:"goog-"}));
                    sb.addChild(new Menu.Item({content:"已卖出的宝贝",
                        prefixCls:"goog-",disabled:true}));


                    var sb2 = new Menu.PopupMenu({
                        prefixCls:"goog-"
                    });
                    sb2.addChild(new Menu.Item({content:"收藏的宝贝",
                        prefixCls:"goog-"}));
                    sb2.addChild(new Menu.Item({content:"收藏的店铺",
                        prefixCls:"goog-"}));
                    var b2 = new Menu.SubMenu({
                        content:"收藏夹",
                        prefixCls:"goog-",
                        menu:sb2
                    });
                    sb.addChild(b2);

                    var b = new Menu.SubMenu({
                        content:"我的淘宝",
                        menu:sb,
                        prefixCls:"goog-"
                    });

                    var alone = new Menu.Item({content:"我要买",prefixCls:"goog-"});
                    var menu = new Menu.PopupMenu({
                        prefixCls:"goog-",
                        children:[b,
                            new Menu.Separator({prefixCls:"goog-"}),
                            alone,
                            new Menu.Item({content:"我要卖",prefixCls:"goog-"})]
                    });
                    //model and control
                    //view as a parameter
                    var bbbbb = new MenuButton({
                        prefixCls:"goog-",
                        content:"淘宝网",
                        describedby:"describe",
                        menu:menu,
                        render:"#button_container",
                        autoRender:true
                    });


                    menu.on("click", function(ev) {
                        log("selected : " + ev.target.get("content"));
                    });

                    //or
                    //b.render()

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

                    dis.on("click", function() {
                        if (dis[0].checked) {
                            bbbbb.set("disabled", true);
                        } else {
                            bbbbb.set("disabled", false);
                        }
                    });

                    if (dis[0].checked) {
                        bbbbb.set("disabled", true);
                    } else {
                        bbbbb.set("disabled", false);
                    }
                })();
            if (true)
                (function() {
                    var sb = new Menu.PopupMenu({
                        prefixCls:"goog-"
                    });
                    sb.addChild(new Menu.Item({
                        content:"submenuitem1",
                        checkable:true,
                        prefixCls:"goog-"}));
                    sb.addChild(new Menu.Item({
                        content:"submenuitem2",
                        checkable:true,
                        prefixCls:"goog-"}));


                    var sb2 = new Menu.PopupMenu({
                        prefixCls:"goog-"
                    });
                    sb2.addChild(new Menu.Item({
                        content:"submenuitem11",
                        checkable:true,
                        prefixCls:"goog-"}));
                    sb2.addChild(new Menu.Item({
                        content:"submenuitem22",
                        checkable:true,
                        prefixCls:"goog-"}));
                    var b2 = new Menu.SubMenu({
                        content:"sub-sub-menu",
                        prefixCls:"goog-",
                        menu:sb2
                    });
                    sb.addChild(b2);

                    var b = new Menu.SubMenu({
                        content:"submenu",
                        prefixCls:"goog-",
                        menu:sb
                    });

                    var menu = new Menu.PopupMenu({
                        prefixCls:"goog-",
                        children:[
                            b,
                            new Menu.Item({content:"alone",
                                checkable:true,
                                prefixCls:"goog-"})
                        ]
                    });

                    var exist = new MenuButton({
                        render:"#exist",
                        content:"多选菜单",
                        prefixCls:"goog-",
                        menu:menu
                    });
                    exist.render();
                })();


            (function() {

                var select = MenuButton.Select.decorate('#decorateSelect', {
                    prefixCls:"c2c-",
                    width:82,
                    menuCfg:{
                        width:82,
                        height:150,
                        elStyle:{
                            overflow:"auto",
                            overflowX:"hidden"
                        }
                    }
                });


                select.on("click", function(e) {
                    alert(e.target.get("value"));
                });
            })();


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