基于JQuery实现分隔条的功能


Posted in Javascript onJune 17, 2016

在C/S系统中有专门的分隔条控件,很方便实现,但在Asp.net中却没有。本文介绍了一种使用JQuery技术实现分隔条的功能。
 Javascript代码如下,将该代码保存成JS文件后在HTML中引用。

jsplit
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中将具有数字属性名的对象转换为数组
Mar 06 Javascript
js 获取和设置css3 属性值的实现方法
May 06 Javascript
javascript dom追加内容实现示例
Sep 21 Javascript
jquery根据name属性查找的小例子
Nov 21 Javascript
防止登录页面出现在frame中js代码
Jul 22 Javascript
jQuery Ajax()方法使用指南
Nov 19 Javascript
jquery实现动态改变div宽度和高度
May 08 Javascript
JS实现自动变换的菜单效果代码
Sep 09 Javascript
jQuery+ajax实现动态添加表格tr td功能示例
Apr 23 jQuery
Vue创建头部组件示例代码详解
Oct 23 Javascript
js针对图片加载失败的处理方法分析
Aug 24 Javascript
使用vue实现一个电子签名组件的示例代码
Jan 06 Javascript
js基于setTimeout与setInterval实现多线程
Jun 17 #Javascript
浅谈jQuery animate easing的具体使用方法(推荐)
Jun 17 #Javascript
jQuery animate easing使用方法图文详解
Jun 17 #Javascript
JS常用字符串方法(推荐)
Jan 15 #Javascript
url中的特殊符号有什么含义(推荐)
Jun 17 #Javascript
JS模拟的Map类实现方法
Jun 17 #Javascript
jQuery实现iframe父窗体和子窗体的相互调用
Jun 17 #Javascript
You might like
使用php+apc实现上传进度条且在IE7下不显示的问题解决方法
2013/04/25 PHP
php使用递归函数实现数字累加的方法
2015/03/16 PHP
Composer设置忽略版本匹配的方法
2016/04/27 PHP
JavaScript 拖拉缩放效果
2008/12/10 Javascript
Javascript数组的排序 sort()方法和reverse()方法
2012/06/04 Javascript
用jquery实现的一个超级简单的下拉菜单
2014/05/18 Javascript
jquery 实现input输入什么div图层显示什么
2014/06/15 Javascript
js数组依据下标删除元素
2015/04/14 Javascript
JavaScript中各种引用类型的常用操作方法小结
2016/05/05 Javascript
ES6学习之变量的两种命名方法示例
2017/07/18 Javascript
jQuery操作事件完整实例分析
2020/01/10 jQuery
python操作mongodb根据_id查询数据的实现方法
2015/05/20 Python
Python3字符串学习教程
2015/08/20 Python
python中numpy包使用教程之数组和相关操作详解
2017/07/30 Python
解决python 输出是省略号的问题
2018/04/19 Python
Python实现的括号匹配判断功能示例
2018/08/25 Python
解决pyqt5中QToolButton无法使用的问题
2019/06/21 Python
春节到了 教你使用python来抢票回家
2020/01/06 Python
Python如何把多个PDF文件合并代码实例
2020/02/13 Python
在Mac中配置Python虚拟环境过程解析
2020/06/22 Python
Python使用文件操作实现一个XX信息管理系统的示例
2020/07/02 Python
Python3爬虫关于识别点触点选验证码的实例讲解
2020/07/30 Python
Python监听剪切板实现方法代码实例
2020/11/11 Python
python中altair可视化库实例用法
2021/01/26 Python
canvas实现俄罗斯方块的方法示例
2018/12/13 HTML / CSS
HTML5 在canvas中绘制矩形附效果图
2014/06/23 HTML / CSS
uniapp+Html5端实现PC端适配
2020/07/15 HTML / CSS
NOTINO英国:在线购买美容和香水
2020/02/25 全球购物
三个儿子教学反思
2014/02/03 职场文书
挖掘机司机岗位职责
2014/02/12 职场文书
《哪吒闹海》教学反思
2014/02/28 职场文书
小组名称和口号
2014/06/09 职场文书
大学生国家助学金感谢信
2015/01/23 职场文书
学期个人工作总结
2015/02/13 职场文书
十二生肖观后感
2015/06/12 职场文书
「我的青春恋爱物语果然有问题。-妄言录-」第20卷封面公开
2022/03/21 日漫