为了账号安全,请及时绑定邮箱和手机立即绑定

玩转Bootstrap(JS插件篇)

  • 通过按钮可以设计状态提示,当单击按钮时,会显示loading状态信息。例如,点击“加载”按钮,会触发按钮的加载的状态。如下所示: <button class="btnbtn-primary" data-loading-text="正在加载中,请稍等..." type="button" id="loaddingBtn">加载</button> 通过data-loading-text属性定义加载的文本信息,然后通过JavaScript给按钮绑定一个事件,并给按钮添加一个button("loading")方法来激活按钮的加载状态行为。如下所示: $(function(){ $("#loaddingBtn").click(function () { $(this).button("loading"); }); });
    查看代码快照
  • 首先要说的是这一节,讨论的不是按钮组件的制作,前面我们专门花了一节的篇幅介绍了Bootstrap框架中的“按钮Buttons”的制作。在此处我们要讨论的是Bootstrap框架中的“按钮插件”。 大家在平时制作Web页面时,或多或少碰到过下列这些情形: ☑ 点击按钮时,按钮文字变为“正在加载…”,一旦加载完之后又变回“获取数据”。简单点说就是控制按钮状态,比如禁用状态、正在加载状态、正常状态等; ☑ 按钮切换状态 ☑ 按钮模仿单选按钮 ☑ 按钮模仿复选按钮
    查看代码快照
  • 除了通过自定义data-dismiss="alert"属性来触发警告框关闭之外,还可以通过JavaScript方法。只需要在关闭按钮上绑定一个事件。如下所示:
    查看代码快照
  • 其实关闭按钮,不一定非要用X号,也可以是普通的按钮元素或者链接元素,只需要保证关闭元素带有自定义属性data-dismiss="alert"即可,如下面示例所示: <div class="alert alert-warning" role="alert"> <h4>谨防被骗</h4> <p>请确认您转账的信息是你的亲朋好友,不要轻意相信不认识的人...</p> <a href="#" class="btn btn-danger" data-dismiss="alert">关闭</a> </div> 前面两个示例,操作关闭按钮时都是先查找 data-target 属性,再查找 href 属性,如果关闭按钮都没有定义这两个属性,就会操作其父元素。也就是说,关闭按钮不在 div.alert 容器内时,只要给关闭元素定义了data-target属性(如果是链接元素还可以通过href属性),而且属性值与div.alert容器的id一致,关闭元素放在容器外也可以关闭警告框
    查看代码快照
  • 在介绍警告框结构之前,我们先来看看警告框插件的效果与警告框的效果在样式风格展示上有何不同: 上图是“警示框”效果。 上图“警告框插件”效果。 相比之下,唯一不同的区别正如前面开头所言,警告框插件就是在“警示框组件”基础上添加了一个关闭的按钮,外形上就是一个X。所以其结构只需要在警示框组件的基础上添加一个按钮即可: <div class="alert " role="alert"> <buttonclass="close" type="button" >&times;</button> 恭喜您操作成功! </div> 除此差别之外,警告框插件与警示框没有其他的区别。所以样式部分
    查看代码快照
  • LESS版本:源文件 alerts.less Sass版本:源文件 _alerts.scss
    查看代码快照
  • 从之前的学习可知,弹出框中HTML自定义的 data 属性和提示框中的自定义的 data 属性基本相同,只不过在其基础上增加了一个 data-content 属性,用来设置弹出框的内容。其实两插件也有略微的不同: 提示框 tooltip 的默认触发事件是 hover 和 focus,而弹出框 popover 是 click 提示框 tooltip 只有一个内容(title),而弹出框不仅可以设置标题(title)还可以设置内容(content) 两个插件的显示模板不同: 提示框tooltip的模板: <div class="tooltip" role="tooltip"> <div class="tooltip-arrow"></div> <div class="tooltip-inner"></div> </div> 弹出框popover的模板: <div class="popover" role="tooltip"> <div class="arrow"></div> <h3 class="popover-title"></h3> <div class="popover-content"></div> </div>
    查看代码快照
  • http://img.mukewang.com/54af444c0001dd6a08600851.jpg
    查看代码快照
  • Bootstrap框架中触发弹出框和提示框一样不能直接通过HTML的自定义data属性来触发。需要依赖于JavaScript脚本。 最简单的触发方式如下: html代码: <button type="button" class="btn btn-default" data-toggle="popover" data-placement="left" title="提示框居左" data-content="我是弹出框的内容"> 猛击我吧 </button> js代码: $(function(){ $('[data-toggle="popover"]').popover(); }); 注意:上面这种方法注意要使用 data- 设置弹出框的属性。 使用JS设置参数: html代码: <button type="button" class="btn btn-default" id="myPopover"> 猛击我吧 </button> 除此之外,也可以单独指定一个元素,在该元素上调用提示框,并且可能通过JavaScript的各种参数来实现,无需定义一些data属性,如: $(function(){ $('#myPopover').popover({ title:"我是弹出框的标题", content:"我是弹出框的内容", placement:"top" }); });
    查看代码快照
  • 在制作提示框(tooltip)时,可以使用<button>或者<a>标签元素,而且通过 data- 属性来声明提示框的信息,如下所示: <button type="button" class="btnbtn-default" data-toggle="tooltip" data-placement="left" data-original-title="我是一个提示框tooltip"> 鼠标移上来 </button> 而弹出框Popover和提示框tooltip相比,就多了一个content内容,那么在此使用 data-content 来定义弹出框中的内容。同样可以使用<button>或者<a>标签来制作,如下: <button type="button" class="btnbtn-default" data-container="body" data-placement="bottom" data-toggle="popover" data-original-title="Bootstrap弹出框标题" data-content="Bootstrap弹出框的内容" > 猛击我吧 </button> <a href="#" class="btnbtn-default" data-container="body" data-placement="right" data-toggle="popover" title="Bootstrap弹出框标题" data-content="Bootstrap弹出框的内容"> 猛击我吧 </a>
    查看代码快照
  • 弹出框(Popover)仅从外表上看,和前面介绍的提示框(Tooltip)长得差不多,如下所示: 不同的是:弹出框除了有标题 title 以外还增加了内容 content 部分。这个在提示框中是没有的。而对于两者有何区别呢?稍后我们会介绍,先来了解如何制作Bootstrap框架中的弹出框。
    查看代码快照
  • http://img.mukewang.com/549141cf000114f911420830.jpg
    查看代码快照
  • http://img.mukewang.com/549162370001204910970690.jpg
    查看代码快照
  • Bootstrap框架中的提示框的触发方式和前面介绍的插件略有不同。不能直接通过自定义的属性 data- 来触发。必须得依赖于JavaScript的代码触发。 最简单的触发方式如下: $(function(){ $('[data-toggle="tooltip"]').tooltip(); }); 除此之外,也可以单独指定一个元素,在该元素上调用提示框,并且可能通过JavaScript的各种参数来实现,无需定义一些 data 属性,如: $(function(){ $('#myTooltip').tooltip({ title:"我是一个提示框,我在顶部出现", placement:'top' }); });
    查看代码快照
  • 在Bootstrap框架中的提示框,结构非常简单,常常使用的是按钮<button>标签或者链接<a>标签来制作。不管是使用按钮还是链接来制作提示框,他们都有一个共性: 通过 title 属性的值来定义提示信息(也可以使用自定义属性 data-original-title 来设置提示信息)。 通过 data-placement 自定义属性来控制提示信息框的位置,根据四种不同的位置,data-placement具有四个值:top、right、bottom和left,分别表示提示框出现的位置在顶部、右边、底部和左边。 还有一个最重要的参数不可缺少,data-toggle="tooltip"。 1、如果同时设置了 data-original-title 和 title 定义提示信息,那么 data-original-title 的优先级要高于 title。只有 data-original-title 值为空时,才会取 title 的值做为提示信息的内容。 2、Bootstrap框架中的提示框的触发方式和前面介绍的插件略有不同。不能直接通过自定义的属性 data- 来触发。必须得依赖于JavaScript的代码触发。(所以右侧代码是没有动画效果的,不要着急,后面小节会有讲解。)
    查看代码快照

举报

0/150
提交
取消
课程须知
本课程适合具有一定前端基础的人员,对HTML和CSS有一定的了解,对于定制Bootstrap的同学需要具备LESS和Sass基础知识。
老师告诉你能学到什么?
1、使用JS自由控制Bootstrap中提供的组件。
意见反馈 帮助中心 APP下载
官方微信