基于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 相关文章推荐
jQuery将所有被选中的checkbox某个属性值连接成字符串的方法
Jan 24 Javascript
vue分页组件table-pagebar使用实例解析
Nov 15 Javascript
jquery与ajax获取特殊字符实例详解
Jan 08 Javascript
React.Js添加与删除onScroll事件的方法详解
Nov 03 Javascript
JS小球抛物线轨迹运动的两种实现方法详解
Dec 20 Javascript
vue里input根据value改变背景色的实例
Sep 29 Javascript
webpack-url-loader 解决项目中图片打包路径问题
Feb 15 Javascript
我要点爆”微信小程序云开发之项目建立与我的页面功能实现
May 26 Javascript
JavaScript数值类型知识汇总
Nov 17 Javascript
解决vue项目input输入框双向绑定数据不实时生效问题
Aug 05 Javascript
vue 函数调用加括号与不加括号的区别
Oct 29 Javascript
JS获取一个字符串中指定字符串第n次出现的位置
Feb 10 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
一个程序下载的管理程序(二)
2006/10/09 PHP
PHP的面试题集,附我的答案和分析(一)
2006/11/19 PHP
php错误提示failed to open stream: HTTP request failed!的完美解决方法
2011/06/06 PHP
php中的curl_multi系列函数使用例子
2014/07/29 PHP
php实现比较两个字符串日期大小的方法
2015/05/12 PHP
php htmlentities()函数的定义和用法
2016/05/13 PHP
php将服务端的文件读出来显示在web页面实例
2016/10/31 PHP
PHP实现权限管理功能示例
2017/09/22 PHP
详谈 Jquery Ajax异步处理Json数据.
2011/09/09 Javascript
关于js datetime的那点事
2011/11/15 Javascript
jQuery基础框架浅入剖析
2012/12/27 Javascript
javascript获取浏览器类型和版本的方法(js获取浏览器版本)
2014/03/13 Javascript
Vue.js基础知识汇总
2016/04/27 Javascript
基于jQuery实现咖啡订单管理简单应用
2017/02/10 Javascript
javascript ES6 新增了let命令使用介绍
2017/07/07 Javascript
JS设置随机出现2个数字的实例代码
2017/07/19 Javascript
Vue 拦截器对token过期处理方法
2018/01/23 Javascript
浅谈Node.js 子进程与应用场景
2018/01/24 Javascript
jQuery中元素选择器(element)简单用法示例
2018/05/14 jQuery
使用react context 实现vue插槽slot功能
2019/07/18 Javascript
[01:09:19]DOTA2-DPC中国联赛 正赛 VG vs Aster BO3 第二场 2月28日
2021/03/11 DOTA
Python实现简单http服务器
2018/04/12 Python
OpenCV图像颜色反转算法详解
2019/05/13 Python
pyenv与virtualenv安装实现python多版本多项目管理
2019/08/17 Python
使用Python制作新型冠状病毒实时疫情图
2020/01/28 Python
css3动画效果抖动解决方法
2018/09/03 HTML / CSS
CSS3 实现图形下落动画效果
2020/11/13 HTML / CSS
HTML5之SVG 2D入门10—滤镜的定义及使用
2013/01/30 HTML / CSS
HTML5 Canvas阴影使用方法实例演示
2013/08/02 HTML / CSS
使用HTML5的Canvas绘制曲线的简单方法
2015/09/08 HTML / CSS
土木工程专业推荐信
2014/02/19 职场文书
高中军训感言600字
2014/03/11 职场文书
2015年大学社团工作总结
2015/04/09 职场文书
李强优秀员工观后感
2015/06/16 职场文书
导游词之南京夫子庙
2019/12/09 职场文书
vue Element-ui表格实现树形结构表格
2021/06/07 Vue.js