checked_tree.html | searchcode

/src/tree/demo/checked_tree.html

https://github.com/bilxio/kissy
HTML | 139 lines | 109 code | 30 blank | 0 comment | 0 complexity | 075c5a6d8b7a936ffba580ab373cb97a MD5 | raw file

<!doctype html>
<html>
<head>
<meta charset="utf-8"/>
<title>KISSY Check Tree</title>
<link href="../assets/tree.css" rel="stylesheet"/>
<style>
    .goog-tree-children {
        padding-left: 19px;
    }

    .goog-tree-lchildren {
        padding-left: 19px;
    }

    .goog-tree-item-selected .goog-tree-item-label {
        background: buttonface;
        color: buttontext;
    }

    .goog-tree-item-focused {
        outline: none;
    }

    .goog-tree-item-focused .goog-tree-item-selected .goog-tree-item-label {
        background: highlight;
        color: highlighttext;
    }

    .goog-tree-item-checked0 {
        background: url(../assets/check0.gif) 0 -2px;
        width: 16px;
        height: 16px;
        vertical-align: middle;
    }

    .goog-tree-item-checked1 {
        background: url(../assets/check1.gif) 0 -2px;
        width: 16px;
        height: 16px;
        vertical-align: middle;
    }

    .goog-tree-item-checked2 {
        background: url(../assets/check2.gif) 0 -2px;
        width: 16px;
        height: 16px;
        vertical-align: middle;
    }


</style>
</head>
<body>


<h1>KISSY Check Tree</h1>


<h2>demo</h2>

<a href="javascript:void(0)" id="expandAll">展开全部</a>&nbsp;
<a href="javascript:void(0)" id="collapseAll">关闭全部</a>
<div id="treeContainer" style="width: 200px;">

</div>
<script src="../../../build/kissy.js"></script>
<script>
    KISSY.Config.base = "../../";
    KISSY.use("tree", function(S, Tree) {
        var $ = S.all;
        var tree = new Tree.CheckTree({
            content:"淘宝网",
            prefixCls:"goog-",
            expanded:true,
            // showRootNode:false,
            render:"#treeContainer"
        });

        var favorates = new Tree.CheckNode({
            prefixCls:"goog-",
            content:"收藏夹",
            tree:tree
        });

        favorates.addChild(new Tree.CheckNode({
            prefixCls:"goog-",
            content:"收藏的宝贝"
        }));

        favorates.addChild(new Tree.CheckNode({
            prefixCls:"goog-",
            content:"收藏的店铺"
        }));

        tree.addChild(favorates);

        tree.addChild(new Tree.CheckNode({
            prefixCls:"goog-",
            content:"我要买"
        }));


        var one = new Tree.CheckNode({
            prefixCls:"goog-",
            content:"我的淘宝",
            tree:tree
        });

        one.addChild(new Tree.CheckNode({
            prefixCls:"goog-",
            content:"已买到的宝贝"
        }));

        one.addChild(new Tree.CheckNode({
            prefixCls:"goog-",
            content:"已卖出的宝贝"
        }));

        tree.addChild(one);

        tree.render();


        tree.on("click", function(e) {
            S.log("action : " + e.target.get("content"));
        });

        $("#expandAll").on("click", function() {
            tree.expandAll();
        });

        $("#collapseAll").on("click", function() {
            tree.collapseAll();
        });
    });
</script>
</body>
</html>