借用JQuery在网页中实现分隔条的功能

Posted 2020-07-26

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了借用JQuery在网页中实现分隔条的功能相关的知识，希望对你有一定的参考价值。

在C/S系统中有专门的分隔条控件，很方便实现，但在Asp.net中却没有。本文介绍了一种使用JQuery技术实现分隔条的功能。

javascript代码如下，将该代码保存成JS文件后在html中引用。

  1 jQuery.noConflict();
  2 jQuery.fn.extend({
  3     jsplit: function (j) {
  4         return this.each(function () {
  5             j = j || {};
  6             j.Btn = j.Btn || {};
  7             j.Btn.oBg = j.Btn.oBg || {};
  8             j.Btn.cBg = j.Btn.cBg || {};
  9             var jun = { MaxW: "600px"
 10                         , MinW: "260px"
 11                         , FloatD: "left"
 12                         , IsClose: false
 13                         , BgUrl: ""
 14                         , Bg: "#fff"
 15                         , Btn: { btn: true
 16                                 , oBg: { Out: "#333", Hover: "orange" }
 17                                 , cBg: { Out: "#333", Hover: "orange"}
 18                         }
 19                 , Fn: function () { } 
 20             }
 21             j.MaxW = parseInt(j.MaxW) || parseInt(jun.MaxW);
 22             j.MinW = parseInt(j.MinW) || parseInt(jun.MinW);
 23             j.FloatD = j.FloatD || jun.FloatD;
 24             j.IsClose = j.IsClose != undefined ? j.IsClose : jun.IsClose;
 25             j.BgUrl = j.BgUrl || jun.BgUrl;
 26             j.Bg = j.Bg || jun.Bg;
 27             j.Btn.btn = j.Btn.btn != undefined ? j.Btn.btn : jun.Btn.btn;
 28             j.Btn.oBg.Out = j.Btn.oBg.Out || jun.Btn.oBg.Out;
 29             j.Btn.oBg.Hover = j.Btn.oBg.Hover || jun.Btn.oBg.Hover;
 30             j.Btn.cBg.Out = j.Btn.cBg.Out || jun.Btn.cBg.Out;
 31             j.Btn.cBg.Hover = j.Btn.cBg.Hover || jun.Btn.cBg.Hover;
 32             j.Fn = j.Fn || jun.Fn;
 33             var antiD = j.FloatD == "left" ? "right" : "left";
 34             if (j.MinW > j.MaxW) {
 35                 var amax = j.MaxW;
 36                 j.MaxW = j.MinW;
 37                 j.MinW = amax;
 38             };
 39             var _self = this;
 40             var Close = false;
 41             jQuery(_self).css({ position: "relative", float: j.FloatD, overflow: "hidden", padding: "0px" });
 42             jQuery(_self).wrapInner("<div class=‘jsplit-c‘ style=‘top:0px;z-index:9999;zoom:1;width:100%;overflow:hidden;position:relative;height:100%‘></div>");
 43             jQuery(_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>");
 44             var dw = jQuery(_self).width();
 45             var jsplitc = jQuery(_self).children(".jsplit-c");
 46             var jsplite = jsplitc.children(".jsplit-e");
 47             var jsplith = jsplite.children(".jsplit-e-handle");
 48             if (j.Btn.btn == false) { jsplith.css({ display: "none" }) };
 49             if (jQuery.browser.msie) { document.execCommand("BackgroundImageCache", false, true); }
 50             if (dw > j.MaxW) { jQuery(_self).css({ width: j.MaxW }); }
 51             if (dw < j.MinW) { jQuery(_self).css({ width: j.MinW }); }
 52             jsplite.css({ background: j.Bg, "background-image": j.BgUrl, opacity: 0 })
 53             if (j.IsClose != false) {
 54                 jsplith.css({ background: j.Btn.cBg.Out, "background-image": j.BgUrl })
 55                 _selfclose();
 56             } else {
 57                 jsplith.css({ background: j.Btn.oBg.Out, "background-image": j.BgUrl })
 58             }
 59             jsplith.hover(function () {
 60                 if (Close == false) {
 61                     jQuery(this).css({ background: j.Btn.oBg.Hover, "background-image": j.BgUrl })
 62                 } else { jQuery(this).css({ background: j.Btn.cBg.Hover, "background-image": j.BgUrl }) }
 63             }, function () {
 64                 if (Close == false) {
 65                     jQuery(this).css({ background: j.Btn.oBg.Out, "background-image": j.BgUrl })
 66                 } else { jQuery(this).css({ background: j.Btn.cBg.Out, "background-image": j.BgUrl }) }
 67             })
 68             jQuery(_self).hover(function () { if (Close == false) jsplite.stop().animate({ opacity: 0.85 }, 200) }, function () { if (Close == false) jsplite.stop().animate({ opacity: 0 }, 2000) })
 69             jsplite.mousedown(function (e) {
 70                 j[‘Fn‘] && j[‘Fn‘].call(_self);
 71                 var screenX = e.screenX, w = jQuery(_self).width();
 72                 jQuery(document).mousemove(function (e2) {
 73                     curW = j.FloatD == "left" ? w + (e2.screenX - screenX) : w - (e2.screenX - screenX);
 74                     if (curW >= j.MaxW) { curW = j.MaxW; };
 75                     if (curW <= j.MinW) { curW = j.MinW; };
 76                     jQuery(_self).css({ width: curW });
 77                     dw = curW;
 78                 });
 79                 jQuery(document).mouseup(function () {
 80                     jQuery(document).unbind();
 81                 });
 82                 if (Close == true) {
 83                     jQuery(this).css({ cursor: "e-resize", opacity: 0.8 });
 84                     jQuery(_self).animate({ width: dw }, 200);
 85                     Close = false;
 86                 };
 87                 return false;
 88             });
 89             jsplite.dblclick(function () {
 90                 if (Close == false) {
 91                     _selfclose();
 92                 };
 93                 return false;
 94             });
 95             jsplith.click(function () {
 96                 if (Close == false) {
 97                     _selfclose();
 98                 };
 99                 return false;
100             });
101             function _selfclose() {
102                 jsplite.css({ cursor: "pointer", opacity: 1 });
103                 jsplith.css({ background: j.Btn.cBg.Out, "background-image": j.BgUrl });
104                 jQuery(_self).animate({ width: "6px" }, 400);
105                 Close = true;
106             }
107 
108 
109         });
110     }
111 });

按以下步骤修改HTML文件：
1. 增加对JQuery和刚刚生成的jsplit.js文件的引用。

<script language=‘javascript‘ src=‘jquery-1.4.4.min.js‘></script>
<script language=‘javascript‘ src=‘jsplit.js‘></script>

2. 为要被拖动大小的DIV或TD定义ID。

<table>
    <tr>
        <td id="tt" style="background:#999999">test</td>
        <td style="background:#009999" width="400">test Table</td>
    </tr>
</table>

3. 增加Javascript调用Split。

<script type="text/javascript"> 
        $(document).ready(function(){
    jQuery(‘#tt‘).jsplit();                    
        });
</script>

这样就实现了客户端的分隔条的功能，如下图所示：

技术分享

以上是关于借用JQuery在网页中实现分隔条的功能的主要内容，如果未能解决你的问题，请参考以下文章