<tt id="kjox3"><noscript id="kjox3"><samp id="kjox3"></samp></noscript></tt><tt id="kjox3"><li id="kjox3"><var id="kjox3"></var></li></tt><cite id="kjox3"><noscript id="kjox3"><delect id="kjox3"></delect></noscript></cite>

<source id="kjox3"><menuitem id="kjox3"></menuitem></source>

  • <rt id="kjox3"></rt>
      <rp id="kjox3"></rp>

    1. <cite id="kjox3"></cite>
        <tt id="kjox3"><form id="kjox3"><delect id="kjox3"></delect></form></tt><rp id="kjox3"><meter id="kjox3"><button id="kjox3"></button></meter></rp>

      1. <tt id="kjox3"></tt>

        <rt id="kjox3"><meter id="kjox3"></meter></rt>
      2. <b id="kjox3"><form id="kjox3"><label id="kjox3"></label></form></b>

          在網頁設計中制作選項卡

          • 2019-11-18 14:04:42
          • 閱讀次數:
          • 作者:盈嵐科技小編
          • 來源:http://www.1c4w.com

          網頁設計中,選項卡組件用于在一組不同元素之間切換視角,可以通過單擊每個元素的標題來訪問該元素包含的內容,這些標題在設計網頁時都作為獨立的選項卡而出現。每個元素,或者說每個內容片斷都具有一個與之關聯的選項卡,并且在同一時刻只能夠打開其中一個內容片斷。

          【操作步驟】

          第1步,啟動Dreamweaver,打開本節示例中的orig.html文件,另存為effect.html。在本示例中將在頁面中插入一個Tab選項卡,設計一個Tab面板切換版面,當鼠標經過時,會自動切換表單面板。

          第2步,把光標置于頁面所在位置,然后選擇【插入】|【jQuery UI】|【Tabs】命令,在頁面當前位置插入一個Tabs面板。

          第3步,使用鼠標單擊選中Tabs面板,可以在【屬性】面板中設置選項卡的相關屬性,同時可以在編輯窗口中修改標題名稱并填寫面板內容。

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

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

          (3)Active文本框:設置在默認狀態下顯示的選項,第一個選項值為0,第二個選項值為1,依此類推。

          (4)Event下拉列表框:設置選項卡響應事件,包括click(鼠標單擊)和mouseover(鼠標經過)。

          (5)Height Style下拉列表框:設置內容框的高度,包括fill(固定高度)、content(根據內容確定高度)和auto(自動調整)。

          (6)Disabled復選框:是否禁用選項卡。

          (7)Collapsible復選框:是否可折疊選項卡。默認選項是false,不可以折疊。如果設置為true,允許用戶單擊可以將已經選中的選項卡內容折疊起來。

          (8)Hide和Show下拉列表框:設置選項卡隱藏和顯示時的動畫效果,可以參閱下面小節關于jQuery特效介紹。

          (9)Orientation下拉列表框:設置選項卡標題欄是在頂部水平顯示(horizontal),還是在左側堆疊顯示(vertical)。

          第4步,保存文檔,則Dreamweaver會彈出對話框,要求保存相關的技術支持文件。單擊【確定】按鈕關閉該對話框即可。

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

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

          #Tabs1 > div {    

          padding:0;    

          margin:0;}

          #Tabs1 > ul > li > a{    

          font-size:14px;    

          padding-left:8px;    

          padding-right:8px;}

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

          提示:在網站建設時,選項卡組件是基于底層的HTML元素結構,該結構是固定的,組件的運轉依賴一些特定的元素。選項卡本身必須從列表元素中創建,列表結構可以是排序的,也可以是無序的,并且每個列表項應當包含一個span元素和一個a元素。每個鏈接還必須具有相應的div元素,與它的href屬性相關聯。例如:

          <ul>    

          <li><a href="#tabs"><span>標題</span></a></li>

          </ul>

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

          對于該組件來說,必要的CSS樣式是必需的,默認可以導入jquery.ui.all.css文件,或者jquery.ui.tabs.css,也可以自定義CSS樣式表,用來控制選項卡的基本樣式。一套選項卡面板包括了幾種以特定方式排列的標準HTML元素,根據實際需要可以在頁面中編寫好,也可以動態添加,或者兩者結合。   

          ?列表元素(ul或ol)。   

          ?a元素。   

          ?span元素。

          ?div元素。

          前3個元素組成了可單擊的選項標題,以用來打開選項卡所關聯的內容框,每個選項卡應該包含一個帶有鏈接的列表項,并且鏈接內部還應嵌套一個span元素。每個選項卡的內容通過div元素創建,其id值是必需的,標記了相應的a元素的鏈接目標。

          當前文章標題:在網頁設計中制作選項卡

          當前URL:http://www.1c4w.com/news/wzzz/3128.html

          上一篇:在網頁設計中制作彈跳的小球

          下一篇:在網頁設計中設計模態對話框

          網站建設、網絡營銷咨詢專線:181-8386-5875(點擊可一鍵撥號)
          鸭子tv国产在线永久播放