jquery插件制作

jquery插件丰富，很多都是很好用的，最近学习了一下如何制作jquery插件，发现jquery插件制作其实很简单，这里介绍一下。

jquery插件的基本格式：

(function($){$.fn.tab = function(options){//$.fn后面的tab是这个插件的函数名称。可以更具自己喜好进行修改var defaults = {//相关属性设置   }var options = $.extend(defaults, options);this.each(function(){//实现的功能设置

           });};
})(jQuery);

我这里是做一个tab的插件，我来完善以上代码

(function($){$.fn.tab = function(options){var defaults = {eventname:"click",//触发事件，click为点击,mousemove为鼠标移动titlekeyid:"tabtitle",//切换的ID  sedcss:"sed",//选中时的CSSnosedcss:"nosed" //未选中时的CSS}var options = $.extend(defaults, options);this.each(function(){var tab=$(this);//绑定事件$(tab).find("li").bind(options.eventname,function(){$("#"+options.titlekeyid).find("li").attr("class", options.nosedcss);$(this).attr("class", options.sedcss);$("#"+options.titlekeyid+"info").find("div").css("display", "none");$("#"+$(this).attr("id")+"info").css("display", "block");//个人JS能力还是有限，感觉代码写的不好});});};
})(jQuery);

我想大家都用过一些jquery插件，我这里看下插件使用时的代码：

（代码二）

<script type="text/javascript">$().ready(function(){$("#tabtitle").tab({eventname:"mousemove",sedcss:"sed"});})
</script>

结合以上两段代码进行说明

$("#tabtitle")表示你要使用在哪个地方，稍微了解jquery的童鞋都知道是什么意思了，不多介绍了，

.tab 就是这个插件我们定义的函数名了，对照（代码一）中的$.fn.tab中的tab。

.tab({eventname:"mousemove",sedcss:"sed"}); 中eventname和sedcss就是（代码一）var defaults ={};中定义的属性值了。如果我们不需要改变属性值，那么我们就使用默认的属性值，那么插件就应该这样使用

<script type="text/javascript">$().ready(function(){$("#tabtitle").tab();})
</script>

最后附上全部的页面代码：

<html><head><title>tab test</title>
<script type="text/javascript" src="jquery.js">
</script>
<script type="text/javascript" src="jquery.joyleetab.js">
</script>
<script type="text/javascript">$().ready(function(){$("#tabtitle").tab({eventname:"mousemove",sedcss:"sed"});})
</script><link href="css.css" rel="stylesheet" type="text/css"></head><body><ul id="tabtitle">//这里的ID对应$("#tabtitle")中的ID,LI的ID分别是尾部添加数字<li id="tabtitle1" class="sed">asdfasfd</li><li id="tabtitle2">asdfasfd</li><li id="tabtitle3">asdfasfd</li><li id="tabtitle4">asdfasfd</li><li id="tabtitle5">asdfasfd</li></ul><div id="tabtitleinfo">//这里的ID对ul中的ID,ID分别是尾部添加数字和"info"<div id="tabtitle1info" >000000</div><div id="tabtitle2info" style=" display:none">111111</div><div id="tabtitle3info" style=" display:none">22222</div><div id="tabtitle4info" style=" display:none">33333</div><div id="tabtitle5info" style=" display:none">44444</div></div></body>
</html>

转载于:https://www.cnblogs.com/chris-oil/archive/2013/06/03/3115801.html

jquery插件制作相关推荐

JQuery插件制作具有动态效果的网页
JQuery插件制作具有动态效果的网页前言 JQuery 今天我给大家介绍一个运用JQuery插件制作的动态网页--iphone 5C 宣传页面.这个网页中运用到了fullpage.js和 ...
html进行语音播报,JQuery插件制作：[2]语音播报jspeech
在手机网站或者PC网站的资讯页面,想要有一个对文字进行语音播报功能.在网上找了很多资料,大部分都是正对于手机APP的,比如百度语音.这些都是给手机app(android.ios)提供sdk包,然后在调 ...
jquery插件制作 -- 3.表单验证
今天的内容是关于表单验证插件的制作.表单验证控件实现的主要功能是,当表单提交的时候检查必填项是否正确填写,同时根据需要验证输入信息是否符合规范. 先下页面代码: <!DOCTYPE html P ...
自己编写的仿京东移动端的省市联动选择JQuery插件
概述什么是插件,插件就是即插即用叫插件,很少的配置,很少的代码就可以用都项目里,之所以做这个插件,是因为做了一个省市区的联动,其他项目如果要用怎么办,难道在ctrl+c,ctrl+v?那样做太low ...
html制作表格保存为txt文件,可将HTML表格导出为Excel|csv|txt文件的jQuery插件
TableExport是一款可以将HTML表格导出为Excel xlsx格式.xls格式,以及csv和txt文件的jQuery插件.TableExport插件使用简单,默认使用Bootstrap的CS ...
用jQuery插件jVectorMap制作中国省份区域图
jVectorMap是一个优秀的.兼容性强的jQuery地图插件.它可以工作在包括IE6在内的各款浏览器中,矢量图输出,除官方提供各国地图数据外,用户可以使用数据转换程序定制地图数据. 这里基于jVe ...
基于jQuery日历插件制作日历
这篇文章主要介绍了基于jQuery日历插件制作日历的相关资料,需要的朋友可以参考下来看下最终效果图吧: 是长得丑了一点,不要吐槽我-.- 首先来说说这个日历主要的制作逻辑吧: ·一个月份最多有31天 ...
基于Jquery插件Uploadify实现实时显示进度条上传图片
网址:http://www.jb51.net/article/83811.htm 这篇文章主要介绍了基于Jquery插件Uploadify实现实时显示进度条上传图片的相关资料,感兴趣的小伙伴们可以参考 ...
学习jQuery之旅--使用炫酷的jQuery插件
前两篇文章中,介绍了jQuery中强大的Selectors (选择器)以及开发中比较常用的方法的使用.今天和大家一起体验一下jQuery另一个吸引人的地方--强大炫酷实用的jQuery插件. 做网站的 ...

jquery插件制作

jquery插件制作相关推荐

最新文章

热门文章