常见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') ~~~