为JQuery扩展一个对象方法
来源:互联网 发布:泸沽湖冬天好玩吗 知乎 编辑:程序博客网 时间:2024/06/04 19:19
应项目需求,对JQuery进行了一个扩展,需求如下:
项目中需要在浏览器右下角提示操作错误和系统提示内容,并有滑动移出和关闭的效果,所以自己写了一个效果还可以的弹出框来。就是给JQuery添加了一个方法ShowMsg。
先上代码:
$.fn.extend({
ShowMsg: function (width, height, msgTitle_, msgContent_) { var TopY = 0; //初始化元素距父元素的距离 $("#messageTitle").html(msgTitle_); $("#messageResDes").html(msgContent_); $(this).css("width", width + "px").css("height", height + "px"); //设置消息框的大小 $(this).slideDown(1000); //弹出 $("#messageTool").css("margin-top", -height); //为内容部分创建高度 溢出 $("#message_close").click(function () {//当点击关闭按钮的时候 if (TopY == 0) { $("#message").slideUp(1000); //这里之所以用slideUp是为了兼用Firefox浏览器 } else { $("#message").animate({ top: TopY + height }, "slow", function () { $("#message").hide(); }); //当TopY不等于0时 ie下和Firefox效果一样 } return false; }); $(window).scroll(function () { $("#message").css("top", $(window).scrollTop() + $(window).height() - $("#message").height()); //当滚动条滚动的时候始终在屏幕的右下角 TopY = $("#message").offset().top; //当滚动条滚动的时候随时设置元素距父原素距离 }); setTimeout(function () { if (TopY == 0) { $("#message").slideUp(1000); //这里之所以用slideUp是为了兼用Firefox浏览器 } else { $("#message").animate({ top: TopY + height }, "slow", function () { $("#message").hide(); }); //当TopY不等于0时 ie下和Firefox效果一样 } return false; }, 8000); //8s后自动滑动关闭 })代码一目了然,注释很清楚。下面呢,主要说下怎样对JQuery进行扩展吧。
上面的扩展我用了 $.fn.extend进行了扩展,是对JQuery的原生对象进行了方法的扩展,JQuery的扩展主要分为对JQuery本身类进行扩展(JQuery.extend)和对对象的进行方法扩展($.fn.extend)。下面分作说明:
1、用JQuery.extent对JQuery本身进行扩展:
JQuery.extend({ showInfor:function(0{ //do something }});怎么用上面这个呢,看下面:
$.showInfor();//这样就调用到了
2、用$.fn.extend进行方法扩展:
本文开始使用例子就是,下面直接看调用方法:
$("#messageBox").ShowMsg(230,100,"系统提示","提示信息");说明:$.fn.extend是给JQuery的所有对象进行扩展方法,即只要JQuery可以定位到的对象,都可以使用这个方法。所以只要先定位到改对象,直接调用即可。
1 0
- 为JQuery扩展一个对象方法
- jQuery 扩展一个自己的对象
- 为JavaScript内置对象扩展方法
- 为JS脚本中String对象扩展一个静态Format()方法
- 扩展一个jquery mappingJSON 映射方法
- jQuery 插件/如何为jquery扩展方法/jQueryUI
- 给jquery对象添加自定义方法和扩展jquery类
- 给jquery对象添加自定义方法和扩展jquery类
- 如何判断一个对象是否为jquery对象
- 如何判断一个对象是否为jquery对象
- jQuery中的$.extend方法来扩展JSON对象
- 为javascript的JSON对象扩展forEach方法
- jquery的extend和fn.extend (扩展jQuery类或jQuery对象方法)
- 对string对象扩展一个方法,删除前后空格
- jquery自定义扩展方法
- Jquery扩展方法
- Jquery扩展方法
- 给jquery扩展方法
- Git 在团队中的最佳实践--如何正确使用Git Flow
- ViewPager版本二
- ViewPager+小圆点
- 进程之task_struct
- GYM-100796C-Minimax Tree【贪心】
- 为JQuery扩展一个对象方法
- HAUTOJ 1266: 最大子段和 河工大校赛DP
- DWR3.0(1)
- HDU1494 动态规划
- JAVA的JDBC的简单练习项目,一个简单的饭卡系统
- 从网络获取图片资源缓存到本地,第二次进入直接从本地加载。
- 安卓获取渠道名渠道id Android获取设备唯一标识的终极解决方法,防止安卓7.0时崩溃问题
- <Effective Mordern C++>笔记:Item 2:Understand auto type deduction.
- 把字节流转化成字符流的工具类