扩展bootstrap的popover, 增加在指定时间内fadeOut的功能
来源:互联网 发布:52单片机引脚图电路图 编辑:程序博客网 时间:2024/05/24 07:28
项目上需要一个popover,这个popover的需要接收一个时间参数,然后在这个时间内fadeOut。看了下bootstrap的popover,它是继承与tooltip的,很奇怪的是,发现bootstrap的tooltip,也就是popover,在show的时候会加一个fade in这个css class,但是hide时,却没有相应的fade out class。好吧,反正项目要求不能改bootstrap源码,所以我还是去扩展它的hide方法比较好。
boostrap其实能接收一个delay参数,使用方式如下:
$("target").popover({delya:{show:500,hide:100}})
但是这个参数其实是指触发后500ms后popover开始显示出来,触发后100ms后开始隐藏,而不是说触发后在100ms内慢慢隐藏,所以这个参数不符合我的需求,放弃。
一开始想到是不是能用on()去bind在bootstrap的hide方法或者show方法上。但是,代码大概如下:
$("target").on("hide.on.popover"),function(){$("popover").fadeOut(time)}
</pre><span style="white-space:pre"></span>可是函数执行的顺序上,委托函数一定先于被委托函数,所以导致先hide在fadeOut,所以也不行,放弃这个方法。</p><p></p><p><span style="white-space:pre"></span>没办法,只能扩展hide方法了。</p><p><pre name="code" class="javascript">(function() { var orig = $.fn.popover, proto = $.extend({}, $.fn.popover.Constructor.prototype); $.fn.popover = function(options) { return this.each(function() { orig.call($(this), options); if (typeof options.time === 'number') { $(this).data('bs.popover').hide = function() { var fadeFun = function(){ $(this).fadeOut(options.time,function(){ proto.hide.call(popover_pro); }); } var popover_pro=this; fadeFun.call(this.$tip,this); }; } }); } })();扩展完毕,使用方式如下:
$('target').popover({ time: 1000 });
扩展里用到了原型这个概念,其实对于原型现在还不是特别清晰,希望在以后的工作中增强对这个概念的了解。
0 0
- 扩展bootstrap的popover, 增加在指定时间内fadeOut的功能
- Bootstrap的popover(弹出框)在append后弹不出(失效)
- 如何在指定的动作中加载 Yii-bootstrap 扩展
- Bootstrap Popover 隐藏的Javasript方法
- Bootstrap Popover 隐藏的Javasript方法
- bootstrap气泡组件popover的使用
- silverlight DispatcherTimer 使按钮在指定的时间内不可编辑
- BootStrap自定义popover,点击区域隐藏功能!
- 获取指定时间内的所有时间
- mysql查询指定时间内的数据
- ListView指定单位时间内的滚动距离
- Bootstrap的js插件之弹出框(popover)
- bootstrap 中popover的鼠标悬停下拉菜单效果
- bootstrap popover动态显示时需要注意的地方
- 在bootstrap中popover.js,popover英文是什么意思?
- 由于激活没有在指定的时间内完成,COM+ 激活没有成功的解决方案!
- [转]winfrom让弹出的MessageBox在指定时间内自动销毁
- 如何在指定的时间内控制一个程序能否正确登陆
- SQL Server 游标运用:鼠标轨迹字符串分割
- iOS开发-Certificates、Identifiers和Profiles详解
- edittext禁止输入表情
- iOS语音播放之切换听筒和扬声器的方法解决方案
- 在Swing和Swt中使用JavaFX
- 扩展bootstrap的popover, 增加在指定时间内fadeOut的功能
- SQL Server 游标运用:查看所有数据库所有表大小信息
- tomcat clean--ContextLoaderListener ClassNotFoundException
- php内核探索笔记-解释器的执行过程
- JavaFX之Task的使用
- sublime text3中文输入法设置
- 备份数据库存储过程
- SQL Server 游标运用:批量创建、删除链接服务器
- JavaFX示例--TimeLine和Animation的使用