jquery插件开发方式多样化。
个人比较喜欢以下方式:
一.jquery扩展
1.javascript结构
(function(jquery){
//jquery扩展插件
jquery.fn.showMess = function(){
this.each(function(){
alert("测试");
});
}
})(jQuery);
使用javascript闭包方式。
(function(){})();
2.调用方式就很简单了。
$("span").showMess();
二.另外一种就是使用类的静态方法定义;
1.定义结构
(function(jquery){
//定义jquery的静态方法
jquery.showMess = function(input){
alert("静态定义测试");
}
})(jQuery)
2.调用方式可以在html标记事件上调用;
<span onclick="$.showMess()">静态定义测试</span>
当然调用的时候也可以根据情况,在定义插件的时候定义相关的调用方法就可以了,这两种方式也可以同时使用。
我自己比较喜欢jquery定义插件的方式是;
1.使用闭包
(function(jquery){})(jQuery)
function的参数使用jquery而不是$,这样不会与别的参数冲突;
2.里面的结构是
先定义类后使用(扩展插件,定义静态方法)new一个对象出来;这样自己觉得好管理一些,参数当然肯定可以被实际参数覆盖才行(extends)
3.局部变量使用“_变量名”的方式定义;
一个比较简单的信息提示插件:
/**
* @fileOverview 简单的信息提示插件
* @author <a href="gleams.iteye.com">星月</a>
* @version 0.1
*/
(function(jquery){
var showMess = function(elem){
var _elem = this.elem = $(elem);
var prompt = _elem.attr("prompt");
if(prompt!=undefined && prompt!=null){
this.showDiv();
}
}
showMess.prototype.showDiv = function(){
var span="<span id=\"showDiv\"></span>";
var _prompt = this.elem.attr("prompt");
var _elem = this.elem;
var div="<div class=\"showMess\">"+_prompt+"</div>";
$(_elem).hover(function(){
if($("#showDiv").size()<1) {
$("body").append(span);
}
$("#showDiv").append(div);
},function(){
$(".showMess").remove();
});
$(_elem).mousemove(function(ev){
var ev = ev || window.event;
var tagName = $(_elem).attr("tagName");
var x = tagName=="A" ? mouseCoords(ev).x+10+"px" : mouseCoords(ev).x+"px";//如果是a 标记x位置增加10像素
var y = tagName=="A" ? mouseCoords(ev).y+20+"px" : mouseCoords(ev).y+10+"px";//如果是a 标记y位置增加20像素
var txtLength = _prompt.length;
var lengthNum = txtLength/20;
if(lengthNum>1){
$(".showMess").width(lengthNum*80);
}else{
$(".showMess").width(80);
}
$(".showMess").fadeIn("show");
$("#showDiv").css({
"display":"block",
"left":x,
"top":y
});
});
}//showDiv_end
function mouseCoords(ev){
if(ev.pageX || ev.pageY){
return {x:ev.pageX, y:ev.pageY};
}
return{
x:ev.clientX + document.body.scrollLeft - document.body.clientLeft,
y:ev.clientY + document.body.scrollTop - document.body.clientTop
};
} //mouseCoords_end
//jquery扩展插件
jquery.fn.showMess = function(){
this.each(function(){
new showMess(this);
});
}
//jquery运行
$(function(){
$("span,div,input,a,img,td").showMess();
});
})(jQuery);
分享到:
相关推荐
jQuery插件开发全解析 可提高封装能力和js编程能力。
jquery 插件开发详解通过$.extend()来扩展jQuery 通过$.fn 向jQuery添加新的方法 通过$.widget()应用jQuery UI的部件工厂方式创建
jQuery插件开发及常用插件大全PDF;jQuery插件开发.pdf、jQuery常用插件大全.pdf
jquery 插件开发 pdf
JQuery插件的写法 最常用的jquery插件开发方式(教程合集) jquery插件的例子 jQuery插件开发教程_看这一本就行了 JQuery插件写法 jq插件最常用的写法
NULL 博文链接:https://zhoucl.iteye.com/blog/1239737
通用 JQuery 插件开发,及相关示例
jQuery插件开发全解析.pdf 详细叙述了jquery脚本开发 JQuery插件开发
NULL 博文链接:https://fbinbin.iteye.com/blog/2330594
NULL 博文链接:https://lpyyn.iteye.com/blog/2094991
jquery插件开发快速入门
jQuery插件开发.帮助你JQuery开发属于自己的插件
Jquery插件开发技术.
jQuery插件开发指南.doc
Jquery开发文档,为pdf格式,希望对你有所帮助。Jquery开发文档,为pdf格式,希望对你有所帮助。
jquery 插件开发 扩展 适合初学者查看以及学习。
在这篇快速的jQuery插件开发教程中,我们将创建一个jQuery插件用来随机排序显示任何一个DOM元素的文字内容 -这将会是一个非常有趣的效果,可以用在标题,logo及其幻灯效果中。