本文实例讲述了JQuery扩展对象方法操作。分享给大家供大家参考,具体如下:
应项目需求,对JQuery进行了一个扩展,需求如下:
项目中需要在浏览器右下角提示操作错误和系统提示内容,并有滑动移出和关闭的效果,所以自己写了一个效果还可以的弹出框来。就是给JQuery添加了一个方法ShowMsg。
先上代码:
内容部分创建高度 溢出
$("#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 },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本身进行扩展:
怎么用上面这个呢,看下面:
调用到了
2、用$.fn.extend
进行方法扩展:
说明:$.fn.extend
是给JQuery的所有对象进行扩展方法,即只要JQuery可以定位到的对象,都可以使用这个方法。所以只要先定位到改对象,直接调用即可。
更多关于jQuery相关内容感兴趣的读者可查看本站专题:《》、《》、《》、《》、《》、《》及《用法总结》
希望本文所述对大家jQuery程序设计有所帮助。
原文链接:https://www.f2er.com/jquery/30837.html