tag,tag插件,可自定义tag选项卡


<script>
(function($){
$.fn.format = function(o){
var newobj = null;
if(o.indexOf("{") != -1){//判断是否有自定义参数
//获取自定义参数
o = o.split(/[{}]/)[1];//正则去除"{"和"}"
newobj = "({success:1,"+o+"})";//success = 1成功; =0失败
}else{
//默认参数
newobj = "({success:0})";
}
return eval(newobj);//以json格式返回数据
};
$.fn.Options = function(options){
return options == null ? $.fn.format(this.className) : (typeof(options) == "object" ? options : $.fn.format($(this).attr(options)));
};

$.fn.extend({
uiTag:function(options){//tag
return this.each(function(){
var name = $.fn.Options.call(this,options);//获取数组
name = $.extend({},$.fn.uiTag.defaults,name);//重置数组,把自定义函数和默认函数合并到一起
Tag(name,this);
});
});
$.fn.uiTag.defaults = {//tag默认设置
movetag: "li",//点击切换
showtag: ".stag",//显示/隐藏
addtclass:"tselected",//选项卡增加class
addsclass:"stselected",//显示/隐藏增加class
auto:true,//针对链接可点/不可点
time: 300//超时时间
};
})(jQuery);
//tag选项卡
function Tag(data,o){//tag绑定
var T = null;
$(o).find(data.movetag).bind({
click:function(){//点击tag
Tag.TagEnforce(data,this,o,$(this).index());
return data.auto;
},
mouseover:function(){//鼠标移上去tag
var index = $(this).index();
var $this = this;
T = setTimeout(function(){
Tag.TagEnforce(data,$this,o,index);
},data.time);
},
mouseout:function(){//鼠标移开tag
clearTimeout(T);
}
});
}
Tag.TagEnforce = function(data,obj,o,n){//tag处理
$(obj).addClass(data.addtclass).siblings().removeClass(data.addtclass);
$(o).siblings().find(data.showtag).eq(n).addClass(data.addsclass).siblings().removeClass(data.addsclass);
};
</script>
/*
html示例:
<div>
<div class="tag {movetag:'span',showtag:'.tnav',addsclass:'selected',auto:false}">
<span class="tselected"><a href="http://www.guanxin.com">111</a></span><span>222</span><span>333</span><span>444</span><span>555</span>
</div>
<div class="showtag">
<div class="tnav selected">1111111</div>
<div class="tnav">2222222</div>
<div class="tnav">3333333</div>
<div class="tnav">4444444</div>
<div class="tnav">5555555</div>
</div>
</div>
<script>
$("tag").uiTag();
</script>
*/
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值