本文实例讲述了JQuery扩展对象方法操作。分享给大家供大家参考,具体如下:
应项目需求,对JQuery进行了一个扩展,需求如下:
项目中需要在浏览器右下角提示操作错误和系统提示内容,并有滑动移出和关闭的效果,所以自己写了一个效果还可以的弹出框来。就是给JQuery添加了一个方法ShowMsg。
先上代码:
美元.fn.extend ({ ShowMsg:函数(宽度、高度、msgTitle_ msgContent_) { var TopY=0;//初始化元素距父元素的距离 $ (" # messageTitle ") . html (msgTitle_); $ (" # messageResDes ") . html (msgContent_); (美元)。css(“宽度”,宽度+“px”)。css(“高度”,身高+“px”);//设置消息框的大小 (美元).slideDown (1000);//弹出 $ (" # messageTool”)。css (“margin-top”、高度);//为内容部分创建高度溢出 $ (" # message_close”)。点击(函数(){//当点击关闭按钮的时候 如果(TopY==0) { $(" #信息”).slideUp (1000);//这里之所以用slideUp是为了兼用Firefox浏览器 } 其他{ $(" #消息”)。动画({:TopY +高度},“慢”,函数(){$(" #信息”)hide ();});//当TopY不等于0时ie下和Firefox效果一样 } 返回错误; }); 美元(窗口)。滚动(函数(){ $(" #消息”)。css(“顶级”,美元(窗口).scrollTop() +(窗口)美元.height()——美元(“#信息”).height ());//当滚动条滚动的时候始终在屏幕的右下角 TopY=$(" #消息”).offset直()上;//当滚动条滚动的时候随时设置元素距父原素距离 }); setTimeout(函数(){ 如果(TopY==0) { $(" #信息”).slideUp (1000);//这里之所以用slideUp是为了兼用Firefox浏览器 } 其他{ $(" #消息”)。动画({:TopY +高度},“慢”,函数(){$(" #信息”)hide ();});//当TopY不等于0时ie下和Firefox效果一样 } 返回错误; },8000);//8秒后自动滑动关闭 } }) >之前代码一目了然,注释很清楚。下面呢,主要说下怎样对JQuery进行扩展吧。
上面的扩展我用了.fn.extend美元<代码> 代码>进行了扩展,是对JQuery的原生对象进行了方法的扩展,JQuery的扩展主要分为对JQuery本身类进行扩展(<代码> JQuery.extend> 代码)和对对象的进行方法扩展(<代码> $ .fn.extend> 代码)。下面分作说明:
1,用<代码> JQuery.extent> 代码对JQuery本身进行扩展:
JQuery.extend ({ showInfor:函数(0 {//做某事 } }); >之前怎么用上面这个呢,看下面:
美元.showInfor();//这样就调用到了 >之前2,用<代码>美元.fn.extend 代码>进行方法扩展:
本文开始使用例子就是,下面直接看调用方法:
$(" #弹出窗口”).ShowMsg(230100年,“系统提示”,“提示信息”); >之前说明:<代码> $ .fn.extend> 代码是给JQuery的所有对象进行扩展方法,即只要JQuery可以定位到的对象,都可以使用这个方法,所以只要先定位到改对象,直接调用即可。
更多关于jQuery相关内容感兴趣的读者可查看本站专题:《jQuery扩展技巧总结》,《jQuery常用插件及用法总结》,《jQuery切换特效与技巧总结》,《jQuery遍历算法与技巧总结》,《jQuery常见经典特效汇总》、《jQuery动画与特效用法总结》及《jQuery选择器用法总结》
希望本文所述对大家jQuery程序设计有所帮助。
JQuery扩展对象方法操作示例