Code to implement the divider function in a Web page using jquery _jquery

The JavaScript code is as follows, saving the code as a JS file and referencing it in HTML.

Copy Code code as follows:

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.maxw = 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 (function () {
if (Close = False) {
JQuery (this). css ({background:j.btn.obg.hover, "background-image": J.bgurl})
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 = = False) Jsplite.stop (). Animate ({opacity:0}, 2000)})
Jsplite.mousedown (function (e) {
j[' fn '] && j[' fn '].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.screenx-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.

Copy Code code as follows:

<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.

Copy Code code as follows:

<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.

Copy Code code as follows:

<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: