帝王谷资源网 Design By www.wdxyy.com
前言:
bootstrap的 js插件的源码写的非常好,也算是编写jquery插件的模范写法,本来还想大篇详细的分析一下呢,唉,没时间啊,很早之前看过的源码了,现在贴在了博客上,
300来行的代码,其中有很多jquery的高级用法,建议,从github上下载一下源码,然后把本篇的代码复制过去,然后,边运行,边阅读,如果有不明白的地方,可以给我留言,我给解答。
下面是基本每行都加了注释,供大家参考,具体内容如下
/* ======================================================================== * Bootstrap: modal.js v3.3.7 * http://getbootstrap.com/javascript/#modals * ======================================================================== * Copyright 2011-2016 Twitter, Inc. * Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE) * ======================================================================== */ +function ($) { 'use strict'; // MODAL CLASS DEFINITION // ====================== var Modal = function (element, options) {//modal类:首先是Modal的构造函数,里面声明了需要用到的变量,随后又设置了一些常量。 this.options = options this.$body = $(document.body) this.$element = $(element) this.$dialog = this.$element.find('.modal-dialog') this.$backdrop = null this.isShown = null this.originalBodyPad = null this.scrollbarWidth = 0 this.ignoreBackdropClick = false//忽略遮罩成点击吗,不忽略,即:点击遮罩层退出模态 if (this.options.remote) {//这是远端调用数据的情况,用远端模板来填充模态框 this.$element .find('.modal-content') .load(this.options.remote, $.proxy(function () { this.$element.trigger('loaded.bs.modal')//触发加载完数据时的监听函数 }, this)) } } Modal.VERSION = '3.3.7' Modal.TRANSITION_DURATION = 300 //transition duration 过度时间 Modal.BACKDROP_TRANSITION_DURATION = 150 //背景过度时间 Modal.DEFAULTS = {//defaults 默认值 backdrop: true,//有无遮罩层 keyboard: true,//键盘上的 esc 键被按下时关闭模态框。 show: true//模态框初始化之后就立即显示出来。 } //变量设置完毕,接着就该上函数了。Modal的扩展函数有这么几个: //toggel,show,hide,enforceFocus,escape,resize,hideModal,removeBackdrop, //backdrop,handleUpdate,adjustDialog,resetAdjustments,checkScrollbar,setScrollbar,resetScrollbar, //measureScrollbar终于列完了,恩一共是16个。toggel函数比较简单,是一个显示和隐藏的切换函数。代码如下 Modal.prototype.toggle = function (_relatedTarget) { return this.isShown "modal"]', $.proxy(this.hide, this))//注册右上角关闭事件 this.$dialog.on('mousedown.dismiss.bs.modal', function () {//在dialog中按下鼠标,在父元素中抬起 忽略: 在模态中按下鼠标,在遮罩层中抬起鼠标 that.$element.one('mouseup.dismiss.bs.modal', function (e) {//在父元素中抬起 if ($(e.target).is(that.$element)) that.ignoreBackdropClick = true }) }) this.backdrop(function () {//遮罩层:真的是一个压轴函数,,,, 这个回调函数是遮罩完毕后运行的函数 var transition = $.support.transition && that.$element.hasClass('fade') if (!that.$element.parent().length) { that.$element.appendTo(that.$body) // don't move modals dom position } that.$element .show() .scrollTop(0)//show 并且 弄到顶部 that.adjustDialog()//调整对话框 if (transition) { that.$element[0].offsetWidth // force reflow } that.$element.addClass('in') that.enforceFocus() var e = $.Event('shown.bs.modal', { relatedTarget: _relatedTarget }) transition "modal"]', function (e) {//点击按钮的时候触发模态框的东西, var $this = $(this) var href = $this.attr('href') var $target = $($this.attr('data-target') || (href && href.replace(/.*(?=#[^\s]+$)/, ''))) // strip for ie7 var option = $target.data('bs.modal') ? 'toggle' : $.extend({ remote: !/#/.test(href) && href }, $target.data(), $this.data())//这地方是区别一下第一次触发和第二次触发 //到这里为止是为了得到被控制的modal的dom元素 if ($this.is('a')) e.preventDefault() $target.one('show.bs.modal', function (showEvent) {//调用show方法后立即执行的事件 if (showEvent.isDefaultPrevented()) return // only register focus restorer if modal will actually get shown $target.one('hidden.bs.modal', function () {//调用show后创建的事件,模态框隐藏后触发, $this.is(':visible') && $this.trigger('focus')//如果原来的按钮还存在的(或显示的)话,那就让他得到焦点 }) }) Plugin.call($target, option, this) }) }(jQuery);
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
标签:
Bootstrap,模态窗口
帝王谷资源网 Design By www.wdxyy.com
广告合作:本站广告合作请联系QQ:858582 申请时备注:广告合作(否则不回)
免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件! 如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件! 如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
帝王谷资源网 Design By www.wdxyy.com
暂无评论...
P70系列延期,华为新旗舰将在下月发布
3月20日消息,近期博主@数码闲聊站 透露,原定三月份发布的华为新旗舰P70系列延期发布,预计4月份上市。
而博主@定焦数码 爆料,华为的P70系列在定位上已经超过了Mate60,成为了重要的旗舰系列之一。它肩负着重返影像领域顶尖的使命。那么这次P70会带来哪些令人惊艳的创新呢?
根据目前爆料的消息来看,华为P70系列将推出三个版本,其中P70和P70 Pro采用了三角形的摄像头模组设计,而P70 Art则采用了与上一代P60 Art相似的不规则形状设计。这样的外观是否好看见仁见智,但辨识度绝对拉满。
更新日志
2024年10月31日
2024年10月31日
- 【原神】V5.1攻略 | 纳西妲一图流攻略
- 群星.2003-重遇80·感动今天的都市人2CD【SONY】【WAV+CUE】
- 希文.2024-沉溺【StreetVoice】【FLAC分轨】
- 韩红.2005-精丫麒麟童】【WAV+CUE】
- 2D像素风日式美学动作游戏《雨魂》将登陆Xbox Series
- 《龙腾世纪4》评分造假?仅将评测代码给好评媒体!
- 《怪猎荒野》推出蜘蛛恐惧症设定 蜘蛛秒变史莱姆
- 《张韶涵单8CD+无损单曲合集》[WAV/FLAC][6.5G]
- 自然声带《大自然 雨声 白噪音》[320K/MP3][135.32MB]
- 自然声带《大自然 雨声 白噪音》[FLAC/分轨][416.27MB]
- 2024年度计划曝光!《暗黑破坏神:不朽》X《魔兽世界》11月开启联动
- 逆流而上!成都Wolves后发制人韧性十足!——《第五人格》2024秋季赛第四周赛报
- 复归之刻,七烛庆典,狼人杀七周年掌门表演赛活动来袭!
- 炉石传说野兽流最终阵容推荐 酒馆战棋野兽流最终阵容图文一览
- 炉石传说野猪人流最终阵容推荐 酒馆战棋野猪人流最终阵容图文一览