Realizing the function _jquery of the separator bar based on jquery

In the C/s system has a special divider control, very convenient to implement, but in the ASP.net did not. This article describes the use of jquery technology to implement the separator bar function.
The JavaScript code is as follows, saving the code as a JS file and referencing it in HTML.

Jsplit jquery.noconflict (); JQuery.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 June = {maxw: "600px", minw: "260px", floatd: "Left", Isclose:false , Bgurl: "", Bg: "#fff", Btn: {btn:true, OBG: {out: "#333", Hover: "Orange '}, CBG: {out: ' #333 ', Hover: ' Orange '}}, Fn:function () {}} j.ma XW = parseint (J.MAXW) | | parseint (June.
      MAXW); J.MINW = parseint (J.MINW) | | parseint (June.
      MINW); J.FLOATD = J.FLOATD | | June.
      FLOATD; J.isclose = j.isclose!= undefined? J.isclose:jun.
      Isclose; J.bgurl = J.bgurl | | June.
      Bgurl; j.bg = j.bg | | June.
      Bg; j.btn.btn = j.btn.btn!= undefined? J.btn.btn:jun.
      BTN.BTN; J.btn.obg.out = J.btn.obg.out | | June.
    Btn.oBg.Out;  J.btn.obg.hover = J.btn.obg.hover | | June.
      Btn.oBg.Hover; J.btn.cbg.out = J.btn.cbg.out | | June.
      Btn.cBg.Out; J.btn.cbg.hover = J.btn.cbg.hover | | June.
      Btn.cBg.Hover; J.fn = J.fn | | June.
      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;
      JQuery (_self). css ({position: "relative", FLOAT:J.FLOATD, Overflow: "Hidden", padding: "0px"}); JQuery (_self). Wrapinner ("<div class= ' jsplit-c ' style= ' Top:0px;z-index:9999;zoom:1;width:100%;overflow:hidden;")
      position:relative;height:100% ' ></div> '); 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> ");
      var dw = JQuery (_self). width ();
      var jsplitc = jQuery (_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 (JQuery.browser.msie) {Document.execcommand ("Backgroundimagecache", false, True);}
      if (DW > J.maxw) {jQuery (_self). css ({width:j.maxw});
      if (DW < J.MINW) {jQuery (_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 (funct IOn () {if (close = = False) {JQuery (this). css ({background:j.btn.obg.hover, "background-image": J.bgur L})} else {jQuery (this). css ({background:j.btn.cbg.hover, "background-image": J.bgurl})}, function (
        {if (Close = False) {JQuery (this). css ({background:j.btn.obg.out, "background-image": J.bgurl}) else {jquery (this). css ({background:j.btn.cbg.out, "background-image": J.bgurl})}}) JQuery (_self . Hover (function () {if (Close = False) Jsplite.stop (). Animate ({opacity:0.85},)}, function () {if (Close = = Fal SE) jsplite.stop (). Animate ({opacity:0}, D)}) Jsplite.mousedown (function (e) {j[' Fn '] && j[' F
        N '].call (_self);
        var ScreenX = E.screenx, W = jQuery (_self). width (); JQuery (document). MouseMove (function (e2) {CURW = J.FLOATD = = "Left" W + (E2.screenx-screenx): W-(E2.scre
          ENX-SCREENX); if (CURW >= j.maxw) {CURW = J.MAXW;
          };
          if (CURW <= j.minw) {curw = j.minw;};
          JQuery (_self). css ({WIDTH:CURW});
        DW = CURW;
        });
        jquery (document). MouseUp (function () {jQuery (document). Unbind ();
        });
          if (close = = True) {JQuery (this). CSS ({cursor: "E-resize", opacity:0.8});
          JQuery (_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});
        JQuery (_self). Animate ({width: "6px"}, 400);
      Close = true;
  }


    });
 }
});

Modify the HTML file by following these steps:
1. Add a reference to jquery and the Jsplit.js file you just generated.

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

2. Define the ID for the DIV or TD to be dragged size.

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

3. Add JavaScript call split.

<script type= "Text/javascript" > 
    $ (document). Ready (function () {
  jQuery (' #tt '). Jsplit ();
</script> 

This enables the client's separator bar to function, as shown in the following illustration:

The above is the entire content of this article, I hope to help you learn, but also hope that we support the cloud habitat community.