HTML+JavaScript+CSS DIY 分隔条splitter

一、需求分析

现在电脑的屏幕越来越大，为了利用好宽屏，我们在设计系统UI时喜欢在左侧放个菜单或选项面板，在右边显示与菜单或选项对应的内容，两者之间用分隔条splitter来间隔，并可以通过拖动分隔条splitter来动态调研左右两边的宽度。

要在网页上实现这种UI界面，也有不少现成的组件，比如jQuery中提供的Splitter.js，不过自已用HTML+JavaScript+CSS来DIY一下，从而加深对HTML+JavaScript+CSS的了解，也是不错的选择。

二、构造界面

首先我们来打造界面。在id 为divMain 的<div>中，左边有一个id 为 divLeft的<div>，右边有一个左边有一个id 为 divRight的<div>，两者中间有一个id为divSplitter 的<div>作为分隔条splitter。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
	<meta name="Generator" content="EditPlus®">
	<meta name="Author" content="PurpleEndurer">
	<meta name="Keywords" content="HTML,JavaScript,CSS,DIY,分隔条,splitter,演示">
	<meta name="Description" content="HTML+JavaScript+CSS DIY 分隔条演示splitter">
    <title>HTML+JavaScript+CSS DIY 分隔条演示splitter</title>
    <style>
        #divMain {
            position: relative;
            width: 800px;
            height: 300px;
        }

        #divLeft {
            width: 200px;
            background: #ffff99;
            position: absolute;
            top: 0;
            bottom: 0;
        }

        #divRight {
            margin-left: 210px;
            background: #ccffcc;
            height: 100%;
        }

		#divSplitter {
            position: absolute;
            top: 0;
            bottom: 0;
            left: 200px;
            width: 10px;
            background: #e7e7e7;
            box-shadow: 0px 0px 8px #ccc;
            cursor: w-resize;
	    vertical-align:middle;
        }

		p.title {
			background: #ccccff; 
			color:yellow;
			border-top:1px solid purple;
			border-left:1px solid purple;
			text-align:center;
			width: 800px;
			margin: 0px;
    }
    </style>
</head>

<body>
  <p class="title">HTML+JavaScript+CSS分隔条演示splitter</p>
  
    <div id="divMain">
        <div id="divLeft">left:0123456789abcdefghijklmnopqrstuvwxyz</div>
        <div id="divRight">right:0123456789abcdefghijklmnopqrstuvwxyz</div>
        <!-- 分隔条 -->
        <div id="divSplitter" title="我是分隔条，可以双击我^_^"></div>
    </div>
</body>

</html>

三、编写代码

（一）定义全局变量和常量

	var	divMain	    = document.getElementById('divMain'),
		divLeft		= document.getElementById('divLeft'),
		divRight	= document.getElementById('divRight'),
		divSplitter	= document.getElementById('divSplitter');

	// 改变分隔条左右宽度所需常量
    const	divOrgLeftWidth	    = 200,  // 左边部分原始宽度
			rightDivLeftGap	    = 10,  // 右边部分与左边部分的距离
			divSplitterMinLeft	= 20, // 分隔条左边部分最小宽度
			divSplitterMaxLeft	= 780;// 分隔条左边部分最大宽度

 （二）挂接鼠标事件

在windows.onload中挂接divSplitter的onmousedown()和ondblclick()，其中onmousedown()用于拖放分隔条，ondblclick()用于双击分隔条隐藏左边的内容，比如菜单或选项，尽可能显示右边的内容。

    window.onload = function ()
	{
        divSplitter.onmousedown = splitDiv;
		divSplitter.ondblclick = hideOrShowLeft;
    };

（三）双击分隔条代码

当用户双击分隔条时，我们就隐藏左边的内容，比如菜单或选项，为右边的内容提供更大显示范围。

这里我们需要先判断左边否已经处于隐藏状态，如果左边否已经处于隐藏状态，那么就恢复到系统默认状态，否则就将左边的内容隐藏起来，尽可能显示右边的内容。

	function hideOrShowLeft(e)
	{
		if ('none'==divLeft.style.display)
		{
			divLeft.style.display = 'block';
			divLeft.style.width = divSplitter.style.left = divOrgLeftWidth + 'px';
			divSplitter.innerHTML = '';
			divRight.style.marginLeft = '210px';
		}
		else
		{
			divLeft.style.display = 'none';
            divSplitter.style.left = '0px';
			divSplitter.innerHTML ='<p style="padding-top:100px;"><span style="color:red; font-size:16pt;">&gt;</span></p>';
            divRight.style.marginLeft = '10px';
		}
		return false;
	}//	 hideOrShowLeft(e)

（四）拖放分隔条代码

在响应鼠标拖放事件时，我们首先要判断左边否已经处于隐藏状态，如果左边否已经处于隐藏状态，那么就恢复到系统默认状态，否则进行拖放操作：

    // 拖动分隔条操作
    function splitDiv(e)
	{
		if ('none'==divLeft.style.display)
		{
			hideOrShowLeft();
			return false;
		}
        // 记录下初始位置的值
        var disX = e.clientX;
        divSplitter.left = divSplitter.offsetLeft;

        document.onmousemove = function (e) 
		{
            var moveX = e.clientX - disX;   // 鼠标拖动的偏移距离
            var iT = divSplitter.left + moveX,    // 分隔条相对父级定位的 left 值
                maxT = divMain.clientWidth - divSplitter.offsetWidth;

            //iT < 0 && (iT = 0);
            //iT > maxT && (iT = maxT);
			if (iT < 0)
			{
				iT = 0;
			}
			else
			{
				if (iT > maxT)
				{
					iT = maxT;
				}
			}

            if (iT > divSplitterMinLeft && iT < divSplitterMaxLeft)
			{
				divLeft.style.width = divSplitter.style.left = iT + 'px';
				divRight.style.marginLeft = iT + rightDivLeftGap + 'px';
			}	//document.onmousemove()

            return false;
        };

        // 鼠标放开的时候取消操作
        document.onmouseup = function ()
		{
            document.onmousemove = null;
            document.onmouseup = null;
        };	  // document.onmouseup()
    }//splitDiv(e)

四、改进显示

上面的演示代码中，左右两边显示的内容都比较短。实际应用中，两边显示的内容多。

当我们把代码界面定义改为：

	<p class="title">HTML+JavaScript+CSS分隔条演示splitter by PurpleEndurer</p>

	<div id="divMain">
        <div id="divLeft">left:0123456789abcdefghijklmnopqrstuvwxyz</div>
        <div id="divRight">right:0123456789abcdefghijklmnopqrstuvwxyz</div>
        <!-- 分隔条 -->
        <div id="divSplitter" title="我是分隔条，可以双击我^_^"></div>
	</div>

问题就来了：

两边的内容会重叠。

我们需要通过css来解决这个问题。

解决方法有两种：

（一）让内容自动换行

利用word-wrap 来实现：

<style>
		div	{
			word-wrap: break-word; /*自动换行*/
		}

效果如下：

当内容较多时，自动换行显示效果并不是很好。所以我们更喜欢用下面的另一种方法 。

（二）超出部分隐藏

要隐藏超出部分，需要用到display、overflow等几个属性：

		div	{
			display: -webkit-box;  /*  将对象作为弹性伸缩盒子模型显示  */
			-webkit-box-orient: vertical; /* 设置或检索伸缩盒对象的子元素的排列方式  */
			overflow: hidden;/* 超出部分隐藏  */
		}

效果如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
	<meta name="Generator" content="EditPlus®">
	<meta name="Author" content="PurpleEndurer">
	<meta name="Keywords" content="HTML,JavaScript,CSS,DIY,分隔条,splitter,演示">
	<meta name="Description" content="HTML+JavaScript+CSS DIY 分隔条演示splitter">
    <title>HTML+JavaScript+CSS DIY 分隔条演示splitter</title>
    <style>
		div	{
			/*--word-wrap:break-word; 自动换行 */
			display: -webkit-box;  /*  将对象作为弹性伸缩盒子模型显示  */
			-webkit-box-orient: vertical; /* 设置或检索伸缩盒对象的子元素的排列方式  */
			overflow: hidden;/* 超出部分隐藏  */
		}
        #divMain {
            position: relative;
            width: 800px;
            height: 300px;
            /*margin: 20px auto;*/
        }

        #divLeft {
            width: 200px;
            background: #ffff99;
            position: absolute;
            top: 0;
            bottom: 0;
        }

        #divRight {
            margin-left: 210px;
            background: #ccffcc;
            height: 100%;
        }

        #divSplitter {
            position: absolute;
            top: 0;
            bottom: 0;
            left: 200px;
            width: 10px;
            background: #e7e7e7;
            box-shadow: 0px 0px 8px #ccc;
            cursor: w-resize;
	    vertical-align:middle;
        }

    p.title {
          background: #ccccff; 
          color:yellow;
          border-top:1px solid purple;
          border-left:1px solid purple;
          text-align:center;
	  width: 800px;
	  margin: 0px;
    }
    </style>
</head>

<body>
  <p class="title">HTML+JavaScript+CSS分隔条演示splitter</p>
  
    <div id="divMain">
        <div id="divLeft">left:0123456789abcdefghijklmnopqrstuvwxyz</div>
        <div id="divRight">right:0123456789abcdefghijklmnopqrstuvwxyz</div>
        <!-- 分隔条 -->
        <div id="divSplitter" title="我是分隔条，可以双击我^_^"></div>
    </div>
</body>
<script>
    // 改变分隔条左右宽度所需常量
    const divOrgLeftWidth = 200;  // 左边部分原始宽度
    const rightDivLeftGap = 10;//20;  // 右边部分与左边部分的距离
    //const divSplitterWidth = 10; // 分隔条宽度
    const divSplitterMinLeft = 20; // 分隔条左边部分最小宽度
    const divSplitterMaxLeft = 780;// 分隔条左边部分最大宽度

    var divMain = document.getElementById('divMain'),
        divLeft = document.getElementById('divLeft'),
        divRight = document.getElementById('divRight'),
        divSplitter = document.getElementById('divSplitter');


	function hideOrShowLeft(e)
	{
		if ('none'==divLeft.style.display)
		{
			divLeft.style.display = 'block';
			divLeft.style.width = divSplitter.style.left = divOrgLeftWidth + 'px';
			divSplitter.innerHTML = '';
			divRight.style.marginLeft = '210px';
		}
		else
		{
			divLeft.style.display = 'none';
            divSplitter.style.left = '0px';
			divSplitter.innerHTML ='<p style="padding-top:100px;"><span style="color:red; font-size:16pt;">&gt;</span></p>';
            divRight.style.marginLeft = '10px';
		}
		return false;
	}

    // 分隔条操作
    function splitDiv(e)
	{
		if ('none'==divLeft.style.display)
		{
			hideOrShowLeft();
			return false;
		}
        // 记录下初始位置的值
        var disX = e.clientX;
        divSplitter.left = divSplitter.offsetLeft;

        document.onmousemove = function (e) 
		{
            var moveX = e.clientX - disX;   // 鼠标拖动的偏移距离
            var iT = divSplitter.left + moveX,    // 分隔条相对父级定位的 left 值
                maxT = divMain.clientWidth - divSplitter.offsetWidth;

            //iT < 0 && (iT = 0);
            //iT > maxT && (iT = maxT);
			if (iT < 0)
			{
				iT = 0;
			}
			else
			{
				if (iT > maxT)
				{
					iT = maxT;
				}
			}

            if (iT > divSplitterMinLeft && iT < divSplitterMaxLeft)
			{
				divLeft.style.width = divSplitter.style.left = iT + 'px';
				divRight.style.marginLeft = iT + rightDivLeftGap + 'px';
			}

            return false;

        };

        // 鼠标放开的时候取消操作
        document.onmouseup = function ()
		{
            document.onmousemove = null;
            document.onmouseup = null;
        };
    }//

    window.onload = function ()
	{
        divSplitter.onmousedown = splitDiv;
		divSplitter.ondblclick = hideOrShowLeft;
    };
</script>
</html>

五、完整代码

完整的代码已上传资源区等待审核。

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：/a/101726.html

如若内容造成侵权/违法违规/事实不符，请联系我们进行投诉反馈qq邮箱809451989@qq.com，一经查实，立即删除！

相关文章

GaussDB数据库SQL系列-行列转换

GaussDB数据库SQL系列-行列转换

一、前言 二、简述 1、行转列概念 2、列转行概念 三、GaussDB数据库的行列转行实验示例 1、行转列示例 1&#xff09;创建实验表&#xff08;行存表&#xff09; 2&#xff09;静态行转列 3&#xff09;行转列&#xff08;结果值&#xff1a;拼接式&#xff09; 4&…
阅读更多...
maven部署

maven部署

一、下载Maven 地址&#xff1a;Maven – Download Apache Maven 二、解压缩&#xff0c;设置环境变量 tar -xvf apache-maven-3.8.8-bin.tar.gz export MAVEN_HOME/opt/apache-maven-3.8.8 export PATH$MAVEN_HOME/bin:$PATH echo $MAVEN_HOME echo $PATH mvn -v
阅读更多...
Android AGP版本

Android AGP版本

做个记录&#xff1a; Android AGP版本 https://developer.android.com/studio/releases/gradle-plugin?hlzh-cn
阅读更多...
mac idea启动没反应 无法启动

mac idea启动没反应 无法启动

遇到的问题如下&#xff1a; 启动idea&#xff0c;没反应 无法启动&#xff0c;不论破解还是别的原因&#xff0c;总之无法启动了 应用程序–找到idea–右击显示包内容–Contents–MacOS–打开idea 弹出框提示如下&#xff1a; 双击这个idea可执行文件 1&#xff09;先查看日志…
阅读更多...
Kafka3.0.0版本——Leader故障处理细节原理

Kafka3.0.0版本——Leader故障处理细节原理

目录 一、服务器信息二、服务器基本信息及相关概念2.1、服务器基本信息2.2、LEO的概念2.3、HW的概念 三、Leader故障处理细节 一、服务器信息 三台服务器 原始服务器名称原始服务器ip节点centos7虚拟机1192.168.136.27broker0centos7虚拟机2192.168.136.28broker1centos7虚拟机…
阅读更多...
docker安装grafana,prometheus,exporter以及springboot整合详细教程(GPE)

docker安装grafana,prometheus,exporter以及springboot整合详细教程(GPE)

springboot项目ip:192.168.168.1 测试服务器ip:192.168.168.81 文章来自互联网,自己略微整理下,更容易上手,方便自己,方便大家 最终效果: node springboot 1.下载镜像 docker pull prom/node-exporter docker pull prom/mysqld-exporter docker pull google/cadvisor dock…
阅读更多...
「黄钊的AI日报·第一季」免费试读！最后5天，早鸟价60元～

「黄钊的AI日报·第一季」免费试读！最后5天，早鸟价60元～

1、每天5条AI内容点&#xff1a;不是常见的新闻汇总模式&#xff0c;而是站在AI产品经理的视角&#xff0c;把每篇AI干货的最核心内容&#xff0c;直接拎出来、甚至用自己的话来描述&#xff0c;是在展示“what I see”&#xff0c;和原文已经不是一个东西了&#xff01; 2、已…
阅读更多...
MIT6.824 Spring2021 Lab 1: MapReduce

MIT6.824 Spring2021 Lab 1: MapReduce

文章目录 0x00 准备0x01 MapReduce简介0x02 RPC0x03 调试0x04 代码coordinator.gorpc.goworker.go 0x00 准备 阅读MapReduce论文配置GO环境 因为之前没用过GO,所以 先在网上学了一下语法A Tour of Go 感觉Go的接口和方法的语法和C挺不一样, 并发编程也挺有意思 0x01 MapRed…
阅读更多...
OpenAI推出ChatGPT企业版，提供更高安全和隐私保障

OpenAI推出ChatGPT企业版，提供更高安全和隐私保障

&#x1f989; AI新闻 &#x1f680; OpenAI推出ChatGPT企业版&#xff0c;提供更高安全和隐私保障 摘要&#xff1a;OpenAI发布了面向企业用户的ChatGPT企业版&#xff0c;用户可以无限制地访问强大的GPT-4模型&#xff0c;进行更深入的数据分析&#xff0c;并且拥有完全控制…
阅读更多...
如何使用 Amazon EMR 在 Amazon EKS 上构建可靠、高效、用户友好的 Spark 平台

如何使用 Amazon EMR 在 Amazon EKS 上构建可靠、高效、用户友好的 Spark 平台

这是 SafeGraph 技术主管经理 Nan Zhu 与亚马逊云科技高级解决方案架构师 Dave Thibault 共同撰写的特约文章。 SafeGraph 是一家地理空间数据公司&#xff0c;管理着全球超过 4100 万个兴趣点&#xff08;POI&#xff0c;Point of Interest&#xff09;&#xff0c;提供品牌隶…
阅读更多...
单片机-芯片怎么看图连接

单片机-芯片怎么看图连接

单片机连接数码管 硬件连接线路图 单片机中的IO口连接端子 J25 &#xff0c;J25 连接 2个电阻 PR14 &#xff0c;引出管脚 P22 &#xff0c;P23&#xff0c;P24 P22 、P23、P24 连接 3-8 译码器 三输入、8输出 8 输出 &#xff0c;连接8个LED1~LED8 用到三个芯片&#xff…
阅读更多...
如何将 PDF 转换为 Word：前 5 个应用程序

如何将 PDF 转换为 Word：前 5 个应用程序

必须将 PDF 转换为 Word 才能对其进行编辑和自定义。所以这里有 5 种很棒的方法 PDF 文件被广泛使用&#xff0c;因为它非常稳定且难以更改。这在处理法律合同、财务文件和推荐信等重要文件时尤其重要。但是&#xff0c;有时您可能需要编辑 PDF 文件。最好的方法是使用应用程序…
阅读更多...
回归拟合 | 灰狼算法优化核极限学习机(GWO-KELM)MATLAB实现

回归拟合 | 灰狼算法优化核极限学习机(GWO-KELM)MATLAB实现

这周有粉丝私信想让我出一期GWO-KELM的文章&#xff0c;因此乘着今天休息就更新了(希望不算晚) 作者在前面的文章中介绍了ELM和KELM的原理及其实现&#xff0c;ELM具有训练速度快、复杂度低、克服了传统梯度算法的局部极小、过拟合和学习率的选择不合适等优点&#xff0c;而KEL…
阅读更多...
OceanBase安全审计之传输加密

OceanBase安全审计之传输加密

上一期我们讲了关于 OceanBase 安全审计的《身份鉴别》和《用户管理与访问控制》 两个部分&#xff0c;OceanBase 的安全机制介绍其支持传输加密&#xff0c;今天我们主要来实践一下如何配置传输加密以及验证是否真的加密。 作者&#xff1a;金长龙 爱可生测试工程师&#xff0…
阅读更多...
【Stable Diffusion安装】支持python3.11 window版

【Stable Diffusion安装】支持python3.11 window版

前言 主要的安装步骤是参考B站播放量第一的视频&#xff0c;但是那位阿婆主应该是没有编程经验&#xff0c;只强调使用3.10&#xff0c;而python最新版本是3.11。 理论上来说&#xff0c;只是一个小版本的不同&#xff0c;应该是可以安装成功了。自己摸索了下&#xff0c;挺费…
阅读更多...
【LeetCode-中等题】199. 二叉树的右视图

【LeetCode-中等题】199. 二叉树的右视图

文章目录 题目方法一&#xff1a;层序遍历取每一层最后一个元素方法二&#xff1a;深度优先搜索 题目 方法一&#xff1a;层序遍历取每一层最后一个元素 // 方法一 &#xff1a;层序 集合(取每层子集合最后一个元素)// List<List<Integer>> Rlist new ArrayList…
阅读更多...
搭建Python开发环境

搭建Python开发环境

开发环境 Python是一种跨平台 的编程语言&#xff0c;这意味着它能够在所有的主流操作系统中运行&#xff0c;开发者可以Windows、Linux、Mac中开发和学习Python&#xff0c;甚至在Android手机中也可以运行Python代码。 在所有安装了Pythonr现代计算机上&#xff0c;都能够运…
阅读更多...
816. 模糊坐标

816. 模糊坐标

816. 模糊坐标 原题链接&#xff1a;完成情况&#xff1a;解题思路&#xff1a;参考代码&#xff1a;错误经验吸取 原题链接&#xff1a; 模糊坐标 完成情况&#xff1a; 解题思路&#xff1a; 参考代码&#xff1a; package 西湖算法题解___中等题;import java.util.Arra…
阅读更多...
sqlibs安装及复现

sqlibs安装及复现

sqlibs安装 安装phpstudy后&#xff0c;到github上获取sqlibs源码 sqli-labs项目地址—Github获取&#xff1a;GitHub - Audi-1/sqli-labs: SQLI labs to test error based, Blind boolean based, Time based. 在phpstudy本地文件中的Apache目录中解压上方下载的源码。 将sq…
阅读更多...
leetcode - 360周赛

leetcode - 360周赛

一&#xff0c;2833. 距离原点最远的点 这道题的意思是&#xff0c;遇到 "L" 向左走&#xff0c;遇到 "R" 向右走&#xff0c;遇到 "_" 左右都可以走&#xff0c;那么要想找到距离原点最远的点&#xff0c;就是在找 | "L" "R&qu…
阅读更多...
最新文章

Copyright @ 2022~2023