Bootstrap的js插件之按钮(button)

【Bootstrap的js插件之按钮(button)】的更多相关文章

Bootstrap的js插件之按钮(button)

1)属性: data-loading-text="载入中..."--使button呈现载入状态: data-toggle="button"--使按钮可以切换状态: data-toggle="buttons"--使按钮组具有类似选择框的选择/取消功能. autocomplete="off"--解决FireFox的兼容性问题:即FireFox会在多个页面载入之间保持button的禁用状态; 2)方法: $().button(&qu…

使用bootstrap的JS插件实现模态框效果

在上一篇文章中,我们使用 js+css 实现了模态框效果,在理解了模态框的基本实现方法和实现效果后,我们就要寻找更快捷的方法,又快又好的来完成模态框开发需求,从而节约时间,提高效率.一个好的轮子,不仅能大幅减轻工作量,而且能让我们的代码更简明和优雅. 今天我们选择使用著名的 bootstrap 库的模态框插件 modal.js 来实现模态框效果,同时也使大家进一步熟悉 bootstrap 的插件使用. 一. bootstrap 的 js 插件的简单介绍 1.引入 a. 引入全部JS插件我们在使…

Bootstrap transition.js 插件

Bootstrap transition.js 插件详解 Bootstrap 自带的 JavaScript 插件的动画效果几乎都是使用 CSS 过渡实现的,而其中的 transition.js 就是为了判断当前使用的浏览器是否支持 CSS 过渡.下面先来简单了解下 CSS 过渡. CSS 过渡 CSS 过渡是指在 CSS 属性发生改变时在一段时间内平滑地过渡,使用 CSS 伪类可以很方便地使用: a { color: #333; transition: color 1s linear; }…

《玩转Bootstrap（JS插件篇）》笔记

导入JavaScript插件不论是单独导入还一次性导入之前必须先导入jQuery库. 一次性导入 <script src="js/bootstrap.min.js"></script> 单独导入,可到github去下载动画过渡(Transitions): transition.js 模态弹窗(Modal): modal.js 下拉菜单(Dropdown): dropdown.js 滚动侦测(Scrollspy): scrollspy.js 选项卡(Tab):…

玩转Bootstrap（JS插件篇）-第1章模态弹出框 :1-1导入JavaScript插件

导入JavaScript插件 Bootstrap除了包含丰富的Web组件之外,如前面介绍的下拉菜单.按钮组.导航.分页等.他还包括一些JavaScript的插件. Bootstrap的JavaScript插件可以单独导入到页面中,也可以一次性导入到页面中.因为在Bootstrap中的JavaScript插件都是依赖于jQuery库,所以不论是单独导入还一次性导入之前必须先导入jQuery库. 一次性导入: Bootstrap提供了一个单一的文件,这个文件包含了Bootstrap的所有JavaSc…

玩转Bootstrap（JS插件篇）-第1章模态弹出框 :1-4 模态弹出框--结构分析

模态弹出框--结构分析 Bootstrap框架中的模态弹出框,分别运用了“modal”.“modal-dialog”和“modal-content”样式,而弹出窗真正的内容都放置在“modal-content”中,其主要又包括三个部分: ☑ 弹出框头部,一般使用“modal-header”表示,主要包括标题和关闭按钮 ☑ 弹出框主体,一般使用“modal-body”表示,弹出框的主要内容 ☑ 弹出框脚部,一般使用“modal-footer”表示,主要放置操作按钮模态弹出窗的结构如下: <div…

Bootstrap的js插件之警告框(alert.js)

data-dismiss="alert"--为关闭button加入该属性能够使其自己主动为警告框赋予关闭功能. .fade .in--为警告框在关闭时加入动画效果. 很多其它细节參考演示样例: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" conten…

Bootstrap transition.js 插件详解

Bootstrap 自带的 JavaScript 插件的动画效果几乎都是使用 CSS 过渡实现的,而其中的 transition.js 就是为了判断当前使用的浏览器是否支持 CSS 过渡.下面先来简单了解下 CSS 过渡. CSS 过渡 CSS 过渡是指在 CSS 属性发生改变时在一段时间内平滑地过渡,使用 CSS 伪类可以很方便地使用: a { color: #333; transition: color 1s linear; } a:hover { color: #36f; } 这里给链接设…

Bootstrap的js插件之側边栏停靠(affix)

以下是一个比較常见的側边栏停靠的样例: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,initial-scale=1"> <title>js插件_側边栏停靠</title&…

Bootstrap的js插件之轮播(carousel)

轮播请查看下面演示样例.基本已经涵盖最经常使用的一个轮播 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,initial-scale=1"> <title>js插件_轮播</…

Bootstrap的js插件之弹出框(popover)

data-toggle="popover"--使弹出框可以切换状态: title--设置弹出框的标题: data-content--设置弹出框的内容部分: data-placement--设置弹出框的方位(top.left.right.bottom,默觉得right): data-trigger="focus"--设置焦点事件使用户点击空白处即能切换状态: 很多其它细节參考演示样例: <!DOCTYPE html> <html lang="…

Bootstrap的js插件之折叠（collapse）

data-toggle="collapse"--指明该元素具有折叠功能: data-target--设置元素打开折叠后指向的元素链接. .collapse--用来设置元素为折叠内容. .in--设置折叠内容初始化为显示状态: .panel-collapse--指明该元素内容为折叠面板样式. 很多其它细节请參考演示样例: <!DOCTYPE html> <html lang="zh_CN"> <head> <meta char…

玩转Bootstrap（JS插件篇）-第1章模态弹出框 :1-3 模态弹出框

模态弹出框(Modals) 这一小节我们先来讲解一个“模态弹出框”,插件的源文件:modal.js. 右侧代码编辑器(30行)就是单独引入 bootstrap 中发布出的“modal.js”文件. 样式代码: ☑ LESS版本:modals.less ☑ Sass版本:_modals.scss ☑ 编译后的Bootstrap:对应 bootstrap.css 文件第5375行-第5496行在 Bootstrap 框架中把模态弹出框统一称为 Modal .这种弹出框效果在大多数 Web 网站的交…

玩转Bootstrap（JS插件篇）-第1章模态弹出框 :1-2 动画过渡

动画过渡(Transitions) 这一小节我们先来讲“动画过渡(Transitions)”这个插件的使用,源文件:transition.js Bootstrap框架默认给各个组件提供了基本动画的过渡效果,如果要使用,有两种方法: ☑ 调用统一编译的bootstrap.js: ☑ 调用单一的过渡动画的JavaScript插件文件transition.js(右侧第29行引入Bootstrap上对外公布的transition.js的地址). transition.js文件为Bootstrap具有过渡…

Bootstrap学习js插件篇之滚动监听

1.滚动监听案例滚动监听插件可以根据滚动条的位置自动更新所对应的导航标记.Bootstrap中文网左侧就是一个滚动监听的例子. 代码段: <nav id="navbar-example2" class="navbar navbar-default navbar-static" role="navigation"> <div class="navbar-header"> <button clas…

Bootstrap学习js插件篇之标签页

简单的标签页代码: <h1 class="page-header">4.3标签页</h1> <ul class="nav nav-tabs"> <li class="active"><a href="#">Home</a></li> <li><a href="#">Profile</a>…

Bootstrap学习js插件篇之下拉菜单

案例通过此插件可以为几乎所有东西添加下拉菜单,包括导航条.标签页.胶囊式按钮. 用于导航条导航条分为四个部分.第一部分导航头,第二部分导航列,第三部分form查询表单,第四部分导航列. <nav class="navbar navbar-default" role="navigation"> <div class="navbar-header"> <button type="button" c…

js点击按钮button效果（波效果）

Material Design风格纯js按钮点击波特效演示效果 html部分: <button data-ripple> Demo button 6 </button> css部分: .ripple-container {} .ripple-container .ripple { background-color: rgba(255, 255, 255, 0.4); animation: ripple 2s forwards cubic-bezier(0, 0, 0.2, 1);…

Bootstrap学习js插件篇之提示框

案例受到Jason Frame开发的jQuery.tipsy插件的启发,我们才把这个工具提示插件做的更好,而且此插件不依赖图片,只是使用CSS3来实现动画效果,并使用data属性存储标题. 将鼠标悬停到下面的链接上就可以看到工具提示了: 代码段: <script type="text/javascript"> $(function() { $('.tooltip-demo').tooltip({ selector: "[data-toggle=tooltip]&…

bootstrap插件学习-bootstrap.popover.js

先看bootstrap.popover.js的结构 var Popover = function ( element, options ){} //构造器 Popover.prototype = {} // 构造器的原型 $.fn.popover = function ( option ){} //jQuery原型上的自定义方法 $.fn.popover.Constructor = Popover //重写jQuery原型方法popover的构造器名 $.fn.popover.defaults…

bootstrap学习笔记插件概述

Bootstrap插件概览在前面布局组件章节中所讨论的组件仅仅是个开始.Bootstrap自带的12种jQuery插件,扩展了功能,可以给站点添加更多的互动.即使您不是一名高级的js开发人员, 你也可以学习Bootstrap的js插件.利用Bootstrap数据api(Bootstrap Data API),大部分的插件可以在不编写任何代码的情况被触发. 站点引用bootstrap插件的方式有两种: 单独引用:使用Bootstrap的个别的*.js文件.一些插件和css组件依赖于其他插件.如果…

Bootstrap历练实例：按钮(Button)插件单个切换

单个切换如需激活单个按钮的切换(即改变按钮的正常状态为按压状态,反之亦然),只需向 button 元素添加 data-toggle="button" 作为其属性即可,如下面实例所示: <!DOCTYPE html><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title>…

Bootstrap 按钮(Button)插件加载状态

通过按钮(Button)插件,您可以添加进一些交互.比如控制按钮的状态.或者为其它组件(工具栏)创建按钮组. 加载状态如需向按钮添加加载状态,只需要简单地向 button 元素添加 data-loading-text="Loading..." 作为其属性即可,如下面实例所示: <!DOCTYPE html><html><head><meta http-equiv="Content-Type" content="t…

amazeui学习笔记--js插件（UI增强2）--按钮交互Button

amazeui学习笔记--js插件(UI增强2)--按钮交互Button 一.总结 1.按钮loading状态: <button type="button" class="am-btn am-btn-primary btn-loading-example">Submit - Button</button> <input type="button" class="am-btn am-btn-primary b…

bootstrap js插件

导入JavaScript插件 Bootstrap除了包含丰富的Web组件之外,如前面介绍的下拉菜单.按钮组.导航.分页等.他还包括一些JavaScript的插件. Bootstrap的JavaScript插件可以单独导入到页面中,也可以一次性导入到页面中.因为在Bootstrap中的JavaScript插件都是依赖于jQuery库,所以不论是单独导入还一次性导入之前必须先导入jQuery库. 一次性导入: Bootstrap提供了一个单一的文件,这个文件包含了Bootstrap的所有JavaSc…

Bootstrap入门（三十）JS插件7：警告框

Bootstrap入门(三十)JS插件7:警告框通过这个插件可以为警告信息添加点击以及消失的功能. 当使用一个.close按钮,它必须是第一个子元素.alert-dismissible,并没有文字内容. 1.实例首先,引入CSS文件和JS文件 <link href="bootstrap.min.css" rel="stylesheet"> <script src="jquery-3.1.0.min.js" type=&quo…

Bootstrap入门（二十九）JS插件6：弹出框

Bootstrap入门(二十九)JS插件6:弹出框加入小覆盖的内容,像在iPad上,用于存放非主要信息弹出框是依赖于工具提示插件的,那它也和工具提示是一样的,是需要初始化才能够使用的首先我们引入CSS文件和JS文件 <link href="bootstrap.min.css" rel="stylesheet"> <script src="jquery-3.1.0.min.js" type="text/javasc…

Bootstrap入门（二十三）JS插件1：模态框

Bootstrap入门(二十三)JS插件1:模态框 1.静态实例 2.动态实例 3.模态框的尺寸和效果 4.包含表单的模态框模态框经过了优化,更加灵活,以弹出对话框的形式出现,具有最小和最实用的功能集. 但是千万不要在一个模态框上重叠另一个模态框.要想同时支持多个模态框,需要自己写额外的代码来实现. 首先我们要引入CSS文件和JS文件(bootstrap需要jQuery的支持) <link href="bootstrap.min.css" rel="styleshee…

分页插件--根据Bootstrap Paginator改写的js插件

刚刚出来实习,之前实习的公司有一个分页插件,和后端的数据字典约定好了的,基本上是看不到内部是怎么实现的,新公司是做WPF的,好像对于ASP.NET的东西不多,导师扔了一个小系统给我和另一个同事,指了两种框架的方案就让我们自己做了... 刚开始在网上找了一下,觉得bootstrap-paginator的api暴露出来,修改一下就可以做成之前实习公司的那种了,但是觉得没有跳转,很奇怪,想要一个,就动手在github上把源码拿下来了,不得不说,这代码写得真是比我这些实习码农好太多.(之前实习公司的组长…

bootstrap插件学习-bootstrap.typehead.js

先看bootstrap.typehead.js的结构 var Typeahead = function ( element, options ){} //构造器 Typeahead.prototype = {} //构造器的原型 $.fn.typeahead = function ( option ){} //jQuery原型上自定义方法 $.fn.typeahead.defaults ={} //默认参数 $.fn.typeahead.Constructor = Typeahead //重写j…