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 相关文章推荐
jQuery UI Autocomplete 体验分享
Feb 14 Javascript
jquery 隐藏与显示tr标签示例代码
Jun 06 Javascript
jQuery聚合函数实例
May 21 Javascript
js实现文本框宽度自适应文本宽度的方法
Aug 13 Javascript
浅析Javascript中bind()方法的使用与实现
May 30 Javascript
jq实现左滑显示删除按钮,点击删除实现删除数据功能(推荐)
Aug 23 Javascript
前端自动化开发之Node.js的环境搭建教程
Apr 01 Javascript
socket.io实现在线群聊功能
Apr 07 Javascript
jstree单选功能的实现方法
Jun 07 Javascript
bootstrap精简教程_动力节点Java学院整理
Jul 14 Javascript
Vue多环境代理配置方法思路详解
Jun 21 Javascript
JavaScript实现原型封装轮播图
Dec 27 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
一个简单的自动发送邮件系统(二)
2006/10/09 PHP
linux下 C语言对 php 扩展
2008/12/14 PHP
ThinkPHP验证码使用简明教程
2014/03/05 PHP
Yii 框架使用数据库(databases)的方法示例
2020/05/19 PHP
javascript中使用css需要注意的地方小结
2010/09/01 Javascript
javascript判断两个IP地址是否在同一个网段的实现思路
2013/12/13 Javascript
贴近用户体验的Jquery日期、时间选择插件
2015/08/19 Javascript
星期几的不同脚本写法(推荐)
2016/06/01 Javascript
Nodejs从有门道无门菜鸟起飞必看教程
2016/07/20 NodeJs
JS实现页面载入时随机显示图片效果
2016/09/07 Javascript
vue2滚动条加载更多数据实现代码
2017/01/10 Javascript
jQuery插件FusionCharts绘制2D柱状图和折线图的组合图效果示例【附demo源码】
2017/04/10 jQuery
react 中父组件与子组件双向绑定问题
2019/05/20 Javascript
[02:37]2015国际邀请赛选手档案—LGD.Xiao8
2015/07/28 DOTA
[01:04:14]VP vs TNC 2018国际邀请赛小组赛BO2 第二场 8.17
2018/08/20 DOTA
python with statement 进行文件操作指南
2014/08/22 Python
浅谈Python3识别判断图片主要颜色并和颜色库进行对比的方法
2019/10/25 Python
如何在VSCode上轻松舒适的配置Python的方法步骤
2019/10/28 Python
Python socket模块方法实现详解
2019/11/05 Python
python Zmail模块简介与使用示例
2020/12/19 Python
Python爬虫自动化获取华图和粉笔网站的错题(推荐)
2021/01/08 Python
css3圆角样式分享自定义按钮样式
2013/12/27 HTML / CSS
HTML5 Video/Audio播放本地文件示例介绍
2013/11/18 HTML / CSS
HTML5 Canvas中使用用路径描画圆弧
2015/01/01 HTML / CSS
西班牙购买隐形眼镜、眼镜和太阳镜网站:Lentiamo.es
2020/06/11 全球购物
亚洲最大的运动鞋寄售店:KicksCrew
2020/11/26 全球购物
好的自荐信的要求
2013/10/30 职场文书
记帐员岗位责任制
2014/02/08 职场文书
各营销点岗位职责范本
2014/03/05 职场文书
《四季》教学反思
2014/04/08 职场文书
学校节能减排倡议书
2014/05/16 职场文书
党员个人剖析材料(四风问题)
2014/10/07 职场文书
个人租房协议书
2014/11/28 职场文书
初中语文教学随笔
2015/08/15 职场文书
nginx里的rewrite跳转的实现
2021/03/31 Servers
Redis数据结构之链表与字典的使用
2021/05/11 Redis