亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

選項卡--JavaScript觸發方法

除了在HTML設置 data-toggle 來觸發選項卡之外，還可以通過JavaScript直接調用。

調用方法:

在每個鏈接的單擊事件中調用tab("show")方法，顯示對應的標簽面板內容。針對上面的示例，刪除HTML中自定義的 data-toggle="tab" 或 data-toggle="pill" 的屬性，然后通過下面的腳本來調用：

$(function(){?????$("#myTab?a").click(function(e){????????????????$(this).tab("show");?????});?})

function(e){ e.preventDefault();這兩行不知道是什么意思

阻止默認事件.比如當你點擊帶有href值的a標簽時,元素響應click事件后,還會發生頁面跳轉.如果加上這個方法(屬性)后,瀏覽器只會響應click事件,不會發生跳轉.

事件冒泡：例如這樣一個結構 ：<li><a></a></li>，假如你在a標簽上綁定了一個點擊click事件，如：$("a").click(function(){alert("a"); }); 還在li標簽上綁定了一個事件，如：$("li").click(function(){alert("li"); }); ?如果不加e.preventDefault();這一語句，結果會在alert("a");執行后再次執行alert("li")語句，因為a標簽在li標簽中，a標簽在li標簽范圍中，在執行a標簽上的事件后會執行li標簽上的相同類型事件，從內層標簽往外層依次執行相同類型事件，從里面往外面，此為冒泡。

選項卡--膠囊式選項卡（nav-pills）

在Bootstrap除了可以讓?nav-tabs?具有選項卡的切換功能之外，還可以對膠囊式?nav-pills?導航也具有選項卡的功能。我們只需要將 nav-tabs 換成 nav-pills，另外關鍵一點是將?data-toggle="tab"換成data-toggle="pill"。

下面的示例是將上面的 nav-tabs 換成 nav-pills：

<!--?選項卡組件（菜單項nav-pills）-->?<ul?id="myTab"?class="nav?nav-pills"?role="tablist">?????<li?class="active"><a?href="#bulletin"?role="tab"?data-toggle="pill">公告</a></li>?????<li><a?href="#rule"?role="tab"?data-toggle="pill">規則</a></li>

選項卡--觸發切換效果

同樣的，選項卡也定義data屬性來觸發切換效果。當然前提你也要先加載bootstrap.js或者是tab.js。聲明式觸發選項卡需要滿足以下幾點要求：
? 1、選項卡導航鏈接中要設置?data-toggle="tab"

? 2、并且設置?data-target="對應內容面板的選擇符(一般是ID)";

???? 如果是鏈接的話，還可以通過?href="對應內容面板的選擇符(一般是ID)"

???? 主要起的作用是用戶點擊的時候能找到該選擇符所對應的面板內容 tab-pane。

? 3、面板內容統一放在 tab-content 容器中，而且每個內容面板 tab-pane 都需要設置一個獨立的選擇符（最好是ID）與選項卡中的?data-target?或?href?的值匹配。

代碼如下所示：

<!--?選項卡組件（菜單項nav-tabs）-->?<ul?id="myTab"?class="nav?nav-tabs"?role="tablist">?????<li?class="active"><a?href="#bulletin"?role="tab"?data-toggle="tab">公告</a></li>?????<li><a?href="#rule"?role="tab"?data-toggle="tab">規則</a></li>?????<li><a?href="#forum"?role="tab"?data-toggle="tab">論壇</a></li>?????<li><a?href="#security"?role="tab"??data-toggle="tab">安全</a></li>?????<li><a?href="#welfare"?role="tab"?data-toggle="tab">公益</a></li>?</ul>?<!--?選項卡面板?-->?<div?id="myTabContent"?class="tab-content">?????<div?class="tab-pane?fade?in?active"?id="bulletin">公告內容面板</div>?????<div?class="tab-pane?fade"?id="rule">規則內容面板</div>?????<div?class="tab-pane?fade"?id="forum">論壇內容面板</div>?????<div?class="tab-pane?fade"?id="security">安全內容面板</div>?????<div?class="tab-pane?fade"?id="welfare">公益內容面板</div>?</div>

運行效果如下：

?

選項卡--為選擇卡添加fade樣式

為了讓面板的隱藏與顯示在切換的過程效果更流暢，可以在面板中添加類名?fade，讓其產生漸入的效果。

在添加 fade 樣式時，最初的默認顯示的內容面板一定要記得加上?in?類名，不然其內容用戶無法看到。

項卡--選項卡的結構

一個選項卡主要包括兩個部分，其一是菜單項，其二是內容面板。拿下面的示例來做演示。其HTML結構如下：

<）-->?<ul?id="myTab"?class="nav?nav-tabs"?role="tablist">?????<li?class="active"?role="tab">公告</a></li>?????<li>"?role="tab">規則</a></li>?????<li><a?href="#forum"?role="tab">論壇</a></li>?????<li>"?role="tab">安全</a></li>?????<li><a?href="#welfare"?role="tab">公益</a></li>?</ul>?<?????<div?class="tab-pane?"?id="bulletin">公告內容面板</div>?????<div?class="tab-pane?fade"?id="rule">規則內容面板</div>?????<div?class="tab-pane?fade"?id="forum">論壇內容面板</div>?????<div?class="tab-pane?fade"?id="security">安全內容面板</div>?????<div?class="tab-pane?fade"?id="welfare">公益內容面板</div>?</div>

關鍵一點，選項卡中鏈接的錨點要與對應的面板內容容器的ID相匹配。

滾動監控器--JavaScript方法觸發滾動監控器

在Bootstrap框架中，使用JavaScript方法觸發滾動監控器相對來說較為簡單，只需要指定兩個容器的名稱即可。比如下面的結構：

<nav?id="navbar-menu"?class="navbar?navbar-default?navbar-static"?role="navigation">???…?</nav>?<div?class="scrollspy"?id="scrollspy">???…?</div>

JavaScript觸發可以這樣寫：

$(function(){?????$("#scrollspy").scrollspy({?????????target:?"#navbar-menu"?????});?})

Bootstrap的滾動監控還提供了一個方法scrollspy("refresh")。當滾動監控所作用的DOM有增加或刪除頁面元素的操作時，需要調用下面的refresh方法：

$(function(){?????$("[data-spy='scroll']").each(function(){?????????var?$spy=$(this).scrollspy("refresh");?????})?})

需要注意的是，這種refresh方法只對聲明式用法有效。另外滾動監控除了options參數“target”之外，還提供了一個offset參數，此參數默認值為10。默認情況下，滾動內容距離滾動容器10px以內的話，就高一片面前顯示所對應的菜單項。

滾動監控器--在body中加監控

除了這種方法之外，還可以直接在body上進行滾動條監控，此時要將滾動監控器移到body上，而且導航nav一定要在body內部。如下所示：

????<div?class="navbar?navbar-default?navbar-fixed-top"?id="navbar-menu">?????</div>?????<h3?id="blog">Blog</h3>?????<p>…</p>?</body>

注意：導航條必須設置為頂部固定樣式（navbar-fixed-top）

<div class="scrollspy-example" data-offset="0" data-target="#navbar-example2" data-spy="scroll">

注意這段是寫在文本那里的div的，data-target對應導航條的id

滾動監控器--聲明屬性觸發滾動監控

為監控對象設置被監控的data屬性：data-spy="scroll"，指定監控的導航條：data-target="#navbar-menu"。同時定義監控過程中滾動條偏移位置data-offset="60"。代碼如下：

<div?class="scrollspy"?data-spy="scroll"?data-target="#navbar-menu"?data-offset="60">???…?</div>

現在瀏覽器中預覽，則可以看到當滾動div.scrollspy的滾動條時，導航條會實時監控并更新當前被激活的菜單項，如下圖所示：

? ?

如果導航里有下拉菜單，并且滾動區域的內容到達下拉菜單子項所對應的區域，除了菜單高亮以外，子菜單的父元素dropdown也會高亮，如下圖所示：

滾動監控器--滾動監控器的設計

在Web頁面中實現Bootstrap滾動監控器其實非常簡單，接下來我們一步一步來看滾動監控器是如何設計的。
第一步：使用滾動監控器，首要的條件是在頁面中加載對應的插件。在這里你可以加載合并好的bootstrap.js或者其獨立的插件文件scrollspy.js。這里以加載合并好的js為例：

<script?src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>?<script?src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>

第二步：設計一個帶有下拉菜單的導航條。分別為導航條和下拉菜單項定義一個錨點鏈接，錨點分別為“#blog”,“html”,“#css”,“#sass”,“#js”,“php”,“#about”。同時為導航條定義一個id值“navbar-menu”（id名稱可自由定義），方便滾動監控。

第三步：設計監控對象。這里將監控對象內容都放置在一個div名為scrollspy（這個類名可自由定義）的容器中，其中放了多個子內容框。每個子內容框有一個標題，而且每個標題的ID值與導航菜單項中的錨點鏈接名相對應，并且注意加入“data-target="#navbar-menu"”屬性（這個屬性值要與前面的nav標簽的id名稱保持一致）

<div?class="scrollspy"?data-target="#navbar-menu">?????<h4?id="blog">Blog</h4>?????<p>…</p>?????<h4?id="html">Html</h4>?????<p>…</p>?????<h4?id="css">CSS</h4>?????<p>…</p>?????<h4?id="sass">Sass</h4>?????<p>…</p>?????<h4?id="js">JavaScript</h4>?????<p>…</p>?????<p>…</p>?????<h4?id="php">PHP</h4>?????<p>…</p>?????<p>…</p>?????<h4?id="about">About</h4>?????<p>…</p>?????<p>…</p>?</div>

第四步：為監控對象定義樣式，設置容器scrollspy大?。ㄔO置高度目的是為了產生垂直滾動條）。

.scrollspy{?????height:500px;?????font-size:20px;?????overflow:auto;?}

滾動監控器

插件源文件：scrollspy.js

（官方發布引用地址：http://cdn.bootcss.com/bootstrap/2.3.1/js/bootstrap-scrollspy.js）

滾動監控器是Bootstrap提供的非常實用的JavaScript插件，被廣泛應用到Web開發中。其表現形式是：

1、當用戶鼠標滾動時，滾動條的位置會自動更新導航條中相應的導航項。如Bootstrap官網提供的示例：

（右側結果窗口單擊全屏按鈕查看效果）

2、用戶拖動滾動條，當滾動到@mdo時，上面的@mdo導航項就會高亮顯示：

這是因為該插件可以自動檢測滾動條到達哪個位置，然后在需要高亮的菜單元素上加了一個“active”樣式。

下拉菜單--JavaScript觸發方法

和模態彈出窗一樣，Bootstrap框架中的下拉菜單也支持JavaScript方法觸發下拉菜單顯示。使用JavaScript觸發下拉菜單和聲明式原理是基本類似的，不同的是使用JavaScript方法可以按照自己的方式省略一些元素或者樣式。同樣用一個簡單的示例來做演示：

<ul?class="nav?nav-pills">
????<li?class="dropdown">
????????<a?href="##"??class="dropdown-toggle"??role="button"?id="tutorial">教程<b?class="caret"></b></a>
????????<ul?class="dropdown-menu"?role="menu"?aria-labelledby="tutorial">

相當于直接用$(function(){
 ? ?$(".dropdown-toggle").dropdown();
})代替了 date-toggle="dropdown" 觸發

使用JavaScript調用dropdown()方法后，單擊激活按鈕，會彈出下拉菜單，再次單擊的時候會收起下拉菜單。

$(function(){
????$(".dropdown-toggle").dropdown();
})

還可以使用參數“toggle”。當下拉菜單隱藏時，調用dropdown(“toggle”)方法可以顯示下拉菜單，反之，如果下拉菜單顯示時，調用dropdown(“toggle”)方法可以讓下拉菜單隱藏。

$(function(){
????$(".dropdown-toggle").dropdown("toggle");
})

不過使用該參數，每次單擊都要兩次toggle，就會一直是一個不變的狀態。所以，一般情況下，使用示例中不帶參數的方法！?。?/strong>。就算你需要使用參數“toggle”，也建議使用jQuery的one方法：

$(".dropdown-toggle").one("click",function(){
????$(this).dropdown("toggle");
})

js調用dropdown時無法隱藏

a 標簽的?data-toggle="dropdown" 都沒有刪掉 是可以隱藏的呀. 然后那個js代碼就沒什么必要了