最新文章专题视频专题问答1问答10问答100问答1000问答2000关键字专题1关键字专题50关键字专题500关键字专题1500TAG最新视频文章推荐1 推荐3 推荐5 推荐7 推荐9 推荐11 推荐13 推荐15 推荐17 推荐19 推荐21 推荐23 推荐25 推荐27 推荐29 推荐31 推荐33 推荐35 推荐37视频文章20视频文章30视频文章40视频文章50视频文章60 视频文章70视频文章80视频文章90视频文章100视频文章120视频文章140 视频2关键字专题关键字专题tag2tag3文章专题文章专题2文章索引1文章索引2文章索引3文章索引4文章索引5123456789101112131415文章专题3
当前位置: 首页 - 科技 - 知识百科 - 正文

jquerytab插件制作实现代码_jquery

来源:动视网 责编:小采 时间:2020-11-27 20:49:57
文档

jquerytab插件制作实现代码_jquery

jquerytab插件制作实现代码_jquery:jquery插件的基本格式: 代码如下: (function($){ $.fn.tab = function(options){//$.fn后面的tab是这个插件的函数名称。可以更具自己喜好进行修改 var defaults = { //相关属性设置 } var options = $.extend(defaults,
推荐度:
导读jquerytab插件制作实现代码_jquery:jquery插件的基本格式: 代码如下: (function($){ $.fn.tab = function(options){//$.fn后面的tab是这个插件的函数名称。可以更具自己喜好进行修改 var defaults = { //相关属性设置 } var options = $.extend(defaults,


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",//选中时的CSS
nosedcss:"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插件,我这里看下插件使用时的代码:
(代码二)
代码如下:

$().ready(function(){
$("#tabtitle").tab({eventname:"mousemove",sedcss:"sed"});
})


结合以上两段代码进行说明
代码如下:
$("#tabtitle")表示你要使用在哪个地方,稍微了解jquery的童鞋都知道是什么意思了,不多介绍了,
.tab 就是这个插件我们定义的函数名了,对照(代码一)中的$.fn.tab中的tab。
.tab({eventname:"mousemove",sedcss:"sed"}); 中eventname和sedcss就是(代码一)var defaults ={};中定义的属性值了。如果我们不需要改变属性值,那么我们就使用默认的属性值,那么插件就应该这样使用

$().ready(function(){
$("#tabtitle").tab();
})


最后附上全部的页面代码:
代码如下:


tab test





$().ready(function(){
$("#tabtitle").tab({eventname:"mousemove",sedcss:"sed"});
})




//这里的ID对应$("#tabtitle")中的ID,LI的ID分别是尾部添加数字
  • asdfasfd

  • asdfasfd

  • asdfasfd

  • asdfasfd

  • asdfasfd


  • //这里的ID对ul中的ID,ID分别是尾部添加数字和"info"
    000000
    111111
    22222
    33333
    44444




    此文重点在说明jquery插件的制作方法,示例中代码还有要优化的地方,请见谅
    源码打包下载

    文档

    jquerytab插件制作实现代码_jquery

    jquerytab插件制作实现代码_jquery:jquery插件的基本格式: 代码如下: (function($){ $.fn.tab = function(options){//$.fn后面的tab是这个插件的函数名称。可以更具自己喜好进行修改 var defaults = { //相关属性设置 } var options = $.extend(defaults,
    推荐度:
    标签: 插件 实现 代码
    • 热门焦点

    最新推荐

    猜你喜欢

    热门推荐

    专题
    Top