Home > Developer > JavaScript
I have also seen some column splitting effects on the Internet, and there is also a jquery plug-in jquery. splitter. js, But they basically did not solve a problem: if there is an iframe on the page, when the split line is dragged through iframe, the mouse does not listen, I once posted a post to discuss this problem. This example uses a small trick to solve this problem and make the drag smooth.
Copy codeThe Code is as follows:
<Html>
<Head>
<Title> Splitter demo </title>
<Style>
# Splitter_container {
Width: 100%;
Height: 100%;
Border: solid # eee 1px;
Margin: 0px;
Padding: 0px;
Overflow: hidden;
}
# Splitter_left_panel {
Width: 300px;
Height: 100%;
Float: left;
Border: solid blue 0px;
}
# Splitter_bar {
Width: 8px;
Height: 100%;
Float: left;
Background-color: # ccc;
Cursor: col-resize;
}
# Splitter_right_panel {
Height: 100%;
Padding-top: 10px;
}
</Style>
<Script>
/*
* Splitter. js
* Author: sunxing007
* Http://blog.csdn.net/sunxing007
* Date: 08/26/2009
**************************************** **************************************** ******
The css script below is needed for the html page when using splitter. js, please save
It as splitter.css, and modify it carefully.
**************************************** **************************************** ******
# Splitter_container {
Width: 100%;
Height: 100%;
Border: solid # eee 1px;
Margin: 0px;
Padding: 0px;
Overflow: hidden;
}
# Splitter_left_panel {
Width: 300px;
Height: 100%;
Float: left;
Border: solid blue 0px;
}
# Splitter_bar {
Width: 8px;
Height: 100%;
Float: left;
Background-color: # ccc;
Cursor: col-resize;
}
# Splitter_right_panel {
Height: 100%;
Padding-top: 10px;
}
**************************************** **************************************** ******
How to use this splitter?
**************************************** **************************************** ******
<! --
<Html>
<Head>
<Title> Splitter demo </title>
<Link href = "splitter.css" type = "text/css" rel = "stylesheet"/>
<Script src = "splitter. js"> </script>
</Head>
<Body onload = "Splitter. init ({id: 'splitter _ iner '});">
<Div id = "splitter_container">
<Div id = "splitter_left_panel">
Left panel
<! -- You can put any html code here -->
</Div>
<Div id = "splitter_bar"> </div>
<Div id = "splitter_right_panel">
Right panel
<! -- You can put any html code here -->
</Div>
</Div>
</Body>
</Html>
-->
**************************************** **************************************** ******
*/
/** This is a helper function used to get the dom element specified by id **/
Function $ (id) {return document. getElementById (id );}
/** The main functionality of splitter **/
Var Splitter = {
Container: null,
LPanel: null,
RPanel: null,
Bar: null,
MovingBar: null,
// Initial left panel, maximum, minimum width
LPanelInitWidth: '250px ',
LPanelMaxWidth: '500px ',
LPanelMinWidth: '200px ',
RPanelInitWidth: '800px ',
RPanelMaxWidth: '999px ',
RPanelMinWidth: '500px ',
// The Color of the separator when it is dragged.
BarActiveColor: '# 0080ff ',
// Set the Maximum/minimum width for the left panel
IsWidthLimit: true,
Init: function (config ){
If (! Config. id ){
Alert ('can not initialize splitter .');
Return;
}
If ($ (config. id )){
This. container = $ (config. id );
If (! ($ ('Splitter _ left_panel ') & $ ('splitter _ right_panel') & $ ('splitter _ bar '))){
Alert ('can not initialize splitter .');
Return;
}
Else {
This. lPanel = $ ('splitter _ left_panel ');
This. rPanel = $ ('splitter _ right_panel ');
This. bar = $ ('itter _ bar ');
}
}
If (config. lPanelMaxWidth ){
This. lPanelMaxWidth = config. lPanelMaxWidth;
}
If (config. lPanelMinWidth ){
This. lPanelMinWidth = config. lPanelMinWidth;
}
If (config. rPanelMaxWidth ){
This. rPanelMaxWidth = config. rPanelMaxWidth;
}
If (config. rPanelMinWidth ){
This. rPanelMinWidth = config. rPanelMinWidth;
}
If (config. lPanelInitWidth ){
This. lPanelInitWidth = config. lPanelInitWidth;
}
If (config. rPanelInitWidth ){
This. rPanelInitWidth = config. rPanelInitWidth;
}
If (config. barActiveColor ){
This. barActiveColor = config. barActiveColor;
}
// Alert (typeof (config. isWidthLimit ));
If (config. isWidthLimit! = Undefined ){
This. isWidthLimit = config. isWidthLimit;
}
Var mask = document. createElement ('div ');
Document. body. appendChild (mask );
With (mask. style ){
Position = 'absolute ';
Left = '0px ';
Top = '0px ';
ZIndex = 900;
Width = '000000 ';
Height = '20180101 ';
Display = 'none ';
BackgroundColor = '# ccc ';
Filter = 'Alpha (opacity = 10 )';
}
// Background-color: red; filter: alpha (opacity = 60)
Splitter. mask = mask;
This. bar. onmousedown = Splitter. start;
},
Start: function (){
Var o = Splitter. container;
O. lastMouseX = event. x;
Splitter. mask. style. display = '';
Var movingBar = document. createElement ('div ');
Splitter. container. appendChild (movingBar );
With (movingBar. style ){
Position = 'absolute ';
Left = Splitter. bar. offsetLeft + 'px ';
Top = '0px ';
Width = Splitter. bar. currentStyle. width;
Height = '20180101 ';
BackgroundColor = Splitter. barActiveColor;
ZIndex = 999;
Cursor = 'col-resize ';
}
MovingBar. dx = 0;
Splitter. movingBar = movingBar;
Document. onmousemove = Splitter. move;
Document. onmouseup = Splitter. end;
},
Move: function (){
Var o = Splitter. container;
Var dx = event. x-o. lastMouseX;
Splitter. movingBar. dx = Splitter. movingBar. dx + dx;
Var left = parseInt (Splitter. movingBar. style. left) + dx;
Splitter. movingBar. style. left = left;
O. lastMouseX = event. x;
},
End: function (){
Document. onmousemove = null;
Document. onmouseup = null;
Splitter. mask. style. display = 'none ';
Var dx = Splitter. movingBar. dx;
Splitter. container. removeChild (Splitter. movingBar );
Var w = parseInt (Splitter. lPanel. currentStyle. width) + dx;
If (Splitter. isWidthLimit ){
Var _ width = (w> parseInt (Splitter. lPanelMaxWidth )? Splitter. lPanelMaxWidth: (w <parseInt (Splitter. lPanelMinWidth )?
Splitter. lPanelMinWidth: w ));
W = _ width;
}
Splitter. lPanel. style. width = w;
}
};
</Script>
</Head>
<Body onload = "Splitter. init ({id: 'splitter _ iner ', isWidthLimit: true});">
<Div id = "splitter_container">
<Div id = "splitter_left_panel">
<Iframe frameborder = "0" height = "100%" id = "" width = "100%" src = "http://www.jb51.net"> </iframe>
</Div>
<Div id = "splitter_bar"> </div>
<Div id = "splitter_right_panel">
Right-click here to view the source code and save js as splitter. js. <br>
How to Use splitter. js: <br>
You need a div on the page as the container (id = splitter_container): You can drag the effect in this container <br>
The container must have three Divs, representing the left column (id = splitter_left_panel), split line (id = splitter_bar), and right column (id = splitter_right_panel) <br>
The four divs need to be modified with css <br>
<Code>
# Splitter_container {
Width: 100%;
Height: 100%;
Border: solid # eee 1px;
Margin: 0px;
Padding: 0px;
Overflow: hidden;
} <Br>
# Splitter_left_panel {
Width: 300px;
Height: 100%;
Float: left;
Border: solid blue 0px;
} <Br>
# Splitter_bar {
Width: 8px;
Height: 100%;
Float: left;
Background-color: # ccc;
Cursor: col-resize;
} <Br>
# Splitter_right_panel {
Height: 100%;
Padding-top: 10px;
}
</Code>
<Br>
Add an onload event handler to the body to trigger the splitter: <br>
Onload = "Splitter. init ({id: 'splitter _ iner ', isWidthLimit: true});" <br>
The init method of Splitter is used to input a json object as the configuration parameter. The container id is required. <br>
You can also configure more parameters, such as: <br>
IsWidthLimit: Optional values: true and false. Set whether to restrict the width of the left panel. <br>
LPanelMaxWidth: maximum width of the left panel, for example, 500px. <br>
LPanelMinWidth: minimum width of the left panel, for example, 100px. <br>
BarActiveColor: The color when the split line is dragged, for example, 'red', '# 0080ff'. <br>
For more information about web development, see <a href = 'HTTP: // blog.csdn.net/sunxing007'> blog.csdn.net/sunxing007 </a>
</Div>
</Div>
</Body>
</Html>
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
