制作選項卡
網(wǎng)站設(shè)計離不開各種那個樣式的選項卡，選項卡組件用于在組不同元素之間切換視角．可以通過單擊每個元素的標題來訪問該元素包含的內(nèi)容，這些標題都作為獨立的選項卡而出現(xiàn)。每個元素，或者說每個內(nèi)容片斷都具有個與之關(guān)聯(lián)的選項卡，并且在同時刻只能夠打開其中個內(nèi)容片斷。深圳網(wǎng)站制作公司，博納網(wǎng)絡(luò)整理如下七個步驟，可以輕松解決前端界面選項卡的制作。
【操作步驟】
第1步，啟動Dreamweaver，打開站節(jié)示例中的orig.html文件，另存為effect.html。在本示例中將在頁面中插入個Tab選項卡，設(shè)計一個Tab面板切換版面，當鼠標經(jīng)過時，會自動切換表單面板。
第2步，把光標置于頁面所在位置，然后選擇【插入】|【iQueryui]【Tabs】命令，在頁面當前位置插入個Tabs面板，如圖7-60所示。
網(wǎng)站設(shè)計選項卡制作步驟實操示意圖7-60插入Tabs選項卡
第3步，使用鼠標單擊選中Tabs面板，可以在【屬性】面板中設(shè)置選項卡的相關(guān)屬性，同時可以在編輯窗口中修改標題名稱并填寫面板內(nèi)容，如圖7-61所示。
網(wǎng)站設(shè)計選項卡制作實操示意圖7-6l設(shè)置Tabs選項卡
(1)ID文本框：設(shè)置Tab選項卡外包含框div元素的ID屬性值，以方便JavaScript腳本控制。
(2)【面板】列表框：在這里顯示選項卡中每個選項標題的名稱，可以單擊▲和
按鈕圖標調(diào)整選項顯示的先后位置，單擊十按鈕可以增加個選項，而單擊一按鈕可以減少個選項。
（3）Active文本框：設(shè)置在默認狀態(tài)下顯示的選項，第個選項值為。，第二個選項值為l，依此類推
(4)Event下拉列表框：設(shè)置選項卡響應(yīng)事件，包括click（鼠標單擊）和mouseover（鼠標經(jīng)過）。
(5)HeightStyle下拉列表框：設(shè)置內(nèi)容框的高度，包括fill（固定高度）、content（根據(jù)內(nèi)容確定高度）和auto（自動調(diào)整）
(6)Disabled復(fù)選框：是否禁用選項卡。
(7)Collapsible復(fù)選框：是否可折疊選項卡。默認選項是false，不可以折疊。如果設(shè)置為true，允許用戶單擊可以將已經(jīng)選中的選項卡內(nèi)容折疊起來。
(8)Hide和Show下拉列表框：設(shè)置選項卡隱藏和顯示時的動畫效果，可以參照下面小節(jié)關(guān)于iQuery特效介紹。
（9）Orientation下拉列表框：設(shè)置選項卡標題欄是在頂部水平顯示(horizontal)，還是在左側(cè)堆疊顯示(vertical)。
第4步，按圖7-61所示設(shè)置完畢，保存文檔，則Dreamweaver會彈出對話框．要求保存相關(guān)的技術(shù)支持文件，如圖7-62所示。單擊【確定】按鈕關(guān)閉該對話框即可。
網(wǎng)站設(shè)計選項卡制作步驟圖7-62確定保存相關(guān)技術(shù)文件
第5步，在內(nèi)容框中分別輸入內(nèi)容，這里插入表單截圖。
第6步，切換到代碼視圖，在<head>標簽中添加<styletype:”text/css”>標簽．定義一個內(nèi)部樣式表，然后定義兩個樣式．修改Tab選項卡默認的樣式，其中#Tabsl>div定義選項卡容器樣式，清除容器包含框的邊界和補白，避免默認的邊界對包含內(nèi)容的影響。#Tabsl>ul>li>a用來控制Tab選項卡標題欄字體大小和左右補白，以便適應(yīng)當前頁面的欄目布局。設(shè)計如圖7-63所示。
網(wǎng)站設(shè)計選項卡制作步驟實操示意圖7-63清除Tab選項卡默認樣式第7步，按Ctrl+S快捷鍵保存文檔，然后按F12鍵預(yù)覽，則演示效果如圖7-64所示。
提示：選項卡組件是基于底層的HTML元素結(jié)構(gòu)，該結(jié)構(gòu)是固定的，組件的運轉(zhuǎn)依賴一些特定的元素。選項卡本身必須從列表元素中創(chuàng)建．列表結(jié)構(gòu)可以是排序的，也可以是無序的，并且每個列表項應(yīng)當包含個span元素和個a元素。每個鏈接還必須具有相應(yīng)的div元素，與它的href屬性相關(guān)聯(lián)。例如：
<li><ahref=’’#tabs’’><span>標題<／span><／a><／ll>
</ul>
<divid="tabsl">Tab面板容器</div>
對于該組件來說，必要的css樣式是必需的，默認可以導(dǎo)Ajquery.ui.all.css文件，或者jquerv.ui.tabs.css，電可以自定義css樣式表用來控制選項卡的基本樣式。套選項卡面板包括了幾種以特定方式排列的標準HTML元素，根據(jù)實際需要可以在頁面中編寫好，也可以動態(tài)添加，或者兩者結(jié)合。
1.列表元素(ul或ol)。
2.a元素。
3.span元素。
4.div元素。
前3個元素組成了可單擊的選項標題，以用來打開選項卡所關(guān)聯(lián)的內(nèi)容框，每個選項卡應(yīng)該包含個帶有鏈接的列表項，并且鏈接內(nèi)部還應(yīng)嵌套一個SDan元素。每個選項卡的內(nèi)容通過div元素創(chuàng)建，其id值是必需的，標記了相應(yīng)的a元素的鏈接目標。深圳網(wǎng)站制作-博納網(wǎng)絡(luò)關(guān)于網(wǎng)站前端選項卡制作的實操經(jīng)驗分享就到這里。謝謝你的關(guān)注。
