Js 分栏

最新推荐文章于 2023-02-09 11:44:57 发布
最新推荐文章于 2023-02-09 11:44:57 发布
阅读量749 收藏
点赞数
分类专栏： 前端（Js Css）相关 文章标签： border div function float null stylesheet

<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 οnlοad="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',  
    //分隔线被拖动的时候的颜色  
    barActiveColor: '#0080ff',  
    //左面的面板是否设置最大/最小宽度  
    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;  
        SplitterSplitter.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 οnlοad="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.google.com"></iframe> 
            </div> 
            <div id="splitter_bar"></div> 
            <div id="splitter_right_panel"> 
                    在此处右键察看源代码并把其中的js保存为splitter.js<br> 
                    splitter.js使用方法：<br> 
                    页面上需要有一个div作为容器(id=splitter_container): 可拖动效果就在这个容器里面进行<br> 
                    容器里面需要有3个div,分别代表左栏(id=splitter_left_panel)，分割线(id=splitter_bar), 右栏(id=splitter_right_panel)<br> 
                    这4个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事件处理函数,以触发splitter: <br> 
οnlοad="Splitter.init({id: 'splitter_Container', isWidthLimit: true});" <br> 
Splitter的init方法传入一个json对象作为配置参数,其中容器id是必需的.<br> 
还可以配置更多的参数, 比如:<br> 
isWidthLimit: 可选值true, false, 设置左面板是否限制宽度;<br> 
lPanelMaxWidth: 左面板最大宽度,比如: 500px;<br> 
lPanelMinWidth: 左面板最小宽度,比如: 100px;<br> 
barActiveColor: 分割线拖动的时候的颜色: 比如'red', '#0080ff';<br> 
更多web开发相关的内容就在<a href='http://blog.csdn.net/sunxing007'>blog.csdn.net/sunxing007</a>      
            </div> 
    </div> 
</body> 
</html> 


本文来自CSDN博客，转载请标明出处：http://blog.csdn.net/sunxing007/archive/2009/08/28/4492453.aspx

JerryZhou_
关注
专栏目录
javascript实用小技巧—实现分栏显示
程雅丽的博客
10-13 4216
记得给师哥师姐测试考试系统的时候，看到他们的考试页面可以实现隐藏左边的考生信息部分，当时觉得好高大上，好人性化。现在学了javascript，我也能实现这个功能了，下面来显摆一下。 1.页面设计： (1).html代码： js分栏 .alignment{ text-align: center; } //...... 栏目一
js左右伸缩分栏 类似百度地图布局分栏效果
08-03
综上所述，实现"js左右伸缩分栏 类似百度地图布局分栏效果"主要涉及以下几个关键点：HTML布局结构、CSS样式设计、JavaScript事件处理、地图API的使用，以及动态调整布局的逻辑。通过结合这些技术，我们可以创建出一...
js 分栏效果实现代码
12-09
网上我也见到一些分栏效果，也有一个jquery的插件jquery.splitter.js, 但是他们基本都没有解决一个问题：如果页面上有iframe, 当拖动分割线经过iframe的时候，鼠标不听使唤了,我曾经开过帖子讨论过这个问题。本例采用一个小技巧解决了这个问题，使拖动流畅。 代码如下:<html> <head> <title>Splitter demo</title> <style>             #splitter_container{              width: 100%;              height: 100%;              bor
纯js实现的分栏效果
08-28
原创JS分栏效果，面向对象， 使用简单。网上我也见到一些分栏效果，也有一个jquery的插件jquery.splitter.js， 但是他们基本都没有解决一个问题：如果页面上有iframe, 当拖动分割线经过iframe的时候，鼠标不听使唤了。本例采用一个小技巧解决了这个问题，使拖动流畅。
JavaScript（二）--实现分栏
邱慕夏 没有比脚更长的路，没有比人更高的山
09-05 2602
Javascript中讲到了分栏的小实例，这篇文章就写一个小的例子吧，从这个例子中看看我们都学到什么？
JS分栏
漠漠水田飞白鹭
10-04 868
效果图：
JavaScript实现左右分栏宽度拉伸
qq_64314976的博客
07-14 870
JavaScript实现左右分栏宽度拉伸
JavaScript实现分页分栏
一火的专栏
12-21 713
JavaScript实现分页分栏，实现后的效果图如下： Javascript代码下载地址：http://www.zrscsoft.com/sitepic/12049.html
vue多分栏
weixin_41463944的博客
07-31 1586
<!-- * @Author: your name * @Date: 2021-07-31 15:38:29 * @LastEditTime: 2021-07-31 16:48:27 * @LastEditors: Please set LastEditors * @Description: In User Settings Edit * @FilePath: \internetPlatform\src\views\zhangming\systemManage\test3.vue --&g
javascript实现分栏显示小技巧附图
10-25
标题中的“javascript实现分栏显示小技巧附图”指的是使用JavaScript技术来实现网页中的分栏布局，并通过图像来辅助说明。这种布局常用于创建多列结构，如在考试页面中隐藏或显示考生信息部分，提高用户体验。 描述...
wordexport.js导出word 分栏问题
weixin_48205715的博客
02-09 430
wordexport.js导出word分栏、纵向横向问题
纯js 分栏
lzj0470的专栏
11-02 152
[code="java"] 纯JS 分栏 #splitter_container{ width: 100%; height: 100%; border: solid #eee 1px; margin: 0px; padding: 0px; overflow: hidden; } #splitter_left...
基于Vue框架的鱿鱼导航前端开发设计源码
10-02
该项目是一款基于Vue框架开发的鱿鱼导航前端设计源码，包含122个文件，涵盖23个JavaScript文件、23个Java文件、10个PNG图片、9个Vue组件、7个CSS样式表、5个XML配置文件、4个JSON数据文件、4个YAML配置文件、4个JPG图片文件和3个Git忽略文件。该项目以HTML和CSS为基础，通过JavaScript和Vue.js实现动态交互和用户界面设计。
安徽大学在江西2020-2024各专业最低录取分数及位次表.pdf
10-02
那些年，与你同分同位次的同学都去了哪里？全国各大学在江西2020-2024年各专业最低录取分数及录取位次数据，高考志愿必备参考数据
2021美赛D题参考翻译（第一版）（PDF文档）
最新发布
10-02
2021美赛D题参考翻译（第一版）（PDF文档） 【音乐影响力的量化模型】
Xshell-8.0.0057p.exe
10-02
Xshell-8.0.0057安装包
CPA 经济法 基础班 第5章 公司法律制度 股份有限公司（8）-PPT-6页.pdf
10-02
CPA 经济法 基础班 第5章 公司法律制度 股份有限公司（8）-PPT-6页.pdf
面向对象的原创JS分栏效果实现，解决iframe拖动问题
"本文介绍了一种原创的JavaScript分栏效果实现方法，该方法基于面向对象设计，使用简单，并且解决了在页面中包含`iframe`时，拖动分隔线导致鼠标控制失灵的问题。通过引入特定的样式和脚本，可以创建具有可调整宽度...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值