The CS system has a dedicated separator control, which is easy to implement, but not in Asp.net. This article introduces a Javascript code that uses JQuery technology to implement the separation bar function. Save the code as a JS file and reference it in HTML.
The Code is 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 jun = {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 (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;
JQuery(_self).css ({position: "relative", float: j. FloatD, overflow: "hidden", padding: "0px "});
JQuery (_ self). wrapInner ("
");
JQuery (_ self). children (". jsplit-c"). append ("
");
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.exe cCommand ("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}, 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 = 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;
}
});
}
});
To modify an HTML file, follow these steps:
1. added references to JQuery and the jsplit. js file just generated.
The Code is as follows:
