jquery-能拖拽宽度的table
控件官方地址:http://www.bacubacu.com/colresizable/?utm_source=jquer.in&utm_medium=website&utm_campaign=content-curation#samples
使用【colResizable】第三方插件
使用方法:
<head>
<script src="js/jquery.js"></script>
<script src="js/colResizable.min.js"></script>
</head>
<body>
<table width="100%" >
<tr> <th> header </th> <th> header </th> </tr>
<tr> <td> cell </td> <td> cell </td> </tr>
<tr> <td> cell </td> <td> cell </td> </tr>
</table>
</body> <script>
$(function(){
$("table").colResizable();
});
</script>
属性或方法:
【模式】resizeMode:[type: string] [default: 'fit'] [version: 1.6] [values: 'fit', 'flex', 'overflow']
【禁止】disable:[type: boolean] [default: false] [version: 1.0]
【禁止的列】disabledColumns:[type: array of int] [default: [ ] ] [version: 1.6]
【激活的拖拽】liveDrag:[type: boolean] [default: false] [version: 1.0]
【是否支持缓存】postbackSafe:[type: boolean] [default: false] [version: 1.3]
(如果是低版本的IE需要加上 sessionStorage.js 才能生效,如:IE7 and IE8)
【局部刷新(ajax)】partialRefresh:[type: boolean] [default: false] [version: 1.5]
【列高与第一行相同】headerOnly:[type: boolean] [default: false] [version: 1.2]
【设置抓钩的html】innerGripHtml:[type: string] [default: empty string] [version: 1.0]
【托转的样式】draggingClass:[type: string] [default: internal css class] [version: 1.0]
【定义最小宽度】minWidth:[type: number] [default: 15] [version: 1.1]
【活动手势】hoverCursor:[type: string] [default: "e-resize"] [version: 1.3]
【拖拽的手势】dragCursor:[type: string] [default: "e-resize"] [version: 1.3]
【冲刷(只有动态刷新时生效)】flush:[type: boolean] [default: false] [version: 1.3]
【左margin】marginLeft:[type: string / null] [default: null] [version: 1.3]
【右margin】marginRight:[type: string / null] [default: null] [version: 1.3]
【修正】fixed:[DEPRECATED: use resizeMode instead] [type: boolean] [default: true] [version: 1.5 only]
【==事件==】
【拖动时触发】onResize:[type: callback function] [default: null] [version: 1.0]
【拖动后触发】onDrag:[type: callback function] [default: null] [version: 1.1]
jquery-能拖拽宽度的table的更多相关文章
- jQuery可拖拽3D万花筒旋转特效
这是一个使用了CSS3立体效果的强大特效,本特效使用jQuery跟CSS3 transform来实现在用户鼠标按下拖动时,环形图片墙可以跟随鼠标进行3D旋转动画. 效果体验:http://hovert ...
- jQuery可拖拽排序列表jquery-sortable-lists
jquery-sortable-lists可以通过鼠标进行拖动排列树型菜单,可以定义某个列表元素是否拖动,拖动后回调,点击可以折叠树型结点,可以用来在后台模仿wordpress后台拖动菜单,实现多级菜 ...
- jquery实现拖拽以及jquery监听事件的写法
很久之前写了一个jquery3D楼盘在线选择,这么一个插件,插件很简单,因为后期项目中没有实际用到,因此,有些地方不是很完善,后面也懒得再进行修改维护了.最近放到github上面,但是也少有人问津及s ...
- jquery sortTable拖拽排序
所有的事件回调函数都有两个参数:event和ui,浏览器自有event对象,和经过封装的ui对象 ui.helper - 表示sortable元素的JQuery对象,通常是当前元素的克隆对象 ...
- jQuery 鼠标拖拽排序
<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content ...
- SpringMvc+jQuery 文件拖拽上传、选择上传
最近做了个简易的基于boostrap的文件上传功能,jsp版本的,后续会完善更多的功能,不过现在已经能用了,需要的小伙伴,直接引用下面的文件内容直接copy到自己的项目中就ok了,效果如图: file ...
- 面向对象+jquery实现拖拽功能
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
- JQuery之拖拽插件
一直以来,都对JS获取元素的位置感到非常的困惑:一会client.一会offset.一会scroll. 再加上各大浏览器之间的不兼容,唉,搞得哥晕晕乎乎的. 而很多页面效果都要用到这些位置.不得已,得 ...
- jquery 可拖拽的窗体控件实现代码
引入JQUERY框架.把这个控件代码放到一个js文件里面直接引入就可以了控件代码 $.fn.myDrag = function() { var self = $(this); self.css(&qu ...
随机推荐
- Linux一行命令处理批量文件
前言 最好的方法不一定是你最快能想到的.这里提供一种使用sed命令构造命令解决处理批量文件的技巧,供参考. 需求案例1 将当前目录下所有的0_80_91.txt.0_80_92.txt.0_80_93 ...
- loadrunner 关联函数web_reg_save_param
当我们每次访问网站都需要提交从服务器获取的动态文本时就会需要用到关联函数,就好像每次乘坐火车票我们都需要用最新的火车票,如果用旧车票就不能做火车,如果我们采用了录制时的旧动态码如usersession ...
- css预处理器:Sass LASS Stylus
语法 Sass h1 { color: #0982C1; } h1 color: #0982c1 LESS h1 { color: #0982C1; } Stylus /* style.styl */ ...
- org.apache.hadoop.security.AccessControlException: Permission denied: user=
这个是权限问题,可以配置下,然后重启hadoop集群解决,目前简单的解决方式是: 在 hdfs-site.xml 总添加参数: <property> <name>dfs. ...
- Xamarin.Form怎么调用原生方法
---恢复内容开始--- Xamarin.Form怎么调用原生包 今天我想和大家分享的是有关Xamarin如何调用安卓的原生代码,下面的例子以大家可能会经常用到的微信WX方法的调用. 首先我们新建一个 ...
- spark on yarn 内存分配
Spark On YARN内存分配 本文主要了解Spark On YARN部署模式下的内存分配情况,因为没有深入研究Spark的源代码,所以只能根据日志去看相关的源代码,从而了解“为什么会这样,为什么 ...
- python经典案例
前言:初学者对python的流程语句有一定的了解,但是运用起来总会磕磕碰碰.本文总结了一些初学者在学习python时做的经典案例 一.名片管理系统(限单个名片) info = {'name':'jam ...
- MongoDB - 1
MongoDB - 1 一.初识MongoDB 之 什么东西都得先从理论入手,你说是不是啊? MongoDB 是一个基于分布式文件存储的数据库.由 C++ 语言编写.旨在为 WEB 应用提供可扩展 ...
- 微信小程序分享朋友圈
原理:canvas生成图片再保存到手机 JS onShow: function () { var that = this; //1. 请求后端API生成小程序码 // that.getQr(); // ...
- CMakeLists 的使用,大型工程使用cmake 的构件过程
CMakeLists 的使用,大型工程使用cmake 的构件过程 CMakeLists_1 PROJECT(hello_2) cmake_minimum_required(VERSION 2.8) # ...