Bootstrap学习笔记之js组件(4)

前端之家收集整理的这篇文章主要介绍了Bootstrap学习笔记之js组件(4)前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

这次我们来看下js组件的使用,本篇文章会有点长,希望大家可以耐心看,相信收获会有不少。不少园友加我好友,表示喜欢我写文字的风格,简单明了,这里,再次谢谢你们的支持。一方面,自身技术有限,写的东西都比较基础,另一方面,写的东西,都是根据自己的理解,把复杂的东西用最简单的语言表达出来。所以,写的有不对的地方,麻烦各位给予指正哈。

一、js文件引用

注意点:jquery必须在在其它js文件之前引入,因为其它插件都是依赖于jquery。

本地引入的加载文件-->

二、data属性

作用:通过data属性,可使用任何的bootstrap插件,无须写任何一段js代码。前面讲过的像:data-toggle="dropdown"等引用菜单插件。 那么既然有打开功能,如何关闭功能呢?在javascript里面添加下面代码即可:

如果要关闭某一个特定的插件功能添加下面代码即可:

关闭提示框的插件功能 $(document).off('.alert.data-api');

所有的js插件基本都是下面几步: 1:如何使用?---类对应如何写? 2:如何调用?---类写好了,如何使其写的类生效? 3:事件处理---包括动作触发前发生以及动作出发后发生 注意:所有动作触发之前发生的,bootstrap提供了preventDefault,实现在动作执行之前将其停止。代码如下:

// 阻止模态框的展示,当然你也可换成阻止其它插件的出现
})

注意:bootstrap没有对禁用javascript的浏览器采取补救措施,因此,我们需要自己写一段代码补救,相信大家都知道。

三、模态框组件(modal.js)

注意点: 1:不支持同时打开多个模态框 2:模态框尽量位于body子元素的位置,避免其它组件影响模态框的展现和功能 3:移动端说明 4:增强可访问性--添加role属性 5:在模态框中可嵌入视屏,即data-toggle="modal" 我们来看下下面的列子,点击button,会弹出一个模态框,关于这里的属性,如果看过之前的文章,相信理解起来不难,这里不再详解,可自行贴码测试:

<div class="jb51code">
<pre class="brush:xhtml;">
<!DOCTYPE html>
<html lang="zh-CN">

<Meta charset="utf-8"> <Meta http-equiv="X-UA-Compatible" content="IE=edge"> <Meta name="viewport" content="width=device-width,initial-scale=1">

<script src="http://cdn.bootcss.com/jquery/1.11.3/jquery.min.js"&gt;
<script src="js/bootstrap.min.js">
<script type="text/javascript">
$("#mymodal").modal("show"); ---调用这句代码才能使插件生效

实现效果如下:

结合模态框,你也可以给body内容增加其它功能,比如嵌入表单的输入框等,这里不再贴码。 模态框的事件,在javascript中添加下面的代码即可,如下所示:

代码如下:
>

我们来看看模态框如何嵌入视屏,自己需要添加一些代码自动播放,停止等功能。先来看看代码

VIDEO