用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 相关文章推荐
JavaScript 调试器简介
Feb 21 Javascript
js汉字排序问题 支持中英文混排,兼容各浏览器,包括CHROME
Dec 20 Javascript
$.each遍历对象、数组的属性值并进行处理
Jul 18 Javascript
window.open()实现post传递参数
Mar 12 Javascript
jquery mobile界面数据刷新的实现方法
May 28 Javascript
基于JavaScript实现鼠标箭头移动图片跟着移动
Aug 30 Javascript
前端跨域的几种解决方式总结(推荐)
Aug 16 Javascript
React从react-router路由上做登陆验证控制的方法
May 10 Javascript
JS实现移动端点击按钮复制文本内容
Jul 28 Javascript
vue获取data数据改变前后的值方法
Nov 07 Javascript
详解Typescript里的This的使用方法
Jan 08 Javascript
js基础语法与maven项目配置教程案例
Jul 15 Javascript
基于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
转生史莱姆:萌王第一次撸串开心到飞起,哥布塔撸串却神似界王神
2018/11/30 日漫
PHP has encountered an Access Violation
2007/01/15 PHP
PHP中多维数组的foreach遍历示例
2014/06/13 PHP
Thinkphp和Bootstrap结合打造个性的分页样式(推荐)
2016/08/01 PHP
php基于PDO实现功能强大的MYSQL封装类实例
2017/02/27 PHP
PHP常用正则表达式精选(推荐)
2019/05/28 PHP
laravel框架模型中非静态方法也能静态调用的原理分析
2019/11/23 PHP
JavaScript的parseInt 进制问题
2009/05/07 Javascript
jquery中eq和get的区别与使用方法
2011/04/14 Javascript
JS判断元素为数字的奇异写法分享
2012/08/01 Javascript
jquery 新建的元素事件绑定问题解决方案
2014/06/12 Javascript
jQuery实现点击任意位置弹出层外关闭弹出层效果
2016/10/19 Javascript
原生JS实现图片左右轮播
2016/12/30 Javascript
three.js快速入门【推荐】
2017/01/21 Javascript
Vue模拟数据,实现路由进入商品详情页面的示例
2018/08/31 Javascript
Vue.js 实现数据展示全部和收起功能
2018/09/05 Javascript
微信小程序textarea层级过高(盖住其他元素)问题的解决办法
2019/03/04 Javascript
微信小程序云开发之数据库操作
2019/05/18 Javascript
layer.confirm点击第一个按钮关闭弹出框的方法
2019/09/09 Javascript
在vue中实现某一些路由页面隐藏导航栏的功能操作
2020/09/21 Javascript
基于Vue2实现移动端图片上传、压缩、拖拽排序、拖拽删除功能
2021/01/05 Vue.js
Nest.js环境变量配置与序列化详解
2021/02/21 Javascript
[07:01]DOTA2-DPC中国联赛正赛 Aster vs Magma 3月5日 赛后选手采访
2021/03/11 DOTA
python发送邮件实例分享
2017/07/28 Python
numpy给array增加维度np.newaxis的实例
2018/11/01 Python
python使用建议与技巧分享(二)
2020/08/17 Python
H5 canvas实现贪吃蛇小游戏
2017/07/28 HTML / CSS
青年创业培训欢迎词
2014/01/10 职场文书
读书演讲主持词
2014/03/18 职场文书
交通事故赔偿协议书
2014/04/15 职场文书
优秀毕业生就业推荐信
2014/05/22 职场文书
新闻发布会策划方案
2014/06/12 职场文书
安全责任书
2015/01/29 职场文书
乡镇科协工作总结2015
2015/05/19 职场文书
2016年五四青年节校园广播稿
2015/12/17 职场文书
JavaScript 去重和重复次数统计
2021/03/31 Javascript