基于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 相关文章推荐
用javascript实现分割提取页面所需内容
May 09 Javascript
jQuery聚合函数实例
May 21 Javascript
基于jquery实现复选框全选,反选,全不选等功能
Oct 16 Javascript
JavaScript实现的背景自动变色代码
Oct 17 Javascript
javascript闭包(Closure)用法实例简析
Nov 30 Javascript
javascript每日必学之多态
Feb 23 Javascript
JS hashMap实例详解
May 26 Javascript
JavaScript必知必会(二) null 和undefined
Jun 08 Javascript
jQuery动态增减行的实例代码解析(推荐)
Dec 05 Javascript
JavaScript中join()、splice()、slice()和split()函数用法示例
Aug 24 Javascript
qrcode生成二维码微信长按无法识别问题的解决
Apr 04 Javascript
关于layui导航栏不展示下拉列表的解决方法
Sep 25 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数组函数序列之end() - 移动数组内部指针到最后一个元素,并返回该元素的值
2011/10/31 PHP
PHP删除数组中的特定元素的代码
2012/06/28 PHP
关于PHP实现异步操作的研究
2013/02/03 PHP
php生成图片验证码
2015/06/09 PHP
在Mac上编译安装PHP7的开发环境
2015/07/28 PHP
PHP基于yii框架实现生成ICO图标
2015/11/13 PHP
PHP 数组基本操作小结(推荐)
2016/06/13 PHP
Laravel框架中集成MongoDB和使用详解
2019/10/17 PHP
javascript 写的一个简单的timer
2009/07/30 Javascript
jQuery $.each的用法说明
2010/03/22 Javascript
javascript 从if else 到 switch case 再到抽象
2010/07/17 Javascript
杨氏矩阵查找的JS代码
2013/03/21 Javascript
jQuery ajax serialize() 方法使用示例
2014/11/02 Javascript
Nodejs中调用系统命令、Shell脚本和Python脚本的方法和实例
2015/01/01 NodeJs
JS实现仿新浪微博发布内容为空时提示功能代码
2015/08/19 Javascript
详解闭包解决jQuery中AJAX的外部变量问题
2017/02/22 Javascript
10道典型的JavaScript面试题
2017/03/22 Javascript
JS解决移动web开发手机输入框弹出的问题
2017/03/31 Javascript
JavaScript瀑布流布局实现代码
2017/05/06 Javascript
关于 angularJS的一些用法
2017/11/29 Javascript
解决vue-cli webpack打包后加载资源的路径问题
2018/09/25 Javascript
初学node.js中实现删除用户路由
2019/05/27 Javascript
js使用文件流下载csv文件的实现方法
2019/07/15 Javascript
Vue.js自定义指令学习使用详解
2019/10/19 Javascript
Vue绑定用户接口实现代码示例
2020/11/04 Javascript
Vue项目如何引入bootstrap、elementUI、echarts
2020/11/26 Vue.js
Python 的类、继承和多态详解
2017/07/16 Python
为有想象力的人提供的生活方式商店:Firebox
2018/06/04 全球购物
公务员培训自我鉴定
2013/09/19 职场文书
测绘工程专业个人自我评价
2013/12/01 职场文书
招标承诺书
2014/08/30 职场文书
乡镇民主生活会发言材料
2014/10/20 职场文书
2015商场元旦促销活动策划方案
2014/12/09 职场文书
蜗居观后感
2015/06/11 职场文书
vue代码分块和懒加载非必要资源文件
2022/04/11 Vue.js
CSS实现背景图片全屏铺满自适应的3种方式
2022/07/07 HTML / CSS