最基本的例子

引入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的更多相关文章

  1. jquery实现表格可变列宽插件开发

    工作中用到了表格的可变列宽,网上看了下,自己也实现了一个,整理贴记录. 测试环境chrome,ie8,firefox jquery版本1.8.2 原理:监听table第一行的mousemove事件,当 ...

  2. JQuery 表格拖动调整列宽效果

    类似于桌面程序中的表格拖动表头的效果,当鼠标停留在表头边框线上时,鼠标会变成表示左右拖动的形状,接着拖动鼠标,会在表格中出现一条随鼠标移动的竖线,最后放开鼠标,表格列宽会被调整.最近比较空闲,便自己动 ...

  3. jQuery调整表列(左右拉动调整列宽)插件__colResizable,动态列如何使用

    官网地址:http://www.bacubacu.com/colresizable/ 这里值得注意的是,如果是动态加入的列,则需要先清理调用插件生成的class,id和div之后再重新调用才会有作用. ...

  4. jQuery表格列宽可变,兼容firfox

    本demo使用jQuery包,实现表格列宽可拖拽功能,并实现页面reset时的重新布局.使用jQuery,方便函数的调用,给要处理的表格添加id 后,直接调用$("#id").mo ...

  5. 基于JQuery可拖动列表格插件DataTables的踩坑记

    前言 最近项目中在使用能够拖动列调整列位置顺序的表格插件---DataTables,这也是目前我找到的唯一一种存在有这种功能的插件. 在查找使用方法的过程中发现可用案例并不多,且大多言语不详.本文将全 ...

  6. Bootstrap Table列宽拖动的方法

    在之前做过的一个web项目中,前端表格是基于jQuery和Bootstrap Table实现的,要求能利用拖动改变列宽,现将实现的过程记录如下: 1. Bootstrap Table可拖动,需要用到它 ...

  7. 6款强大的 jQuery 网页布局创建及优化插件

    本文将为您介绍6款功能强大的jQuery插件,它们能够帮助您方便快捷地创建复杂的网络布局并进行优化. 1.UI.Layout 该插件可以创建任何你想要的UI形式:包括从简单的标题或侧边栏,到一个包含工 ...

  8. CSS 控制table 滑动及调整列宽等问题总结

    一. 通过css控制table y方向上滚动 html中没有滚动条,可以根据overflow属性的scroll来对table显示不完全的内容进行滚动. 只是y方向上滚动,很简单,只要设置div的hei ...

  9. 图片延时加载原理 和 使用jquery实现的一个图片延迟加载插件(含图片延迟加载原理)

    图片加载技术分为:图片预加载和图片延时加载. javascript图片预加载和延时加载的区别主要体现在图片传输到客户端的时机上,都是为了提升用户体验的,延时加载又叫懒加载.两种技术的本质:两者的行为是 ...

随机推荐

  1. Android 开发环境的构建备忘

    准备工作:下载Eclipse.JDK.Android SDK.ADT插件 下载地址:Eclipse:http://www.eclipse.org/downloads/               JD ...

  2. CBoard 视图中的拖拽实现

    CBoard中拖拽的功能其实引用了 github的angular-drag-and-drop-lists控件来实现的. 在html页面中引用 div引用dnd-inserted属性 Cboard 系列 ...

  3. python学习之路---day06

    一:is 和 == 的区别 01)a b 两个变量 is 是比较变量的内存地址,如果地址相等,则返回True,如果不相等,则返回False == 是比较变量两边内容是否一样,如果一样则返回True,不 ...

  4. Bootstrap点击弹出注册登录

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  5. springMVC上传功能(单文件和多文件上传)

    单文件和多文件上传 首先在xxx-select.xml里面配置上传的大小和编码 <bean id="multipartResolver" class="org.sp ...

  6. composer 创建自己包

    服务器环境下创建自己的项目文件 初始化composer 打开cmd 窗口,cd 到 backrestore 执行 composer init 命令 D:\phpStudy\WWW\backrestor ...

  7. bzoj4034 树上操作 树链剖分+线段树

    题目传送门 题目大意: 有一棵点数为 N 的树,以点 1 为根,且树点有权.然后有 M 个操作,分为三种: 操作 1 :把某个节点 x 的点权增加 a . 操作 2 :把某个节点 x 为根的子树中所有 ...

  8. HDU6470 ()矩阵快速幂

    http://acm.hdu.edu.cn/showproblem.php?pid=6470 题意:f[n] = f[n-1] + f[n-2]*2 + n^3; f[1] =1 ; f[2] = 2 ...

  9. HDU6396 (贪心+fread 挂)

    题意:初始值你有k个属性的攻击vi,有n个怪兽,每个怪兽有k种属性的血量ai,并且有k种属性的加成bi,当你的k种属性的值全部大于等于某只怪兽的k种属性的血量,你可以杀死他,并且你的攻击力vi会升级, ...

  10. 【实战】简述一次挖XSS的经历

    值守尤其是夜班真的是件痛苦的事情呀,献给还在值守岗位上奋斗的小伙伴们. 简单试了前面几个参数,发现c0-id这个参数值在响应包里有回显,截图如下: 把c0-id参数值改为xss,响应包内容也随之变化, ...