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

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

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

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

image

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

image

為了達到這項功能,我們須要利用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 的標籤:,