深入Bootstrap中data属性
来源:互联网 发布:网络运营托管 编辑:程序博客网 时间:2024/05/16 19:07
学了Bootrap有一段时间了,突然想到了一个问题,就是有关于data属性。
有心的人都会发现,Bootstrap许多的效果都有class=””来实现的,而这个data属性在这里就显得比较的特别。
首先,这里的data属性是什么?是属于Bootstrap的吗?data属性有什么用?
这里的data属性是HTML5允许开发者自由为其标签添加属性,这种自定义属性一般以“data-”开头。
关于data-*的定义和用法:
data-* 属性用于存储页面或应用程序的私有自定义数据。data-* 属性赋予我们在所有 HTML 元素上嵌入自定义 data 属性的能力。
存储的(自定义)数据能够被页面的 JavaScript 中利用,以创建更好的用户体验(不进行 Ajax 调用或服务器端数据库查询)。
data-*属性包括两部分:
- 属性名不应该包含任何大写字母,并且在前缀“data-”之后必须有至少一个字符。
- 属性值可以是任意字符串
让我们来看看Bootstrap api是怎么解释data属性的作用的:
你可以仅仅通过data属性API就能使用所有的Bootstrap插件,无需写一行JavaScript代码。这是Bootstrap中的一等API,也应该是你的首选方式。
话又说回来,在某些情况下可能需要将此功能关闭。因此,我们还提供了关闭data属性API的方式,即解除绑定到文档命名空间上的所有事件data-api
。就像下面这样:
$(document).off('.data-api')另外,如果是针对某个特定的插件,只需在data-api前面添加那个插件的名称作为命名空间,如下:
$(document).off('.alert.data-api')
总结一下,bootstrap中的data-api是方便我们调用bootstrap.js中各种包括JQuery.js在内的丰富的插件。需要注意的是,JQuery插件为Bootstrap的组件赋予了“生命”。可以简单地一次性引入所有插件,或单个引入到你的页面。插件的单个引用(使用Bootstrap提供的单个*.js文件),或一次性全部引入(使用bootstrap.js或压缩版的bootstrap.min.js)。
下面总结一下常见的Bootstrap中的data-属性。
(1)、data-toggle
data-toggle主要用于标签选择器,参见其于bootstrap.css中的部分源码:
[data-toggle="buttons"] > .btn input[type="radio"],[data-toggle="buttons"] > .btn-group > .btn input[type="radio"],[data-toggle="buttons"] > .btn input[type="checkbox"],[data-toggle="buttons"] > .btn-group > .btn input[type="checkbox"] { position: absolute; clip: rect(0, 0, 0, 0); pointer-events: none;}
例如:
<div class=”dropdown”> <a href=”#” class="dropdown-toggle" data-toggle="dropdown"></a> <ul class="dropdown-menu" role="menu" aria-labelledby="dLabel"> ... </ul></div>
这里data-toggle=”dropdown”设置为a的属性,用于切换下拉菜单。
data-toggle非常常用,常见的有下拉菜单,配合data-target一起使用。data-toggle,用于告诉 JavaScript 需要对按钮做什么。data-target,指示要切换到哪一个元素。
data-target主要用于配合data-toggle使用,常用于模态窗口、轮播图,作用是指定加载以及切换的目标。
在模态窗口中配合data-toggle一起使用:
在控制器元素(比如按钮或者链接)上设置属性 data-toggle="modal",同时设置data-target="#identifier"或href="#identifier"来指定要切换的特定的模态框(带有 id="identifier")。
bootstrap.js中关于data-toggle与data-target的部分源码:var Collapse = function (element, options) { this.$element = $(element) this.options = $.extend({}, Collapse.DEFAULTS, options) this.$trigger = $('[data-toggle="collapse"][href="#' + element.id + '"],' + '[data-toggle="collapse"][data-target="#' + element.id + '"]')this.transitioning = null
下拉菜单示例:
<div class="dropdown"> <a id="dLabel" role="button" data-toggle="dropdown" data-target="#" href="# "> 下拉菜单(Dropdown) <span class="caret"></span> </a> <ul class="dropdown-menu" role="menu" aria-labelledby="dLabel"> ... </ul></div>
模态窗口示例:
<!-- 按钮触发模态框 --><button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">开始演示模态框</button><!-- 模态框(Modal) --><div class=”modal fade” id=”myModal” tabindex=”-1” role=”dialog”></div>
轮播图示例:
<div id="myCarousel" class="carousel slide"> <!-- 轮播(Carousel)指标 --> <ol class="carousel-indicators"> <li data-target="#myCarousel" data-slide-to="0" class="active"></li> … </ol> <!-- 轮播(Carousel)项目 --> <div class="carousel-inner"> </div></div>
(3)、data-dismiss
常见的是在模态窗口中用于关闭模态窗口 data-dismiss="modal"
(4)、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" 属性用于标记轮播在页面加载时就开始动画播放
在bootstrap.js中关于data-slide-to、data-slide、data-ride的部分源码:
// CAROUSEL DATA-API// ================= var clickHandler = function (e) { var href var $this = $(this) var $target = $($this.attr('data-target') || (href = $this.attr('href')) && href.replace(/.*(?=#[^\s]+$)/, '')) // strip for ie7 if (!$target.hasClass('carousel')) return var options = $.extend({}, $target.data(), $this.data()) var slideIndex = $this.attr('data-slide-to') if (slideIndex) options.interval = false Plugin.call($target, options) if (slideIndex) { $target.data('bs.carousel').to(slideIndex) } e.preventDefault() } $(document) .on('click.bs.carousel.data-api', '[data-slide]', clickHandler) .on('click.bs.carousel.data-api', '[data-slide-to]', clickHandler) $(window).on('load', function () { $('[data-ride="carousel"]').each(function () { var $carousel = $(this) Plugin.call($carousel, $carousel.data()) }) })}(jQuery);
- 深入Bootstrap中data属性
- bootstrap中的data-***属性
- Bootstrap中的data-*属性总结
- Bootstrap中jumbotron属性
- bootstrap框架中的data-[ ]自定义属性理解
- Bootstrap中data-target 到底是什么
- data (Bootstrap)
- html5中 data-*属性详解
- HTML中data的属性
- bootstrap属性
- jquery ajax中data属性详解
- HTML5中 data-*属性的实际用途
- BootStrap 之 $(selector).data()
- bootstrap data-original-title
- bootstrap data-toggle
- bootstrap的data-toggle
- bootstrap中button在data-toggle="##" data-target="xxx"没起作用的解决方法
- data 属性
- JAVA的Md5工具类
- 剑指offer-打印出字符串的所有排列
- java中成员变量与局部变量的区别
- 一点 · 栈
- JAVA提高篇(12)--回退流PushbackInputStream
- 深入Bootstrap中data属性
- ASSERT()
- Linux如何选择yum在线RPM安装还是源码包安装?
- C++ 使用整理
- 吴恩达Deeplearning.ai 知识点梳理(course 1,week 1)
- bzoj 2161: 布娃娃
- asp.net core 2.0 入门攻略 第一章 环境部署
- webpakc js压缩
- java提高篇(13)--SequenceInputStream ——对多个流进行合并