用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类
Sep 08 Javascript
JavaScript Sort 表格排序
Oct 31 Javascript
File, FileReader 和 Ajax 文件上传实例分析(php)
Apr 27 Javascript
js换图片效果可进行定时操作
Jun 09 Javascript
jQuery回调函数的定义及用法实例
Dec 23 Javascript
js实现对table动态添加、删除和更新的方法
Feb 10 Javascript
JS获取鼠标坐标位置实例分析
Jan 20 Javascript
微信小程序(六):列表上拉加载下拉刷新示例
Jan 13 Javascript
vue绑定设置属性的多种方式(5)
Aug 16 Javascript
React复制到剪贴板的示例代码
Aug 22 Javascript
JavaScript中的Proxy对象
Nov 27 Javascript
Vue实现圆环进度条的示例
Feb 06 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
PHP基础教程(php入门基础教程)一些code代码
2013/01/06 PHP
destoon二次开发模板及调用语法汇总
2014/06/21 PHP
php-redis中的sort排序函数总结
2015/07/08 PHP
Yii2主题(Theme)用法详解
2016/07/23 PHP
PHP+JQuery+Ajax实现分页方法详解
2016/08/06 PHP
在php7中MongoDB实现模糊查询的方法详解
2017/05/03 PHP
JS操作XML中DTD介绍及使用方法分析
2019/07/04 PHP
BOOM vs RR BO5 第三场 2.14
2021/03/10 DOTA
jQuery循环动画与获取组件尺寸的方法
2015/02/02 Javascript
javascript获取网页宽高方法汇总
2015/07/19 Javascript
jQuery实现带滑动条的菜单效果代码
2015/08/26 Javascript
javascript实现不同颜色Tab标签切换效果
2016/04/27 Javascript
JavaScript的ExtJS框架中表格的编写教程
2016/05/21 Javascript
浅谈Javascript中的12种DOM节点类型
2016/08/19 Javascript
NodeJS 实现手机短信验证模块阿里大于功能
2017/06/19 NodeJs
鼠标拖动改变DIV等网页元素的大小的实现方法
2017/07/06 Javascript
vue实现表格数据的增删改查
2017/07/10 Javascript
JS中使用textPath实现线条上的文字
2017/12/25 Javascript
原生js检测页面加载完毕的实例
2018/09/11 Javascript
在vue项目中使用md5加密的方法
2018/09/14 Javascript
vue实现路由监听和参数监听
2019/10/29 Javascript
用python实现批量重命名文件的代码
2012/05/25 Python
Python新手们容易犯的几个错误总结
2017/04/01 Python
用python处理MS Word的实例讲解
2018/05/08 Python
Pandas读取MySQL数据到DataFrame的方法
2018/07/25 Python
python使用__slots__让你的代码更加节省内存
2018/09/05 Python
30秒学会30个超实用Python代码片段【收藏版】
2019/10/15 Python
PyTorch实现ResNet50、ResNet101和ResNet152示例
2020/01/14 Python
Html5 FileReader实现即时上传图片功能实例代码
2014/09/01 HTML / CSS
劳资员岗位职责
2013/11/11 职场文书
总经理文秘岗位职责
2014/02/03 职场文书
六月份红领巾广播稿
2014/02/03 职场文书
爱国影片观后感
2015/06/18 职场文书
《鲁滨逊漂流记》之六读后感(4篇)
2019/09/29 职场文书
python 实现定时任务的四种方式
2021/04/01 Python
详解Python中*args和**kwargs的使用
2022/04/07 Python