UDN-企业互联网技术人气社区

板块导航

浏览  : 520
回复  : 2

[实例] BootStrap tooltip提示框使用小结

[复制链接]
西北的风的头像 楼主
发表于 2016-12-16 16:10:27 | 显示全部楼层 |阅读模式
  这篇文章主要为大家详细介绍了BootStrap tooltip提示框使用小结 ,具有一定的参考价值,感兴趣的小伙伴们可以参考一下  

       提示框

  提示框的基本使用方式为:

  复制代码 代码如下:

  1. <span data-toggle="tooltip" data-original-title="this is alert content">test message</span>
复制代码


  data-original-title可以直接写为title,仍然能正常使用,源码中优先查找前者,前者不存在就会查找title

  提示框不提供HTML触发方式只能通过JS来进行触发:

  $("[data-toggle='tooltip']").tooltip();

  提示框的关键属性为data-original-title="content",该属性就是我们要提示的信息,如果不存在该属性则回去检索title属性,title的属性值同样可以用来显示

  由于提示框只能通过JS来进行触发,而且data-toggle在BootStrap中就是一个说明功能的属性,所以通常提示框的元素上都会设置data-toggle="tooltip",这只是为了可以选中这个DOM节点,也可以设置为class="xx"

  提示信息默认是在元素上边显示的我们可以通过属性data-placement来进行更改,它有五个值分别为top、bottom、left、right、auto,如果设置为data-placement="auto"则选择适当的位置显示提示信息

  提示框提供的剩余的几个属性分别为

  1.data-animation在提示信息上应用一个fade动画,默认值为true

  2.data-html可以将HTML作为提示语,默认值为false

  3.data-selector如果声明selector表示的元素就可以提示信息

  4.data-trigger通过什么方式来触发提示信息,默认值为focus、hover,全部值为focus、hover、click、manual可以使用多种出发方式,使用多种时中间以空格隔开

  5.data-delay延迟提示信息默认值为0

  6.data-container将提示信息放在执行的元素上,默认为false,当在.btn-group和.input-group内使用提示信息是要设置为data-container="body"

  7.data-template提示语的默认模板

  JS使用

  tooltip提供了四个参数分别为:show、hide、toggle、destory分别对应显示、隐藏、切换、销毁

  使用方式为:

  $("[data-toggle=tooltip]").tooltip("show")

  tooltip同样提供了四个事件分别为:

  1.show.bs.tooltip在显示之前触发

  2.shown.bs.tooltip在显示之后触发

  3.hide.bs.tooltip在隐藏之前触发

  4.hidden.bs.tooltip在隐藏之后触发

  使用方式为:

  $("[data-toggle=tooltip]").on("show.bs.tooltip",function(){})

  tooptip提供的参数对象属性就是前面的集中在使用时去掉"data-"即可

  基本的使用方式都很简单,这里介绍一个selector的用法,该属性一般用在新添加的元素仍然需要显示提示框的场景中,所以在使用时要在提示框的父级上绑定提示框的调用方法,事件源是selector的DOM可以触发事件,使用的就是冒泡的思想使用方式为:
  1. $("element").tooltip({
  2. selector:".className"
  3. })
复制代码
 
  当在.btn-group和.input-group内的元素使用tooltip时要设置container:"body"避免不必要的副作用。

发表于 2016-12-16 16:10:56 | 显示全部楼层
个人觉得js是一种解释性语言,它提供了一个非常方便的开发过程,不需要编译,js与HTML标识结合在一起,从而方便用户的使用操作。
使用道具 举报

回复

发表于 2016-12-19 14:06:05 | 显示全部楼层
jq现在应该算是最火的js框架类了吧?确实很强大extjs基于Yahoo UI的扩展,界面布局和效果方面很给力,但就是有点复杂
使用道具 举报

回复

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

关于我们
联系我们
  • 电话:010-86393388
  • 邮件:udn@yonyou.com
  • 地址:北京市海淀区北清路68号
移动客户端下载
关注我们
  • 微信公众号:yonyouudn
  • 扫描右侧二维码关注我们
  • 专注企业互联网的技术社区
版权所有:用友网络科技股份有限公司82041 京ICP备05007539号-11 京公网网备安1101080209224 Powered by Discuz!
快速回复 返回列表 返回顶部