用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 相关文章推荐
js实现GridView单选效果自动设置交替行、选中行、鼠标移动行背景色
May 27 Javascript
jQuery结合PHP+MySQL实现二级联动下拉列表[实例]
Nov 15 Javascript
js限制文本框输入长度两种限制方式(长度、字节数)
Dec 19 Javascript
密码强度检测效果实现原理与代码
Jan 04 Javascript
js拦截alert对话框另类应用
Jan 16 Javascript
js特殊字符转义介绍
Nov 05 Javascript
JavaScript学习总结之JS、AJAX应用
Jan 29 Javascript
jquery插件jquery.LightBox.js实现点击放大图片并左右点击切换效果(附demo源码下载)
Feb 25 Javascript
layui 表格的属性的显示转换方法
Aug 14 Javascript
js前端面试之同步与异步问题详解
Apr 03 Javascript
Node.js实现批量下载图片简单操作示例
Jan 18 Javascript
详解微信小程序动画Animation执行过程
Sep 23 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
Jquery Ajax学习实例4 向WebService发出请求,返回实体对象的异步调用
2010/03/16 Javascript
鼠标滚轴控制文本框值的JS代码
2013/11/19 Javascript
解读Bootstrap v4 sass设计
2016/05/29 Javascript
使用Script元素发送JSONP请求的方法
2016/06/12 Javascript
全面解析Bootstrap表单样式的使用
2016/09/09 Javascript
jQuery实现的瀑布流加载效果示例
2016/09/13 Javascript
Bootstrap框架的学习教程详解(二)
2016/10/18 Javascript
JavaScript高仿支付宝倒计时页面及代码实现
2016/10/21 Javascript
Javascript设计模式之装饰者模式详解篇
2017/01/17 Javascript
推荐三款不错的图片压缩上传插件(webuploader、localResizeIMG4、LUploader)
2017/04/21 Javascript
浅谈关于angularJs中使用$.ajax的注意点
2017/08/12 Javascript
vue + vuex todolist的实现示例代码
2018/03/09 Javascript
jQuery实现文件编码成base64并通过AJAX上传的方法
2018/04/12 jQuery
微信小程序使用form表单获取输入框数据的实例代码
2018/05/17 Javascript
vue插件实现v-model功能
2018/09/10 Javascript
vuex2中使用mapGetters/mapActions报错的解决方法
2018/10/20 Javascript
React 路由懒加载的几种实现方案
2018/10/23 Javascript
在vue中使用回调函数,this调用无效的解决
2020/08/11 Javascript
JS轮播图的实现方法
2020/08/24 Javascript
Vue-cli4 配置 element-ui 按需引入操作
2020/09/11 Javascript
js中延迟加载和预加载的具体使用
2021/01/14 Javascript
[00:35]DOTA2上海特级锦标赛 VP战队宣传片
2016/03/04 DOTA
python中常用检测字符串相关函数汇总
2015/04/15 Python
python写入xml文件的方法
2015/05/08 Python
Python中的index()方法使用教程
2015/05/18 Python
Mac中升级Python2.7到Python3.5步骤详解
2017/04/27 Python
Python爬虫实例_城市公交网络站点数据的爬取方法
2018/01/10 Python
numpy中实现ndarray数组返回符合特定条件的索引方法
2018/04/17 Python
python 寻找离散序列极值点的方法
2019/07/10 Python
python如何支持并发方法详解
2020/07/25 Python
用html5的canvas画布绘制贝塞尔曲线完整代码
2013/08/14 HTML / CSS
日期和时间问题
2015/01/04 面试题
服装设计专业自荐信
2014/06/17 职场文书
员工试用期自我评价
2014/09/18 职场文书
民事诉讼代理词
2015/05/25 职场文书
Golang原生rpc(rpc服务端源码解读)
2022/04/07 Golang