JavaScript & jQuery 的應用(四)：簡單預覽功能實作

2009-12-08

10100
0
JavaScript

我們常常在網頁上填表格的時候，希望讓使用者再確認一次填寫的資料是否正確。通常這個功能大多數人都會另外做一頁預覽頁面，但今天有了jQuery，我們可以更輕鬆簡單的完成這件事。

先來看一下簡單的編輯畫面：

畫面上提供了一些填寫資料的控制項，這些大多都是我們會使用的功能，填寫完畢後按下預覽…使用者可以再度確認資料是否正確，如果正確就可以按下送出，而按下編輯則回頁面修改。

為了達到這項功能，我們須要利用jQuery的強大選擇器。

畫面HTML：


	姓名：<asp:TextBox ID="ChName" runat="server" MaxLength="20"></asp:TextBox><br />
	性別：<asp:RadioButtonList ID="Sex" runat="server" RepeatDirection="Horizontal" RepeatLayout="Flow">
		<asp:ListItem Value="1">男</asp:ListItem>
		<asp:ListItem Value="0">女</asp:ListItem>
	</asp:RadioButtonList><br />
	年齡：<asp:TextBox ID="Age" runat="server" MaxLength="10" Width="70px"></asp:TextBox><br />
	地區：<asp:DropDownList ID="DropDownList1" runat="server">
		<asp:ListItem Value="320">中壢市</asp:ListItem>
		<asp:ListItem Value="310">桃園市</asp:ListItem>
	</asp:DropDownList><br />
	興趣：<asp:CheckBoxList runat="server" ID="Interesting" RepeatDirection="Horizontal" RepeatLayout="Flow">
		<asp:ListItem Value="sports">運動</asp:ListItem>
		<asp:ListItem Value="music">音樂</asp:ListItem>
		<asp:ListItem Value="reading">閱讀</asp:ListItem>
	</asp:CheckBoxList><br />
	<input type="button" name="preview" id="preview" value="preview" /><input type="button" id="edit" name="edit" value="edit" /><input type="submit" id="submit" name="submit" value="submit" />
</div>

Javascript：把所有的動作都封裝在page這個物件裡面，然後在本頁載入的時候，幫button繫結事件。

其實原理非常簡單，只是把目前顯示的控制項隱藏起來，然後利用span顯示所填寫的值；還原的時候只要把特定的span刪除，把隱藏項目顯示即可。請參考以下範例：


{
	preview:function()
	{
		//設定按鈕顯示
		$("#submit, #edit").show();
		$("#preview").hide();

		//textbox
		$("input:text, textarea").hide().each(function()
		{
			$(this).after("<span class='dupView'>" + this.value + "</span>");
		});
		
		//select
		$("select").hide().each(function()
		{
			$(this).after("<span class='dupView'>" + this[this.selectedIndex].text + "</span>");
		});
		
		//radio
		$("input:radio").each(function()
		{
			$(this).hide();
			if (!this.checked)
			{
				$(this).next("label").hide();
			}
		});
		
		//checkbox
		$("input:checkbox").each(function()
		{
			$(this).hide();						
			if (!this.checked)
			{
				$(this).next("label").hide();
			}
			else
			{
				$(this).next("label").after("<span class='dupView'>,</span>");
			}
		});

	},
	edit:function()
	{
		//設定按鈕顯示
		$("#submit, #edit").hide();
		$("#preview").show();
		
		//還原預覽
		$("span.dupView").prev().show().end().remove();
		$("input:text, textarea").show();

		$("input:radio").each(function()
		{
			$(this).show();
			$(this).next("label").show();
		});

		$("input:checkbox").each(function()
		{
			$(this).show();
			$(this).next("label").show();
		});		
	}
};


$(function()
{
	//初始化
	$("#preview").click(page.preview);
	$("#edit").click(page.edit);
		
	$("#submit, #edit").hide();
});

是不是很簡單呢？不管畫面上有多少個textbox, 多少個下拉式選單，多～少個checkbox，全部通通一次摘定！！

Dotblogs 的標籤：JavaScript,jQuery

回首頁