最近在学习jQuery,想自己编的自己用的到的jQuery插件,一来可以加深对jQuery的理解,二来自己要用的时候也方便。
今天正式发布自己的第一个jQuery插件jquery.checkUrl。
在网上找过关于检测URL是否有效的jQuery插件,可能有存在,不过自己目前还没找到。jQuery官方的也搜过,不过因为全是英文,自己懒得一个个往下看,所以就直接忽略掉,自己编写个好了。
===================================================
下面先上个效果演示的图:
这个是Demo刚开始检测时的截图。
====================================================
下面是JS的注释:
/*
* jQuery.checkUrl 0.1 - checkUrl PlugIn for jQuery 1.3.2
* Description:检测链接是否失效
* Example:
* $("a").checkUrl({"timeout":10000});
* type:"GET",检测类别使用GET方式
* timeout:10000,默认超时时间为10秒
* successColor:"green",链接有效时的颜色,默认为green
* errorColor:"red",链接无效时的颜色,默认为red
* startAnimate:function(t){检测开始时链接的动画,t为该链接DOM对象},
* completeAnimate:function(t){结束时链接动画,t为该链接DOM对象},
* isUrl:function(url){判断是否是URL的函数},
* getUrl:function(url){检测URL是否含有http/https前缀的函数,没有则进行添加,
* 因为$.ajax的URL参数没有http/https前缀时无法正确执行}
* });
* $("a").checkUrl();
* Author:钟晶晶
* Date: 2009-8-19
* Rev: 0.1
* http://code.google.com/p/zjj-jquery/
*/
因为整个插件并不是很复杂,所以代码部分没有加注释,全写在头部了。
====================================================
关于url有效性的检测,网上搜过后发现貌似只有两种,一种是通过XMLTHHP发送请求,通过检测返回状态来判断,
一种是通过将url赋值给图片标签的src,通过img的onload和onerror事件来判断url是否有效。
这里采用的是jQuery的$.ajax来实现对url有效性的检测。
插件在检测开始会有一段动画,默认是链接往右移动20像素,默认超时时间是10秒,当然你如果觉得时间比较短可
以在参数里进行设置,当url有效时链接会变成默认的绿色,表示有效,并且会执行一段结束动画,默认是链接回到
原来的位置,当url无效时链接会变成默认的红色,检测超时链接视为无效。
需要注意的是,这里对链接的检测是针对a标签的href值的。
支持数字IP形式,加和不加http/https形式的url。
插件JS的编码格式是UTF-8.
插件的各部分参数和函数都可以根据需要进行覆写。
插件已经托管在http://code.google.com/p/zjj-jquery/downloads/list上,感觉有需要下载的可以去那里下载,
压缩包里已经包含了简单的Demo。
这个插件比较简单,是自己jQuery起步编的第一个插件。欢迎大家向我反映该插件的问题和提出建议。