在網(wǎng)頁(yè)設(shè)計(jì)時(shí),如果需要在Web應(yīng)用中顯示簡(jiǎn)短的信息提示,或者向訪問者詢問,可以有兩種方式:一是使用JavaScript原生的對(duì)話框,如alert()或者confirm()方法等,另一種方法是打開一個(gè)新的頁(yè)面,預(yù)先定義好尺寸,并且將其樣式設(shè)置為對(duì)話框風(fēng)格。不過(guò),在網(wǎng)頁(yè)設(shè)計(jì)時(shí),JavaScript提供的原生方法既不靈活,也不巧妙,它們?cè)诮鉀Q一個(gè)問題的同時(shí),通常會(huì)產(chǎn)生新的問題。
jQuery UI提供了更多功能和更加豐富特性的對(duì)話框組件,該對(duì)話框組件可以顯示消息,附加內(nèi)容(如圖片或文字等),甚至包括交互型內(nèi)容(如表單),為對(duì)話框添加按鈕也更加容易,如簡(jiǎn)單的【確定】和【取消】按鈕,并且可以為這些按鈕定義回調(diào)函數(shù),以便在它們被單擊時(shí)做出反應(yīng)。
【操作步驟】
第1步,啟動(dòng)Dreamweaver,打開本節(jié)示例中的orig.html文件,另存為effect.html。在本示例中將在頁(yè)面中插入一個(gè)按鈕圖標(biāo),單擊該按鈕圖標(biāo)可以打開模態(tài)對(duì)話框。
第2步,把光標(biāo)置于頁(yè)面所在位置,然后插入圖像images/out.png,命名為help。
第3步,選中插入的圖像,打開【行為】面板,為當(dāng)前圖像綁定交換圖像行為,詳細(xì)設(shè)置如圖7.66所示。綁定行為之后,在【行為】面板中設(shè)置觸發(fā)事件,交換圖像為onMouseOver,恢復(fù)交換圖像為onMouseOut,即設(shè)計(jì)當(dāng)鼠標(biāo)經(jīng)過(guò)圖像時(shí),能夠動(dòng)態(tài)顯示圖像交換效果。
第4步,在頁(yè)面內(nèi)單擊,把光標(biāo)置于頁(yè)面內(nèi),不要選中任何對(duì)象,然后選擇【插入】|jQuery UI|Dialog命令,在頁(yè)面當(dāng)前位置插入一個(gè)模態(tài)對(duì)話框。
第5步,使用鼠標(biāo)單擊選中Dialog面板,可以在【屬性】面板中設(shè)置對(duì)話框的相關(guān)屬性,同時(shí)可以在編輯窗口中修改對(duì)話框面板的內(nèi)容。
(1)ID文本框:設(shè)置對(duì)話框外包含框div元素的ID屬性值,以方便JavaScript腳本控制。圖7.68 設(shè)置相關(guān)屬性
(2)Title文本框:設(shè)置對(duì)話框的標(biāo)題。
(3)Position下拉列表框:設(shè)置對(duì)話框在瀏覽器窗口中的顯示位置,默認(rèn)為center(中央),包括left、right、top和bottom選項(xiàng)。
(4)Width和Height文本框:設(shè)置對(duì)話框的寬度和高度。
(5)Min Width、Min Height、Max Width和Max Height文本框:設(shè)置對(duì)話框最小寬度、最小高度、最大寬度和最大高度。
(6)Auto Open復(fù)選框:是否自動(dòng)打開對(duì)話框。
(7)Draggable復(fù)選框:是否允許鼠標(biāo)拖動(dòng)對(duì)話框。
(8)Modal復(fù)選框:是否開啟遮罩模式,在遮罩模式下用戶只能在關(guān)閉對(duì)話框后才能夠繼續(xù)操作頁(yè)面。
(9)Close On Escape復(fù)選框:是否允許使用Escape鍵關(guān)閉對(duì)話框。
(10)Resizable復(fù)選框:是否允許調(diào)整對(duì)話框大小。
(11)Hide和Show下拉列表框:設(shè)置對(duì)話框隱藏和顯示時(shí)的動(dòng)畫效果。
(12)Trigger Button下拉列表框:設(shè)置觸發(fā)對(duì)話框的按鈕對(duì)象。
(13)Trigger Event下拉列表框:設(shè)置觸發(fā)對(duì)話框的事件。
第6步,按步驟所示設(shè)置完畢,保存文檔,則Dreamweaver會(huì)彈出對(duì)話框,要求保存相關(guān)的技術(shù)支持文件。單擊【確定】按鈕關(guān)閉該對(duì)話框即可。
第7步,切換到【代碼】視圖,可以看到Dreamweaver自動(dòng)生成的腳本。
<script type="text/javascript">$(function() {
$( "#Dialog1" ).dialog({
modal:true,
autoOpen:false,
title:"幫助中心",
minWidth:300,
width:600,
height:400,
minHeight:300,
maxHeight:800,
maxWidth:1024 });});</script>
第8步,在$(function() {}函數(shù)體內(nèi)增加如下代碼,為交換圖像綁定激活對(duì)話框的行為。
<script type="text/javascript">$(function() {
$( "#Dialog1" ).dialog({ });
$( "#help" ).click(function() {
$( "#Dialog1" ).dialog( "open" ); });});
</script>
第9步,按Ctrl+S快捷鍵保存文檔,然后按F12鍵預(yù)覽,當(dāng)單擊幫助圖標(biāo)時(shí),會(huì)自動(dòng)顯示一個(gè)模態(tài)對(duì)話框。 模態(tài)對(duì)話框預(yù)覽效果
提示:在網(wǎng)站建設(shè)時(shí),對(duì)話框組件帶有內(nèi)建模式,在默認(rèn)情況下是非激活的,而一旦模式被激活,將會(huì)啟用一個(gè)模式覆蓋層元素,覆蓋對(duì)話框的父頁(yè)面。而對(duì)話框?qū)?huì)位于該覆蓋層的上面,同時(shí)頁(yè)面的其他部分將位于覆蓋層的下面。這個(gè)特性的好處是可以確保對(duì)話框被關(guān)閉之前,父頁(yè)面不能夠進(jìn)行交互,并且為要求訪問者在進(jìn)一步操作前必須關(guān)閉對(duì)話框提供了一個(gè)清晰的視覺指標(biāo)。改變對(duì)話框的皮膚使之與內(nèi)容相適應(yīng)是很容易的,可以從默認(rèn)的主題樣式表(jquery.ui.dialog.css)中進(jìn)行修改,也可以自定義對(duì)話框樣式表。
當(dāng)前文章標(biāo)題:在網(wǎng)頁(yè)設(shè)計(jì)中設(shè)計(jì)模態(tài)對(duì)話框
當(dāng)前URL:http://supportcoffeeroasters.com/news/wzzz/3129.html
上一篇:在網(wǎng)頁(yè)設(shè)計(jì)中制作選項(xiàng)卡
下一篇:新建網(wǎng)頁(yè)圖像