用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 UI 1.72 之datepicker
Dec 29 Javascript
node.js中的querystring.escape方法使用说明
Dec 10 Javascript
javascript实现控制浏览器全屏
Mar 30 Javascript
使用Angular.js开发的注意事项
Oct 19 Javascript
JS正则子匹配实例分析
Dec 22 Javascript
JavaScript装饰器函数(Decorator)实例详解
Mar 30 Javascript
Bootstrap弹出框之自定义悬停框标题、内容和样式示例代码
Jul 11 Javascript
详解Vue.js组件可复用性的混合(mixin)方式和自定义指令
Sep 06 Javascript
利用node实现一个批量重命名文件的函数
Dec 21 Javascript
vue axios封装及API统一管理的方法
Apr 18 Javascript
原生JS实现列表内容自动向上滚动效果
May 22 Javascript
vue+ElementUI 关闭对话框清空验证,清除form表单的操作
Aug 06 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
apache2.2.4+mysql5.0.77+php5.2.8安装精简
2009/04/29 PHP
如何使用php绘制在图片上的正余弦曲线
2013/06/08 PHP
PHP函数microtime()用法与说明
2013/12/04 PHP
详解PHP的Yii框架中扩展的安装与使用
2016/04/01 PHP
php排序算法实例分析
2016/10/17 PHP
php使用scandir()函数扫描指定目录下所有文件示例
2019/06/08 PHP
Yii框架的布局文件实例分析
2019/09/04 PHP
jquery.validate使用攻略 第一部
2010/07/01 Javascript
在新窗口打开超链接的方法小结
2013/04/14 Javascript
Extjs根据条件设置表格某行背景色示例
2014/07/23 Javascript
javascript中return,return true,return false三者的用法及区别
2015/11/17 Javascript
JS简单实现动态添加HTML标记的方法示例
2018/04/08 Javascript
vue中Axios的封装与API接口的管理详解
2018/08/09 Javascript
node.js实现微信开发之获取用户授权
2019/03/18 Javascript
vue自定义js图片碎片轮播图切换效果的实现代码
2019/04/28 Javascript
深入理解Vue keep-alive及实践总结
2019/08/21 Javascript
详解JavaScript匿名函数和闭包
2020/07/10 Javascript
vue Cli 环境删除与重装教程 - 版本文档
2020/09/11 Javascript
利用Python和OpenCV库将URL转换为OpenCV格式的方法
2015/03/27 Python
Python中的sort()方法使用基础教程
2017/01/08 Python
Python OpenCV获取视频的方法
2018/02/28 Python
计算机二级python学习教程(1) 教大家如何学习python
2019/05/16 Python
用python生成(动态彩色)二维码的方法(使用myqr库实现)
2019/06/24 Python
python中seaborn包常用图形使用详解
2019/11/25 Python
python对Excel的读取的示例代码
2020/02/14 Python
keras实现图像预处理并生成一个generator的案例
2020/06/17 Python
python利用pytesseract 实现本地识别图片文字
2020/12/14 Python
HTML5实现可缩放时钟代码
2017/08/28 HTML / CSS
Hush Puppies澳大利亚官网:舒适的男女休闲和正装鞋
2019/08/24 全球购物
职工运动会邀请函
2014/02/02 职场文书
欢送退休感言
2014/02/08 职场文书
法学专业求职信范文
2015/03/19 职场文书
文艺委员竞选稿
2015/11/19 职场文书
JavaScript利用html5新方法操作元素类名详解
2021/11/27 Javascript
使用python将HTML转换为PDF pdfkit包(wkhtmltopdf) 的使用方法
2022/04/21 Python
JS实现九宫格拼图游戏
2022/06/28 Javascript