用JQuery在网页中实现分隔条功能的代码


Posted in Javascript onAugust 09, 2012

Javascript代码如下,将该代码保存成JS文件后在HTML中引用。

jQuery.noConflict(); 
jQuery.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: "600px" 
, MinW: "260px" 
, 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; 
jQuery(_self).css({ position: "relative", float: j.FloatD, overflow: "hidden", padding: "0px" }); 
jQuery(_self).wrapInner("<div class='jsplit-c' style='top:0px;z-index:9999;zoom:1;width:100%;overflow:hidden;position:relative;height:100%'></div>"); 
jQuery(_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 = jQuery(_self).width(); 
var jsplitc = jQuery(_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 (jQuery.browser.msie) { document.execCommand("BackgroundImageCache", false, true); } 
if (dw > j.MaxW) { jQuery(_self).css({ width: j.MaxW }); } 
if (dw < j.MinW) { jQuery(_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) { 
jQuery(this).css({ background: j.Btn.oBg.Hover, "background-image": j.BgUrl }) 
} else { jQuery(this).css({ background: j.Btn.cBg.Hover, "background-image": j.BgUrl }) } 
}, function () { 
if (Close == false) { 
jQuery(this).css({ background: j.Btn.oBg.Out, "background-image": j.BgUrl }) 
} else { jQuery(this).css({ background: j.Btn.cBg.Out, "background-image": j.BgUrl }) } 
}) 
jQuery(_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 = jQuery(_self).width(); 
jQuery(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; }; 
jQuery(_self).css({ width: curW }); 
dw = curW; 
}); 
jQuery(document).mouseup(function () { 
jQuery(document).unbind(); 
}); 
if (Close == true) { 
jQuery(this).css({ cursor: "e-resize", opacity: 0.8 }); 
jQuery(_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 }); 
jQuery(_self).animate({ width: "6px" }, 400); 
Close = true; 
} 
}); 
} 
});

按以下步骤修改HTML文件:
1. 增加对JQuery和刚刚生成的jsplit.js文件的引用。
<script language='javascript' src='jquery-1.4.4.min.js'></script> 
<script language='javascript' src='jsplit.js'></script>

2. 为要被拖动大小的DIV或TD定义ID。
<table> 
<tr> 
<td id="tt" style="background:#999999">test</td> 
<td style="background:#009999" width="400">test Table</td> 
</tr> 
</table>

3. 增加Javascript调用Split。
<script type="text/javascript"> 
$(document).ready(function(){ 
jQuery('#tt').jsplit(); 
}); 
</script>

这样就实现了客户端的分隔条的功能,如下图所示:
用JQuery在网页中实现分隔条功能的代码
Javascript 相关文章推荐
jquery库或JS文件在eclipse下报错问题解决方法
Apr 17 Javascript
上传图片预览JS脚本 Input file图片预览的实现示例
Oct 23 Javascript
JavaScript实现简单的二级导航菜单实例
Apr 15 Javascript
简单介绍JavaScript数据类型之隐式类型转换
Dec 28 Javascript
javascript RegExp 使用说明
May 21 Javascript
js判断主流浏览器类型和版本号的简单实现代码
May 26 Javascript
jQuery基于事件控制实现点击显示内容下拉效果
Mar 07 Javascript
zTree实现节点修改的实时刷新功能
Mar 20 Javascript
使用yeoman构建angular应用的方法
Aug 14 Javascript
原生JS实现日历组件的示例代码
Sep 22 Javascript
js实现轮播图的两种方式(构造函数、面向对象)
Sep 30 Javascript
Vue实现多页签组件
Jan 14 Vue.js
基于jQuery的简单九宫格实现代码
Aug 09 #Javascript
JavaScript基础知识之数据类型
Aug 06 #Javascript
jquery 插件学习(六)
Aug 06 #Javascript
jquery 插件学习(五)
Aug 06 #Javascript
jquery 插件学习(四)
Aug 06 #Javascript
jquery 插件学习(三)
Aug 06 #Javascript
jquery 插件学习(二)
Aug 06 #Javascript
You might like
经典的星际争霸,满是回忆的BGM
2020/04/09 星际争霸
ThinkPHP无限级分类原理实现留言与回复功能实例
2014/10/31 PHP
JQuery 获取和设置Select选项的代码
2010/02/07 Javascript
JQuery的Ajax跨域请求原理概述及实例
2013/04/26 Javascript
利用CSS、JavaScript及Ajax实现高效的图片预加载
2013/10/16 Javascript
jquery制作居中遮罩层效果分享
2014/02/21 Javascript
js 显示base64编码的二进制流网页图片
2014/04/04 Javascript
jquery UI Datepicker时间控件的使用方法(基础版)
2015/11/07 Javascript
AngularJS实现全选反选功能
2015/12/08 Javascript
原生JavaScript制作微博发布面板效果
2016/03/11 Javascript
Bootstrap每天必学之工具提示(Tooltip)插件
2016/04/26 Javascript
关于angularJs指令的Scope(作用域)介绍
2016/10/25 Javascript
微信小程序-小说阅读小程序实例(demo)
2017/01/12 Javascript
Node.js 8 中的 util.promisify的详解
2017/06/12 Javascript
深入理解React中何时使用箭头函数
2017/08/23 Javascript
vue 使用 vue-pdf 实现pdf在线预览的示例代码
2020/04/26 Javascript
Vue页面跳转传递参数及接收方式
2020/09/09 Javascript
JavaScript语法约定和程序调试原理解析
2020/11/03 Javascript
浅谈Vue开发人员的7个最好的VSCode扩展
2021/01/20 Vue.js
[41:52]DOTA2-DPC中国联赛 正赛 CDEC vs Dynasty BO3 第二场 2月22日
2021/03/11 DOTA
python用Pygal如何生成漂亮的SVG图像详解
2017/02/10 Python
django2 快速安装指南分享
2018/01/05 Python
Python中max函数用于二维列表的实例
2018/04/03 Python
pytorch使用指定GPU训练的实例
2019/08/19 Python
python如何进入交互模式
2020/07/06 Python
安装python依赖包psycopg2来调用postgresql的操作
2021/01/01 Python
CSS3弹性布局内容对齐(justify-content)属性使用详解
2017/07/31 HTML / CSS
Electrolux伊莱克斯巴西商店:家用电器、小家电和配件
2018/05/23 全球购物
时尚孕妇装:Ingrid & Isabel
2019/05/08 全球购物
行政专员的岗位职责
2014/03/10 职场文书
2014年工作总结与下年工作计划
2014/11/27 职场文书
公司市场部岗位职责
2015/04/15 职场文书
压缩Redis里的字符串大对象操作
2021/06/23 Redis
深入理解java.lang.String类的不可变性
2021/06/27 Java/Android
在项目中使用redis做缓存的一些思路
2021/09/14 Redis
Zabbix对Kafka topic积压数据监控的问题(bug优化)
2022/07/07 Servers