jsp 页面分割线，鼠标可以拖动

最新推荐文章于 2021-10-14 11:27:45 发布
最新推荐文章于 2021-10-14 11:27:45 发布
阅读量801 收藏
点赞数
分类专栏： jquery 文章标签： 页面div分割线 鼠标拖动div 改变div宽度 页面布局更改宽度
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/yangliuhbhd/article/details/84240720
版权 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>小蜡笔欢迎收藏</title>
<style>
body{padding:10px 0 0px 0;margin:0; font-size:12px; color:#666666; line-height:20px;}
p.text{padding:10px; margin:10px; background:#f5f5f5; border:1px solid #ccc;}
.title{font-family:Verdana, Arial; font-weight:bold; font-size:14px; padding:0 20px}
.demo{ width:500px; margin:30px; font-size:12px; padding:1px; border:1px solid #ccc;}
.demo2{background:#fff; width:700px; margin:20px;}
#tt{background:#efefef;width:300px;height:300px;top:0; left:0px!important; left:3px; border:1px solid #ccc;}
.odiv{border:1px solid #ccc; border-left:0;height:300px;}
 
</style>
<script language='javascript' src='jquery.js'></script>
<script language='javascript' src='jsplit.js'></script>

<script type="text/javascript">
/*--------------------------------------------------------------------------------------------------*/
$(document).ready(function(){
	$("#tt").jsplit();
	 })
</script>
</head>

<body>
 
<p class="text">$(&quot;#tt&quot;).jsplit();//默认调用，宽度在60px~400px <span class="fontRed">鼠标经过灰色区域显示分隔条，可拖动双击分隔条关闭，单击按钮关闭，兼容firefox,谷歌</span></p>
<p class="title">demo:</p>
<div class="demo2">
	<div id="tt">test45</div>
	<div class="odiv">test</div>
</div
		  
</body>
</html>



Js:  另外添加jquery.js


/**
 *  
 */
/*--------------------------------------------------------------------------------------------------*/
$.fn.extend({
	jsplit:function(j){
		return this.each(function(){
			 j = j||{};
			 j.Btn = j.Btn||{};
			 j.Btn.oBg = j.Btn.oBg||{};
			 j.Btn.cBg = j.Btn.cBg||{};
			var jun = { MaxW:"400px"
						,MinW:"60px"
						,FloatD:"left"
						,IsClose:false
						,BgUrl:""
						,Bg:"#fff"
						,Btn:{btn:true
								,oBg:{Out:"#333",Hover:"orange"}
								,cBg:{Out:"#333",Hover:"orange"}}
				,Fn:function(){}}
			j.MaxW = parseInt(j.MaxW)||parseInt(jun.MaxW);
			j.MinW = parseInt(j.MinW)||parseInt(jun.MinW);
			j.FloatD = j.FloatD||jun.FloatD;
			j.IsClose = j.IsClose!=undefined?j.IsClose:jun.IsClose;
			j.BgUrl = j.BgUrl||jun.BgUrl;
			j.Bg = j.Bg||jun.Bg;
				j.Btn.btn = j.Btn.btn!=undefined?j.Btn.btn:jun.Btn.btn;
					j.Btn.oBg.Out = j.Btn.oBg.Out||jun.Btn.oBg.Out;
					j.Btn.oBg.Hover = j.Btn.oBg.Hover||jun.Btn.oBg.Hover;
					j.Btn.cBg.Out = j.Btn.cBg.Out||jun.Btn.cBg.Out;
					j.Btn.cBg.Hover = j.Btn.cBg.Hover||jun.Btn.cBg.Hover;
			j.Fn = j.Fn||jun.Fn;
			var antiD = j.FloatD =="left"  ? "right"  : "left";
			if(j.MinW>j.MaxW){
			var amax=j.MaxW;
				j.MaxW = j.MinW;
				j.MinW = amax;
			};
			var _self = this;
			var Close = false;
			$(_self).css({ position:"relative",float:j.FloatD,overflow:"hidden",padding:"0px"});
		$(_self).wrapInner("<div class='jsplit-c' style='top:0px;z-index:9999;zoom:1;width:100%;overflow:hidden;position:relative;height:100%'></div>");
			$(_self).children(".jsplit-c").append("<div class='jsplit-e' unselectable='on' style='background:#fff;height:100%;width:6px;top:0px;-moz-user-select:none;"+antiD+":0px;position:absolute;cursor:e-resize;overflow:hidden;z-index:10000;'><div class='jsplit-e-handle'  unselectable='on'  style='height:40px;width:100%;top:50%;margin-top:-20px;left:0;position:absolute;cursor:pointer;-moz-user-select:none;'></div></div>");
			var dw = $(_self).width();
			var jsplitc=$(_self).children(".jsplit-c");
			var jsplite=jsplitc.children(".jsplit-e");
			var jsplith=jsplite.children(".jsplit-e-handle");
			if(j.Btn.btn==false){jsplith.css({display:"none"})};
			if($.browser.msie){document.execCommand("BackgroundImageCache", false, true);}
			if(dw>j.MaxW){$(_self).css({width:j.MaxW});}
			if(dw<j.MinW){$(_self).css({width:j.MinW});}
			jsplite.css({background:j.Bg,"background-image":j.BgUrl,opacity:0})
			if(j.IsClose!=false){
				jsplith.css({background:j.Btn.cBg.Out,"background-image":j.BgUrl})
				_selfclose();
			}else{
				jsplith.css({background:j.Btn.oBg.Out,"background-image":j.BgUrl})
			}
			jsplith.hover(function(){
				if(Close==false){
					$(this).css({background:j.Btn.oBg.Hover,"background-image":j.BgUrl})}else{$(this).css({background:j.Btn.cBg.Hover,"background-image":j.BgUrl})}
				},function(){
				if(Close==false){
					$(this).css({background:j.Btn.oBg.Out,"background-image":j.BgUrl})}else{$(this).css({background:j.Btn.cBg.Out,"background-image":j.BgUrl})}
			})
			$(_self).hover(function(){if(Close==false)jsplite.stop().animate({opacity:0.85},200)},function(){if(Close==false)jsplite.stop().animate({opacity:0},2000)})
			jsplite.mousedown(function(e){
				j['Fn'] && j['Fn'].call(_self);
				var screenX = e.screenX, w = $(_self).width();
				$(document).mousemove(function(e2){
					curW = j.FloatD=="left" ? w + (e2.screenX - screenX) : w - (e2.screenX - screenX);
					if(curW>=j.MaxW){curW=j.MaxW;};
					if(curW<=j.MinW){curW=j.MinW;};
						$(_self).css({width:curW});
						dw = curW;
				});
				$(document).mouseup(function(){
					$(document).unbind();
				});
				if(Close==true){
					$(this).css({cursor:"e-resize",opacity:0.8});
					$(_self).animate({width:dw},200);
					Close=false;
				};
				return false;
			});
			jsplite.dblclick(function(){
				if(Close==false){
					_selfclose();
				};
				return false;
			});
			jsplith.click(function () {
				if(Close==false){
					_selfclose();
				};
				return false;
			}); 
			function _selfclose(){
					jsplite.css({cursor:"pointer",opacity:1});
					jsplith.css({background:j.Btn.cBg.Out,"background-image":j.BgUrl});
					$(_self).animate({width:"6px"},400);
					Close=true;
			}

			
		});
	}
});$("#tt").jsplit();//默认调用，宽度在60px~400px 鼠标经过灰色区域显示分隔条，可拖动双击分隔条关闭，单击按钮关闭，兼容IE Firefox,谷歌

 

yangliuhbhd
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
用jfreechart在JSP页面显示点状分布图+分割线
家宝熊猫
05-16 4274
JSP页面 @ page language="java"  pageEncoding="gbk"%>String path = request.getContextPath();String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
代码实现导航栏分割线
weixin_33918114的博客
10-07 373
无需背景图片就可以实现导航栏分割线，颜色自定，线段虚实自定。 .nav1{ width:auto; height:50px; text-align:center; margin:13px auto 0; } ...
可以折叠和拖动的网页示例代码（JavaScript Code）
qjoycn
01-07 176
这个不太好说明白，反正这种网页的显示效果比较酷，其中的某些表格可以折叠起来，也可以进行拖动。显示效果如下： 这个是网页打开后的情况。 这个是将表格折叠以后的情况。 这个是将其中的表格拖动到其它地方的情况。 至于代码，实在太长了，就不直接放上来了。我已经将其打包压缩了，包括JS文件，HMTL代码文件和CSS文件。您可以点击 这里 进行下载。下载以后可以研究其代码，或者修改代码并将其应用...
jsp页面中引用其他页面的简单方法
10-19
下面小编就为大家带来一篇jsp页面中引用其他页面的简单方法。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
动态Jsp页面转换成静态Html页面
06-02
动态Jsp页面转换成静态Html页面动态Jsp页面转换成静态Html页面动态Jsp页面转换成静态Html页面动态Jsp页面转换成静态Html页面动态Jsp页面转换成静态Html页面动态Jsp页面转换成静态Html页面动态Jsp页面转换成静态Html...
Java Web初级编程：JSP 页面元素.pptx
04-30
Page 指令通常位于 JSP 页面的顶部，一个 JSP 页面可以使用多条 Page 指令。Page 指令的语法格式如下： ```jsp 属性1="属性值1" 属性2="属性值2" … 属性n="属性值n"%> ``` Page 指令中可以指定多种属性，例如 ...
JSP页面跳转方法大全
01-08
先来介绍一下在服务端JSP脚本中跳转页面的几种方法： 1. response.sendRedirct(“跳转到页面”); 该方法通过修改HTTP协议的HEADER部分,对浏览器下达重定向指令的,使浏览器显示重定向网页的内容. request无法传值过去...
页面分割线
RoyalLAW的博客
05-25 683
可以通过以下代码实现 .sn-separator{ display: inline-block; width: 0; height: 12px; line-height: 12px; vertical-align: top; position: relative; top: 10px; left: 0; font-size: 0; border-left: 1px solid #ccc; margin: 0 2px 0 5px; }
swing JSeparator分割线
杨咩咩
01-09 6426
JSeparator sep = new JSeparator(SwingConstants.CENTER); sep.setPreferredSize(new Dimension(this.getWidth(),20)); sep.setBackground(new Color(153,153,153));
jsp 表拉伸
wcqdong的专栏
10-31 423
window.addEvent('domready', setScrolTable); var globalValue = 0; function setScrolTable(){     var dataTable = $("dragColTable");     if(dataTable == null){     return ;     }       
jsp中实现展开折叠功能项
曼曼的博客
05-26 3057
ZJU2011_shark的ChinaUnix博客
jsp中折叠式标签的代码实现
08-22 4519
将代码和附件中带的css和js部署到项目中去即可运行 无标题文档       标签 1     内容 1         标签 2     内容 2   var Accordion1 = new Spry.Widget.Accordion("Accordion1"); 附件下载地址：http://do
JS实现容器模块左右拖动效果
weixin_42448925的博客
08-25 2962
JS实现容器模块左右拖动效果 实际效果是 鼠标点击上方颜色模块，左右拖动，根据拖动的距离来显示模块 一共有7个颜色块 代码如下 CSS #box { /*margin: 0 auto;*/ width: 1750px; border: 1px solid black; ...
jsp中实现虚线
xuhuanwang_210的专栏
07-12 6241
方法1：在中预先定义好CSS：.dotline {BORDER-BOTTOM-STYLE: dotted; BORDER-LEFT-STYLE: dotted; BORDER-RIGHT-STYLE: dotted; BORDER-TOP-STYLE: dotted}然后修改水平
jsp中将导航栏部分、主体部分、页脚部分分隔开
ych4513979的专栏
01-02 4238
通过以下方式可以将页面中的导航栏、网页主体内容、页脚分割成三个页面，有利于维护。 1 页面主体内容页面 body 2 导航栏页面 header 3 页脚页面 footer
关于手机jsp页面的左右滚动的问题
u013558123的博客
10-20 1250
最近开发的项目里面，有很多jsp页面，需要运行在手机里面，页面功能样式都调整好，测试的时候发现一个问题，左右能滑动，然后就在标签里面加上了overflow-y: scroll;overflow-x: hidden;阻止左右的滑动，测试了下，还是老样子。左右能滑动，原来遇到过类似的问题，这句代码能解决的啊。然后就没有思路了。折磨了一个多小时，反复的检查页面，都没问题啊 。终于想起全面查看css 文件
java分割线只显示一根_jsp页面中如何显示一条横线....
weixin_32667433的博客
02-25 1050
展开全部hr控制横线：横线XXXXXXXXX扩展资料在网页中画一条竖线1style="width:1000;height:1;border-top:1px dotted #000000">3style="width:1000;height:1;border-top:1px dotted #000000">4style="width:1000;height:1;border-top:1p...
2021.10.14 左右布局分割线拖拽 自适应宽度
一只白猫罢了
10-14 659
项目需求：页面左右布局，需要拖拽分割线，实现宽度自动适应。 解决方案：在mounted生命周期，监听分割线DOM的onmousedown事件，在拖拽过程中动态计算，然后赋值改变左右DOM元素的宽度。 <template> <div class="wrap"> <div class="lf" ref="letfDom" :style="{width: curWidth}"> <router-link to="/moreClick">mo
jsp怎么做到把鼠标移到那就显示页面
最新发布
06-11
如果您是指在网页上鼠标移动到某个区域时，可以显示出隐藏的页面，那么可以使用JavaScript来实现。下面是一个简单的示例代码： ```javascript // 获取需要隐藏的页面元素 var hiddenPage = document.getElementById...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值