Home >Web Front-end >JS Tutorial >js column effect implementation code_javascript skills

js column effect implementation code_javascript skills

WBOYOriginal: 2016-05-16 18:47:271634browse

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 fail to solve a problem: if there is an iframe on the page, when dragging the dividing line past the iframe, the mouse will not operate. Yes, I have opened a post to discuss this issue. This example uses a small trick to solve this problem and make dragging smooth.

Copy code The code is as follows:

Splitter demo

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

left panel

right panel

-->
************************ *************************************************** *************
*/

/**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, maximum and minimum width of the left panel
lPanelInitWidth: '250px',
lPanelMaxWidth: '500px',
lPanelMinWidth: '200px ',
rPanelInitWidth: '800px',
rPanelMaxWidth: '999px',
rPanelMinWidth: '500px',
//The color of the divider when it is dragged
barActiveColor: '# 0080ff',
//Whether the maximum/minimum width is set 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 = $('splitter_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 = '100%';
height = '100%';
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 = '100%';
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;
}
};

 "" width="100%" src="http://www.jb51.net">
 ;/div>
 How to use splitter.js:< ;br>
There needs to be a div on the page as a container (id=splitter_container): the draggable effect is carried out in this container

There need to be 3 divs in the container, representing the left column ( id=splitter_left_panel), dividing line (id=splitter_bar), right column (id=splitter_right_panel)

>
#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;
}< ;br>
#splitter_bar{
width: 8px;
height: 100%;
float: left;
background-color: #ccc;
cursor: col-resize;
}

#splitter_right_panel{
height: 100%;
padding-top: 10px;
}

Add onload event handler to body to trigger splitter:

onload="Splitter.init({id: 'splitter_Container', isWidthLimit: true});" 
The init method of Splitter passes in a json object as a configuration parameter, of which the container id is required.

You can also configure more parameters, such as:

isWidthLimit : optional value true, false, set whether to limit the width of the left panel;

lPanelMaxWidth: the maximum width of the left panel, for example: 500px;

lPanelMinWidth: the minimum width of the left panel, for example: 100px ;

barActiveColor: the color when the dividing line is dragged: such as 'red', '#0080ff';

More web development related content is at blog.csdn.net/sunxing007

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：jsTree tree control (based on jQuery, super powerful) [recommended]_javascript skillsNext article：jsTree tree control (based on jQuery, super powerful) [recommended]_javascript skills

See more

js column effect implementation code_javascript skills

Related articles