JQuery
Plugin插件,假诺大家不晓得怎么是JQuery插件或都不晓得哪些编写能够查看其官方的网址:jQuery
Authoring Guidelines
好了,上面有局地本身感觉想做叁个好的插件必得相应的渴求:
1、在JQuery命名空间投注解只声雅培个单独的名号
2、接受options参数,以便调节插件的行为
3、暴露插件的暗中认可设置 ,以便外面能够访问
4、适本地将子函数提要求外界访谈调用
5、保持个人函数
6、帮忙元数据插件
下边将相继地过壹次:
只声贝拉米个独门的名号
那标记是三个独门的插件脚本。固然您的本子包罗五个插件大概是填补的插件(像$.fn.doSomething()和$.undoSomething()),那么您能够依据要求表明八个名称。但貌似景色下,力争用单一的称谓来保障插件现实的具备细节。
在本例中,我们将宣示一个叫“hilight”的称呼

1. 新窗口展开链接
XHTML 1.0 Strict 版本不帮忙 target=”_blank” 属性,而使用 JQuery
能很好地化解那么些主题素材,完成新窗口展开网页:

ajax编码落地算是集体框架建设的二个里程碑,使得框架具备了三个可利用调节和测验的版本。在ajax框架编码中至关心注重要想到了那般几点:
  • 框架包容性
  • 方式周密而要轻巧快速
  • 可扩充性好

复制代码 代码如下:

复制代码 代码如下:

框架包容性:ajax框架的包容性首要呈未来XMLHttpEvoquequest对象生成上。根据区别连串浏览器依旧不一样库一般有三种艺术
  • new XMLHttpRequest();
  • new ActiveXObject(“Microsoft.XMLHTTP”);
  • new ActiveXObject(“Msxml2.XMLHTTP”);

// 插件的定义
$.fn.hilight = function( options ){
// 这里正是插件的贯彻代码了…
};
接下来大家能够像这么调用它:
$(“divTest”).hilight();

$(‘a[@rel$=’external’]’).click(function(){
this.target = “_blank”;
});

办法轻易易行飞速且扩充性好
  • 框架编写如ajax.get()、ajax.json()、ajax.post等如此看似jquery的可比完美的情势,神速便利
  • 框架使用叁个基本措施为接口、各个艺术都经过合併接口进行异步央求,后续须求增加方法只需求团队和谐的数量格式,然后调用宗旨措施就可以。

收受八个options参数,以便控件插件的一坐一起

/*
Usage:
<a href=””
rel=”external”>mangguo.org</a>
*/

方法
  • ajax.get(url,success,error)

    参数: url 请求的url地址 必选
    参数: success 请求成功的回调函数 可选
    参数: error 请求失败的回调函数 可选
  • ajax.json(url,success,error)//接纳官方json深入分析方法深入分析,更安全

    参数: url 请求的url地址 必选
    参数: success 请求成功的回调函数 可选
    参数: error 请求失败的回调函数 可选
  • ajax.xml(url,success,error)//暂不帮忙

    参数: url 请求的url地址 必选
    参数: success 请求成功的回调函数 可选
    参数: error 请求失败的回调函数 可选
  • ajax.post(url,params,success,error)

    参数: url 请求的url地址 必选
    参数: params 需要post的参数 可选(默认null)
    参数: success 请求成功的回调函数 可选
    参数: error 请求失败的回调函数 可选
  • ajax.request( { url:url, params:params,
    type:type, format:format, success:success, error:error } )

    参数: url 请求的url地址 必选
    参数: params 需要post的参数 可选
    参数: success 请求成功的回调函数 可选
    参数: error 请求失败的回调函数 可选
    参数: type 请求类型(POST/GET) 可选(默认GET)
    参数: format 返回数据类型(json/xml/text) 可选(默认text)

范例
引入

复制代码 代码如下:

<script type=”text/javascript” src=”ajax_min.js” ></script>

请求

复制代码 代码如下:

<script type=”text/javascript”>
//定义回调函数
var callBack = function(text)
{
alert(text);
}
//发送须求
ajax.get(“test.php”,callBack);
</script>

下载ajax_min.js
来自:cnblogs 唯C—Sky

:
框架包容性…

复制代码 代码如下:

2. 获得相称元素的总的数量
以下代码将重临匹配成分的多寡:

$.fn.hilight = function(options){
var defaults = {
foreground : ‘red’,
background : ‘yellow’
};
//Extends out defaults options with those privided 扩充大家暗许的设置
$.extend(defaults,options);
};

$(‘element’).size();

而作者辈得以这么使用它:

3. 预加载图像 当使用 Javascript 管理图像载入时,能够动用图像完成预加载:

复制代码 代码如下:

复制代码 代码如下:

$(‘#myDiv’).hilight({
foreground: ‘blue’
});

jQuery.preloadImages = function()
{
for(var i = 0; i”).attr(“src”, arguments[i]);
}
};

暴光插件的暗中同意设置 ,以便外面能够访谈
用作插件的进级和优化,我们应有将上面的代码暴透露来作为插件的默许设置。
那特别主要,那样做让动用插件的顾客能够特别轻易地用最少的代码重写或自定义该插件。不过这几个大家得以借助JavaScript
function对象的优势:

// Usage
$.preloadImages(“image1.gif”, “/path/to/image2.png”,
“some/image3.jpg”);

复制代码 代码如下:

4. 检测浏览器 基于区别浏览器加载不一样 CSS
能防守因浏览器差距导致的样式表渲染差距,使用 JQuery 能够轻便达成:

$.fn.hilight = function(options){
//Extend our default options with those provided
//Note that the first arg to extend is an empty object
//this is to keep from overriding our “defaults” object
var opts = $.extend({},$.fn.hilight.defaults,options);
}
$.fn.hilight.defaults = {
foreground : ‘red’,
background : ‘yellow’
};

复制代码 代码如下:

发表评论

电子邮件地址不会被公开。 必填项已用*标注