Bootstrap3.0學習第二十二輪(JavaScript插件——彈出框)

本文主要來學習一下JavaScript插件--彈出框。

彈出框

案例

爲頁面內容添加一個小的覆蓋層，就像iPad上的效果一樣，爲頁面元素增加額外的信息。

先來看幾個簡單的靜態案例效果圖

 

效果比較簡單主要就是靜態的彈出的小窗體，分爲窗體標題和窗體內容。

    <div class="bs-example bs-example-popover">
      <div class="popover top">
        <div class="arrow"></div>
        <h3 class="popover-title">Popover top</h3>
        <div class="popover-content">
          <p>Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.</p>
        </div>
      </div>

      <div class="popover right">
        <div class="arrow"></div>
        <h3 class="popover-title">Popover right</h3>
        <div class="popover-content">
          <p>Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.</p>
        </div>
      </div>

      <div class="popover bottom">
        <div class="arrow"></div>
        <h3 class="popover-title">Popover bottom</h3>

        <div class="popover-content">
          <p>Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.</p>
        </div>
      </div>

      <div class="popover left">
        <div class="arrow"></div>
        <h3 class="popover-title">Popover left</h3>
        <div class="popover-content">
          <p>Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.</p>
        </div>
      </div>

      <div class="clearfix"></div>
    </div>

但是我們還是需要給元素設置簡單的基本佈局

 <style type="text/css"> .bs-example-popover .popover {
      position: relative;
      display: block; float: left;
      width: 240px;
      margin: 20px;
} </style>

動態演示

先來看效果圖

一個按鈕，點擊按鈕的時候就會彈出右側的小窗體。

看代碼，其實也很簡單。

        <a id="a2" class="btn btn-lg btn-danger" data-placement="right" data-content="即對擁有矮、胖、窮、醜、矬、呆、擼等屬性特徵的各種雷人行徑及想法表示輕蔑。屌絲（或寫作“吊絲”）可以說是由罵人話“屌死”、“吊死”、“叼死”演變而來。“屌絲男”主要是指大多出身清貧之家，如鄉村或許多城市底層小市民家庭，沒有更多的背景，許多初中即停學，進城務工，或成了餐廳服務員，或成了網吧網管，在城市的富貴之中分得一杯苦羹；或是宅男、無業遊民，可是通常又不肯承認，個人一般自稱爲自由職業者。" title="" href="#" data-original-title="屌絲本義"> Please Click to toggle popover </a>

就一個a標籤，但是賦予了按鈕的樣式類，然後給與幾個屬性，主要用於展示彈出框的：

第一個：data-original-title ——標題

第二個：data-content——內容

第三個：data-placement——位置（上下左右top、bottom、left、right）

不過現在如果你來運行，按鈕是有了，你點擊按鈕彈出框被不會出現，原來很簡單，就是我們還沒有給它初始化，就像上一節中的tooltip一樣的。

只需要添加簡單的JavaScript代碼就可以了。

  <script type="text/javascript"> $("#a1").popover(); </script>

四個方向

    <div  style="margin-left:200px;margin-top:100px;margin-bottom:200px;" class="bs-example tooltip-demo">
      <div class="bs-example-tooltips">
        <button type="button" class="btn btn-default" data-container="body" data-toggle="popover" data-placement="left" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus."> 左側彈框 </button>
        <button type="button" class="btn btn-default" data-container="body" data-toggle="popover" data-placement="top" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus."> 上方彈框 </button>
        <button type="button" class="btn btn-default" data-container="body" data-toggle="popover" data-placement="bottom" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus."> 下方彈框 </button>
        <button type="button" class="btn btn-default" data-container="body" data-toggle="popover" data-placement="right" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus."> 右側彈框 </button>
      </div>
    </div>

然後用JavaScript來激活

  <script type="text/javascript"> $("#a1").popover();
      $("[data-toggle=popover]").popover(); </script>

選擇性加入的功能

出於性能方面的考慮，工具提示和彈框組件的data屬性api是選擇性加入的，也就是說你必須自己初始化他們。

 

彈出框在按鈕組和輸入框組中使用時，需要額外的設置

當提示框與.btn-group 或 .input-group聯合使用時，你需要指定container: 'body'選項（見下面的文檔）以避免不需要的副作用（例如，當彈出框顯示之後，與其合作的頁面元素可能變得更寬或是去圓角）。

 

在禁止使用的頁面元素上使用彈出框時需要額外增加一個元素將其包裹起來

爲了給disabled 或.disabled元素添加彈出框時，將需要增加彈出框的頁面元素包裹在一個<div>中，然後對這個<div>元素應用彈出框。

用法

通過JavaScript啓用彈出框：

$('#example').popover(options)

選項

可以將選項通過data屬性或JavaScript傳遞。對於data屬性，需要將選項名稱放到data-之後，例如data-animation=""。

方法

$().popover(options)

爲一組元素初始化彈出框。

$('#element').popover('show')

顯示彈出框。

$('#element').popover('hide')

隱藏彈出框。

$('#element').popover('toggle')

展示或隱藏彈出框。

$('#element').popover('destroy')

隱藏並銷燬彈出框。

事件

      $('[data-toggle=popover]').on('shown.bs.popover', function () {
          alert(1);
      })

 

總結

 Bootstrap3.0的示例代碼有時候不全，讓小菜測試的時候摸不着頭腦，很無語，不過還好，搞了一晚上，效果最終還是有了。