jQuery可调整表和列宽插件-colResizable
最基本的例子
引入JS
<script src="js/jquery-1.8.0.min.js" type="text/javascript"></script>
<script src="js/colResizable-1.6.js" type="text/javascript"></script>
TABLE
<table class="table table-bordered">
<thead>
<tr>
<th>栏目类型</th>
<th>活动名称</th>
<th>状态</th>
<th>操作选项</th>
</tr>
</thead>
<tbody>
<tr>
<td>青春日记</td>
<td>我们一起傻逼的日子</td>
<td>提交</td>
<td>审核</td>
</tr>
<tr>
<td>我和孩子的成长故事</td>
<td>成长故事</td>
<td>通过</td>
<td>审核</td>
</tr>
</tbody>
</table>
JS
<script type="text/javascript">
$(function() {
$("table").colResizable();
})
</script>
以上步骤即可实现最简单的鼠标拖动调整表格列宽
在线演示:colresizable
更多信息参考:http://www.bacubacu.com/colresizable/
作者:itmyhome
jQuery可调整表和列宽插件-colResizable的更多相关文章
- jquery实现表格可变列宽插件开发
工作中用到了表格的可变列宽,网上看了下,自己也实现了一个,整理贴记录. 测试环境chrome,ie8,firefox jquery版本1.8.2 原理:监听table第一行的mousemove事件,当 ...
- JQuery 表格拖动调整列宽效果
类似于桌面程序中的表格拖动表头的效果,当鼠标停留在表头边框线上时,鼠标会变成表示左右拖动的形状,接着拖动鼠标,会在表格中出现一条随鼠标移动的竖线,最后放开鼠标,表格列宽会被调整.最近比较空闲,便自己动 ...
- jQuery调整表列(左右拉动调整列宽)插件__colResizable,动态列如何使用
官网地址:http://www.bacubacu.com/colresizable/ 这里值得注意的是,如果是动态加入的列,则需要先清理调用插件生成的class,id和div之后再重新调用才会有作用. ...
- jQuery表格列宽可变,兼容firfox
本demo使用jQuery包,实现表格列宽可拖拽功能,并实现页面reset时的重新布局.使用jQuery,方便函数的调用,给要处理的表格添加id 后,直接调用$("#id").mo ...
- 基于JQuery可拖动列表格插件DataTables的踩坑记
前言 最近项目中在使用能够拖动列调整列位置顺序的表格插件---DataTables,这也是目前我找到的唯一一种存在有这种功能的插件. 在查找使用方法的过程中发现可用案例并不多,且大多言语不详.本文将全 ...
- Bootstrap Table列宽拖动的方法
在之前做过的一个web项目中,前端表格是基于jQuery和Bootstrap Table实现的,要求能利用拖动改变列宽,现将实现的过程记录如下: 1. Bootstrap Table可拖动,需要用到它 ...
- 6款强大的 jQuery 网页布局创建及优化插件
本文将为您介绍6款功能强大的jQuery插件,它们能够帮助您方便快捷地创建复杂的网络布局并进行优化. 1.UI.Layout 该插件可以创建任何你想要的UI形式:包括从简单的标题或侧边栏,到一个包含工 ...
- CSS 控制table 滑动及调整列宽等问题总结
一. 通过css控制table y方向上滚动 html中没有滚动条,可以根据overflow属性的scroll来对table显示不完全的内容进行滚动. 只是y方向上滚动,很简单,只要设置div的hei ...
- 图片延时加载原理 和 使用jquery实现的一个图片延迟加载插件(含图片延迟加载原理)
图片加载技术分为:图片预加载和图片延时加载. javascript图片预加载和延时加载的区别主要体现在图片传输到客户端的时机上,都是为了提升用户体验的,延时加载又叫懒加载.两种技术的本质:两者的行为是 ...
随机推荐
- BZOJ4627 权值线段树
4627: [BeiJing2016]回转寿司 Time Limit: 10 Sec Memory Limit: 256 MBSubmit: 1204 Solved: 475[Submit][St ...
- Rails应用系列(1):初识Rails
第一个Rails应用 Rails是一个"模型-视图-控制器"框架(MVC).是用Ruby写的,所以要对Ruby要有一定的了解才能对rails框架深入学习.其实Ruby与Rails就 ...
- docker大概理解
#是啥# 轻量级的虚拟机,占用资源远小于一般意义上的虚拟机(例如:vmware,hyper-v) #特点# 启动快,体积小,开销少 #本质# Linux容器的一种封装 参考: 阮一峰博客 http:/ ...
- sharepoint_study_5
描述:手动进行SharePoint网页调试图解 解决: 第一步:打开页面的后台代码,设置断点 第二步:添加到进程 第三步:选择SharePoint进程,我这里都选了,如果你知道要调试的页面是哪一个进程 ...
- wzoi(栈模拟)
链接:https://ac.nowcoder.com/acm/contest/332/I 来源:牛客网 题目描述 bleaves 最近在 wzoi 上面做题. wzoi 的题目有两种,一种是 noip ...
- C# B站的弹幕提取
要知道B站的弹幕位置 如果只考虑视频,B站的链接格式为:https://www.bilibili.com/video/av34042815.把av后面的数字看做是唯一标记即可. 既然能够把弹幕加载出来 ...
- ActionHelper
/// <summary> /// 方法帮助类 /// </summary> public class ActionHelper { /// <summary> / ...
- Spring Annotation(注解)
Spring Boot Annotation @SpringBootApplication 必须作用在main 方法所在类 @RequestMapping @GetMapping @PostMappi ...
- 利用Flume将本地文件数据中收集到HDFS
1. 创建文件 放入一个txt文件 然后查看hdfs上的文件夹 不知道为什么并没有出现本地的文件 也不报错 后来发现,没有在logs文件夹下面,在newlogs文件夹下面
- oracle执行update语句卡住不动
一.问题探究 开发的时候debug到一条update的sql语句时程序就不动了,然后我就在plsql上试了一下,发现plsql一直在显示正在执行,等了好久也不出结果.但是奇怪的是执行其他的select ...