demo.html | searchcode

/src/resizable/demo.html

https://github.com/vincent1900/kissy
HTML | 135 lines | 123 code | 12 blank | 0 comment | 0 complexity | 1fc4145c1e8fb62c4703954489206efd MD5 | raw file

<!doctype html>
<html>
<head>
<meta charset="utf-8"/>
<title>S.Resizable Demo</title>
<style>
    .ke-resizehandler {
        overflow: hidden;
        font-size: 0;
        line-height: 0;
        position: absolute;
    }

    .ke-resizehandler-b {
        height: 5px;
        width: 100%;
        background-color: yellow;
        bottom: 0;
        left: 0;
        cursor: n-resize;
    }

    .ke-resizehandler-t {
        height: 5px;
        width: 100%;
        background-color: yellow;
        top: 0;
        left: 0;
        cursor: n-resize;
    }

    .ke-resizehandler-l {
        height: 100%;
        -height: expression(this.parentNode.offsetHeight);
        width: 5px;
        background-color: yellow;
        top: 0;
        left: 0;
        cursor: e-resize;
    }

    .ke-resizehandler-r {
        height: 100%;
        -height: expression(this.parentNode.offsetHeight);
        background-color: yellow;
        width: 5px;
        position: absolute;
        top: 0;
        right: 0;
        cursor: e-resize;
    }

    .ke-resizehandler-bl {
        height: 5px;
        width: 5px;
        background-color: green;
        z-index: 1;
        bottom: 0;
        left: 0;
        cursor: sw-resize;
    }

    .ke-resizehandler-br {
        height: 5px;
        width: 5px;
        z-index: 1;
        background-color: green;
        bottom: 0;
        right: 0;
        cursor: se-resize;
    }

    .ke-resizehandler-tl {
        height: 5px;
        width: 5px;
        z-index: 1;
        background-color: green;
        top: 0;
        left: 0;
        cursor: nw-resize;
    }

    .ke-resizehandler-tr {
        height: 5px;
        width: 5px;
        z-index: 1;
        background-color: green;
        top: 0;
        right: 0;
        cursor: ne-resize;
    }
</style>
</head>
<body>

拖放测试

<div style="border:1px solid red;width:200px;height:100px;overflow:hidden;" id="t">
    <button id="destroy" style='margin-top:50px;'>
        destroy resize
    </button>
</div>
<script src="../seed/kissy.js"></script>
<script src="../seed/lang.js"></script>
<script src="../seed/web.js"></script>
<script src="../seed/loader.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/dd.js"></script>
<script src="../../build/uibase.js"></script>
<script src="base.js"></script>
<script src="../resizable.js"></script>
<script>
    KISSY.use("node,resizable", function(S, N, Resizable) {
        var Node = S.require("node/node");

        S.ready(function(S) {
            var r = new Resizable({
                node:"#t",
                minHeight:10,
                autoRender:true,
                handlers:["b","t","r","l","tr","tl","br","bl"]
            });
            Node.one("#destroy").on("click", function() {
                r.destroy();
            });

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