In the C/S system, there is a dedicated separator control, which is easy to implement, but not in Asp.net. This article introduces a function to implement separation Bars Using JQuery technology.
The Javascript code is as follows. Save the code as a JS file and reference it in HTML.
Copy to ClipboardReference: [www.bkjia.com] 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 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 ("<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> ");
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.
Copy to ClipboardReference: [www.bkjia.com] <script language = 'javascript 'src = 'jquery-1.4.min.js '> </script>
<Script language = 'javascript 'src = 'jsplit. js'> </script>
2. Define the ID of the DIV or TD to be dragged.
Copy to ClipboardReference: [www.bkjia.com] <table>
<Tr>
<Td id = "tt" style = "background: #999999"> test </td>
<Td style = "background: #009999" width = "400"> test Table </td>
</Tr>
</Table>
3. Added Javascript to call Split.
Copy to ClipboardReference: [www.bkjia.com] <script type = "text/javascript">
$ (Document). ready (function (){
JQuery ('# tt'). jsplit ();
});
</Script>
In this way, the separation bar function of the client is implemented, as shown in:
