JQuery扩展对象方法操作示例-创新互联
本文实例讲述了JQuery扩展对象方法操作。分享给大家供大家参考,具体如下:
饶阳网站制作公司哪家好,找成都创新互联!从网页设计、网站建设、微信开发、APP开发、成都响应式网站建设公司等网站项目制作,到程序开发,运营维护。成都创新互联2013年开创至今到现在10年的时间,我们拥有了丰富的建站经验和运维经验,来保证我们的工作的顺利进行。专注于网站建设就选成都创新互联。应项目需求,对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后自动滑动关闭 } })
另外有需要云服务器可以了解下创新互联scvps.cn,海内外云服务器15元起步,三天无理由+7*72小时售后在线,公司持有idc许可证,提供“云服务器、裸金属服务器、高防服务器、香港服务器、美国服务器、虚拟主机、免备案服务器”等云主机租用服务以及企业上云的综合解决方案,具有“安全稳定、简单易用、服务可用性高、性价比高”等特点与优势,专为企业上云打造定制,能够满足用户丰富、多元化的应用场景需求。
标题名称:JQuery扩展对象方法操作示例-创新互联
网址分享:http://scyanting.com/article/deesid.html