ホームページ > 記事 > ウェブフロントエンド > js列効果実装コード_javascriptスキル
js列効果実装コード_javascriptスキル
- WBOYオリジナル
- 2016-05-16 18:47:271611ブラウズ
また、インターネット上でいくつかの列分割効果を見てきました。また、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 要素を取得するために使用されるヘルパー関数です。*/
function $(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('スプリッターを初期化できません。'); ;
}
else{
this.lPanel = $('splitter_left_panel');
this.rPanel = $('splitter_right_panel'); );
}
}
if(config.lPanelMaxWidth){
this.lPanelMaxWidth = config.lPanelMaxWidth;
if(config.lPanelMinWidth); >this.lPanelMinWidth = config.lPanelMinWidth;
}
if(config.rPanelMaxWidth){
this.rPanelMaxWidth = config.rPanelMaxWidth;
>this.rPanelMinWidth = config.rPanelMinWidth;
}
if(config.lPanelInitWidth){
this.lPanelInitWidth = config.lPanelInitWidth;
>this.rPanelInitWidth = config.rPanelInitWidth;
}
if(config.barActiveColor){
this.barActiveColor = config.barActiveColor;
//alert(typeof(config.isWidthLimit) ));
if (config.isWidthLimit!=unknown){
this.isWidthLimit = config.isWidthLimit;
var マスク = document.createElement('div'); .body.appendChild(mask) ;
with(mask.style){
position = 'absolute';
top = '0px'; 900;
幅 = '100%';
表示 = '#ccc'; =10)';
}
//background-color:red;filter:alpha(opacity=60)
Splitter.mask = マスク
this.bar.onmousedown = Splitter.start;
},
start: function(){
var o = Splitter.container;
o.lastMouseX =event.x;
Splitter.mask.style.display = ''; 🎜>var moveBar = document.createElement('div');
with(movingBar.style){
position = 'absolute'; Splitter.bar.offsetLeft 'px ';
top = '0px';
height = '100%';
zIndex = 999;
cursor = 'col-resize';
movingBar.dx = 0;
Splitter.onmousemove = Splitter.move ;
document.onmouseup = Splitter.end;
},
move: function(){
var o = Splitter.container;
var dx = events.x - o.lastMouseX;
Splitter.movingBar.dx = Splitter.movingBar.dx;
var left = parseInt(Splitter.movingBar.style.left) = left; o.lastMouseX = イベント.x ;
},
end: function(){
document.onmousemove = null;
Splitter.mask.style.display = 'none';
var dx = Splitter.movingBar(Splitter.movingBar);
var w = parseInt(Splitter.lPanel.currentStyle.width); 🎜>if(Splitter.isWidthLimit ){
var _width = (w > parseInt(Splitter.lPanelMaxWidth) ? Splitter.lPanelMaxWidth : (w < parseInt(Splitter.lPanelMinWidth) ?
Splitter.lPanelMinWidth : w) );
w = _width;
}
}; ;
" "width =" 100％ "src =" http://www.jb51.net "＆gt;＆lt;/iframe＆gt;
;/div＆gt;
スプリッターの使用方法.js:
ページ上にコンテナとして div が必要です (id=splitter_container): ドラッグ可能な効果はこのコンテナ内で実行されます
には 3 つの div が必要です左の列 (id=splitter_left_panel)、分割線 (id=splitter_bar)、右の列 (id=splitter_right_panel) を表すコンテナ
>
#splitter_container{
width: 100% ;
高さ: 100%;
ボーダー: 0px;
オーバーフロー: 非表示; >#splitter_left_panel{
幅: 300px;
高さ: 100%;
ボーダー: 青 0px>}< ;br> 🎜>幅: 8px;
浮動小数点: 左;
カーソル:
} #splitter_right_panel{
高さ: 100%;
パディングトップ: 10px;
スプリッターをトリガーするためのハンドラーを本体に追加します:
onload="Splitter.init({id: 'splitter_Container', isWidthLimit: true});"
Splitter の init メソッドはjson オブジェクトを設定パラメータとして使用します。コンテナ ID が必要です。
次のような追加パラメータも設定できます。
isWidthLimit : オプションの値 true、false、次のいずれかを設定します。左パネルの幅を制限します。
lPanelMaxWidth: 左パネルの最大幅、例: 500px;
lPanelMinWidth: 左パネルの最小幅、例: 100px ;
barActiveColor: 分割線をドラッグしたときの色: 'red'、'#0080ff';
その他の Web 開発関連のコンテンツは blog.csdn.net/sunxing007
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。