功能就是图中圈中的Div可以拖动改变左边导航栏宽度,效果请看:http://www.miniui.com/demo/jQuery插件

解决方案 »

  1.   

     这个 可以自己写一个js程序来控制啊。 根据鼠标按下,移动的操作来改变左边框的位置或者宽度。 紧提供思路,js自己写
      

  2.   

    给你个类似的
    首先html中的代码:<head runat="server">
        <title></title>
        <style type="text/css">
            #main
            {
                background: #fafafa;
                width: 100%;
                min-width: 600px;
                height: 500px;
                margin: 0px;
            }
            #left
            {
                width: 130px;
                height: 100%;
                overflow: auto;
                background-color: Green;
                float: left;
            }
            #right
            {
                height: 100%;
                width: auto;
                overflow: hidden;
                 background-color:Yellow;
            }
        </style>
        <script type="text/javascript" src="js/jquery.js"></script>
        <script type="text/javascript" src="js/jsplit.js"></script>
        <script type="text/javascript">     window.onload = function() {
             $("#left").jsplit({ MaxW: "600px"
                     , MinW: "50px"
                     , FloatD: "left"
                     , IsClose: false
                     , BgUrl: "url(images/splider.jpg)"
                     , Bg: "right 0 repeat-y"
                     , Btn: { btn: true
                          , oBg: { Out: "0 0", Hover: "-6px 0" }
                          , cBg: { Out: "-12px 0", Hover: "-18px 0" }
                     }
                     , Fn: function() { }
                 });
              setPos();
         }        html = document.documentElement;
            setPos = function () {
                var htmlWidth = html.clientWidth;
                var htmlHeight = html.clientHeight;
                $("body").css("width", htmlWidth);
                $("body").css("height", htmlHeight);
                $("#left").css("height", htmlHeight - 575 > 0 ? htmlHeight - 75 : 500);
                $("#right").css("height", htmlHeight - 575 > 0 ? htmlHeight - 75 : 500);
            }        window.onresize = function () {
                setPos();
            }        
        
        </script>
    </head>
    <body>
        <form id="form1" runat="server">
        <div id="main">
            <div id="left">
                左边的</div>
            <div id="right">
                右边的</div>
        </div>
        </form>
    </body>
    </html>
    然后jsplit.js代码:
    $.fn.extend({
        jsplit: function(j) {
            return this.each(function() {
                j = j || {};
                j.Btn = j.Btn || {};
                j.Btn.oBg = j.Btn.oBg || {};
                j.Btn.cBg = j.Btn.cBg || {};
                var jun = { MaxW: "400px"
    , MinW: "60px"
    , FloatD: "left"
    , IsClose: false
    , BgUrl: ""
    , Bg: "#fff"
    , Btn: { btn: true
    , oBg: { Out: "#333", Hover: "orange" }
    , cBg: { Out: "#333", Hover: "orange" }
    }
    , Fn: function() { }
                }
                j.MaxW = parseInt(j.MaxW) || parseInt(jun.MaxW);
                j.MinW = parseInt(j.MinW) || parseInt(jun.MinW);
                j.FloatD = j.FloatD || jun.FloatD;
                j.IsClose = j.IsClose != undefined ? j.IsClose : jun.IsClose;
                j.BgUrl = j.BgUrl || jun.BgUrl;
                j.Bg = j.Bg || jun.Bg;
                j.Btn.btn = j.Btn.btn != undefined ? j.Btn.btn : jun.Btn.btn;
                j.Btn.oBg.Out = j.Btn.oBg.Out || jun.Btn.oBg.Out;
                j.Btn.oBg.Hover = j.Btn.oBg.Hover || jun.Btn.oBg.Hover;
                j.Btn.cBg.Out = j.Btn.cBg.Out || jun.Btn.cBg.Out;
                j.Btn.cBg.Hover = j.Btn.cBg.Hover || jun.Btn.cBg.Hover;
                j.Fn = j.Fn || jun.Fn;
                var antiD = j.FloatD == "left" ? "right" : "left";
                if (j.MinW > j.MaxW) {
                    var amax = j.MaxW;
                    j.MaxW = j.MinW;
                    j.MinW = amax;
                };
                var _self = this;
                var Close = false;
                $(_self).css({ position: "relative", float: j.FloatD, overflow: "hidden", padding: "0px" });
                $(_self).wrapInner("<div class='jsplit-c' style='top:0px;z-index:9999;zoom:1;width:100%;overflow:hidden;position:relative;height:100%'></div>");
                $(_self).children(".jsplit-c").append("<div class='jsplit-e' unselectable='on' style='background:#fff;height:100%;width:6px;top:0px;-moz-user-select:none;" + antiD + ":0px;position:absolute;cursor:e-resize;overflow:hidden;z-index:10000;'><div class='jsplit-e-handle'  unselectable='on'  style='height:40px;width:100%;top:50%;margin-top:-20px;left:0;position:absolute;cursor:pointer;-moz-user-select:none;'></div></div>");
                var dw = $(_self).width();
                var jsplitc = $(_self).children(".jsplit-c");
                var jsplite = jsplitc.children(".jsplit-e");
                var jsplith = jsplite.children(".jsplit-e-handle");
                if (j.Btn.btn == false) { jsplith.css({ display: "none" }) };
                if ($.browser.msie) { document.execCommand("BackgroundImageCache", false, true); }
                if (dw > j.MaxW) { $(_self).css({ width: j.MaxW }); }
                if (dw < j.MinW) { $(_self).css({ width: j.MinW }); }
                jsplite.css({ background: j.Bg, "background-image": j.BgUrl, opacity: 0 })
                if (j.IsClose != false) {
                    jsplith.css({ background: j.Btn.cBg.Out, "background-image": j.BgUrl })
                    _selfclose();
                } else {
                    jsplith.css({ background: j.Btn.oBg.Out, "background-image": j.BgUrl })
                }
                jsplith.hover(function() {
                    if (Close == false) {
                        $(this).css({ background: j.Btn.oBg.Hover, "background-image": j.BgUrl })
                    } else { $(this).css({ background: j.Btn.cBg.Hover, "background-image": j.BgUrl }) }
                }, function() {
                    if (Close == false) {
                        $(this).css({ background: j.Btn.oBg.Out, "background-image": j.BgUrl })
                    } else { $(this).css({ background: j.Btn.cBg.Out, "background-image": j.BgUrl }) }
                })
                $(_self).hover(function() { if (Close == false) jsplite.stop().animate({ opacity: 0.85 }, 200) }, function() { if (Close == false) jsplite.stop().animate({ opacity: 0 }, 2000) })
                jsplite.mousedown(function(e) {
                    j['Fn'] && j['Fn'].call(_self);
                    var screenX = e.screenX, w = $(_self).width();
                    $(document).add($("iframe").contents()).mousemove(function(e2) {
                        curW = j.FloatD == "left" ? w + (e2.screenX - screenX) : w - (e2.screenX - screenX);
                        if (curW >= j.MaxW) { curW = j.MaxW; };
                        if (curW <= j.MinW) { curW = j.MinW; };
                        $(_self).css({ width: curW });
                        dw = curW;
                    });
                    $(document).add($("iframe").contents()).mouseup(function() {
                        $(document).add($("iframe").contents()).unbind();
                    });
                    if (Close == true) {
                        $(this).css({ cursor: "e-resize", opacity: 0.8 });
                        $(_self).animate({ width: dw }, 200);
                        Close = false;
                    };
                    return false;
                });
                jsplite.dblclick(function() {
                    if (Close == false) {
                        _selfclose();
                    };
                    return false;
                });
                jsplith.click(function() {
                    if (Close == false) {
                        _selfclose();
                    };
                    return false;
                });
                function _selfclose() {
                    jsplite.css({ cursor: "pointer", opacity: 1 });
                    jsplith.css({ background: j.Btn.cBg.Out, "background-image": j.BgUrl });
                    $(_self).animate({ width: "6px" }, 400);
                    Close = true;
                }
            });
        }
    });
      

  3.   

    给你个类似的
    首先html中的代码:<head runat="server">
        <title></title>
        <style type="text/css">
            #main
            {
                background: #fafafa;
                width: 100%;
                min-width: 600px;
                height: 500px;
                margin: 0px;
            }
            #left
            {
                width: 130px;
                height: 100%;
                overflow: auto;
                background-color: Green;
                float: left;
            }
            #right
            {
                height: 100%;
                width: auto;
                overflow: hidden;
                 background-color:Yellow;
            }
        </style>
        <script type="text/javascript" src="js/jquery.js"></script>
        <script type="text/javascript" src="js/jsplit.js"></script>
        <script type="text/javascript">     window.onload = function() {
             $("#left").jsplit({ MaxW: "600px"
                     , MinW: "50px"
                     , FloatD: "left"
                     , IsClose: false
                     , BgUrl: "url(images/splider.jpg)"
                     , Bg: "right 0 repeat-y"
                     , Btn: { btn: true
                          , oBg: { Out: "0 0", Hover: "-6px 0" }
                          , cBg: { Out: "-12px 0", Hover: "-18px 0" }
                     }
                     , Fn: function() { }
                 });
              setPos();
         }        html = document.documentElement;
            setPos = function () {
                var htmlWidth = html.clientWidth;
                var htmlHeight = html.clientHeight;
                $("body").css("width", htmlWidth);
                $("body").css("height", htmlHeight);
                $("#left").css("height", htmlHeight - 575 > 0 ? htmlHeight - 75 : 500);
                $("#right").css("height", htmlHeight - 575 > 0 ? htmlHeight - 75 : 500);
            }        window.onresize = function () {
                setPos();
            }        
        
        </script>
    </head>
    <body>
        <form id="form1" runat="server">
        <div id="main">
            <div id="left">
                左边的</div>
            <div id="right">
                右边的</div>
        </div>
        </form>
    </body>
    </html>
    然后jsplit.js代码:
    $.fn.extend({
        jsplit: function(j) {
            return this.each(function() {
                j = j || {};
                j.Btn = j.Btn || {};
                j.Btn.oBg = j.Btn.oBg || {};
                j.Btn.cBg = j.Btn.cBg || {};
                var jun = { MaxW: "400px"
    , MinW: "60px"
    , FloatD: "left"
    , IsClose: false
    , BgUrl: ""
    , Bg: "#fff"
    , Btn: { btn: true
    , oBg: { Out: "#333", Hover: "orange" }
    , cBg: { Out: "#333", Hover: "orange" }
    }
    , Fn: function() { }
                }
                j.MaxW = parseInt(j.MaxW) || parseInt(jun.MaxW);
                j.MinW = parseInt(j.MinW) || parseInt(jun.MinW);
                j.FloatD = j.FloatD || jun.FloatD;
                j.IsClose = j.IsClose != undefined ? j.IsClose : jun.IsClose;
                j.BgUrl = j.BgUrl || jun.BgUrl;
                j.Bg = j.Bg || jun.Bg;
                j.Btn.btn = j.Btn.btn != undefined ? j.Btn.btn : jun.Btn.btn;
                j.Btn.oBg.Out = j.Btn.oBg.Out || jun.Btn.oBg.Out;
                j.Btn.oBg.Hover = j.Btn.oBg.Hover || jun.Btn.oBg.Hover;
                j.Btn.cBg.Out = j.Btn.cBg.Out || jun.Btn.cBg.Out;
                j.Btn.cBg.Hover = j.Btn.cBg.Hover || jun.Btn.cBg.Hover;
                j.Fn = j.Fn || jun.Fn;
                var antiD = j.FloatD == "left" ? "right" : "left";
                if (j.MinW > j.MaxW) {
                    var amax = j.MaxW;
                    j.MaxW = j.MinW;
                    j.MinW = amax;
                };
                var _self = this;
                var Close = false;
                $(_self).css({ position: "relative", float: j.FloatD, overflow: "hidden", padding: "0px" });
                $(_self).wrapInner("<div class='jsplit-c' style='top:0px;z-index:9999;zoom:1;width:100%;overflow:hidden;position:relative;height:100%'></div>");
                $(_self).children(".jsplit-c").append("<div class='jsplit-e' unselectable='on' style='background:#fff;height:100%;width:6px;top:0px;-moz-user-select:none;" + antiD + ":0px;position:absolute;cursor:e-resize;overflow:hidden;z-index:10000;'><div class='jsplit-e-handle'  unselectable='on'  style='height:40px;width:100%;top:50%;margin-top:-20px;left:0;position:absolute;cursor:pointer;-moz-user-select:none;'></div></div>");
                var dw = $(_self).width();
                var jsplitc = $(_self).children(".jsplit-c");
                var jsplite = jsplitc.children(".jsplit-e");
                var jsplith = jsplite.children(".jsplit-e-handle");
                if (j.Btn.btn == false) { jsplith.css({ display: "none" }) };
                if ($.browser.msie) { document.execCommand("BackgroundImageCache", false, true); }
                if (dw > j.MaxW) { $(_self).css({ width: j.MaxW }); }
                if (dw < j.MinW) { $(_self).css({ width: j.MinW }); }
                jsplite.css({ background: j.Bg, "background-image": j.BgUrl, opacity: 0 })
                if (j.IsClose != false) {
                    jsplith.css({ background: j.Btn.cBg.Out, "background-image": j.BgUrl })
                    _selfclose();
                } else {
                    jsplith.css({ background: j.Btn.oBg.Out, "background-image": j.BgUrl })
                }
                jsplith.hover(function() {
                    if (Close == false) {
                        $(this).css({ background: j.Btn.oBg.Hover, "background-image": j.BgUrl })
                    } else { $(this).css({ background: j.Btn.cBg.Hover, "background-image": j.BgUrl }) }
                }, function() {
                    if (Close == false) {
                        $(this).css({ background: j.Btn.oBg.Out, "background-image": j.BgUrl })
                    } else { $(this).css({ background: j.Btn.cBg.Out, "background-image": j.BgUrl }) }
                })
                $(_self).hover(function() { if (Close == false) jsplite.stop().animate({ opacity: 0.85 }, 200) }, function() { if (Close == false) jsplite.stop().animate({ opacity: 0 }, 2000) })
                jsplite.mousedown(function(e) {
                    j['Fn'] && j['Fn'].call(_self);
                    var screenX = e.screenX, w = $(_self).width();
                    $(document).add($("iframe").contents()).mousemove(function(e2) {
                        curW = j.FloatD == "left" ? w + (e2.screenX - screenX) : w - (e2.screenX - screenX);
                        if (curW >= j.MaxW) { curW = j.MaxW; };
                        if (curW <= j.MinW) { curW = j.MinW; };
                        $(_self).css({ width: curW });
                        dw = curW;
                    });
                    $(document).add($("iframe").contents()).mouseup(function() {
                        $(document).add($("iframe").contents()).unbind();
                    });
                    if (Close == true) {
                        $(this).css({ cursor: "e-resize", opacity: 0.8 });
                        $(_self).animate({ width: dw }, 200);
                        Close = false;
                    };
                    return false;
                });
                jsplite.dblclick(function() {
                    if (Close == false) {
                        _selfclose();
                    };
                    return false;
                });
                jsplith.click(function() {
                    if (Close == false) {
                        _selfclose();
                    };
                    return false;
                });
                function _selfclose() {
                    jsplite.css({ cursor: "pointer", opacity: 1 });
                    jsplith.css({ background: j.Btn.cBg.Out, "background-image": j.BgUrl });
                    $(_self).animate({ width: "6px" }, 400);
                    Close = true;
                }
            });
        }
    });
    不下做个出来