基于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 发个判断字符串是否为符合标准的函数
Apr 27 Javascript
jquery $.ajax各个事件执行顺序
Oct 15 Javascript
javascript的函数、创建对象、封装、属性和方法、继承
Mar 10 Javascript
JS子父窗口互相操作取值赋值的方法介绍
May 11 Javascript
js实现文本框中焦点在最后位置
Mar 04 Javascript
jQuery实现仿美橙互联两级导航菜单效果完整实例
Sep 17 Javascript
利用JS生成博文目录及CSS定制博客
Feb 10 Javascript
JS实现1000以内被3或5整除的数字之和
Feb 18 Javascript
整理一些最近经常遇到的前端面试题
Apr 25 Javascript
VueJS如何引入css或者less文件的一些坑
Apr 25 Javascript
async/await优雅的错误处理方法总结
Jan 30 Javascript
vue 自定义的组件绑定点击事件
Apr 21 Vue.js
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 Notice: Undefined index 错误提示解决方法
2010/08/29 PHP
IP攻击升级,程序改进以对付新的攻击
2010/11/23 PHP
php 面向对象的一个例子
2011/04/12 PHP
Thinkphp中volist标签mod控制一定记录的换行BUG解决方法
2014/11/04 PHP
CI框架AR操作(数组形式)实现插入多条sql数据的方法
2016/05/18 PHP
nodejs实用示例 缩址还原
2010/12/28 NodeJs
JQuery限制复选框checkbox可选中个数的方法
2015/04/20 Javascript
浅谈Jquery为元素绑定事件
2015/04/27 Javascript
jquery实现简单实用的打分程序实例
2015/07/23 Javascript
jquery彩色投票进度条简单实例演示
2020/07/23 Javascript
nodejs 子进程正确的打开方式
2017/07/03 NodeJs
JavaScript输出所选择起始与结束日期的方法
2017/07/12 Javascript
vue init webpack myproject构建项目 ip不能访问的解决方法
2018/03/20 Javascript
详解如何用babel转换es6的class语法
2018/04/03 Javascript
解决前后端分离 vue+springboot 跨域 session+cookie失效问题
2019/05/13 Javascript
CKeditor富文本编辑器使用技巧之添加自定义插件的方法
2019/06/14 Javascript
Vue $emit()不能触发父组件方法的原因及解决
2020/07/28 Javascript
解决Vue大括号字符换行踩的坑
2020/11/09 Javascript
[01:02:46]VGJ.S vs NB 2018国际邀请赛小组赛BO2 第二场 8.18
2018/08/19 DOTA
一步步教你用Python实现2048小游戏
2017/01/19 Python
python OpenCV学习笔记实现二维直方图
2018/02/08 Python
Python+Pandas 获取数据库并加入DataFrame的实例
2018/07/25 Python
python打包生成的exe文件运行时提示缺少模块的解决方法
2018/10/31 Python
VSCode Python开发环境配置的详细步骤
2019/02/22 Python
墨西哥运动服饰和鞋网上商店:Netshoes墨西哥
2016/07/28 全球购物
Otticanet澳大利亚:最顶尖的世界名牌眼镜, 能得到打折季的价格
2018/08/23 全球购物
Ancheer官方户外和运动商店:销售电动自行车
2019/08/07 全球购物
Groupon比利时官方网站:特卖和网上购物高达-70%
2019/08/09 全球购物
介绍一下linux的文件系统
2012/03/20 面试题
爱护公物标语
2014/06/24 职场文书
加强干部作风建设整改方案
2014/10/24 职场文书
机关党员四风问题个人整改措施
2014/10/26 职场文书
中学生自我评价范文
2015/03/03 职场文书
地道战观后感300字
2015/06/04 职场文书
青年教师听课心得体会
2016/01/15 职场文书
vue如何实现关闭对话框后刷新列表
2022/04/08 Vue.js