经验分享程序开发文档资料数据资源其它资源

jQuery表格宽度自由拖拽特效js代码

版权：原创 更新时间：1年以上
[该文章底部包含文件资源,可根据自己情况,决定是否下载资源使用,时间>金钱,如有需要,立即查看资源]

以下是 jQuery表格宽度自由拖拽特效js代码 的示例演示效果:

当前平台(PC电脑)
  • 平台:
整屏预览

部分效果截图:

jQuery表格宽度自由拖拽特效js代码

HTML代码(index.html):

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jQuery表格宽度自由拖拽特效</title> 
<style>
*{ margin:0; padding:0;}
body{font-size:14px; padding:50px;}
.lanrenzhijia{text-align:left;}
.lanrenzhijia th{  background-image:url('images/th.png');  height:30px;  background-repeat:no-repeat;  color:white;  text-shadow: #012b4d 2px 2px 2px;  text-align: center; }
.lanrenzhijia td{text-indent:5px; padding:5px;color:#444;border-bottom:1px solid #bbb;border-left:1px solid #bbb;}
.lanrenzhijia td.left{border-left:1px solid #2e638e;}
.lanrenzhijia td.right{border-right:1px solid #2e638e;}
.lanrenzhijia td.bottom{border-bottom:1px solid #2e638e;}
.grip{width:20px;height:30px;margin-top:-3px;background-image:url('images/grip.png');margin-left:-5px;position:relative;z-index:88;cursor:e-resize;}
.grip:hover{background-position-x:-20px;}
.dragging .grip{background-position-x:-40px;}
.sampleText{position:relative;width:100%;}
.dotted{background-image:url('images/dotted.png');background-repeat:repeat-y;}
input.check{}
#sample2Txt{float:right;}
label{color:#0361ae;}
#sample2 th:nth-child(2){color:Red !important;display:none;}
#sample2 td:nth-child(2){color:Red !important;display:none;}
#sample2 th:nth-child(3){color:Red !important;display:none;}
#sample2 td:nth-child(3){color:Red !important;display:none;}
</style>
</head>
<body>
<div class="lanrenzhijia" >
<table id="sample2" width="100%" border="0" cellpadding="0" cellspacing="0">
	<tr>
		<th>标题</th><th>标题</th><th>标题</th><th>标题</th><th>标题</th>
	</tr>
	<tr>
		<td class="left">表格内容</td><td>表格内容</td><td>表格内容</td><td>表格内容</td><td class="right">表格内容</td>
	</tr>
	<tr>
		<td class="left">表格内容</td><td>表格内容</td><td>表格内容</td><td>表格内容</td><td class="right">表格内容</td>
	</tr>
	<tr>
		<td class="left bottom">表格内容</td><td class="bottom">表格内容</td><td class="bottom">表格内容</td><td class="bottom">表格内容</td><td class="bottom right">表格内容</td>
	</tr>																	
</table>
	<div class="sampleText">
		<label id="sample2Txt">Drag the columns to start</label>
	</div>
</div>	
<script src="js/jquery-1.8.3.min.js"></script>
<script	src="js/colResizable-1.5.min.js"></script>
<script>
$(function(){	
	var onSampleResized = function(e){
		var columns = $(e.currentTarget).find("th");
		var msg = "columns widths: ";
		columns.each(function(){ msg += $(this).width() + "px; "; })
		$("#sample2Txt").html(msg);		
	};	
	$("#sample2").colResizable({
		liveDrag:true, 
		gripInnerHtml:"<div class='grip'></div>", 
		draggingClass:"dragging", 
		onResize:onSampleResized
	});
});	
</script>
</body>
</html>

JS代码(colResizable-1.5.min.js):

(function($){
	var d=$(document),h=$("head"),drag=null,tables=[],count=0,ID="id",PX="px",SIGNATURE="JColResizer",FLEX="JCLRFlex",I=parseInt,M=Math,ie=navigator.userAgent.indexOf('Trident/4.0')>0,S;
	try{
	S=sessionStorage}
catch(e){
}
;
	h.append("<style type='text/css'> .JColResizer{
	table-layout:fixed;
}
.JColResizer td,.JColResizer th{
	overflow:hidden;
	padding-left:0!important;
	padding-right:0!important;
}
.JCLRgrips{
	height:0px;
	position:relative;
}
.JCLRgrip{
	margin-left:-5px;
	position:absolute;
	z-index:5;
}
.JCLRgrip .JColResizer{
	position:absolute;
	background-color:red;
	filter:alpha(opacity=1);
	opacity:0;
	width:10px;
	height:100%;
	cursor:e-resize;
	top:0px}
.JCLRLastGrip{
	position:absolute;
	width:1px;
}
.JCLRgripDrag{
	border-left:1px dotted black;
}
.JCLRFlex{
	width:auto!important;
}
</style>");
	var init=function(tb,options){
	var t=$(tb);
	t.opt=options;
	if(t.opt.disable)return destroy(t);
	var id=t.id=t.attr(ID)||SIGNATURE+ count++;
	t.p=t.opt.postbackSafe;
	if(!t.is("table")||tables[id]&&!t.opt.partialRefresh)return;
	t.addClass(SIGNATURE).attr(ID,id).before('<div class="JCLRgrips"/>');
	t.g=[];
	t.c=[];
	t.w=t.width();
	t.gc=t.prev();
	t.f=t.opt.fixed;
	if(options.marginLeft)t.gc.css("marginLeft",options.marginLeft);
	if(options.marginRight)t.gc.css("marginRight",options.marginRight);
	t.cs=I(ie?tb.cellSpacing||tb.currentStyle.borderSpacing:t.css('border-spacing'))||2;
	t.b=I(ie?tb.border||tb.currentStyle.borderLeftWidth:t.css('border-left-width'))||1;
	tables[id]=t;
	createGrips(t)}
,destroy=function(t){
	var id=t.attr(ID),t=tables[id];
	if(!t||!t.is("table"))return;
	t.removeClass(SIGNATURE+" "+FLEX).gc.remove();
	delete tables[id]}
,createGrips=function(t){
	var th=t.find(">thead>tr>th,>thead>tr>td");
	if(!th.length)th=t.find(">tbody>tr:first>th,>tr:first>th,>tbody>tr:first>td,>tr:first>td");
	th=th.filter(":visible");
	t.cg=t.find("col");
	t.ln=th.length;
	if(t.p&&S&&S[t.id])memento(t,th);
	th.each(function(i){
	var c=$(this),g=$(t.gc.append('<div class="JCLRgrip"></div>')[0].lastChild);
	g.append(t.opt.gripInnerHtml).append('<div class="'+SIGNATURE+'"></div>');
	if(i==t.ln-1){
	g.addClass("JCLRLastGrip");
	if(t.f)g.html("")}
;
	g.bind('touchstart mousedown',onGripMouseDown);
	g.t=t;
	g.i=i;
	g.c=c;
	c.w=c.width();
	t.g.push(g);
	t.c.push(c);
	c.width(c.w).removeAttr("width");
	g.data(SIGNATURE,{
	i:i,t:t.attr(ID),last:i==t.ln-1}
)}
);
	t.cg.removeAttr("width");
	syncGrips(t);
	t.find('td,th').not(th).not('table th,table td').each(function(){
	$(this).removeAttr('width')}
);
	if(!t.f)t.removeAttr('width').addClass(FLEX)}
,memento=function(t,th){
	var w,m=0,i=0,aux=[],tw;
	if(th){
	t.cg.removeAttr("width");
	if(t.opt.flush){
	S[t.id]="";
	return}
;
	w=S[t.id].split(";
	");
	tw=w[t.ln+1];
	if(!t.f&&tw)t.width(tw);
	for(;
	i<t.ln;
	i++){
	aux.push(100*w[i]/w[t.ln]+"%");
	th.eq(i).css("width",aux[i])}
;
	for(i=0;
	i<t.ln;
	i++)t.cg.eq(i).css("width",aux[i])}
else{
	S[t.id]="";
	for(;
	i<t.c.length;
	i++){
	w=t.c[i].width();
	S[t.id]+=w+";
	";
	m+=w}
;
	S[t.id]+=m;
	if(!t.f)S[t.id]+=";
	"+t.width()}
}
,syncGrips=function(t){
	t.gc.width(t.w);
	for(var i=0;
	i<t.ln;
	i++){
	var c=t.c[i];
	t.g[i].css({
	left:c.offset().left-t.offset().left+c.outerWidth(false)+t.cs/2+PX,height:t.opt.headerOnly?t.c[0].outerHeight(false):t.outerHeight(false)}
)}
}
,syncCols=function(t,i,isOver){
	var inc=drag.x-drag.l,c=t.c[i],c2=t.c[i+1],w=c.w+inc,w2=c2.w-inc;
	c.width(w+PX);
	t.cg.eq(i).width(w+PX);
	if(t.f){
	c2.width(w2+PX);
	t.cg.eq(i+1).width(w2+PX)}
;
	if(isOver){
	c.w=w;
	c2.w=t.f?w2:c2.w}
}
,applyBounds=function(t){
	var w=$.map(t.c,function(c){
	return c.width()}
);
	t.width(t.width()).removeClass(FLEX);
	$.each(t.c,function(i,c){
	c.width(w[i]).w=w[i]}
);
	t.addClass(FLEX)}
,onGripDrag=function(e){
	if(!drag)return;
	var t=drag.t,oe=e.originalEvent.touches,ox=oe?oe[0].pageX:e.pageX,x=ox-drag.ox+drag.l,mw=t.opt.minWidth,i=drag.i,l=t.cs*1.5+mw+t.b,last=i==t.ln-1,min=i?t.g[i-1].position().left+t.cs+mw:l,max=t.f?i==t.ln-1?t.w-l:t.g[i+1].position().left-t.cs-mw:Infinity;
	x=M.max(min,M.min(max,x));
	drag.x=x;
	drag.css("left",x+PX);
	if(last){
	var c=t.c[drag.i];
	drag.w=c.w+x-drag.l}
;
	if(t.opt.liveDrag){
	if(last){
	c.width(drag.w);
	t.w=t.width()}
else syncCols(t,i);
	syncGrips(t);
	var cb=t.opt.onDrag;
	if(cb){
	e.currentTarget=t[0];
	cb(e)}
}
;
	return false}
,onGripDragOver=function(e){
	d.unbind('touchend.'+SIGNATURE+' mouseup.'+SIGNATURE).unbind('touchmove.'+SIGNATURE+' mousemove.'+SIGNATURE);
	$("head:last-child").remove();
	if(!drag)return;
	drag.removeClass(drag.t.opt.draggingClass);
	var t=drag.t,cb=t.opt.onResize,i=drag.i,last=i==t.ln-1,c=t.g[i].c;
	if(last){
	c.width(drag.w);
	c.w=drag.w}
else syncCols(t,i,true);
	if(!t.f)applyBounds(t);
	syncGrips(t);
	if(cb){
	e.currentTarget=t[0];
	cb(e)}
;
	if(t.p&&S)memento(t);
	drag=null}
,onGripMouseDown=function(e){
	var o=$(this).data(SIGNATURE),t=tables[o.t],g=t.g[o.i],oe=e.originalEvent.touches;
	g.ox=oe?oe[0].pageX:e.pageX;
	g.l=g.position().left;
	d.bind('touchmove.'+SIGNATURE+' mousemove.'+SIGNATURE,onGripDrag).bind('touchend.'+SIGNATURE+' mouseup.'+SIGNATURE,onGripDragOver);
	h.append("<style type='text/css'>*{
	cursor:"+t.opt.dragCursor+"!important}
</style>");
	g.addClass(t.opt.draggingClass);
	drag=g;
	if(t.c[o.i].l)for(var i=0,c;
	i<t.ln;
	i++){
	c=t.c[i];
	c.l=false;
	c.w=c.width()}
;
	return false}
,onResize=function(){
	for(t in tables){
	var t=tables[t],i,mw=0;
	t.removeClass(SIGNATURE);
	if(t.f&&t.w!=t.width()){
	t.w=t.width();
	for(i=0;
	i<t.ln;
	i++)mw+=t.c[i].w;
	for(i=0;
	i<t.ln;
	i++)t.c[i].css("width",M.round(1e3*t.c[i].w/mw)/10+"%").l=true}
;
	syncGrips(t.addClass(SIGNATURE))}
}
;
	$(window).bind('resize.'+SIGNATURE,onResize);
	$.fn.extend({
	colResizable:function(options){
	var defaults={
	draggingClass:'JCLRgripDrag',gripInnerHtml:'',liveDrag:false,fixed:true,minWidth:15,headerOnly:false,hoverCursor:"e-resize",dragCursor:"e-resize",postbackSafe:false,flush:false,marginLeft:null,marginRight:null,disable:false,partialRefresh:false,onDrag:null,onResize:null}
,options=$.extend(defaults,options);
	return this.each(function(){
	init(this,options)}
)}
}
)}
)(jQuery)
附件:下载该文件资源,减少时间成本(增值服务)
File Source
.rar
47.62 KB
立即下载(CNY 2.9￥)
打赏 收藏
分享
分享到QQ 分享到微博 微信扫一扫
留言
该资源可下载
File Source
.rar
47.62 KB
立即下载
林菲菊淑
了解
打赏作者 鼓励作者
jquery特效7
最新结算
jquery虚拟键盘中文打字效果js代码
类型: .rar 金额: CNY 2.31￥ 状态: 待结算 详细>
jquery虚拟键盘中文打字效果js代码
类型: .rar 金额: CNY 0.29￥ 状态: 待结算 详细>
HTML5实现CSS滤镜图片切换特效代码
类型: .rar 金额: CNY 2.31￥ 状态: 待结算 详细>
jQuery头像裁剪插件cropbox js代码
类型: .rar 金额: CNY 0.29￥ 状态: 待结算 详细>
jQuery头像裁剪插件cropbox js代码
类型: .rar 金额: CNY 2.31￥ 状态: 待结算 详细>
CSS3制作3D图片立方体旋转特效
类型: .rar 金额: CNY 2.31￥ 状态: 待结算 详细>
CSS3制作3D图片立方体旋转特效
类型: .rar 金额: CNY 0.29￥ 状态: 待结算 详细>
CSS3制作3D图片立方体旋转特效
类型: .rar 金额: CNY 2.31￥ 状态: 待结算 详细>
CSS3制作3D图片立方体旋转特效
类型: .rar 金额: CNY 0.29￥ 状态: 待结算 详细>
jQuery+css3实现信封效果
类型: .rar 金额: CNY 0.29￥ 状态: 待结算 详细>
我们力求给您提供有用的文章,再此基础上,会附加营收资源,不做任何广告,让平台可以更好发展 若您发现您的权利被侵害，或使用了您的版权，请发邮件联系 sunlifel@foxmail.com ggbig觉得 : 不提供源码的文章不是好文章
合作伙伴
帮助中心
联系我们
  • QQ：21499807
  • 邮箱：sunlifel@foxmail.com
  • QQ扫一扫加QQ
    QQ扫一扫
Copyright 2023-2024 ggbig.com·皖ICP备2023004211号-1
打赏文章