利用js实现仿google的个性化定制
最近需要实现一个仿google的个性化定制；既对窗口的模块可以拖放，创建新的窗口模块。。。网上实现窗口拖放效果的例子也有不少。
本人找个了个baseball的例子，利用它的拖放框架增加了创建新窗口的动态模块，拖放后的窗口位置的保存功能……
即读取到显示的box模块的id、位置、resultId（前台页面异步显示时返回结果的div的id）；对新建的box则需要读取box的id、标题、位置、resultId、定制的模块（下拉菜单选中的值）。。
只需把这两个返回的字符串提交给后台处理，保存的数据库即可。。。前台显示数据时直接读取数据库中的信息、利用ajax异步载入到页面即可。
记录一下以备后用。
这是html中所引用的js文件
1
<
html
>
2 < head >
3 < title ></ title >
4 < style >
5 body { padding : 0 ; margin : 0 ; }
6 .box { border : 1px dashed #ccc ; margin-bottom : 8px ; overflow : hidden ; height : 100% ; clear : both ; font-size : 12px ; }
7 .box p { padding : 5px ; margin : 0 ; }
8 .box .basebat { margin : 0 ; padding : 5px ; background : #e1e1e1 ; font-size : 12px ; color : #333333 ; background : #f1f1f1 ; border-bottom : 1px dashed #ccc ; cursor : move ; }
9 .box .basebat .f_r { float : right ; cursor : pointer ; font-weight : normal ; }
10 .warp { width : 820px ; margin : 0 auto ; font-size : 12px ; }
11 #left { width : 200px ; float : left ; }
12 #center { width : 400px ; margin-left : 10px ; float : left ; }
13 #right { width : 200px ; float : right ; }
14 </ style >
15 < script type ="text/javascript" src ="jquery-1.3.2.min.js" ></ script >
16 < script type ="text/javascript" src ="popbaseball.min.js" ></ script >
17 < script type ="text/javascript" src ="prototype.js" ></ script >
18
19 < script type ="text/javascript" >
20 function dragDiv()
21 {
22 jQuery(document).ready( function (){
23 jQuery.baseball({
24 accepter: " #left,#center,#right " ,
25 target: " .box " ,
26 handle: " .basebat "
27 })
28 })
29 }
30
31 // 保存box的布局
32 function saveDivs(){
33 var objdoc = document.getElementsByTagName( " h1 " );
34 var divsNames = '';
35 for (i = 0 ;i < objdoc.length;i ++ )
36 {
37 if (objdoc[i].className == " basebat " && objdoc[i].parentNode.style.display == "" )
38 {
39 divsNames += objdoc[i].parentNode.id + ' - ';
40 divsNames += objdoc[i].parentNode.parentNode.id + ' - ';
41 divsNames += objdoc[i].nextSibling.id + ' | ';
42 }
43 }
44 alert(divsNames);
45 }
46
47 // 保存新增的box
48 function saveNewBoxs(){
49 var objdoc = document.getElementsByTagName( " h1 " );
50 var divsNames = '';
51
52 for (i = 0 ;i < objdoc.length;i ++ )
53 {
54 if ( objdoc[i].className == " basebat "
55 && objdoc[i].parentNode.style.display == ""
56 && objdoc[i].childNodes.length == 2 // 新增box里标题栏里有两个节点
57 && objdoc[i].nextSibling.childNodes.length > 3 // 新增box的内容里有4个节点；大于3可以甄选出新增的box
58 )
59 {
60 divsNames += objdoc[i].parentNode.id + ' - '; // 新增box的id
61 divsNames += objdoc[i].nextSibling.id + ' - '; // 新增box的用于ajax返回result的id
62
63 var subNodes = objdoc[i].nextSibling.childNodes;
64 // 获取box的标题
65 for ( var j = 0 ;j < subNodes.length;j ++ )
66 {
67 var field = subNodes;
68 var fieldType = field[j].nodeName.toLowerCase();
69 if (fieldType == " input " )
70 {
71 divsNames += field[j].value + ' - ';
72 }
73 }
74 // 获取box下拉菜单的选中项
75 for ( var j = 0 ;j < subNodes.length;j ++ )
76 {
77 var field = subNodes;
78 var fieldType = field[j].nodeName.toLowerCase();
79 if (fieldType == " select " )
80 {
81 divsNames += field[j].value + ' | ';
82 }
83 }
84 }
85 }
86 alert(divsNames);
87 }
88
89 // 隐藏或显示box
90 function switchDivState(d){
91 var Objdoc_ = $(d + '_');
92 if (Objdoc_.checked){
93 var Objdoc = $(d);
94 Objdoc.style.display = "" ;
95 } else {
96 var Objdoc = $(d);
97 Objdoc.style.display = " none " ;
98 }
99 }
100 // 隐藏box
101 function closeDiv(d){
102 var Objdoc_ = $(d + '_');
103 Objdoc_.checked = "" ;
104 var Objdoc = $(d);
105 Objdoc.style.display = " none " ;
106 }
107 // 关闭box——关了之后无法再重新显示
108 function justCloseDiv(d){
109 var Objdoc = $(d);
110 Objdoc.style.display = " none " ;
111 }
112
113 // 编辑box的标题
114 function editDivTitle(titleId,obj)
115 {
116 $(titleId).innerHTML = obj.value;
117 }
118
119 // box的编辑栏
120 function editDiv(divId,resultId)
121 {
122 var divTitle = 'title' + Math.random();
123 var defaultTitleName = " new title " ;
124 var defText1 = " 编辑标题： " ;
125
126 $(divId).innerHTML = " <h1 class=\ " basebat\ " ><span class=\ " f_r\ " onclick=\ " JavaScript:justCloseDiv(\' " +divId+ " \')\ " >关闭</span><div id=\ "" +divTitle+ " \ " > " + defaultTitleName + " </div></h1><div id=\ "" +resultId+ " \ " > "
127 + defText1 + " <input class=\ " text\ " type=\ " text\ " onkeyup=\ " editDivTitle(\' " +divTitle+ " \', this )\ " value=\ "" +defaultTitleName+ " \ " /> "
128 + " 内容：<select ><option value=\ " \ " selected></option><option value=\ " 0 \ " >使用中</option><option value=\ " 1 \ " >废弃</option></select> "
129 + " </div> " ;
130
131 dragDiv();
132 }
133
134 // 增加一个box
135 function addNewDiv()
136 {
137 var thisDiv = $( " center " );
138
139 var newDivIdName = 'div' + Math.random();
140 var resultDivIdName = 'result' + Math.random();
141 var newDiv = document.createElement( " div " );
142 newDiv.setAttribute( " id " ,newDivIdName);
143 newDiv.setAttribute( " class " , " box " );
144
145 thisDiv.appendChild(newDiv);
146
147 $(newDivIdName).innerHTML = " <h1 class=\ " basebat\ " >new title<span class=\ " f_r\ " onclick=\ " JavaScript:justCloseDiv(\' " +newDivIdName+ " \')\ " >关闭</span><span class=\ " f_r\ " onclick=\ " JavaScript:editDiv(\' " +newDivIdName+ " \',\' " +resultDivIdName+ " \')\ " >编辑</span></h1><div id=\ "" +resultDivIdName+ " \ " ></div> " ;
148
149 dragDiv();
150 }
151
152 /* *
153 *ajax的异步载入
154 */
155 var loaded = ' 0 '; // 载入结束标志
156 function getDivContent(myUrl,myParas,myResult)
157 {
158 var request_url = myUrl; // 请求url
159 var request_pars = myParas + ' & fresh = Math.random()'; // 请求参数
160 var request_method = 'get'; // 请求方法
161 var myAjax = new Ajax.Updater(myResult, request_url,{
162 method : request_method,
163 parameters : request_pars,
164 onFailure : reportError,
165 onLoading : loading,
166 onComplete : done,
167 evalScripts: true // 允许执行返回内容中的脚本代码
168
169 });
170 }
171
172 function loading()
173 {
174 $('loading').style.display = 'block';
175 if (loaded == ' 1 ')
176 $('loading').style.display = 'none';
177 }
178
179 function done()
180 {
181 $('loading').style.display = 'none';
182 loaded = ' 1 '; // 载入结束
183 }
184
185
186 function reportError()
187 {
188 alert('Sorry. There was an error.');
189 }
190 </ script >
191 </ head >
192 < body onload ="dragDiv()" >
193 < div class ="warp" style ="border:1px solid #e1e1e1; width:818px; margin-top:8px;" >
194 < div style =" padding:6px 10px;margin-bottom:8px; background:#f1f1f1; border-bottom:1px solid #e1e1e1;" > 首页模块管理 </ div >
195 < div style =" padding:10px;" >
196 < input name ="aa_" id ="aa_" type ="checkbox" value ="TEST" checked ="checked" onclick ="JavaScript:switchDivState('aa')" /> 天气预报
197 < input name ="bb_" id ="bb_" type ="checkbox" value ="" checked ="checked" onclick ="JavaScript:switchDivState('bb')" /> 搜索
198 < input name ="cc_" id ="cc_" type ="checkbox" value ="" checked ="checked" onclick ="JavaScript:switchDivState('cc')" /> boxC
199 < input name ="dd_" id ="dd_" type ="checkbox" value ="" checked ="checked" onclick ="JavaScript:switchDivState('dd')" /> boxD
200 < input name ="save" type ="button" value ="ajax"
201 onclick ="getDivContent('myWeather.jsp','','resultWeather');getDivContent('dmyGoogle.jsp','','resultGoogle')" />
202 < input name ="save" type ="button" value ="保存布局" onclick ="saveDivs();saveNewBoxs()" />
203 < input name ="newDiv" type ="button" onclick ="addNewDiv();" value ="NEW DIV" />
204
205 </ div >
206 < div style =" padding:10px;" id ="loading" class ="loading" > 载入中…… </ div >
207 </ div >
208 < div style =" border-bottom:4px solid #e1e1e1; clear:both; height:14px; margin-bottom:14px; font-size:0;" ></ div >
209 < div class ="warp" >
210 < div id ="left" >
211 < div class ="box" id ="aa" >< h1 class ="basebat" > 天气预报 < span class ="f_r" onclick ="JavaScript:closeDiv('aa')" > 关闭 </ span ></ h1 >< div id ="resultWeather" ></ div ></ div >
212 < div class ="box" id ="bb" >< h1 class ="basebat" > 搜索 < span class ="f_r" onclick ="JavaScript:closeDiv('bb')" > 关闭 </ span ></ h1 >< div id ="resultGoogle" ></ div ></ div >
213 </ div >
214
215 < div id ="center" >
216 < div class ="box" id ="cc" >< h1 class ="basebat" >< span class ="f_r" onclick ="JavaScript:closeDiv('cc')" > 关闭 </ span > boxC </ h1 >< div id ="resultCc" ></ div ></ div >
217 </ div >
218
219 < div id ="right" >
220 < div class ="box" id ="dd" >< h1 class ="basebat" >< span class ="f_r" onclick ="JavaScript:closeDiv('dd')" > 关闭 </ span > boxD </ h1 >< div id ="resultCc" ></ div ></ div >
221 </ div >
222 </ body >
223
224 </ html >
225
2 < head >
3 < title ></ title >
4 < style >
5 body { padding : 0 ; margin : 0 ; }
6 .box { border : 1px dashed #ccc ; margin-bottom : 8px ; overflow : hidden ; height : 100% ; clear : both ; font-size : 12px ; }
7 .box p { padding : 5px ; margin : 0 ; }
8 .box .basebat { margin : 0 ; padding : 5px ; background : #e1e1e1 ; font-size : 12px ; color : #333333 ; background : #f1f1f1 ; border-bottom : 1px dashed #ccc ; cursor : move ; }
9 .box .basebat .f_r { float : right ; cursor : pointer ; font-weight : normal ; }
10 .warp { width : 820px ; margin : 0 auto ; font-size : 12px ; }
11 #left { width : 200px ; float : left ; }
12 #center { width : 400px ; margin-left : 10px ; float : left ; }
13 #right { width : 200px ; float : right ; }
14 </ style >
15 < script type ="text/javascript" src ="jquery-1.3.2.min.js" ></ script >
16 < script type ="text/javascript" src ="popbaseball.min.js" ></ script >
17 < script type ="text/javascript" src ="prototype.js" ></ script >
18
19 < script type ="text/javascript" >
20 function dragDiv()
21 {
22 jQuery(document).ready( function (){
23 jQuery.baseball({
24 accepter: " #left,#center,#right " ,
25 target: " .box " ,
26 handle: " .basebat "
27 })
28 })
29 }
30
31 // 保存box的布局
32 function saveDivs(){
33 var objdoc = document.getElementsByTagName( " h1 " );
34 var divsNames = '';
35 for (i = 0 ;i < objdoc.length;i ++ )
36 {
37 if (objdoc[i].className == " basebat " && objdoc[i].parentNode.style.display == "" )
38 {
39 divsNames += objdoc[i].parentNode.id + ' - ';
40 divsNames += objdoc[i].parentNode.parentNode.id + ' - ';
41 divsNames += objdoc[i].nextSibling.id + ' | ';
42 }
43 }
44 alert(divsNames);
45 }
46
47 // 保存新增的box
48 function saveNewBoxs(){
49 var objdoc = document.getElementsByTagName( " h1 " );
50 var divsNames = '';
51
52 for (i = 0 ;i < objdoc.length;i ++ )
53 {
54 if ( objdoc[i].className == " basebat "
55 && objdoc[i].parentNode.style.display == ""
56 && objdoc[i].childNodes.length == 2 // 新增box里标题栏里有两个节点
57 && objdoc[i].nextSibling.childNodes.length > 3 // 新增box的内容里有4个节点；大于3可以甄选出新增的box
58 )
59 {
60 divsNames += objdoc[i].parentNode.id + ' - '; // 新增box的id
61 divsNames += objdoc[i].nextSibling.id + ' - '; // 新增box的用于ajax返回result的id
62
63 var subNodes = objdoc[i].nextSibling.childNodes;
64 // 获取box的标题
65 for ( var j = 0 ;j < subNodes.length;j ++ )
66 {
67 var field = subNodes;
68 var fieldType = field[j].nodeName.toLowerCase();
69 if (fieldType == " input " )
70 {
71 divsNames += field[j].value + ' - ';
72 }
73 }
74 // 获取box下拉菜单的选中项
75 for ( var j = 0 ;j < subNodes.length;j ++ )
76 {
77 var field = subNodes;
78 var fieldType = field[j].nodeName.toLowerCase();
79 if (fieldType == " select " )
80 {
81 divsNames += field[j].value + ' | ';
82 }
83 }
84 }
85 }
86 alert(divsNames);
87 }
88
89 // 隐藏或显示box
90 function switchDivState(d){
91 var Objdoc_ = $(d + '_');
92 if (Objdoc_.checked){
93 var Objdoc = $(d);
94 Objdoc.style.display = "" ;
95 } else {
96 var Objdoc = $(d);
97 Objdoc.style.display = " none " ;
98 }
99 }
100 // 隐藏box
101 function closeDiv(d){
102 var Objdoc_ = $(d + '_');
103 Objdoc_.checked = "" ;
104 var Objdoc = $(d);
105 Objdoc.style.display = " none " ;
106 }
107 // 关闭box——关了之后无法再重新显示
108 function justCloseDiv(d){
109 var Objdoc = $(d);
110 Objdoc.style.display = " none " ;
111 }
112
113 // 编辑box的标题
114 function editDivTitle(titleId,obj)
115 {
116 $(titleId).innerHTML = obj.value;
117 }
118
119 // box的编辑栏
120 function editDiv(divId,resultId)
121 {
122 var divTitle = 'title' + Math.random();
123 var defaultTitleName = " new title " ;
124 var defText1 = " 编辑标题： " ;
125
126 $(divId).innerHTML = " <h1 class=\ " basebat\ " ><span class=\ " f_r\ " onclick=\ " JavaScript:justCloseDiv(\' " +divId+ " \')\ " >关闭</span><div id=\ "" +divTitle+ " \ " > " + defaultTitleName + " </div></h1><div id=\ "" +resultId+ " \ " > "
127 + defText1 + " <input class=\ " text\ " type=\ " text\ " onkeyup=\ " editDivTitle(\' " +divTitle+ " \', this )\ " value=\ "" +defaultTitleName+ " \ " /> "
128 + " 内容：<select ><option value=\ " \ " selected></option><option value=\ " 0 \ " >使用中</option><option value=\ " 1 \ " >废弃</option></select> "
129 + " </div> " ;
130
131 dragDiv();
132 }
133
134 // 增加一个box
135 function addNewDiv()
136 {
137 var thisDiv = $( " center " );
138
139 var newDivIdName = 'div' + Math.random();
140 var resultDivIdName = 'result' + Math.random();
141 var newDiv = document.createElement( " div " );
142 newDiv.setAttribute( " id " ,newDivIdName);
143 newDiv.setAttribute( " class " , " box " );
144
145 thisDiv.appendChild(newDiv);
146
147 $(newDivIdName).innerHTML = " <h1 class=\ " basebat\ " >new title<span class=\ " f_r\ " onclick=\ " JavaScript:justCloseDiv(\' " +newDivIdName+ " \')\ " >关闭</span><span class=\ " f_r\ " onclick=\ " JavaScript:editDiv(\' " +newDivIdName+ " \',\' " +resultDivIdName+ " \')\ " >编辑</span></h1><div id=\ "" +resultDivIdName+ " \ " ></div> " ;
148
149 dragDiv();
150 }
151
152 /* *
153 *ajax的异步载入
154 */
155 var loaded = ' 0 '; // 载入结束标志
156 function getDivContent(myUrl,myParas,myResult)
157 {
158 var request_url = myUrl; // 请求url
159 var request_pars = myParas + ' & fresh = Math.random()'; // 请求参数
160 var request_method = 'get'; // 请求方法
161 var myAjax = new Ajax.Updater(myResult, request_url,{
162 method : request_method,
163 parameters : request_pars,
164 onFailure : reportError,
165 onLoading : loading,
166 onComplete : done,
167 evalScripts: true // 允许执行返回内容中的脚本代码
168
169 });
170 }
171
172 function loading()
173 {
174 $('loading').style.display = 'block';
175 if (loaded == ' 1 ')
176 $('loading').style.display = 'none';
177 }
178
179 function done()
180 {
181 $('loading').style.display = 'none';
182 loaded = ' 1 '; // 载入结束
183 }
184
185
186 function reportError()
187 {
188 alert('Sorry. There was an error.');
189 }
190 </ script >
191 </ head >
192 < body onload ="dragDiv()" >
193 < div class ="warp" style ="border:1px solid #e1e1e1; width:818px; margin-top:8px;" >
194 < div style =" padding:6px 10px;margin-bottom:8px; background:#f1f1f1; border-bottom:1px solid #e1e1e1;" > 首页模块管理 </ div >
195 < div style =" padding:10px;" >
196 < input name ="aa_" id ="aa_" type ="checkbox" value ="TEST" checked ="checked" onclick ="JavaScript:switchDivState('aa')" /> 天气预报
197 < input name ="bb_" id ="bb_" type ="checkbox" value ="" checked ="checked" onclick ="JavaScript:switchDivState('bb')" /> 搜索
198 < input name ="cc_" id ="cc_" type ="checkbox" value ="" checked ="checked" onclick ="JavaScript:switchDivState('cc')" /> boxC
199 < input name ="dd_" id ="dd_" type ="checkbox" value ="" checked ="checked" onclick ="JavaScript:switchDivState('dd')" /> boxD
200 < input name ="save" type ="button" value ="ajax"
201 onclick ="getDivContent('myWeather.jsp','','resultWeather');getDivContent('dmyGoogle.jsp','','resultGoogle')" />
202 < input name ="save" type ="button" value ="保存布局" onclick ="saveDivs();saveNewBoxs()" />
203 < input name ="newDiv" type ="button" onclick ="addNewDiv();" value ="NEW DIV" />
204
205 </ div >
206 < div style =" padding:10px;" id ="loading" class ="loading" > 载入中…… </ div >
207 </ div >
208 < div style =" border-bottom:4px solid #e1e1e1; clear:both; height:14px; margin-bottom:14px; font-size:0;" ></ div >
209 < div class ="warp" >
210 < div id ="left" >
211 < div class ="box" id ="aa" >< h1 class ="basebat" > 天气预报 < span class ="f_r" onclick ="JavaScript:closeDiv('aa')" > 关闭 </ span ></ h1 >< div id ="resultWeather" ></ div ></ div >
212 < div class ="box" id ="bb" >< h1 class ="basebat" > 搜索 < span class ="f_r" onclick ="JavaScript:closeDiv('bb')" > 关闭 </ span ></ h1 >< div id ="resultGoogle" ></ div ></ div >
213 </ div >
214
215 < div id ="center" >
216 < div class ="box" id ="cc" >< h1 class ="basebat" >< span class ="f_r" onclick ="JavaScript:closeDiv('cc')" > 关闭 </ span > boxC </ h1 >< div id ="resultCc" ></ div ></ div >
217 </ div >
218
219 < div id ="right" >
220 < div class ="box" id ="dd" >< h1 class ="basebat" >< span class ="f_r" onclick ="JavaScript:closeDiv('dd')" > 关闭 </ span > boxD </ h1 >< div id ="resultCc" ></ div ></ div >
221 </ div >
222 </ body >
223
224 </ html >
225