JQuery扩展对象方法操作示例

来源：懂视网责编：小采时间：2020-11-27 22:09:36

JQuery扩展对象方法操作示例

JQuery扩展对象方法操作示例:本文实例讲述了JQuery扩展对象方法操作。分享给大家供大家参考，具体如下：应项目需求，对JQuery进行了一个扩展，需求如下：项目中需要在浏览器右下角提示操作错误和系统提示内容，并有滑动移出和关闭的效果，所以自己写了一个效果还可以的弹出框来。就是给

推荐度：

点击下载本文 文档为doc格式

导读JQuery扩展对象方法操作示例:本文实例讲述了JQuery扩展对象方法操作。分享给大家供大家参考，具体如下：应项目需求，对JQuery进行了一个扩展，需求如下：项目中需要在浏览器右下角提示操作错误和系统提示内容，并有滑动移出和关闭的效果，所以自己写了一个效果还可以的弹出框来。就是给

本文实例讲述了JQuery扩展对象方法操作。分享给大家供大家参考，具体如下：

应项目需求，对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可以定位到的对象，都可以使用这个方法。所以只要先定位到改对象，直接调用即可。

更多关于jQuery相关内容感兴趣的读者可查看本站专题：《jQuery扩展技巧总结》、《jQuery常用插件及用法总结》、《jQuery切换特效与技巧总结》、《jQuery遍历算法与技巧总结》、《jQuery常见经典特效汇总》、《jQuery动画与特效用法总结》及《jquery选择器用法总结》

希望本文所述对大家jQuery程序设计有所帮助。

声明：本网页内容旨在传播知识，若有侵权等问题请及时与本网联系，我们将在第一时间删除处理。TEL:177 7030 7066 E-MAIL:11247931@qq.com

JQuery扩展对象方法操作示例

推荐度：

点击下载本文 文档为doc格式

标签：方法方式例子

热门焦点

JQuery扩展对象方法操作示例

JQuery扩展对象方法操作示例

JQuery扩展对象方法操作示例

最新推荐

猜你喜欢

热门推荐