js列効果実装コード_javascriptスキル-jsチュートリアル-php.cn

js列効果実装コード_javascriptスキル

WBOY

リリース： 2016-05-16 18:47:27

オリジナル

1636 人が閲覧しました

また、インターネット上でいくつかの列分割効果を見てきました。また、jquery プラグイン jquery.splitter.js もありますが、それらは基本的に問題を解決できません。ページ上に iframe がある場合、分割線をドラッグするときiframe を超えるとマウスは動作しません。はい、この問題について議論するために投稿をオープンしました。この例では、小さなトリックを使用してこの問題を解決し、ドラッグをスムーズにします。

コードをコピーコードは次のとおりです:

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

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

/**これは、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