开发jquery tab 插件
开发最简单的效果- -,基本构架
html,可以换更有意义的结构,这里demo,就简单写,不考虑SEO
<div id="tab-hd">
<div class="tab-li action">1</div>
<div class="tab-li">2</div>
</div>
<div id="tab-body">
<div class="tab-con-li">1111</div>
<div class="tab-con-li">2222</div>
</div>
jq
$.fn.mtab = function (option){
var defaultOption = {
"tabBindElement":"children",
"tabBindElementEvent":"click",
"actionClass":"",
"bodyId":"null",
"animate":"none"
};
if(option){option = $.extend(defaultOption,option);} this.each(function (){
var $this = $(this);
toTab($this);
}); function toTab(_this){
var children = _this.children();
var bodyChildren = $(option.bodyId).children();
bodyChildren.eq(0).show().siblings().hide(); children.on(option.tabBindElementEvent,function(){
var $this = $(this);
var index = $this.index();
$this.addClass(option.actionClass).siblings().removeClass(option.actionClass);
bodyChildren.eq(index).show().siblings().hide();
return false;
})
}
}; $("#tab-hd").mtab({
"tabBindElement":"children", //children,class,element
"tabBindElementEvent":"click",//click,mouseover
"actionClass":"action",
"bodyId":"#tab-body",
"animate":"none"
});
。。。
一下这一款是竖着的tab切换
http://js.itivy.com/jiaoben1584/index.html
开发jquery tab 插件的更多相关文章
- 20 个最棒的 jQuery Tab 插件
jQuery Tab 常用来做网页上的选项设置界面和导航,本文向你推荐最棒的 20 个 jQuery Tab 插件.Enjoy !! 1. Slider Tabs SliderTabs 是一个可定制的 ...
- 给大家分享一个jQuery TAB插件演示
jquery tab选项卡插件示例页面代码,使用jquery.tabs.js轻量级的tab选项卡插件来实现,并支持鼠标滑过.点击.自动切换.数据回调等功能,有的是点击切换,有的是鼠标滑过切换,自带了多 ...
- jquery tab 插件
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- 移动开发必备!15款jQuery Mobile插件
移动互联网的发展,来自PC端的网页并不能完全自适应移动端页面需求,使得响应式设计体验产生并成为潮流,也正是这样一种需求,促成了jQuery Mobile的流行.jQuery Mobile这样一款基于j ...
- 教你开发jQuery插件(转)
教你开发jQuery插件(转) 阅读目录 基本方法 支持链式调用 让插件接收参数 面向对象的插件开发 关于命名空间 关于变量定义及命名 压缩的好处 工具 GitHub Service Hook 原文: ...
- 用jquery编写的tab插件
用jquery编写的tab插件 源码 $.fn.ss_tab = function (options) { var box = $(this); var btns = $(this).find(&qu ...
- 我利用网上代码开发的JQuery图片插件
我利用网上代码开发的JQuery图片插件 代码如下 (function($){ $.fn.FocusPic = function(options){ var defaults = { interval ...
- [转]jquery开发自定义的插件总结
本文转自:http://www.cnblogs.com/Jimmy009/archive/2013/01/17/jquery%E6%8F%92%E4%BB%B6.html 前几天在玩jquery,今天 ...
- 自己动手开发jQuery插件
因为工作需要,所以这几天琢磨了一下关于jQuery插件开发的问题,经过一天鏖战,终于完成自己动手做的第一个jQuery插件,对于俺这种见了css就蛋疼菊紧的人来说,一天时间8小时,保守估计有5个小时在 ...
随机推荐
- JAVA并发的性能调整
1.互斥技术 synchronized Lock Atomic 性能比较Atomic > Lock > synchronized,当然这不是绝对的.当线程数比较少时,synchroni ...
- c# 6.0新特性(二)
写在前面 上篇文章介绍了c#6.0的using static,Auto Property Initializers,Index Initializers新的特性,这篇文章将把剩下的几个学习一下. 原文 ...
- asp.net 学习
1.维护数据库的完整性.一致性.你喜欢用触发器还是自写业务逻辑?为什么? 答:尽可能用约束(包括CHECK.主键.唯一键.外键.非空字段)实现,这种方式的效率最好:其次用触发器,这种方式可以保证无论何 ...
- 小结-Splay
参照陈竞潇学长的模板写的BZOJ 3188: #include<cstdio> #include<cstring> #include<algorithm> #def ...
- SSH配置文件和SSM配置文件的写法
一.SSH配置文件的写法(XML版本) <util:properties id="jdbc" location="classpath:db.properties&q ...
- UOJ150 运输计划
运输计划(transport.cpp/c/pas)[问题描述]公元 2044 年,人类进入了宇宙纪元.L 国有 n 个星球,还有 n-1 条 双向 航道,每条航道建立在两个星球之间,这 n-1 条航道 ...
- java获取每个月的最后一天
package timeUtil; import java.text.SimpleDateFormat; import java.util.Calendar; public class LastDay ...
- 【转】KMP算法
转载请注明来源,并包含相关链接.http://www.cnblogs.com/yjiyjige/p/3263858.html 网上有很多讲解KMP算法的博客,我就不浪费时间再写一份了.直接推荐一个当初 ...
- User表格式
"_id":基本是700多 "name":"xx01" "pwd":"123"
- Effective Java之避免创建不必要的对象
Effective Java中有很多值得注意的技巧,今天我刚开始看这本书,看到这一章的时候,我发现自己以前并没有理解什么是不必要的对象,所以拿出来跟大家探讨一下,避免以后犯不必要的错误! 首先书中对不 ...