bootstrap插件学习-bootstrap.alert.js
我们先看bootstrap.alert.js的结构
var dismiss = '[data-dismiss="alert"]' //自定义属性
Alert = function ( el ){} // 构造器
Alert.prototype ={} // 构造器的原型
$.fn.alert = function ( option ){} //jQuery原型上自定义的方法
$.fn.alert.Constructor = Alert // 重写jQuery原型方法popover的构造器名
$(function (){} // 初始化
HTML结构
<div class="alert fade in">
<a class="close" href="#" data-dismiss="alert">×</a>
<strong>警告!</strong>
在贵国遵守宪法就要违反刑法。
</div>
<div class="alert alert-block alert-error fade in">
<a class="close" href="#" data-dismiss="alert">×</a>
<h4 class="alert-heading">微博控们注意了!</h4>
<p> 出游微博晒幸福时,最好不要泄露出游时间、人数,别泄露住址,谨慎晒出游照片,以免让贼判断出你家是否有人。因为小偷说不定会盯上你的微博,“随着微博的发展,贼也很时尚啊!” </p>
<p>
<a class="btn btn-danger" href="#">接受建议</a>
<a class="btn" href="#">不当回事</a>
</p>
</div>
alert插件,比较简单。我们先从初始化开始
/*
* 初始化
* */
$(function () {
$('body').on('click.alert.data-api', dismiss, Alert.prototype.close)
})
body去监听所有拥有data-dismiss = 'alert'属性的标签,并为它们绑定上Alert原型上的close方法,注意这里没有使用之前的$.proxy()方法,保持作用域,那我们进入这个方法后,方法内的this将指向触发事件的对象。
close: function ( e ) {
var $this = $(this)//获取触发click事件的对象
, selector = $this.attr('data-target')
, $parent
/*
* 如果没有data-target属性值,将获取标签a的href值
* */
if (!selector) {
selector = $this.attr('href')
selector = selector && selector.replace(/.*(?=#[^\s]*$)/, '') //strip for ie7
} $parent = $(selector)//没有获得对象
$parent.trigger('close') e && e.preventDefault()//阻止冒泡
//获取父节点
$parent.length || ($parent = $this.hasClass('alert') ? $this : $this.parent()) $parent
.trigger('close')
.removeClass('in')
//删除父对象,alert的样式在父节点上
function removeElement() {
$parent
.trigger('closed')
.remove()
}
//没有引入相应js,这里默认执行removeElement方法
$.support.transition && $parent.hasClass('fade') ?
$parent.on($.support.transition.end, removeElement) :
removeElement()//默认执行
}
里面的执行步骤跟之前插件很相似,很多就不说了,这个方法阻止了冒泡,最后删除了被点击标签的父节点。想看alert样式的,可以浏览一下bootstrap的样式表。
内容不多,时间刚好,以上是我的一点读码体会,如有错误,请指出,大家共通学习。
bootstrap插件学习-bootstrap.alert.js的更多相关文章
- bootstrap插件学习-bootstrap.dropdown.js
bootstrap插件学习-bootstrap.dropdown.js 先看bootstrap.dropdown.js的结构 var toggle = '[data-toggle="drop ...
- bootstrap插件学习-bootstrap.modal.js
bootstrap插件学习-bootstrap.modal.js 先从bootstrap.modal.js的结构看起. function($){ var Modal = function(){} // ...
- bootstrap插件学习-bootstrap.scrollspy.js
先看bootstrap.dropdown.js的结构 function ScrollSpy(){} //构造函数 ScrollSpy.prototype = {} //构造器的原型 $.fn.scro ...
- bootstrap插件学习-bootstrap.typehead.js
先看bootstrap.typehead.js的结构 var Typeahead = function ( element, options ){} //构造器 Typeahead.prototype ...
- bootstrap插件学习-bootstrap.carousel.js
先看bootstrap.carousel.js的结构 var Carousel = function (element, options){} //构造器 Carousel.prototype = { ...
- bootstrap插件学习-bootstrap.collapse.js
先看bootstrap.collapse.js的结构 var Collapse = function ( element, options ){} // 构造器 Collapse.prototype ...
- bootstrap插件学习-bootstrap.button.js
先看bootstrap.button.js的结构 var Button = function ( element, options ){} //构造器 Button.prototype = {} // ...
- bootstrap插件学习-bootstrap.popover.js
先看bootstrap.popover.js的结构 var Popover = function ( element, options ){} //构造器 Popover.prototype = {} ...
- bootstrap插件学习-bootstrap.tooltip.js
先看bootstrap-tooltip.js的结构 var Tooltip = function ( element, options ){} // 构造器 Tooltip.prototype ={} ...
随机推荐
- 详解Bootstrap媒体对象
在web页面中,图片居左,内容居右排列,是非常常见的效果,它也就是媒体对象,它是一种抽象的样式,可以用来构建不同类型的组件,在bootstrap框架中其对应的版本文件如下: LESS: media.l ...
- 使用Gulp和Browserify创建多个绑定文件
Browserify是一个Javascript的绑定工具,帮助我们理顺module之间的依赖关系.Gulp用来优化workflow.两者的共同点都是使用流,但在使用流方面也有不同之处: Browser ...
- 不会用ant打包、部署项目的工程师,不是一个好程序员(测试)
副标题:利用ant脚本 自动构建svn增量/全量 系统程序升级包 首先请允许我这样说,作为开发或测试,你一定要具备这种本领.你可以手动打包.部署你的工程,但这不是最好的方法.最好的方式就是全自动化的方 ...
- Dom4J解析xml文件动态转换为List<Bean>或者Map集合
大家在解析大量相似xml文件的时候是否会遇到这样一个问题:冗余的代码去set定义的实体对象Bean的值,基本都是一样的操作 而且毫无任何代码价值可言所以在这写了一个简单的例子,类封装了几个方法你只 ...
- Win C盘扩容
最近C盘真的空间越来越小了,记下简单的几个操作步骤以便以后用到. 参考文档: http://jingyan.baidu.com/article/90808022a6c6b7fd91c80fc8.htm ...
- linux系统date命令详解
Linux时钟分为系统时钟(System Clock)和硬件(Real Time Clock,简称RTC)时钟.系统时钟是指当前Linux Kernel中的时钟,而硬件时钟则是主板上由电池供电的时钟, ...
- Codeforces Beta Round #62 题解【ABCD】
Codeforces Beta Round #62 A Irrational problem 题意 f(x) = x mod p1 mod p2 mod p3 mod p4 问你[a,b]中有多少个数 ...
- 解析Myeclipse项目下的.classpath文件
<classpathentry kind="src" path="src"/> <classpathentry kind="con& ...
- BW标准数据源初始化设置
在安装了一干补丁和做好了BW与R3的链接之后(此处有BISIS操心,具体事宜不详),我们就可以登录到R3系统看个究竟了. 磨刀不误砍柴工,先检查一下两边系统的补丁: R3端如下, ,貌似我们是19,通 ...
- 在Oracle Linux Server release 6.4下配置ocfs2文件系统
① 安装ocfs-tools-1.8 如果是使用RedHat Enterprise Linux 6.4,也可以安装ocfs-tools-1.8的,只是要插入Oracle Linux Server re ...