js 열 효과 구현 code_javascript 기술
- WBOY원래의
- 2016-05-16 18:47:271630검색
또한 인터넷에서 일부 열 분할 효과를 보았고 jquery 플러그인 jquery.splitter.js도 있지만 기본적으로 문제를 해결하지 못합니다. 페이지에 iframe이 있는 경우 구분선을 드래그할 때 iframe을 지나면 마우스가 작동하지 않습니다. 예, 이 문제를 논의하기 위해 게시물을 열었습니다. 이 예에서는 이 문제를 해결하고 드래그를 부드럽게 만들기 위해 작은 트릭을 사용합니다.
코드 복사 코드는 다음과 같습니다.
<script> <br>/* <br>* splitter.js <br>* author: sunxing007 <br>* http://blog.csdn.net/sunxing007 <br>* date: 08/26/2009 <br><br>************************************************************************************** <br>The css script below is needed for the html page when using splitter.js, please save <br>it as splitter.css, and modify it carefully. <br>************************************************************************************** <br>#splitter_container{ <br>width: 100%; <br>height: 100%; <br>border: solid #eee 1px; <br>margin: 0px; <br>padding: 0px; <br>overflow: hidden; <br>} <br>#splitter_left_panel{ <br>width: 300px; <br>height: 100%; <br>float: left; <br>border: solid blue 0px; <br>} <br>#splitter_bar{ <br>width: 8px; <br>height: 100%; <br>float: left; <br>background-color: #ccc; <br>cursor: col-resize; <br>} <br>#splitter_right_panel{ <br>height: 100%; <br>padding-top: 10px; <br>} <br>************************************************************************************** <br>How to use this splitter? <br>************************************************************************************** <br><!-- <br> <html> <br><head> <br><title>Splitter demo</title> <br><link href="splitter.css" type="text/css" rel="stylesheet" /> <br><script src="splitter.js"></script>
left panel
right panel
* ************************************************* ** *************
*/
/**이것은 id *로 지정된 dom 요소를 가져오는 데 사용되는 도우미 함수입니다.*/
함수 $(id){return document.getElementById (id );}
/**스플리터의 주요 기능 **/
var Splitter = {
컨테이너: null,
lPanel: null,
rPanel: null,
bar: null,
movingBar: null,
//초기, 왼쪽 패널의 최대 및 최소 너비
lPanelInitWidth: '250px',
lPanelMaxWidth: '500px',
lPanelMinWidth: '200px',
rPanelInitWidth: '800px',
rPanelMaxWidth: '999px',
rPanelMinWidth: '500px',
//드래그할 때 구분선의 색상
barActiveColor: '# 0080ff',
//왼쪽 패널의 최대/최소 너비 설정 여부
isWidthLimit: true,
init: function(config){
if(!config.id ){
alert( '스플리터를 초기화할 수 없습니다.');
return;
}
if($(config.id)){
this.container = $(config.id );
if( !($('splitter_left_panel')&&$('splitter_right_panel')&&$('splitter_bar'))){
alert('스플리터를 초기화할 수 없습니다.')
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!=undefine){
this.isWidthLimit = config.isWidthLimit;
}
var Mask = document.createElement('div')
document .body.appendChild(mask) ;
with(mask.style){
위치 = '절대';
left = '0px';
zIndex = 900;
너비 = '100%';
표시 = '없음';
필터 = '알파(불투명도) =10)';
}
// background-color:red;filter:alpha(opacity=60)
Splitter.mask = 마스크
this.bar.onmousedown = Splitter.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'; Splitter.bar.offsetLeft 'px';
top = '0px';
width = Splitter.bar.currentStyle.width;
height = '100%';
zIndex = 999;
cursor = 'col-resize';
}
movingBar.dx = 0;
Splitter.movingBar
document.onmousemove; ;
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)
Splitter.movingBar.style.left
o.lastMouseX = event.x ;
},
end: function(){
document.onmousemove = null;
document.onmouseup =
Splitter.mask.style.display = '없음';
var dx = Splitter.movingBar.dx;
Splitter.container.removeChild(Splitter.movingBar)
var w =parseInt(Splitter.lPanel.currentStyle.width)
if(Splitter.isWidthLimit ){
var _width = (w >parseInt(Splitter.lPanelMaxWidth) ? Splitter.lPanelMaxWidth : (w
}
Splitter.lPanel.style.width = w;
}
}
;
"" width="100%" src="http://www.jb51.net"
;/div>
스플리터 사용 방법 .js:< ;br>
페이지에 컨테이너로 div가 있어야 합니다(id=splitter_container). 드래그 가능한 효과는 이 컨테이너에서 수행됩니다.
3개의 div가 있어야 합니다. 왼쪽 열( id=splitter_left_panel), 구분선(id=splitter_right_panel), 오른쪽 열(id=splitter_right_panel)을 나타내는 컨테이너
>
#splitter_container{
너비: 100% ;
높이: 100%;
여백: 0px;
오버플로: 숨김; >#splitter_left_panel{
너비: 300px;
높이: 100%;
float: 왼쪽; 테두리: 파란색 0px;< ;br> 🎜>너비: 8px;
높이: 100%;
배경색: #ccc;
커서: col-resize; >#splitter_right_panel{
높이: 100%;
padding-top:
}
스플리터를 트리거하기 위한 핸들러:
onload="Splitter.init({id: 'splitter_Container', isWidthLimit: true});" < br> json 객체를 구성 매개변수로 사용하며, 컨테이너 ID가 필요합니다.
다음과 같은 추가 매개변수를 구성할 수도 있습니다.
isWidthLimit: 선택적 값 true, false 왼쪽 패널의 너비를 제한합니다.
lPanelMaxWidth: 왼쪽 패널의 최대 너비(예: 500px;
lPanelMinWidth: 왼쪽 패널의 최소 너비) 100px ;
barActiveColor: 구분선을 드래그할 때의 색상: 'red', '#0080ff';
더 많은 웹 개발 관련 콘텐츠는 blog.csdn.net/sunxing007
성명：
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.