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 }
