在網(wǎng)頁(yè)設(shè)計(jì)中制作選項(xiàng)卡

網(wǎng)頁(yè)設(shè)計(jì)中,選項(xiàng)卡組件用于在一組不同元素之間切換視角,可以通過(guò)單擊每個(gè)元素的標(biāo)題來(lái)訪(fǎng)問(wèn)該元素包含的內(nèi)容,這些標(biāo)題在設(shè)計(jì)網(wǎng)頁(yè)時(shí)都作為獨(dú)立的選項(xiàng)卡而出現(xiàn)。每個(gè)元素,或者說(shuō)每個(gè)內(nèi)容片斷都具有一個(gè)與之關(guān)聯(lián)的選項(xiàng)卡,并且在同一時(shí)刻只能夠打開(kāi)其中一個(gè)內(nèi)容片斷。

【操作步驟】

第1步,啟動(dòng)Dreamweaver,打開(kāi)本節(jié)示例中的orig.html文件,另存為effect.html。在本示例中將在頁(yè)面中插入一個(gè)Tab選項(xiàng)卡,設(shè)計(jì)一個(gè)Tab面板切換版面,當(dāng)鼠標(biāo)經(jīng)過(guò)時(shí),會(huì)自動(dòng)切換表單面板。

第2步,把光標(biāo)置于頁(yè)面所在位置,然后選擇【插入】|【jQuery UI】|【Tabs】命令,在頁(yè)面當(dāng)前位置插入一個(gè)Tabs面板。

第3步,使用鼠標(biāo)單擊選中Tabs面板,可以在【屬性】面板中設(shè)置選項(xiàng)卡的相關(guān)屬性,同時(shí)可以在編輯窗口中修改標(biāo)題名稱(chēng)并填寫(xiě)面板內(nèi)容。

(1)ID文本框:設(shè)置Tab選項(xiàng)卡外包含框div元素的ID屬性值,以方便JavaScript腳本控制。

(2)【面板】列表框:在這里顯示選項(xiàng)卡中每個(gè)選項(xiàng)標(biāo)題的名稱(chēng),可以單擊和按鈕圖標(biāo)調(diào)整選項(xiàng)顯示的先后位置,單擊按鈕可以增加一個(gè)選項(xiàng),而單擊按鈕可以減少一個(gè)選項(xiàng)。

(3)Active文本框:設(shè)置在默認(rèn)狀態(tài)下顯示的選項(xiàng),第一個(gè)選項(xiàng)值為0,第二個(gè)選項(xiàng)值為1,依此類(lèi)推。

(4)Event下拉列表框:設(shè)置選項(xiàng)卡響應(yīng)事件,包括click(鼠標(biāo)單擊)和mouseover(鼠標(biāo)經(jīng)過(guò))。

(5)Height Style下拉列表框:設(shè)置內(nèi)容框的高度,包括fill(固定高度)、content(根據(jù)內(nèi)容確定高度)和auto(自動(dòng)調(diào)整)。

(6)Disabled復(fù)選框:是否禁用選項(xiàng)卡。

(7)Collapsible復(fù)選框:是否可折疊選項(xiàng)卡。默認(rèn)選項(xiàng)是false,不可以折疊。如果設(shè)置為true,允許用戶(hù)單擊可以將已經(jīng)選中的選項(xiàng)卡內(nèi)容折疊起來(lái)。

(8)Hide和Show下拉列表框:設(shè)置選項(xiàng)卡隱藏和顯示時(shí)的動(dòng)畫(huà)效果,可以參閱下面小節(jié)關(guān)于jQuery特效介紹。

(9)Orientation下拉列表框:設(shè)置選項(xiàng)卡標(biāo)題欄是在頂部水平顯示(horizontal),還是在左側(cè)堆疊顯示(vertical)。

第4步,保存文檔,則Dreamweaver會(huì)彈出對(duì)話(huà)框,要求保存相關(guān)的技術(shù)支持文件。單擊【確定】按鈕關(guān)閉該對(duì)話(huà)框即可。

第5步,在內(nèi)容框中分別輸入內(nèi)容,這里插入表單截圖。

第6步,切換到代碼視圖,在<head>標(biāo)簽中添加<style type="text/css">標(biāo)簽,定義一個(gè)內(nèi)部樣式表,然后定義兩個(gè)樣式,修改Tab選項(xiàng)卡默認(rèn)的樣式,其中#Tabs1 > div定義選項(xiàng)卡容器樣式,清除容器包含框的邊界和補(bǔ)白,避免默認(rèn)的邊界對(duì)包含內(nèi)容的影響。#Tabs1 > ul > li > a用來(lái)控制Tab選項(xiàng)卡標(biāo)題欄字體大小和左右補(bǔ)白,以便適應(yīng)當(dāng)前頁(yè)面的欄目布局。

#Tabs1 > div {    

padding:0;    

margin:0;}

#Tabs1 > ul > li > a{    

font-size:14px;    

padding-left:8px;    

padding-right:8px;}

第7步,按Ctrl+S快捷鍵保存文檔,然后按F12鍵預(yù)覽。

提示:在網(wǎng)站建設(shè)時(shí),選項(xiàng)卡組件是基于底層的HTML元素結(jié)構(gòu),該結(jié)構(gòu)是固定的,組件的運(yùn)轉(zhuǎn)依賴(lài)一些特定的元素。選項(xiàng)卡本身必須從列表元素中創(chuàng)建,列表結(jié)構(gòu)可以是排序的,也可以是無(wú)序的,并且每個(gè)列表項(xiàng)應(yīng)當(dāng)包含一個(gè)span元素和一個(gè)a元素。每個(gè)鏈接還必須具有相應(yīng)的div元素,與它的href屬性相關(guān)聯(lián)。例如:

<ul>    

<li><a href="#tabs"><span>標(biāo)題</span></a></li>

</ul>

<div id="tabs1">Tab面板容器 </div>

對(duì)于該組件來(lái)說(shuō),必要的CSS樣式是必需的,默認(rèn)可以導(dǎo)入jquery.ui.all.css文件,或者jquery.ui.tabs.css,也可以自定義CSS樣式表,用來(lái)控制選項(xiàng)卡的基本樣式。一套選項(xiàng)卡面板包括了幾種以特定方式排列的標(biāo)準(zhǔn)HTML元素,根據(jù)實(shí)際需要可以在頁(yè)面中編寫(xiě)好,也可以動(dòng)態(tài)添加,或者兩者結(jié)合。   

?列表元素(ul或ol)。   

?a元素。   

?span元素。

?div元素。

前3個(gè)元素組成了可單擊的選項(xiàng)標(biāo)題,以用來(lái)打開(kāi)選項(xiàng)卡所關(guān)聯(lián)的內(nèi)容框,每個(gè)選項(xiàng)卡應(yīng)該包含一個(gè)帶有鏈接的列表項(xiàng),并且鏈接內(nèi)部還應(yīng)嵌套一個(gè)span元素。每個(gè)選項(xiàng)卡的內(nèi)容通過(guò)div元素創(chuàng)建,其id值是必需的,標(biāo)記了相應(yīng)的a元素的鏈接目標(biāo)。

網(wǎng)站建設(shè)、網(wǎng)絡(luò)營(yíng)銷(xiāo)咨詢(xún)專(zhuān)線(xiàn):0871-63535511(點(diǎn)擊可一鍵撥號(hào))