Bootstrap中的JavaScript

本文详细介绍了如何在项目中引入并使用Bootstrap插件,包括单个插件与整体插件的引入方式,通过data属性API及编程API进行操作的方法,以及如何避免命名冲突等问题。

引入单个插件还是一次性引入所有插件

每个插件都可以单独的引入到页面中(注意插件间的依赖关系),或者一次性引入。bootstrap.js 和bootstrap.min.js 文件都将所有插件包含在一个文件中了(前者是未压缩版,后者是压缩版)。

Data 属性

你可以仅仅通过data属性API就能使用所有Bootstrap中的插件,而且不用写一行JavaScript代码。这是Bootstrap中的一等API,并且是你的首选方式。

特殊情况是,在某些情况下可能需要特意禁用这种默认动作。因此,我们特地提供了禁用data属性API的方式,通过解除绑定在body上的被命名为`'data-api'`的事件即可实现。如下所示:

  1. $('body').off('.data-api')

还可以解除特定插件的事件绑定,只要将插件名和data-api链接在一起作为参数使用。如下所示:

  1. $('body').off('.alert.data-api')

编程API

我们同时为所有Bootstrap插件提供了JavaScript API。所有公开的API都可以单独或链式调用,均返回其所操作的集合(和jQuery的API一致)。

  1. $(".btn.danger").button("toggle").addClass("fat")

所有方法均可接受一个可选的参数对象、一个对此方法有特定意义的字符串或者什么也不传(即用默认参数初始化此插件):

  1. $("#myModal").modal() // initialized with defaults
  2. $("#myModal").modal({ keyboard: false }) // initialized with no keyboard
  3. $("#myModal").modal('show') // initializes and invokes show immediately

每个插件都通过`Constructor` 属性暴露了其原始的构造函数:$.fn.popover.Constructor。如果你想获得某个特定插件的实例,可以直接从页面元素中获取:$('[rel=popover]').data('popover').

No Conflict

有时你需要在使用Bootstrap插件时同时使用其它UI框架。在这种情况下,随时都会导致命名空间冲突。如果这种情况发生了,你可以通过调用插件的 .noConflict 函数恢复其原始值。

  1. var bootstrapButton = $.fn.button.noConflict() // return $.fn.button to previously assigned value
  2. $.fn.bootstrapBtn = bootstrapButton // give $().bootstrapBtn the bootstrap functionality

事件

Bootstrap对多数插件的独有行为提供了自定义事件。 一般而言,这些事件都是以(英语)动词的原型和过去分词形式来表示的 - 动词原形形式的(例如: show) 在事件执行之前触发;过去分词形式的(例如:shown) 在动作执行完毕后触发。

所有动词原形形式的事件都提供了preventDefault函数。这能在动作执行之前使其停止。

  1. $('#myModal').on('show', function (e) {
  2. if (!data) return e.preventDefault() // stops modal from being shown
  3. })
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值