常見data屬性 · PHP筆記

## **1 data-toggle data-toggle** 以什么事件類型觸發,常用的如下。 ``` data-toggle="dropdown"//下拉菜單 data-toggle="model" //模態框事件 data-toggle="tooltip"//提示框事件 data-toggle="tab"//標簽頁 data-toggle="collapse"//折疊 data-toggle="popover"//彈出框 data-toggle="button"//按鈕事件 data-toggle="pill" ``` 一般事件會作用到一個標簽對象，如果是其他標簽對象，就需要使用data-target指事件的標簽目標。所以data-loggle和data-target有時會結合一起使用。如下 ``` <button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal"> 開始演示模態框 </button>  <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-hidden="true"> × </button> code。。。 </div> </div> </div> </div> ``` ## **2 data-dismiss** 常見的是在模態窗口中用于關閉模態窗口 data-dismiss=”modal” 或者關閉警告框 >#### 確保在所有設備上的正確行為務必給`<button>`元素添加`data-dismiss="alert"`屬性。 ~~~html <div class="alert alert-warning alert-dismissible" role="alert"> <button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">×</span></button> <strong>Warning!</strong> Better check yourself, you're not looking too good. </div> ~~~ ![](https://img.kancloud.cn/38/1d/381d0b2a9a070090937d8be40a86920c_829x64.png) ## **3 data-slide-to、data-slide、data-ride** data-slide-to、data-slide、data-ride用于輪播圖carousel。 * `data-slide`：接受關鍵字 prev 或 next，用來改變幻燈片相對于當前位置的位置。 * `data-slide-to`：用來向輪播傳遞一個原始滑動索引，data-slide-to="2"將把滑塊移動到一個特定的索引，索引從 0開始計數。 * `data-ride="carousel"`：屬性用于標記輪播在頁面加載時就開始動畫播放 ## **4、data-spy="scroll"** 滾動監聽（依賴導航插件） * data-offset="10" ：計算滾動位置時相對于頂部的偏移量（像素數）。 ~~~css body { position: relative; } ~~~ ~~~html <body data-spy="scroll" data-target="#navbar-example"> ... <div id="navbar-example"> <ul class="nav nav-tabs" role="tablist"> ... </ul> </div> ... </body> ~~~ ## **data-placement="top"** 工具提示，一般和`data-toggle="tooltip"`用 ~~~html <button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="left" title="Tooltip on left">Tooltip on left</button> <button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="top" title="Tooltip on top">Tooltip on top</button> <button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="bottom" title="Tooltip on bottom">Tooltip on bottom</button> <button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="right" title="Tooltip on right">Tooltip on right</button> ~~~ ![](https://img.kancloud.cn/6e/61/6e610d8c1a0ae2045b71d347f4279853_670x67.png) data-dismiss data-api data-parent data-original-title data-content data-whatever="@mdo" ~~~html role="alert" ~~~ ~~~html aria-label="Close" ~~~ 我們還提供了關閉 data 屬性 API 的方法，即解除以`data-api`為命名空間并綁定在文檔上的事件。就像下面這樣： ~~~js $(document).off('.data-api') ~~~ 另外，如果是針對某個特定的插件，只需在`data-api`前面添加那個插件的名稱作為命名空間，如下： ~~~js $(document).off('.alert.data-api') ~~~