仿google Docs在线文档的表格插入效果
这个是模仿google在线文档的一个表格插入效果，基于jQuery编写，当然只是选择表格部分，不包括表格自身的内容编辑，感兴趣的朋友可以自己编写扩展。
该函数带有2个参数，一个是触发对象，一个是表格选项，包括可以设置的默认最小行数列数、最大行数列数以及选择后的回调函数，函数调用实例如下：
new insertTable($("#insert_table"),{
min : [4,4],
max : [20,20],
insert : function(rows,cols){//这里只返回所选行数rows和列数cols,插入后的效果和样式需自定义,以下只是做简单的示例
//alert('插入了一个'+rows+'行'+cols+'列的表格');
}
});
html部分只需要设置一个触发按钮：
<button id="insert_table">插入表格</button>
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(https://ssl.gstatic.com/docs/documents/images/dimension-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(https://ssl.gstatic.com/docs/documents/images/dimension-highlighted.png) repeat}
.itb_picker_status{text-align:center;color:#333;font:10pt/1.7 arial}
javascript部分：
View Code
1 /*
2 * 插入表格
3 * @btn:选择触发器,jquery对象
4 * @opt:表格选项,{min:[最小列数,最小行数],max:[最大列数,最大行数],insert:确认选择后回调事件}
5 */
6 var insertTable = function(btn,opt){
7 if(!btn){return;}
8 this.btn = btn;
9 opt = opt || {};
10 this.box = null;//弹框
11 this.inBox = null;
12 this.pickUnLight = null;
13 this.pickLight = null;
14 this.status = null;
15 this.minSize = opt.min || [5,5];//最小列数和行数
16 this.maxSize = opt.max || [15,15];//最大列数和行数
17 this.insert = opt.insert;//回调
18 this.nowSize = [];//当前选择尺寸
19 this.isInit = {create:false,bind:false};
20 this.bind();
21 }
22 insertTable.prototype = {
23 init : function(){
24 if(this.isInit.create){return;}
25 this.isInit.create = true;
26 var id = 'in_tab_box_'+String(Math.ceil(Math.random() * 100000) + String(new Date().getTime())),
27 html = '<div class="in_tab_box" id="'+id+'">';
28 html += '<div class="itb_con">';
29 html += '<div class="itb_picker_unlight"></div>';
30 html += '<div class="itb_picker_light"></div>';
31 html += '</div>';
32 html += '<div class="itb_picker_status"></div>';
33 html += '</div>';
34 $("body").append(html);
35 this.box = $("#"+id);
36 this.inBox = this.box.find(".itb_con");
37 this.pickAll = this.box.find(".itb_picker_all");
38 this.pickUnLight = this.box.find(".itb_picker_unlight");
39 this.pickLight = this.box.find(".itb_picker_light");
40 this.status = this.box.find(".itb_picker_status");
41
42 this.setBg(this.minSize[0],0);
43 this.setBg(this.minSize[1],1);
44
45 this.status.text(0+'列 x '+0+'行');
46 },
47 bind : function(){
48 var T = this,
49 pos,//弹框显示位置
50 m,
51 bPos,//弹框可选区域位置
52 mPos;//鼠标位置
53 this.btn.click(function(){
54 if(!T.isInit.create){T.init();}//初始化弹框
55 if(!T.isInit.bind){B();}//初始化事件
56 m = $(this);
57 if(T.box.is(":hidden")){
58 pos = {
59 top:m.offset().top,
60 left:m.offset().left+m.outerWidth()+2
61 }
62 T.box.css({
63 "top":pos.top,
64 "left":pos.left
65 }).fadeIn(100);
66 bPos = {
67 top : T.inBox.offset().top,
68 left : T.inBox.offset().left
69 }
70 $(document).bind("click",function(){T.hide();});
71 }else{
72 T.hide();
73 }
74 return false;
75 })
76 function B(){
77 T.isInit.bind = true;
78 T.inBox.mousemove(function(e){
79 mPos = {
80 x : e.clientX,
81 y : e.clientY
82 }
83 if(mPos.x < bPos.left || mPos.y < bPos.top){return;}
84 T.nowSize[0] = Math.ceil((mPos.x - bPos.left)/18);//列数
85 T.nowSize[1] = Math.ceil((mPos.y - bPos.top)/18);//行数
86
87 if(T.nowSize[0]>=T.minSize[0]&&T.nowSize[0]<T.maxSize[0]){
88 T.setBg(T.nowSize[0]+1,0);
89 }else if(T.nowSize[0]<T.minSize[0]){
90 T.setBg(T.minSize[0],0);
91 }else{
92 T.nowSize[0] = T.maxSize[0];
93 }
94 if(T.nowSize[1]>=T.minSize[1]&&T.nowSize[1]<T.maxSize[1]){
95 T.setBg(T.nowSize[1]+1,1);
96 }else if(T.nowSize[1]<T.minSize[1]){
97 T.setBg(T.minSize[1],1);
98 }else{
99 T.nowSize[1] = T.maxSize[1];
100 }
101
102 T.pickLight.css({
103 "width":T.nowSize[0]+'em',
104 "height":T.nowSize[1]+'em'
105 })
106 T.status.text(T.nowSize[0]+'列 x '+T.nowSize[1]+'行');
107 })
108 //单击确认插入表格
109 T.box.click(function(){
110 if(T.nowSize[0]>0&&T.nowSize[0]<=T.maxSize[0]&&T.nowSize[1]>0&&T.nowSize[1]<=T.maxSize[1]){
111 var rows = T.nowSize[1],
112 cols = T.nowSize[0];
113 try{T.insert(rows,cols);}catch(e){}
114 }
115 })
116 }
117 },
118 //调整背景区域
119 setBg : function(size,t){
120 if(t==0){
121 this.inBox.width(size+'em');
122 this.pickUnLight.width(size+'em');
123 }else{
124 this.inBox.height(size+'em');
125 this.pickUnLight.height(size+'em');
126 }
127 },
128 //隐藏弹框
129 hide : function(){
130 var T = this;
131 this.box.fadeOut(100,function(){
132 //重置
133 T.setBg(T.minSize[0],0);
134 T.setBg(T.minSize[1],1);
135 T.pickLight.css({
136 "width":'0',
137 "height":'0'
138 })
139 });
140 }
141 }
DEMO:http://www.nolure.com/p/demo/table.html
