Bootstrap popover用法详解

最近在自学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。这个还需后续再研究。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

赞 (0)

相关推荐

  • BootStrap的弹出框(Popover)支持鼠标移到弹出层上弹窗层不隐藏的原因及解决办法

    弹出框(Popover)与工具提示(Tooltip)类似,提供了一个扩展的视图.如需激活弹出框,用户只需把鼠标悬停在元素上即可.弹出框的内容完全可使用 Bootstrap 数据 API(Bootstrap Data API)来填充.该方法依赖于工具提示(tooltip). 1 设置延时, 超过该延时未移入弹窗则弹窗隐藏 Tooltip.prototype.init = function{中的 var triggers = this.options.trigger.split(' ')后面加上 /

  • Bootstrap每天必学之弹出框（Popover）插件

    Bootstrap每天必学之弹出框（Popover）插件

    Bootstrap弹出框插件,提供了一个扩展的视图,弹出框(Popover)插件根据需求生成内容和标记,默认情况下是把弹出框(popover)放在它们的触发元素后面. 弹出框(Popover)与工具提示(Tooltip)类似,提供了一个扩展的视图.如需激活弹出框,用户只需把鼠标悬停在元素上即可.弹出框的内容完全可使用 Bootstrap 数据 API(Bootstrap Data API)来填充.该方法依赖于工具提示(tooltip). 如果您想要单独引用该插件的功能,那么您需要引用 popov

  • 妙用Bootstrap的 popover插件实现校验表单提示功能

    妙用Bootstrap的 popover插件实现校验表单提示功能

    最近的项目,用Bootstrap比较多.浏览Bootstrap文档,发现 popover 插件特别适合做表单校验出错的提示. 因为使的非常频繁,最近把它封住下,做成 jQuery的插件. 通过 本插件,在 html标签中 定义好 data-vaild="校验正则" data-errmsg="错误信息即可".为什么 要把 校验规则 写到 html 标签中呢?因为 我还用它做了 后台 的校验规则(后台没用Node,现在用的ASP,忙完专门再发文写下原理). <in

  • Bootstrap的popover（弹出框）2秒后定时消失的实现代码

    Bootstrap Popover(弹出框)是使用定制的 Jquery 插件创建的.它可以用来显示任何元素的一些信息. 先在目标DOM结构中弹出小提示,然后2秒后提示消失 <input type="text" class="form-control" id="tableName" placeholder="请输入表格名称" data-toggle="tooltip" data-placement=&q

  • Bootstrap基本插件学习笔记之Popover提示框(19)

    Bootstrap基本插件学习笔记之Popover提示框(19)

    Tooltip采用的是hover方式弹出提示框(参见前一篇:Bootstrap学习总结笔记(18)– 基本插件之Tooltip提示工具),适合提示内容比较少的情况,要是内容较多,就可以应用Popover提示框. <!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset="UTF-8"> <meta name="viewport" cont

  • 全面解析Bootstrap中tooltip、popover的使用方法

    全面解析Bootstrap中tooltip、popover的使用方法

    一.tooltip(提示框)  源码文件:  Tooltip.js Tooltip.scss 实现原理:  1.获取当前要显示tooltip的元素的定位信息(top.left.bottom.right.width.height等) 2.计算tooltip的位置,是top.left.bottom.right其中一个 3.然后根据计算的位置值,运算出坐标值 4.给tooltip应用坐标值  源码分析:  1.ownerDocument:文档:包含两个对象:<DocType>.documentEle

  • BootStrap使用popover插件实现鼠标经过显示并保持显示框

    BootStrap使用popover插件实现鼠标经过显示并保持显示框

    在商城里,导航栏的购物车展示经常需要鼠标经过时,显示已经放入购物车的商品,bootstrap是没有直接用的插件的,这个时候就可以使用popover这个插件改造后实现,具体如下: 实现效果图: html实现: <a href="#" rel="drevil"> <span class="glyphicon glyphicon-shopping-cart"> </span> 购物车 </a> javas

  • Bootstrap的popover(弹出框)在append后弹不出(失效)

    Bootstrap的popover(弹出框)在append后弹不出(失效)

    在使用popover(弹出框)时,发现跟其他组件使用方式有些区别,需要手动初始化才能弹出来,如下: <button type="button" class="btn btn-default" data-container="body" data-toggle="popover" data-placement="top" data-content="Vivamus sagittis lacus

  • Bootstrap popover用法详解

    最近在自学Java Web基础,搭建自己的页面时候用到了Boostrap的JS库.由于之前没有接触过JQuery,所以用起来磕磕绊绊,所以在这里简单记一下Boostrap中我用到的JS 插件的一些用法. 第一个用到的就是Boostrap中的popover插件.原因是一个简单的注册界面需要验证用户名是否合法,是否已被注册,密码是否合法,再次输入密码是否和之前的密码匹配等,需要用到popover来进行信息警告. 首先一个简单的例子: <div class="container" st

  • 基于BootStrap Metronic开发框架经验小结【五】Bootstrap File Input文件上传插件的用法详解

    基于BootStrap Metronic开发框架经验小结【五】Bootstrap File Input文件上传插件的用法详解

    Bootstrap文件上传插件File Input是一个不错的文件上传控件,但是搜索使用到的案例不多,使用的时候,也是一步一个脚印一样摸着石头过河,这个控件在界面呈现上,叫我之前使用过的Uploadify 好看一些,功能也强大些,本文主要基于我自己的框架代码案例,介绍其中文件上传插件File Input的使用. 1.文件上传插件File Input介绍 这个插件主页地址是:http://plugins.krajee.com/file-input,可以从这里看到很多Demo的代码展示:http:/

  • Bootstrap Fileinput文件上传组件用法详解

    Bootstrap Fileinput文件上传组件用法详解

    最近时间空余,总结了一些关于bootstrap fileinput组件的一些常见用法,特此分享到我们平台,供大家参考,同时也方便以后的查找.本文写的不好还请见谅. 一.效果展示 1.原始的input type='file',简直不忍直视. 2.不做任何装饰的bootstrap fileinput:(bootstrap fileinput初级进化) 3.bootstrap fileinput高级进化:中文化.可拖拽上传.文件扩展名校验(如果不是需要的文件,不让上传) 拖拽上传 上传中 4.boot

  • Django分页器的用法详解

    Django是一个大而全的框架.需要明确的是,传参进行分页获取分页后的数据,一般都是通过向服务器发送get请求的方式实现的,在向后端服务发送查看数据的同时可以携带一个或多个参数并发送get请求来实现分页查看功能 1.准备基础数据 设计表模型 为了体现分页的效果,需要先创建一个表并准备较多数据,模型如下 from django.db import models # Create your models here. class Book(models.Model): title = models.C

  • Python boxplot 用法详解

    Python boxplot 用法详解

    详解: 箱型图提供了识别异常值的一个标准: 异常值通常被定义为小于QL-1.5IQR或大于QU+1.5IQR的值. QL称为下四分位数,表示全部观察值中有四分之一的数据取值比它小: QU称为上四分位数,表示全部观察值中有四分之一的数据取值比它大: IQR称为四分位数间距,是上四分位数QU与下四分位数QL之差,其间包含了全部观察值的一半. 最小值 (minimum); 下四分位数 (first quartile, Q1); 中值或中位数 (median), 或第二个四分位数 (second qua

  • Oracle中游标Cursor基本用法详解

    查询 SELECT语句用于从数据库中查询数据,当在PL/SQL中使用SELECT语句时,要与INTO子句一起使用,查询的 返回值被赋予INTO子句中的变量,变量的声明是在DELCARE中.SELECT INTO语法如下: SELECT [DISTICT|ALL]{*|column[,column,...]} INTO (variable[,variable,...] |record) FROM {table|(sub-query)}[alias] WHERE............ PL/SQL

  • JSP 中request与response的用法详解

    JSP 中request与response的用法详解 概要: 在学习这两个对象之前,我们应该已经有了http协议的基本了解了,如果不清楚http协议的可以看我的关于http协议的介绍.因为其实request和response的使用大部分都是对http协议的操作. request对象的介绍 我们先从request对象进行介绍: 我们知道http协议定义了请求服务器的格式: 请求行 请求头 空格 请求体(get请求没有请求体) 好了,这里我们就不详细介绍了,我们只看几个应用就可以了,没什么难度: 应

  • 基于C++中setiosflags()的用法详解

    cout<<setiosflags(ios::fixed)<<setiosflags(ios::right)<<setprecision(2); setiosflags 是包含在命名空间iomanip 中的C++ 操作符,该操作符的作用是执行由有参数指定区域内的动作:   iso::fixed 是操作符setiosflags 的参数之一,该参数指定的动作是以带小数点的形式表示浮点数,并且在允许的精度范围内尽可能的把数字移向小数点右侧:   iso::right 也是se

  • Require.js的基本用法详解

    一:什么是require.js ①:require.js是一个js脚本加载器,它遵循AMD(Asynchronous Module Definition)规范,实现js脚本的异步加载,不阻塞页面的渲染和其后的脚本的执行,并提供了在加载完成之后的执行相应回调函数的功能: ②:require.js要求js脚本必须要实现模块化,即文件化:而require.js的作用之一就是加载js模块,也就是js文件. ③:require.js可以管理js模块/文件之间的依赖;即不同的框架例如Jquery,Angul

  • JSP中EL表达式的用法详解(必看篇)

    EL 全名为Expression Language EL 语法很简单,它最大的特点就是使用上很方便.接下来介绍EL主要的语法结构: ${sessionScope.user.sex} 所有EL都是以${为起始.以}为结尾的.上述EL范例的意思是:从Session的范围中,取得 用户的性别.假若依照之前JSP Scriptlet的写法如下: User user =(User)session.getAttribute("user"); String sex =user.getSex( );

随机推荐