欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

js 分欄效果實(shí)現(xiàn)代碼

 更新時(shí)間：2009年08月29日 00:49:43   作者：  
原創(chuàng)JS分欄效果，面向?qū)ο螅?使用簡(jiǎn)單。
網(wǎng)上我也見到一些分欄效果，也有一個(gè)jquery的插件jquery.splitter.js, 但是他們基本都沒有解決一個(gè)問題：如果頁面上有iframe, 當(dāng)拖動(dòng)分割線經(jīng)過iframe的時(shí)候，鼠標(biāo)不聽使喚了,我曾經(jīng)開過帖子討論過這個(gè)問題。本例采用一個(gè)小技巧解決了這個(gè)問題，使拖動(dòng)流暢。
復(fù)制代碼 代碼如下:

<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_Container'});">
<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,
//左面板初始，最大，最小寬度
    lPanelInitWidth: '250px',
    lPanelMaxWidth: '500px',
    lPanelMinWidth: '200px',
    rPanelInitWidth: '800px',
    rPanelMaxWidth: '999px',
    rPanelMinWidth: '500px',
    //分隔線被拖動(dòng)的時(shí)候的顏色
    barActiveColor: '#0080ff',
    //左面的面板是否設(shè)置最大/最小寬度
    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;
    }
};
</script>
</head>
<body onload="Splitter.init({id: 'splitter_Container', isWidthLimit: true});">
    <div id="splitter_container">
            <div id="splitter_left_panel">
                <iframe frameborder="0" height="100%" id="" width="100%" src="http://www.dbjr.com.cn"></iframe>
            </div>
            <div id="splitter_bar"></div>
            <div id="splitter_right_panel">
                    在此處右鍵察看源代碼并把其中的js保存為splitter.js<br>
                    splitter.js使用方法：<br>
                    頁面上需要有一個(gè)div作為容器(id=splitter_container): 可拖動(dòng)效果就在這個(gè)容器里面進(jìn)行<br>
                    容器里面需要有3個(gè)div,分別代表左欄(id=splitter_left_panel)，分割線(id=splitter_bar), 右欄(id=splitter_right_panel)<br>
                    這4個(gè)div需要用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><br>
給body加上onload事件處理函數(shù),以觸發(fā)splitter: <br>
onload="Splitter.init({id: 'splitter_Container', isWidthLimit: true});" <br>
Splitter的init方法傳入一個(gè)json對(duì)象作為配置參數(shù),其中容器id是必需的.<br>
還可以配置更多的參數(shù), 比如:<br>
isWidthLimit: 可選值true, false, 設(shè)置左面板是否限制寬度;<br>
lPanelMaxWidth: 左面板最大寬度,比如: 500px;<br>
lPanelMinWidth: 左面板最小寬度,比如: 100px;<br>
barActiveColor: 分割線拖動(dòng)的時(shí)候的顏色: 比如'red', '#0080ff';<br>
更多web開發(fā)相關(guān)的內(nèi)容就在<a >blog.csdn.net/sunxing007</a>    
            </div>
    </div>
</body>
</html>

相關(guān)文章

  • 非常不錯(cuò)的彈出一個(gè)div的js代碼

    非常不錯(cuò)的彈出一個(gè)div的js代碼

    看代碼主要是用css控制div的顯示和div的顯示位置和式樣的代碼
    2008-06-06
  • 微信小程序?qū)崿F(xiàn)同時(shí)上傳多張圖片

    微信小程序?qū)崿F(xiàn)同時(shí)上傳多張圖片

    這篇文章主要為大家詳細(xì)介紹了微信小程序?qū)崿F(xiàn)同時(shí)上傳多張圖片，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
    2020-02-02
  • Javascript設(shè)計(jì)模式之裝飾者模式詳解篇

    Javascript設(shè)計(jì)模式之裝飾者模式詳解篇

    本文主要介紹了Javascript設(shè)計(jì)模式之裝飾者模式的相關(guān)知識(shí)。具有一定的參考價(jià)值，下面跟著小編一起來看下吧
    2017-01-01
  • js this 綁定機(jī)制深入詳解

    js this 綁定機(jī)制深入詳解

    這篇文章主要介紹了js this 綁定機(jī)制,結(jié)合實(shí)例形式深入分析了js this 綁定機(jī)制相關(guān)原理、使用技巧與操作注意事項(xiàng),需要的朋友可以參考下
    2020-04-04
  • js生成的驗(yàn)證碼的實(shí)現(xiàn)與技術(shù)分析

    js生成的驗(yàn)證碼的實(shí)現(xiàn)與技術(shù)分析

    本文主要是分享了一段由JS生成驗(yàn)證碼并驗(yàn)證的代碼，非常簡(jiǎn)單，并分析了此方法的實(shí)用性，提供給大家參考下
    2014-09-09
  • 詳解JavaScript對(duì)象的深淺復(fù)制

    詳解JavaScript對(duì)象的深淺復(fù)制

    從層次上來看，對(duì)象的復(fù)制可以簡(jiǎn)單地分為淺復(fù)制和深復(fù)制，顧名思義，淺復(fù)制是指只復(fù)制一層對(duì)象的屬性，不會(huì)復(fù)制對(duì)象中的對(duì)象的屬性，對(duì)象的深復(fù)制會(huì)復(fù)制對(duì)象中層層嵌套的對(duì)象的屬性。本文是我在復(fù)制對(duì)象方面的一些心得總結(jié)，由淺復(fù)制到深復(fù)制，感興趣的朋友一起學(xué)習(xí)吧
    2017-03-03
  • get post jsonp三種數(shù)據(jù)交互形式實(shí)例詳解

    get post jsonp三種數(shù)據(jù)交互形式實(shí)例詳解

    本文通過實(shí)例給大家詳細(xì)介紹了get post jsonp三種數(shù)據(jù)交互形式，非常不錯(cuò)，具有參考借鑒價(jià)值，需要的的朋友參考下吧
    2017-08-08
  • js數(shù)字輸入框(包括最大值最小值限制和四舍五入)

    js數(shù)字輸入框(包括最大值最小值限制和四舍五入)

    以前需要做一個(gè)數(shù)字輸入的InputBox,結(jié)果無奈需求太BT，搞得焦頭爛額，重做了無數(shù)次。無奈之下，再次Google，發(fā)現(xiàn)早有成熟的插件了(悶在家里造輪子果然不好啊)，autoNumeric使用方便，功能強(qiáng)大，現(xiàn)在介紹給大家，一個(gè)非常好的jquery plugin。
    2009-11-11
  • JavaScript通過HTML的class來獲取HTML元素的方法總結(jié)

    JavaScript通過HTML的class來獲取HTML元素的方法總結(jié)

    除了getElementsByClassName()函數(shù),我們可以自己動(dòng)手編寫程式來通過class獲取元素,接下來我們整理了一下JavaScript通過HTML的class來獲取HTML元素的方法總結(jié),需要的朋友可以參考下
    2016-05-05
  • JavaScript實(shí)現(xiàn)美化滑塊效果

    JavaScript實(shí)現(xiàn)美化滑塊效果

    這篇文章主要為大家詳細(xì)介紹了JavaScript實(shí)現(xiàn)美化滑塊效果，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
    2019-05-05

最新評(píng)論