根据 Gadget 的设计,我们可能会需要在用户不用手动改变设置的情况下,主动地改变某些用户的设置(比如在 "推箱子" 这个 Gadget 中,每过一关就自动更新 "从指定关卡开始" 这个属性)。
要使用 setprefs 功能,我们需要在 Gadget 中包含以下内容:...
根据 Gadget 的设计,我们可能会需要在用户不用手动改变设置的情况下,主动地改变某些用户的设置(比如在 "推箱子" 这个 Gadget 中,每过一关就自动更新 "从指定关卡开始" 这个属性)。
要使用 setprefs
功能,我们需要在 Gadget 中包含以下内容:
- 在 <ModulePrefs> 标签中添加一个 <Require feature="setprefs"/> 标签,这使得 Gadget 读取 setprefs 库;
- 一个需要被用来改变的用户设置(废话),如果不想让用户随意改动,那么可以使用
hidden 类型(这和 HTML 中是一样的);
- 一个 JavaScript 函数,比如 set() ,用来改变这个用户设置。
需要注意的是,每个用户设置的长度会受到 URL 长度的限制,根据 Google 的说法,每个用户设置不能超过 2KB。
我们来看下面的例子:这个 Gadget 包含了一个计数器和两个按钮,其中一个按钮将计数器的值增加1,另一个按钮将计数器的值恢复到0。计数器的值被存储在 "counter" 这个用户设置中。为了防止 Gadget 的用户更改这个值,"counter" 的属性被设为 "hidden" 。
1<?xml version="1.0" encoding="UTF-8" ?>
2 <Module>
3 <ModulePrefs title="Set Userprefs Demo">
4 <Require feature="setprefs" />
5 </ModulePrefs>
6 <UserPref name="counter"
7 default_value="0"
8 datatype="hidden"/>
9 <Content type="html">
10 <![CDATA[
11 <script type="text/javascript">
12 // 获得用户设置
13 var prefs = new _IG_Prefs();
14
15 // 将 "counter" 加 1
16 function incrementCounter() {
17 var count = prefs.getInt("counter");
18 alert("The count is " + count + ".");
19 prefs.set("counter", count + 1);
20 }
21
22 // 将 "counter" 的值恢复为 0
23 function resetCounter(){
24 prefs.set("counter", 0);
25 alert("Count reset to " + prefs.getInt("counter") + ".");
26 }
27 </script>
28
29 <input type="button" value="加1" name="count" onClick="incrementCounter();">
30 <input type="button" value="恢复" name="reset" onClick="resetCounter();">
31
32 ]]>
33 </Content>
34 </Module>
2 <Module>
3 <ModulePrefs title="Set Userprefs Demo">
4 <Require feature="setprefs" />
5 </ModulePrefs>
6 <UserPref name="counter"
7 default_value="0"
8 datatype="hidden"/>
9 <Content type="html">
10 <![CDATA[
11 <script type="text/javascript">
12 // 获得用户设置
13 var prefs = new _IG_Prefs();
14
15 // 将 "counter" 加 1
16 function incrementCounter() {
17 var count = prefs.getInt("counter");
18 alert("The count is " + count + ".");
19 prefs.set("counter", count + 1);
20 }
21
22 // 将 "counter" 的值恢复为 0
23 function resetCounter(){
24 prefs.set("counter", 0);
25 alert("Count reset to " + prefs.getInt("counter") + ".");
26 }
27 </script>
28
29 <input type="button" value="加1" name="count" onClick="incrementCounter();">
30 <input type="button" value="恢复" name="reset" onClick="resetCounter();">
31
32 ]]>
33 </Content>
34 </Module>
PS: 如果有多于一个设置需要改变,那么建议使用 JSON 字符串来把这些属性合成一个。下面 (源文件在 这里 ) 是一个实例:
使用JSON的实例
1 <?xml version="1.0" encoding="UTF-8" ?>
2 <Module>
3 <ModulePrefs title="__UP_title__"
4 category="tools"
5 render_inline="required"
6 scrolling="false"
7 author="Sophia B."
8 directory_title="__MSG_todo__"
9 author_email="sophia.feedback+todo@gmail.com"
10 author_affiliation="Google Inc."
11 author_location="Mountain View, CA"
12 screenshot="/ig/modules/todo.png"
13 singleton="false"
14 thumbnail="/ig/modules/todo-thm.png"
15 description="__MSG_description__">
16 <Locale messages="todo_content/todo_en.xml" />
17 <Locale lang="zh-CN" messages="todo_content/todo_zh-cn.xml" />
18 </ModulePrefs>
19 <UserPref name="title" display_name="__MSG_title__" required="false" default_value="__MSG_todo__" />
20 <UserPref name="bgcolor" display_name="__MSG_background_color__" default_value="#e5ecf9" datatype="enum">
21 <EnumValue display_value="__MSG_yellow__" value="#ffffcc" />
22 <EnumValue display_value="__MSG_blue__" value="#e5ecf9" />
23 <EnumValue display_value="__MSG_gray__" value="#efefef" />
24 <EnumValue display_value="__MSG_green__" value="#e0eee0" />
25 <EnumValue display_value="__MSG_pink__" value="#fff0f5" />
26 <EnumValue display_value="__MSG_orange__" value="#fff5ee" />
27 </UserPref>
28 <UserPref name="todos" default_value="" datatype="hidden" />
29 <Content type="html">
30 <![CDATA[
31
32 <script language="JavaScript"
33 src="/ig/modules/todo_content/json.js"></script>
34 <script language="JavaScript">
35 var todos__MODULE_ID__; // This is a json object of todo items
36 var edited__MODULE_ID__;
37 var prefs__MODULE_ID__;
38
39 _IG_RegisterOnloadHandler(
40 function loadTodos__MODULE_ID__() {
41 prefs__MODULE_ID__ = new _IG_Prefs(__MODULE_ID__);
42 var todosstring = prefs__MODULE_ID__.getString("todos");
43 if (todosstring == "")
44 todos__MODULE_ID__ = {"array":[]};
45 else
46 todos__MODULE_ID__ = JSON.parse(todosstring);
47 edited__MODULE_ID__ = false;
48 createTable__MODULE_ID__();
49 }
50 )
51
52 function saveTodos__MODULE_ID__(){
53 prefs__MODULE_ID__.set("todos", JSON.stringify(todos__MODULE_ID__));
54 _gel("newTodoInput__MODULE_ID__").focus();
55 }
56
57 function addTodo__MODULE_ID__(name, priority) {
58 var name = _trim(name);
59 _gel("newTodoInput__MODULE_ID__").value = "";
60 if (name == "")
61 return;
62 todos__MODULE_ID__.array[numTodos__MODULE_ID__()] =
63 {"name": name, "priority": priority};
64 createTable__MODULE_ID__();
65 saveTodos__MODULE_ID__();
66 return false;
67 }
68
69 function deleteTodo__MODULE_ID__(number) {
70 if (edited__MODULE_ID__)
71 return;
72 var beginning = todos__MODULE_ID__.array.slice(0, number);
73 var end = todos__MODULE_ID__.array.slice(number + 1,
74 numTodos__MODULE_ID__());
75 todos__MODULE_ID__.array = beginning.concat(end);
76 createTable__MODULE_ID__();
77 saveTodos__MODULE_ID__();
78 }
79
80 function swapTodos__MODULE_ID__(to, from) {
81 var temp = todos__MODULE_ID__.array[to];
82 todos__MODULE_ID__.array[to] = todos__MODULE_ID__.array[from];
83 todos__MODULE_ID__.array[from] = temp;
84 }
85
86 function sortByPriority__MODULE_ID__(number) {
87 var todo = todos__MODULE_ID__.array[number];;
88 var lastPriority = todo.priority;
89 for (i = number + 1; i < numTodos__MODULE_ID__(); i++) {
90 var currentTodo = todos__MODULE_ID__.array[i];
91 if (currentTodo == null)
92 break;
93 var currentPriority = currentTodo.priority;
94 if (currentPriority >= lastPriority)
95 break;
96 swapTodos__MODULE_ID__(i, i - 1);
97 }
98 for (i = number - 1; i >= 0; i--) {
99 var currentTodo = todos__MODULE_ID__.array[i];
100 if (currentTodo == null)
101 break;
102 var currentPriority = currentTodo.priority;
103 if (currentPriority <= lastPriority)
104 break;
105 swapTodos__MODULE_ID__(i + 1, i);
106 }
107 }
108
109 function setPriority__MODULE_ID__(number, priority) {
110 var row = getRow__MODULE_ID__(number);
111 var col = getCol__MODULE_ID__(row, 0);
112 col.innerHTML = createPriorityLink__MODULE_ID__(priority, number);
113 todos__MODULE_ID__.array[number].priority = priority;
114 sortByPriority__MODULE_ID__(number);
115 createTable__MODULE_ID__();
116 saveTodos__MODULE_ID__();
117 }
118
119 function editPriority__MODULE_ID__(number, priority) {
120 var row = getRow__MODULE_ID__(number);
121 if (edited__MODULE_ID__)
122 return;
123 edited__MODULE_ID__ = true;
124 var col = getCol__MODULE_ID__(row, 0);
125 col.innerHTML = createPrioritySelect__MODULE_ID__(number, priority);
126 }
127
128 function selected__MODULE_ID__(priority, num) {
129 if (priority == num)
130 return "selected=true";
131 else
132 return "";
133 }
134
135 function rowClass__MODULE_ID__(number) {
136 if (number % 2 != 0)
137 return " class=odd__MODULE_ID__ ";
138 else
139 return " class=even__MODULE_ID__ ";
140 }
141
142 function createTable__MODULE_ID__() {
143 var html = "<table cellspacing=0 id=todosTable__MODULE_ID__>";
144 for (i = 0; i < numTodos__MODULE_ID__(); i++) {
145 if (todos__MODULE_ID__.array[i] == null)
146 break;
147 var priority = todos__MODULE_ID__.array[i].priority;
148 var name = todos__MODULE_ID__.array[i].name;
149 html = html + createRow__MODULE_ID__(i, priority, name);
150 }
151 html = html + "</table>";
152 _gel("todosDiv__MODULE_ID__").innerHTML = html;
153 }
154
155 function createRow__MODULE_ID__(number, priority, name) {
156 var html =
157 "<tr id=\"row" + number + "__MODULE_ID__\"" +
158 rowClass__MODULE_ID__(number) + ">" +
159 "<td class=priority_td__MODULE_ID__>" +
160 createPriorityLink__MODULE_ID__(priority, number) +
161 "</td>" +
162 "<td class=name_td__MODULE_ID__>" +
163 createName__MODULE_ID__(number, name) +
164 "</td>" +
165 "<td>" +
166 createDelete__MODULE_ID__(number) +
167 "</td>" +
168 "</tr>";
169 return html;
170 }
171
172 function escapeName__MODULE_ID__(name) {
173 name = name.replace(/&/g,"&")
174 name = name.replace(/</g,"<")
175 name = name.replace(/>/g,">")
176 name = name.replace(/"/g,""")
177 name = name.replace(/'/g,"'")
178 return name;
179 }
180
181 function createName__MODULE_ID__(number, name) {
182 var html =
183 "<a class=name_a__MODULE_ID__" +
184 " href=\"javascript:editName__MODULE_ID__(" + number + ")\">" +
185 escapeName__MODULE_ID__(name) +
186 "</a>";
187 return html;
188 }
189
190 function createDelete__MODULE_ID__(number) {
191 var html =
192 "<a href=\"javascript:deleteTodo__MODULE_ID__(" + number + ")\">" +
193 "<img class=delete__MODULE_ID__" +
194 " src=\"http://www.google.com/ig/modules/todo_content/x.gif\">" +
195 "</a>";
196 return html;
197 }
198
199
200 function createPrioritySelect__MODULE_ID__(number, priority) {
201 var html =
202 "<select id=select__MODULE_ID__ " +
203 "onchange=\"submitPriority__MODULE_ID__(" + number + ")\">" +
204 "<option class=option__MODULE_ID__ value=1 " +
205 "onclick=\"submitPriority__MODULE_ID__(" + number + ")\" " +
206 selected__MODULE_ID__(priority, 1) + ">" +
207 "__MSG_high__" +
208 "</option>" +
209 "<option class=option__MODULE_ID__ value=2 " +
210 "onclick=\"submitPriority__MODULE_ID__(" + number + ")\" " +
211 selected__MODULE_ID__(priority, 2) + ">" +
212 "__MSG_medium__" +
213 "</option>" +
214 "<option class=option__MODULE_ID__ value=3 " +
215 "onclick=\"submitPriority__MODULE_ID__(" + number + ")\" " +
216 selected__MODULE_ID__(priority, 3) + ">" +
217 "__MSG_low__" +
218 "</option>" +
219 "</select>";
220 return html;
221 }
222
223 function createPriorityLink__MODULE_ID__(priority, number) {
224 var html =
225 "<a class=p" + priority + "___MODULE_ID__ " +
226 "href=\"javascript:editPriority__MODULE_ID__(" +
227 number + "," + priority + ")\">" +
228 getPriorityText__MODULE_ID__(priority) +
229 "</a>";
230 return html;
231 }
232
233 function createEditNameForm__MODULE_ID__(number, name) {
234 var html =
235 "<input onkeypress=\"if (isEnter__MODULE_ID__(event))" +
236 "{setName__MODULE_ID__(" + number+ ", event); return false;}\" " +
237 "type=text id=name_input__MODULE_ID__ value=\"" +
238 escapeName__MODULE_ID__(name) + "\">";
239 return html;
240 }
241
242
243 function getPriorityText__MODULE_ID__(priority) {
244 if (priority == 1)
245 return "__MSG_high__";
246 else if (priority == 2)
247 return "__MSG_medium__";
248 return "__MSG_low__";
249 }
250
251 function submitPriority__MODULE_ID__(number) {
252 var row = getRow__MODULE_ID__(number);
253 var col = getCol__MODULE_ID__(row, 0);
254 var select = _gel("select__MODULE_ID__");
255 var newPriority = select.options[select.selectedIndex].value;
256 setPriority__MODULE_ID__(number, newPriority);
257 edited__MODULE_ID__ = false;
258 }
259
260 function editName__MODULE_ID__(number) {
261 if (edited__MODULE_ID__)
262 return;
263 edited__MODULE_ID__ = true;
264 var row = getRow__MODULE_ID__(number);
265 var col = getCol__MODULE_ID__(row, 1);
266 var name = todos__MODULE_ID__.array[number].name;
267 col.innerHTML = createEditNameForm__MODULE_ID__(number, name);
268 _gel("name_input__MODULE_ID__").focus();
269 _gel("name_input__MODULE_ID__").select();
270 }
271
272 function setName__MODULE_ID__(number) {
273 var name = _trim(_gel("name_input__MODULE_ID__").value);
274 if (name == "")
275 name = todos__MODULE_ID__.array[number].name;
276 todos__MODULE_ID__.array[number].name = name;
277 var row = getRow__MODULE_ID__(number);
278 var col = getCol__MODULE_ID__(row, 1);
279 col.innerHTML = createName__MODULE_ID__(number,name);
280 saveTodos__MODULE_ID__();
281 edited__MODULE_ID__ = false;
282 return false;
283 }
284
285 function edit__MODULE_ID__() {
286 return edited__MODULE_ID__;
287 }
288
289 function isEnter__MODULE_ID__(e) {
290 var characterCode;
291 if(e && e.which){
292 e = e
293 characterCode = e.which
294 } else {
295 e = event
296 characterCode = e.keyCode
297 }
298 if (characterCode == 13)
299 return true;
300 return false
301 }
302
303 function getTable__MODULE_ID__() {
304 return _gel('todosTable__MODULE_ID__');
305 }
306
307 function getRow__MODULE_ID__(number) {
308 return _gel("row" + number + "__MODULE_ID__");
309 }
310
311 function getCol__MODULE_ID__(row, index) {
312 return row.childNodes.item(index);
313 }
314
315 function numTodos__MODULE_ID__() {
316 return todos__MODULE_ID__.array.length;
317 }
318 </script>
319
320 <style type="text/css">
321 .delete__MODULE_ID__ {
322 border-style: none;
323 }
324 .priority_td__MODULE_ID__ {
325 font-family: arial;
326 padding-__BIDI_END_EDGE__: 20px;
327 font-size: 12px;
328 }
329 .p1___MODULE_ID__:link, .p1___MODULE_ID__:visited {
330 color: red;
331 text-decoration: none;
332 font-size: 12px;
333 }
334 .p2___MODULE_ID__:link, .p2___MODULE_ID__:visited {
335 color: blue;
336 text-decoration: none;
337 font-size: 12px;
338 }
339 .p3___MODULE_ID__:link, .p3___MODULE_ID__:visited {
340 color: #ff00ff;
341 text-decoration: none;
342 font-size: 12px;
343 }
344 .name_a__MODULE_ID__:link, .name_a__MODULE_ID__:visited {
345 text-decoration:none;
346 font-size: 12px;
347 color: black;
348 }
349 #name_input__MODULE_ID__, #newTodoInput__MODULE_ID__ {
350 width: 100%;
351 font-family: arial;
352 padding: 0px;
353 }
354 #new_todo_td__MODULE_ID__ {
355 font-size: 12px
356 }
357 #input__MODULE_ID__ {
358 font-family: arial;
359 padding: 0px;
360 }
361 #todosTable__MODULE_ID__ {
362 margin:0;
363 padding:0;
364 width:100%;
365 font-size: 12px;
366 }
367 .name_td__MODULE_ID__ {
368 width:100%;
369 }
370 .option__MODULE_ID__ {
371 font-size: 12px;
372 padding: 0px;
373 margin: 0px;
374 font-family: arial;
375 }
376 #select__MODULE_ID__ {
377 font-family: arial;
378 width: 52px;
379 margin: 0px;
380 padding: 0px;
381 }
382 .even__MODULE_ID__ {
383 background: __UP_bgcolor__;
384 }
385 .odd__MODULE_ID__ {
386 background: white;
387 }
388 </style>
389
390 <form name = "newTodoForm__MODULE_ID__"
391 onsubmit="return addTodo__MODULE_ID__(
392 document.newTodoForm__MODULE_ID__.
393 newTodoInput__MODULE_ID__.value, 3, false)">
394 <table cellspacing=0>
395 <tr>
396 <td id="new_todo_td__MODULE_ID__">
397 <nobr>__MSG_new_item__</nobr>
398 </td>
399 <td style='width:100%' >
400 <input id="newTodoInput__MODULE_ID__" type="text"
401 style='width:100%'>
402 </td>
403 <td>
404 <input type = "button" value="__MSG_add__"
405 onclick = "javascript:addTodo__MODULE_ID__(
406 document.newTodoForm__MODULE_ID__.
407 newTodoInput__MODULE_ID__.value, 3, false)">
408 </td>
409 </tr>
410 </table>
411 <div id="todosDiv__MODULE_ID__"></div>
412 </form>
413
414
415 ]]>
416 </Content>
417 </Module>
1 <?xml version="1.0" encoding="UTF-8" ?>
2 <Module>
3 <ModulePrefs title="__UP_title__"
4 category="tools"
5 render_inline="required"
6 scrolling="false"
7 author="Sophia B."
8 directory_title="__MSG_todo__"
9 author_email="sophia.feedback+todo@gmail.com"
10 author_affiliation="Google Inc."
11 author_location="Mountain View, CA"
12 screenshot="/ig/modules/todo.png"
13 singleton="false"
14 thumbnail="/ig/modules/todo-thm.png"
15 description="__MSG_description__">
16 <Locale messages="todo_content/todo_en.xml" />
17 <Locale lang="zh-CN" messages="todo_content/todo_zh-cn.xml" />
18 </ModulePrefs>
19 <UserPref name="title" display_name="__MSG_title__" required="false" default_value="__MSG_todo__" />
20 <UserPref name="bgcolor" display_name="__MSG_background_color__" default_value="#e5ecf9" datatype="enum">
21 <EnumValue display_value="__MSG_yellow__" value="#ffffcc" />
22 <EnumValue display_value="__MSG_blue__" value="#e5ecf9" />
23 <EnumValue display_value="__MSG_gray__" value="#efefef" />
24 <EnumValue display_value="__MSG_green__" value="#e0eee0" />
25 <EnumValue display_value="__MSG_pink__" value="#fff0f5" />
26 <EnumValue display_value="__MSG_orange__" value="#fff5ee" />
27 </UserPref>
28 <UserPref name="todos" default_value="" datatype="hidden" />
29 <Content type="html">
30 <![CDATA[
31
32 <script language="JavaScript"
33 src="/ig/modules/todo_content/json.js"></script>
34 <script language="JavaScript">
35 var todos__MODULE_ID__; // This is a json object of todo items
36 var edited__MODULE_ID__;
37 var prefs__MODULE_ID__;
38
39 _IG_RegisterOnloadHandler(
40 function loadTodos__MODULE_ID__() {
41 prefs__MODULE_ID__ = new _IG_Prefs(__MODULE_ID__);
42 var todosstring = prefs__MODULE_ID__.getString("todos");
43 if (todosstring == "")
44 todos__MODULE_ID__ = {"array":[]};
45 else
46 todos__MODULE_ID__ = JSON.parse(todosstring);
47 edited__MODULE_ID__ = false;
48 createTable__MODULE_ID__();
49 }
50 )
51
52 function saveTodos__MODULE_ID__(){
53 prefs__MODULE_ID__.set("todos", JSON.stringify(todos__MODULE_ID__));
54 _gel("newTodoInput__MODULE_ID__").focus();
55 }
56
57 function addTodo__MODULE_ID__(name, priority) {
58 var name = _trim(name);
59 _gel("newTodoInput__MODULE_ID__").value = "";
60 if (name == "")
61 return;
62 todos__MODULE_ID__.array[numTodos__MODULE_ID__()] =
63 {"name": name, "priority": priority};
64 createTable__MODULE_ID__();
65 saveTodos__MODULE_ID__();
66 return false;
67 }
68
69 function deleteTodo__MODULE_ID__(number) {
70 if (edited__MODULE_ID__)
71 return;
72 var beginning = todos__MODULE_ID__.array.slice(0, number);
73 var end = todos__MODULE_ID__.array.slice(number + 1,
74 numTodos__MODULE_ID__());
75 todos__MODULE_ID__.array = beginning.concat(end);
76 createTable__MODULE_ID__();
77 saveTodos__MODULE_ID__();
78 }
79
80 function swapTodos__MODULE_ID__(to, from) {
81 var temp = todos__MODULE_ID__.array[to];
82 todos__MODULE_ID__.array[to] = todos__MODULE_ID__.array[from];
83 todos__MODULE_ID__.array[from] = temp;
84 }
85
86 function sortByPriority__MODULE_ID__(number) {
87 var todo = todos__MODULE_ID__.array[number];;
88 var lastPriority = todo.priority;
89 for (i = number + 1; i < numTodos__MODULE_ID__(); i++) {
90 var currentTodo = todos__MODULE_ID__.array[i];
91 if (currentTodo == null)
92 break;
93 var currentPriority = currentTodo.priority;
94 if (currentPriority >= lastPriority)
95 break;
96 swapTodos__MODULE_ID__(i, i - 1);
97 }
98 for (i = number - 1; i >= 0; i--) {
99 var currentTodo = todos__MODULE_ID__.array[i];
100 if (currentTodo == null)
101 break;
102 var currentPriority = currentTodo.priority;
103 if (currentPriority <= lastPriority)
104 break;
105 swapTodos__MODULE_ID__(i + 1, i);
106 }
107 }
108
109 function setPriority__MODULE_ID__(number, priority) {
110 var row = getRow__MODULE_ID__(number);
111 var col = getCol__MODULE_ID__(row, 0);
112 col.innerHTML = createPriorityLink__MODULE_ID__(priority, number);
113 todos__MODULE_ID__.array[number].priority = priority;
114 sortByPriority__MODULE_ID__(number);
115 createTable__MODULE_ID__();
116 saveTodos__MODULE_ID__();
117 }
118
119 function editPriority__MODULE_ID__(number, priority) {
120 var row = getRow__MODULE_ID__(number);
121 if (edited__MODULE_ID__)
122 return;
123 edited__MODULE_ID__ = true;
124 var col = getCol__MODULE_ID__(row, 0);
125 col.innerHTML = createPrioritySelect__MODULE_ID__(number, priority);
126 }
127
128 function selected__MODULE_ID__(priority, num) {
129 if (priority == num)
130 return "selected=true";
131 else
132 return "";
133 }
134
135 function rowClass__MODULE_ID__(number) {
136 if (number % 2 != 0)
137 return " class=odd__MODULE_ID__ ";
138 else
139 return " class=even__MODULE_ID__ ";
140 }
141
142 function createTable__MODULE_ID__() {
143 var html = "<table cellspacing=0 id=todosTable__MODULE_ID__>";
144 for (i = 0; i < numTodos__MODULE_ID__(); i++) {
145 if (todos__MODULE_ID__.array[i] == null)
146 break;
147 var priority = todos__MODULE_ID__.array[i].priority;
148 var name = todos__MODULE_ID__.array[i].name;
149 html = html + createRow__MODULE_ID__(i, priority, name);
150 }
151 html = html + "</table>";
152 _gel("todosDiv__MODULE_ID__").innerHTML = html;
153 }
154
155 function createRow__MODULE_ID__(number, priority, name) {
156 var html =
157 "<tr id=\"row" + number + "__MODULE_ID__\"" +
158 rowClass__MODULE_ID__(number) + ">" +
159 "<td class=priority_td__MODULE_ID__>" +
160 createPriorityLink__MODULE_ID__(priority, number) +
161 "</td>" +
162 "<td class=name_td__MODULE_ID__>" +
163 createName__MODULE_ID__(number, name) +
164 "</td>" +
165 "<td>" +
166 createDelete__MODULE_ID__(number) +
167 "</td>" +
168 "</tr>";
169 return html;
170 }
171
172 function escapeName__MODULE_ID__(name) {
173 name = name.replace(/&/g,"&")
174 name = name.replace(/</g,"<")
175 name = name.replace(/>/g,">")
176 name = name.replace(/"/g,""")
177 name = name.replace(/'/g,"'")
178 return name;
179 }
180
181 function createName__MODULE_ID__(number, name) {
182 var html =
183 "<a class=name_a__MODULE_ID__" +
184 " href=\"javascript:editName__MODULE_ID__(" + number + ")\">" +
185 escapeName__MODULE_ID__(name) +
186 "</a>";
187 return html;
188 }
189
190 function createDelete__MODULE_ID__(number) {
191 var html =
192 "<a href=\"javascript:deleteTodo__MODULE_ID__(" + number + ")\">" +
193 "<img class=delete__MODULE_ID__" +
194 " src=\"http://www.google.com/ig/modules/todo_content/x.gif\">" +
195 "</a>";
196 return html;
197 }
198
199
200 function createPrioritySelect__MODULE_ID__(number, priority) {
201 var html =
202 "<select id=select__MODULE_ID__ " +
203 "onchange=\"submitPriority__MODULE_ID__(" + number + ")\">" +
204 "<option class=option__MODULE_ID__ value=1 " +
205 "onclick=\"submitPriority__MODULE_ID__(" + number + ")\" " +
206 selected__MODULE_ID__(priority, 1) + ">" +
207 "__MSG_high__" +
208 "</option>" +
209 "<option class=option__MODULE_ID__ value=2 " +
210 "onclick=\"submitPriority__MODULE_ID__(" + number + ")\" " +
211 selected__MODULE_ID__(priority, 2) + ">" +
212 "__MSG_medium__" +
213 "</option>" +
214 "<option class=option__MODULE_ID__ value=3 " +
215 "onclick=\"submitPriority__MODULE_ID__(" + number + ")\" " +
216 selected__MODULE_ID__(priority, 3) + ">" +
217 "__MSG_low__" +
218 "</option>" +
219 "</select>";
220 return html;
221 }
222
223 function createPriorityLink__MODULE_ID__(priority, number) {
224 var html =
225 "<a class=p" + priority + "___MODULE_ID__ " +
226 "href=\"javascript:editPriority__MODULE_ID__(" +
227 number + "," + priority + ")\">" +
228 getPriorityText__MODULE_ID__(priority) +
229 "</a>";
230 return html;
231 }
232
233 function createEditNameForm__MODULE_ID__(number, name) {
234 var html =
235 "<input onkeypress=\"if (isEnter__MODULE_ID__(event))" +
236 "{setName__MODULE_ID__(" + number+ ", event); return false;}\" " +
237 "type=text id=name_input__MODULE_ID__ value=\"" +
238 escapeName__MODULE_ID__(name) + "\">";
239 return html;
240 }
241
242
243 function getPriorityText__MODULE_ID__(priority) {
244 if (priority == 1)
245 return "__MSG_high__";
246 else if (priority == 2)
247 return "__MSG_medium__";
248 return "__MSG_low__";
249 }
250
251 function submitPriority__MODULE_ID__(number) {
252 var row = getRow__MODULE_ID__(number);
253 var col = getCol__MODULE_ID__(row, 0);
254 var select = _gel("select__MODULE_ID__");
255 var newPriority = select.options[select.selectedIndex].value;
256 setPriority__MODULE_ID__(number, newPriority);
257 edited__MODULE_ID__ = false;
258 }
259
260 function editName__MODULE_ID__(number) {
261 if (edited__MODULE_ID__)
262 return;
263 edited__MODULE_ID__ = true;
264 var row = getRow__MODULE_ID__(number);
265 var col = getCol__MODULE_ID__(row, 1);
266 var name = todos__MODULE_ID__.array[number].name;
267 col.innerHTML = createEditNameForm__MODULE_ID__(number, name);
268 _gel("name_input__MODULE_ID__").focus();
269 _gel("name_input__MODULE_ID__").select();
270 }
271
272 function setName__MODULE_ID__(number) {
273 var name = _trim(_gel("name_input__MODULE_ID__").value);
274 if (name == "")
275 name = todos__MODULE_ID__.array[number].name;
276 todos__MODULE_ID__.array[number].name = name;
277 var row = getRow__MODULE_ID__(number);
278 var col = getCol__MODULE_ID__(row, 1);
279 col.innerHTML = createName__MODULE_ID__(number,name);
280 saveTodos__MODULE_ID__();
281 edited__MODULE_ID__ = false;
282 return false;
283 }
284
285 function edit__MODULE_ID__() {
286 return edited__MODULE_ID__;
287 }
288
289 function isEnter__MODULE_ID__(e) {
290 var characterCode;
291 if(e && e.which){
292 e = e
293 characterCode = e.which
294 } else {
295 e = event
296 characterCode = e.keyCode
297 }
298 if (characterCode == 13)
299 return true;
300 return false
301 }
302
303 function getTable__MODULE_ID__() {
304 return _gel('todosTable__MODULE_ID__');
305 }
306
307 function getRow__MODULE_ID__(number) {
308 return _gel("row" + number + "__MODULE_ID__");
309 }
310
311 function getCol__MODULE_ID__(row, index) {
312 return row.childNodes.item(index);
313 }
314
315 function numTodos__MODULE_ID__() {
316 return todos__MODULE_ID__.array.length;
317 }
318 </script>
319
320 <style type="text/css">
321 .delete__MODULE_ID__ {
322 border-style: none;
323 }
324 .priority_td__MODULE_ID__ {
325 font-family: arial;
326 padding-__BIDI_END_EDGE__: 20px;
327 font-size: 12px;
328 }
329 .p1___MODULE_ID__:link, .p1___MODULE_ID__:visited {
330 color: red;
331 text-decoration: none;
332 font-size: 12px;
333 }
334 .p2___MODULE_ID__:link, .p2___MODULE_ID__:visited {
335 color: blue;
336 text-decoration: none;
337 font-size: 12px;
338 }
339 .p3___MODULE_ID__:link, .p3___MODULE_ID__:visited {
340 color: #ff00ff;
341 text-decoration: none;
342 font-size: 12px;
343 }
344 .name_a__MODULE_ID__:link, .name_a__MODULE_ID__:visited {
345 text-decoration:none;
346 font-size: 12px;
347 color: black;
348 }
349 #name_input__MODULE_ID__, #newTodoInput__MODULE_ID__ {
350 width: 100%;
351 font-family: arial;
352 padding: 0px;
353 }
354 #new_todo_td__MODULE_ID__ {
355 font-size: 12px
356 }
357 #input__MODULE_ID__ {
358 font-family: arial;
359 padding: 0px;
360 }
361 #todosTable__MODULE_ID__ {
362 margin:0;
363 padding:0;
364 width:100%;
365 font-size: 12px;
366 }
367 .name_td__MODULE_ID__ {
368 width:100%;
369 }
370 .option__MODULE_ID__ {
371 font-size: 12px;
372 padding: 0px;
373 margin: 0px;
374 font-family: arial;
375 }
376 #select__MODULE_ID__ {
377 font-family: arial;
378 width: 52px;
379 margin: 0px;
380 padding: 0px;
381 }
382 .even__MODULE_ID__ {
383 background: __UP_bgcolor__;
384 }
385 .odd__MODULE_ID__ {
386 background: white;
387 }
388 </style>
389
390 <form name = "newTodoForm__MODULE_ID__"
391 onsubmit="return addTodo__MODULE_ID__(
392 document.newTodoForm__MODULE_ID__.
393 newTodoInput__MODULE_ID__.value, 3, false)">
394 <table cellspacing=0>
395 <tr>
396 <td id="new_todo_td__MODULE_ID__">
397 <nobr>__MSG_new_item__</nobr>
398 </td>
399 <td style='width:100%' >
400 <input id="newTodoInput__MODULE_ID__" type="text"
401 style='width:100%'>
402 </td>
403 <td>
404 <input type = "button" value="__MSG_add__"
405 onclick = "javascript:addTodo__MODULE_ID__(
406 document.newTodoForm__MODULE_ID__.
407 newTodoInput__MODULE_ID__.value, 3, false)">
408 </td>
409 </tr>
410 </table>
411 <div id="todosDiv__MODULE_ID__"></div>
412 </form>
413
414
415 ]]>
416 </Content>
417 </Module>
另外,在 http://www.json.org/json.js 这个JavaScript 文件中,提供了一些封装好的 JSON 方法供我们使用。