jQuery模拟Word2007插入表格，仿Google Docs效果

发布时间：2018-08-14 14:25:49 所属栏目：PHP教程来源：站长网

导读：jQuery 模拟Word2007插入表格，这是仿Google Docs在线文档的一个表格插入效果。使用过word2007的童鞋都见过这样的效果，但是在网页上实现这特效您不一定见过吧？基于jQuery编写，当然只是选择表格部分，不包括表格自身的内容编辑，感兴趣的朋友可以自己编

　　jQuery模拟Word2007插入表格，这是仿Google Docs在线文档的一个表格插入效果。使用过word2007的童鞋都见过这样的效果，但是在网页上实现这特效您不一定见过吧？基于jQuery编写，当然只是选择表格部分，不包括表格自身的内容编辑，感兴趣的朋友可以自己编写扩展。该函数带有2个参数，一个是触发对象，一个是表格选项，包括可以设置的默认最小行数列数、最大行数列数以及选择后的回调函数。

　　为解决一些网页特效运行后不能显示效果（例如：jQuery则需要刷新）问题，烈火特别新增网页版演示。

　　点击查看：网页特效

　　运行演示：

<!DOCTYPE HTML> <html> <head> <meta charset="gbk"> <title>仿google Docs在线文档的表格插入效果</title> <script src="/uploads/common/js/jquery-1.7.min.js"></script> <style> /*reset*/ html,body,div,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,address,img,ins,del,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td{margin:0;padding:0;border:0} body,button,input,select,textarea{font:12px/1.6 Arial,Tahoma,simsun;color:#333} button,input,select,textarea{margin:0;outline:0} textarea{resize:none} h1,h2,h3,h4,h5,h6{font-size:100%} address,cite,dfn,em,var,i{font-style:normal} blockquote:before,blockquote:after,q:before,q:after{content:''} table{border-spacing:0;border-collapse:collapse} li{list-style:none} section,article,aside,header,footer,nav,dialog,figure{display:block}/*html5*/ pre{word-wrap:break-word;font-family:Arial;zoom:1;white-space:pre-wrap} /*public*/ a{text-decoration:none;color:#36c} a:hover{text-decoration:underline;color:#FF7000} .clear{clear:both;height:0;overflow:hidden} .clearfix:after{content:"";display:block;height:0;clear:both;visibility:hidden} .clearfix{zoom:1} label input{vertical-align:-2px;*vertical-align:0} .fl{float:left} .fr{float:right} .page_all{width:980px;margin:0 auto} .gray3{color:#333}/*text*/ .gray6{color:#666} .gray7{color:#7e7e7e} .gray9{color:#999} .orange,.sublink .orange{color:#ff7000} .green{color:#65C202} .sublink a{color:#3C5891} .m5{margin:5px}/*margin*/ .mt5{margin-top:5px} .mr5{margin-right:5px} .mb5{margin-bottom:5px} .ml5{margin-left:5px} .m10{margin:10px} .mt10{margin-top:10px} .mr10{margin-right:10px} .mb10{margin-bottom:10px} .ml10{margin-left:10px} .lh24{line-height:24px} </style> </head> <body> <style type="text/css"> #insert_table{border-radius:2px;box-shadow:0px 1px 3px rgba(0,0,0,0.1);background:-webkit-linear-gradient(#fafafa, #f4f4f4 40%, #e5e5e5);border:1px solid #aaa;color:#444;padding:3px 12px 3px 12px;margin:60px 100px} #insert_table:hover{box-shadow:0px 1px 3px rgba(0,0,0,0.2);background:#ebebeb -webkit-linear-gradient(#fefefe, #f8f8f8 40%, #e9e9e9);border-color:#999;color: #222} .in_tab_box{border:1px solid #ccc;box-shadow:1px 1px 5px #ddd;background:#fff;padding:5px;display:none;position:absolute} .itb_con{width:100%;height:100%;overflow:hidden;font-size:18px;position:relative;-webkit-transition:all .1s linear;-moz-transition:all .1s linear} .itb_picker_unlight{background:url(/uploads/allimg/1201/veryhuo-unhighlighted.png) repeat} .itb_picker_unlight,.itb_picker_light{position:absolute;top:0;left:0;-webkit-transition:all .1s linear;-moz-transition:all .1s linear} .itb_picker_light{background:url(/uploads/allimg/1201/veryhuo-highlighted.png) repeat} .itb_picker_status{text-align:center;color:#333;font:10pt/1.7 arial} /*other style*/ h1{font:26px/3 'microsoft yahei','simhei';color:#000;text-indent:2em;text-shadow:1px 1px 2px #ccc} h3{margin-bottom:10px} table{margin:0 100px;border:solid #ccc;border-width:1px 0 0 1px} td{border:solid #ccc;border-width:0 1px 1px 0;padding:10px;-webkit-transition:all .15s linear;-moz-transition:all .15s linear} td:hover{background:#eee} </style> <h1>仿google Docs在线文档的表格插入效果</h1> <button id="insert_table">插入表格</button> <script> /* * 插入表格 * @btn:选择触发器,jquery对象 * @opt:表格选项,{min:[最小列数,最小行数],max:[最大列数,最大行数],insert:确认选择后回调事件} */ var insertTable = function(btn,opt){ if(!btn){return;} this.btn = btn; opt = opt || {}; this.box = null;//弹框 this.inBox = null; this.pickUnLight = null; this.pickLight = null; this.status = null; this.minSize = opt.min || [5,5];//最小列数和行数 this.maxSize = opt.max || [15,15];//最大列数和行数 this.insert = opt.insert;//回调 this.nowSize = [];//当前选择尺寸 this.isInit = {create:false,bind:false}; this.bind(); } insertTable.prototype = { init : function(){ if(this.isInit.create){return;} this.isInit.create = true; var id = 'in_tab_box_'+String(Math.ceil(Math.random() * 100000) + String(new Date().getTime())), html = '<div class="in_tab_box" id="'+id+'">'; html += '<div class="itb_con">'; html += '<div class="itb_picker_unlight"></div>'; html += '<div class="itb_picker_light"></div>'; html += '</div>'; html += '<div class="itb_picker_status"></div>'; html += '</div>'; $("body").append(html); this.box = $("#"+id); this.inBox = this.box.find(".itb_con"); this.pickAll = this.box.find(".itb_picker_all"); this.pickUnLight = this.box.find(".itb_picker_unlight"); this.pickLight = this.box.find(".itb_picker_light"); this.status = this.box.find(".itb_picker_status"); this.setBg(this.minSize[0],0); this.setBg(this.minSize[1],1); this.status.text(0+'列 x '+0+'行'); }, bind : function(){ var T = this, pos,//弹框显示位置 m, bPos,//弹框可选区域位置 mPos;//鼠标位置 this.btn.click(function(){ if(!T.isInit.create){T.init();}//初始化弹框 if(!T.isInit.bind){B();}//初始化事件 m = $(this); if(T.box.is(":hidden")){ pos = { top:m.offset().top, left:m.offset().left+m.outerWidth()+2 } T.box.css({ "top":pos.top, "left":pos.left }).fadeIn(100); bPos = { top : T.inBox.offset().top, left : T.inBox.offset().left } $(document).bind("click",function(){T.hide();}); }else{ T.hide(); } return false; }) function B(){ T.isInit.bind = true; T.inBox.mousemove(function(e){ mPos = { x : e.clientX, y : e.clientY } if(mPos.x < bPos.left || mPos.y < bPos.top){return;} T.nowSize[0] = Math.ceil((mPos.x - bPos.left)/18);//列数 T.nowSize[1] = Math.ceil((mPos.y - bPos.top)/18);//行数 if(T.nowSize[0]>=T.minSize[0]&&T.nowSize[0]<T.maxSize[0]){ T.setBg(T.nowSize[0]+1,0); }else if(T.nowSize[0]<T.minSize[0]){ T.setBg(T.minSize[0],0); }else{ T.nowSize[0] = T.maxSize[0]; } if(T.nowSize[1]>=T.minSize[1]&&T.nowSize[1]<T.maxSize[1]){ T.setBg(T.nowSize[1]+1,1); }else if(T.nowSize[1]<T.minSize[1]){ T.setBg(T.minSize[1],1); }else{ T.nowSize[1] = T.maxSize[1]; } T.pickLight.css({ "width":T.nowSize[0]+'em', "height":T.nowSize[1]+'em' }) T.status.text(T.nowSize[0]+'列 x '+T.nowSize[1]+'行'); }) //单击确认插入表格 T.box.click(function(){ if(T.nowSize[0]>0&&T.nowSize[0]<=T.maxSize[0]&&T.nowSize[1]>0&&T.nowSize[1]<=T.maxSize[1]){ var rows = T.nowSize[1], cols = T.nowSize[0]; try{T.insert(rows,cols);}catch(e){} } }) } }, //调整背景区域 setBg : function(size,t){ if(t==0){ this.inBox.width(size+'em'); this.pickUnLight.width(size+'em'); }else{ this.inBox.height(size+'em'); this.pickUnLight.height(size+'em'); } }, //隐藏弹框 hide : function(){ var T = this; this.box.fadeOut(100,function(){ //重置 T.setBg(T.minSize[0],0); T.setBg(T.minSize[1],1); T.pickLight.css({ "width":'0', "height":'0' }) }); } } new insertTable($("#insert_table"),{ min : [4,4], max : [20,20], insert : function(rows,cols){ //这里只返回所选行数rows和列数cols,插入后的效果和样式需自定义,以下只是做简单的示例 //alert('插入了一个'+rows+'行'+cols+'列的表格'); var html = '<table>'; for(var i=0;i<rows;i++){ html += '<tr>'; for(var j=0;j<cols;j++){ html += '<td></td>'; } html += '</tr>'; } html += '</table>'; this.btn.siblings("table").remove(); this.btn.after(html); } }); </script> </body> </html><div style="text-align:center;margin:30px 0 0 0;"><hr style="color:#999;height:1px;">如不能显示效果，请按Ctrl+F5刷新本页，更多网页代码：<a href='http://www.veryhuo.com/' target='_blank'>http://www.veryhuo.com/</a></div>
提示：可修改后代码再运行!

（编辑：武汉站长网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!

Php常见问题汇总	运用Xdebug优化你的ph
PHP技巧 Smarty adodb	PHP完成任意字符集下正