Bootstrap popover用法详解


Posted in Javascript onDecember 22, 2016

最近在自学Java Web基础,搭建自己的页面时候用到了Boostrap的JS库。由于之前没有接触过JQuery,所以用起来磕磕绊绊,所以在这里简单记一下Boostrap中我用到的JS 插件的一些用法。

第一个用到的就是Boostrap中的popover插件。原因是一个简单的注册界面需要验证用户名是否合法,是否已被注册,密码是否合法,再次输入密码是否和之前的密码匹配等,需要用到popover来进行信息警告。

首先一个简单的例子:

<div class="container" style="padding: 100px 50px 10px;" >
 <button type="button" id="button1" class="btn btn-default" 
   data-container="body" data-toggle="popover">
  左侧的 Popover
 </button> 
</div>

<script>
$(function (){
 $('#button1').popover({
  trigger: 'click',
  title: "test1",
  placement: 'right',
  content: 'hello'
 });
});
</script>

可以看到,在使用API进行popover编程时,一定要引用$(‘#element').popover()对id=”element”的控件进行popover激活。之前就是直接复制官网上的代码,发现点击后并不能trigger,一直很困惑。然后用name=”element”是不能激活popover的。
要是需要为input框添加popover效果,则只需要trigger='focus'即可。但似乎不支持blur,不能在blur之后判断input框中的内容是否合法从而触发popover。这个还需后续再研究。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
Ajax一统天下之Dojo整合篇
Mar 24 Javascript
二行代码解决全部网页木马
Mar 28 Javascript
JavaScript使用技巧精萃[代码非常实用]
Nov 21 Javascript
JavaScript 嵌套函数指向this对象错误的解决方法
Mar 15 Javascript
js中的时间转换—毫秒转换成日期时间的示例代码
Jan 26 Javascript
javascript实现checkBox的全选,反选与赋值
Mar 12 Javascript
Vuex2.0+Vue2.0构建备忘录应用实践
Nov 30 Javascript
jQuery Ajax 实现在html页面实时显示用户登录状态
Dec 30 Javascript
Angular4学习笔记之实现绑定和分包
Aug 01 Javascript
微信小程序之电影影评小程序制作代码
Aug 03 Javascript
解决layui追加或者动态修改的表单元素“没效果”的问题
Sep 18 Javascript
vue学习笔记之Vue中css动画原理简单示例
Feb 29 Javascript
深入学习jQuery中的data()
Dec 22 #Javascript
读Javascript高性能编程重点笔记
Dec 21 #Javascript
解决拦截器对ajax请求的拦截实例详解
Dec 21 #Javascript
原生的强大DOM选择器querySelector介绍
Dec 21 #Javascript
懒加载实现的分页&amp;&amp;网站footer自适应
Dec 21 #Javascript
JS树形菜单组件Bootstrap TreeView使用方法详解
Dec 21 #Javascript
Vue.js 递归组件实现树形菜单(实例分享)
Dec 21 #Javascript
You might like
JSON字符串传到后台PHP处理问题的解决方法
2016/06/05 PHP
php微信公众平台开发之微信群发信息
2016/09/13 PHP
PHP INT类型在内存中占字节详解
2019/07/20 PHP
零基础php编程好学吗
2019/10/11 PHP
基于jquery的鼠标拖动效果代码
2012/05/30 Javascript
3种Jquery限制文本框只能输入数字字母的方法
2014/12/03 Javascript
Angular中的Promise对象($q介绍)
2015/03/03 Javascript
JQuery+CSS实现图片上放置按钮的方法
2015/05/29 Javascript
简介JavaScript中search()方法的使用
2015/06/06 Javascript
JavaScript的ExtJS框架中数面板TreePanel的使用实例解析
2016/05/21 Javascript
Bootstrap表单布局样式源代码
2016/07/04 Javascript
Spring shiro + bootstrap + jquery.validate 实现登录、注册功能
2017/06/02 jQuery
详解JS数组Reduce()方法详解及高级技巧
2017/08/18 Javascript
vue2.0之多页面的开发的示例
2018/01/30 Javascript
vue2实现搜索结果中的搜索关键字高亮的代码
2018/08/29 Javascript
vue.js实现的幻灯片功能示例
2019/01/18 Javascript
解决微信小程序调用moveToLocation失效问题【超简单】
2019/04/12 Javascript
vue多页面项目中路由使用history模式的方法
2019/09/23 Javascript
详解Angular Karma测试的持续集成实践
2019/11/15 Javascript
angular inputNumber指令输入框只能输入数字的实现
2019/12/03 Javascript
基于Django filter中用contains和icontains的区别(详解)
2017/12/12 Python
Python 面试中 8 个必考问题
2018/11/16 Python
pyinstaller参数介绍以及总结详解
2019/07/12 Python
python爬虫 批量下载zabbix文档代码实例
2019/08/21 Python
python生成requirements.txt的两种方法
2019/09/18 Python
python 代码实现k-means聚类分析的思路(不使用现成聚类库)
2020/06/01 Python
Keras框架中的epoch、bacth、batch size、iteration使用介绍
2020/06/10 Python
Python3 用什么IDE开发工具比较好
2020/11/28 Python
如果NULL和0作为空指针常数是等价的,那我到底该用哪一个
2014/09/16 面试题
毕业生求职信的经典写法
2014/01/31 职场文书
电工工作职责范本
2014/02/22 职场文书
医学生毕业自我鉴定
2014/03/26 职场文书
公司员工奖惩制度
2015/08/04 职场文书
2016高考冲刺决心书
2015/09/23 职场文书
教师研修随笔感言
2015/11/18 职场文书
小学三年级语文教学反思
2016/03/03 职场文书