📄 default.aspx

📁 《征服Ajax》原书的例题源码
💻 ASPX
字号:
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
	<title>Untitled Page</title>
	<link type="text/css" href="css/style.css" rel="stylesheet" />

	<script type="text/javascript" src="javascript/prototype.js"></script>

	<script type="text/javascript" src="javascript/scriptaculous.js"></script>

	<script type="text/javascript" src="javascript/notebook.js"></script>

</head>
<body>
	<form id="form1" runat="server">
		<div>
			<div id="leftArea">
				<div id="sections">
				</div>
			</div>
			<div id="rightArea">
			</div>
			<div id="editArea" style="display: none">
				<input type="hidden" id="editNoteId" />
				<fieldset>
					<legend>修改书签</legend>
					<div>
						<span>标题：</span><input id="editTitle" type="text" /></div>
					<div>
						<span>链接网址：</span><input id="editLink" type="text" /></div>
					<div>
						<span>描述：</span><input id="editDesc" type="text" /></div>
					<div>
						<span>页面代码：</span><textarea id="editHtml" cols="20" rows="2"></textarea></div>
					<div>
						<input type="button" onclick="UpdateNote()" value="修改" />
					</div>
				</fieldset>
			</div>
			<div id="addArea" style="display: none">
				<fieldset>
					<legend>添加书签</legend>
					<div>
						<span>标题：</span>
						<input id="addTitle" type="text" />
						<div id="titleList" class="autocomplete" />
					</div>
					<div>
						<span>链接网址：</span><input id="addLink" type="text" />
						<div id="linkList" class="autocomplete" />
					</div>
					<div>
						<span>描述：</span><input id="addDesc" type="text" /></div>
					<div>
						<span>页面代码：</span><textarea id="addHtml" cols="20" rows="2"></textarea></div>
					<div>
						<input type="button" onclick="AddNote()" value="添加" />
					</div>
				</fieldset>
			</div>
		</div>
		<div id="debug">
			<input type="hidden" id="selSection" />
		</div>
	</form>

	<script type="text/javascript">
    var ajax = new Ajax.Request("ListSection.aspx", {onComplete: InitSection});
    
    function InitSection(xmlhttp) {
      // 显示section列表
      $("sections").innerHTML = xmlhttp.responseText;
      
      // 记录拖拽始末的order
      var start_order, end_order;
      
      var sort = Sortable.create("section_list", {
				//ghosting: true,
				constraint: false,
				starteffect: function(element) {
					// 记录拖拽之前的order
					start_order = Element.FindIndexOf("section_list", element);
					start_order = parseInt(start_order) + 1;
				},
				endeffect: function(element) {
					// 记录拖拽以后的order
					end_order = Element.FindIndexOf("section_list", element);
					end_order = parseInt(end_order) + 1;
          
					// Ajax方式调用后台页面MoveSection.aspx,移动section
					var pars = "oid=" + start_order + "&noid=" + end_order;
					new Ajax.Request("MoveSection.aspx", {mothed: "GET", parameters: pars});
        }
      });
      
      // 添加onclick响应
			$A($("sections").childNodes).each(
				function(element, index) {
					Event.observe(element, "click", ListNotes, false);
				}
			);
    }
    
    function ListNotes(event) {
			// 去除id前面的"li_",转换为section id
    	var section_id = Event.element(event).id.getId();
    	$("selSection").value = section_id;
    	new Ajax.Request(
    		"ListNotes.aspx", {
    			parameters: "sid=" + section_id,
    			onComplete: ShowNotes
    		}
    	);
    }
    
    function ShowNotes(xmlhttp) {
			$("rightArea").innerHTML = xmlhttp.responseText;
			
			// 使新增书签区域具有自动完成功能
			EnableAutoCompleter();
			
      // 记录拖拽始末的order
      var end_order;
      
			Sortable.create("notes", {
				//ghosting: true,
				constraint: false,
				endeffect: function(element) {
					// 记录拖拽以后的order
					end_order = Element.FindIndexOf("notes", element);
					end_order = parseInt(end_order) + 1;
          
					// Ajax方式调用后台页面MoveNote.aspx,移动section
					var pars = "id=" + element.id.getId() + "&noid=" + end_order;
					new Ajax.Request("MoveNote.aspx", {mothed: "GET", parameters: pars});
        }
      });
      
      
			$$(".showHide").each(
				function(item) {
					Event.observe(item, "click",
						function(event) {
							var target = event.target ? event.target : event.srcElement;
							var id = target.id.getId();
							Effect.toggle("content_" + id, "appear", {
								transition: Effect.Transitions.full,
								duration: 0.2,
								afterFinish: function (effect) {
									$("img_" + id).src = effect.element.visible() ?
										"images/hideMod.gif" : "images/showMod.gif";
								}
							});
						}, false
					);
				}
			);
			
			// 每一个title,.moduleHeader .close .button
			$$("div.module div.moduleFrame div.title").each(
				function (item) {
					Event.observe(item, "mouseover",
						function (event) {
							var target = event.target ? event.target : event.srcElement;
							var id = target.id.getId();
							var btnEdit = $("btnEdit_" + id);
							var btnDelete = $("btnDelete_" + id);
							Element.show(btnEdit);
							Element.show(btnDelete);
						}, false
					);
					
					Event.observe(item, "mouseout",
						function (event) {
							var target = event.target ? event.target : event.srcElement;
							var id = target.id.getId();
							var btnEdit = $("btnEdit_" + id);
							var btnDelete = $("btnDelete_" + id);
							Element.hide(btnEdit);
							Element.hide(btnDelete);
						}, false
					);
					
				}
			);

			$$(".moduleHeader .close .button").each(
				function (item) {
					Event.observe(item, "mouseover",
						function (event) {
							var target = event.target ? event.target : event.srcElement;
							var id = target.id.getId();
							var btnEdit = $("btnEdit_" + id);
							var btnDelete = $("btnDelete_" + id);
							Element.show(btnEdit);
							Element.show(btnDelete);
						}, false
					);
					
					Event.observe(item, "mouseout",
						function (event) {
							var target = event.target ? event.target : event.srcElement;
							var id = target.id.getId();
							var btnEdit = $("btnEdit_" + id);
							var btnDelete = $("btnDelete_" + id);
							Element.hide(btnEdit);
							Element.hide(btnDelete);
						}, false
					);
					
				}
			);
    }
    
    function printAll(obj) {
			var arr = [];
			for (p in obj) arr.push(p);
			$("debug").innerHTML = arr.join(",");
    }
    
    // 编辑书签
    function EditNote(id) {
			$("editNoteId").value = id;
			Element.show("editArea");
			$("editTitle").value = $("titleText_" + id).innerHTML;
			$("editLink").value = $("a_" + id).href;
			$("editDesc").value = $("desc_" + id).innerHTML;
			$("editHtml").value = $("html_" + id).innerHTML;			
    }
    
    function UpdateNote() {
			var paras = "id=" + $("editNoteId").value +
				"&title=" + escape($("editTitle").value) +
				"&link=" + escape($("editLink").value) +
				"&desc=" + escape($("editDesc").value) +
				"&html=" + escape($("editHtml").value);
				
			new Ajax.Request("EditNote.aspx", {
				mothed: "GET",
				parameters: paras,
				onComplete: function (xmlhttp) {
    			var section_id = $("selSection").value;
    			new Ajax.Request(
    				"ListNotes.aspx", {
    					parameters: "sid=" + section_id,
    					onComplete: function (xmlhttp) {
    						Element.hide("editArea");
    						ShowNotes(xmlhttp);    						
    					}
    				}
    			);
				}
			});
    }
    
    // 删除书签
    function DeleteNote(id) {
			if (confirm("您确定要删除该书签吗，删除后无法恢复!")) {
				new Ajax.Request("DeleteNote.aspx", {
					mothed: "GET",
					parameters: "id=" + id,
					onComplete: RefreshNoteList
				});
			}
    }
    
    // 刷新列表
    function RefreshNoteList() {
    	var section_id = $("selSection").value;
    	new Ajax.Request(
    		"ListNotes.aspx", {
    			parameters: "sid=" + section_id,
    			onComplete: ShowNotes
    		}
    	);
    }
    
    function doCommand(id) {
			if (id == 1) {
				AddSection();
			} else if (id == 2) {
				DeleteSection($F("selSection"));
			} else if (id == 3) {
				RenameSection($F("selSection"));
			} else if (id == 4) {
				Element.show("addArea");
			}	else {
			}		
    }
    
    function AddSection() {
    	var sectionName = window.prompt("请输入新书签分类名称");
    	if (sectionName) {
    		var paras = "name=" + escape(sectionName);
    		new Ajax.Request("AddSection.aspx", {
    			mothed: "GET",
    			parameters: paras,
    			onComplete: function(xmlhttp) {
    				new Ajax.Request("ListSection.aspx", {onComplete: InitSection});
    			}
    		});
    	}
    }
    
    function DeleteSection(id) {
			if (window.confirm("您确认要删除该书签分类吗，该分类下的所有书签信息将被同时删除，删除后无法恢复！")) {
				var paras = "id=" + id;
    		new Ajax.Request("DeleteSection.aspx", {
    			mothed: "GET",
    			parameters: paras,
    			onComplete: function(xmlhttp) {
    				new Ajax.Request("ListSection.aspx", {onComplete: InitSection});
    			}
    		});
			}
    }
    
    function RenameSection(id) {
    	var sectionName = window.prompt("请输入新书签分类名称");
    	if (sectionName) {
    		var paras = "id=" + id + "&name=" + escape(sectionName);
    		new Ajax.Request("RenameSection.aspx", {
    			mothed: "GET",
    			parameters: paras,
    			onComplete: function(xmlhttp) {
    				new Ajax.Request("ListSection.aspx", {onComplete: InitSection});
    			}
    		});
    	}
    }
    
    function AddNote(id) {
			var paras = "order=1&sid=" + $F("selSection") +
				"&title=" + escape($("addTitle").value) +
				"&link=" + escape($("addLink").value) +
				"&desc=" + escape($("addDesc").value) +
				"&html=" + escape($("addHtml").value);
				
			new Ajax.Request("AddNote.aspx", {
				mothed: "GET",
				parameters: paras,
				onComplete: function (xmlhttp) {
    			var section_id = $("selSection").value;
    			new Ajax.Request(
    				"ListNotes.aspx", {
    					parameters: "sid=" + section_id,
    					onComplete: function (xmlhttp) {
    						Element.hide("addArea");
    						ShowNotes(xmlhttp);    						
    					}
    				}
    			);
				}
			});
    }
    
    function EnableAutoCompleter() {
			// 标题
			var titles = [];
			$$(".module .moduleFrame .moduleHeader .title").each( function (element) {
				titles.push(element.innerHTML);
			});			
			new Autocompleter.Local("addTitle",	"titleList", titles);
			
			// 网址
			var links = [];
			$$(".moduleContent div span a").each( function (element) {
				links.push(element.href);
			});
			new Autocompleter.Local("addLink", "linkList", links, {fullSearch: true});
    }

	</script>

</body>
</html>
⌨️ 快捷键说明

复制代码 Ctrl + C
搜索代码 Ctrl + F
全屏模式 F11
切换主题 Ctrl + Shift + D
显示快捷键 ?
增大字号 Ctrl + =
减小字号 Ctrl + -