KandyTabs^{4.0 公测！} 选项卡插件

又一个 JQuery Tab 选项卡插件，但不是老外的插件！不仅仅只是一个Tab选项卡插件！

作者：吉光片羽　主页：www.jgpy.cn　Email：kandytang[at]msn.com　QQ：121885959　腾讯微博：t.qq.com/kandyt

前端交流群：204694749　承接JQuery特效/插件定制、博客主题设计定制、企业建站

插件简介

<div class="tab">
  <div class="tabtitle">
    <span>Tab 1</span>
    <span>Tab 2</span>
    <span>百度</span>
    <span>谷歌</span>
  </div>
  <div class="tabboy">
    <div class="tabcont">
      Tab 1 的内容
    </div>
    <div class="tabcont">
      Tab 2 的内容
    </div>
    <div class="tabcont">
      百度一下你就知道
      www.baidu.com
    </div>
    <div class="tabcont">
      谷歌不一定打得开哦
    </div>
  </div>
</div>

如何使用

<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="kandytabs.js"></script>

<script type="text/javascript">
  $(function(){
    $("dl").KandyTabs();
  })
</script>

代码结构

<dl>
  <dt>Tab 1</dt>
  <dd>Tab 1 的内容。</dd>
  <dt>Tab 2</dt>
  <dd>Tab 2 的内容。</dd>
</dl>

<div>
  <h1>Tab 1 关键词</h1>
  <div>Tab 1 的内容。</div>
  <h2>Tab 2 关键词</h2>
  <div>Tab 2 的内容。</div>
</div>

<div>
  <img src="1.jpg" />
  <img src="2.jpg" />
  <img src="3.jpg" />
  <a href="#" title="也可以是一个包含有链接的图片"><img src="4.jpg" /></a>
</div>

<dl>
  <dt>
    <span>Tab 1</span>
    <span>Tab 2</span>
  </dt>
  <dd>
    <div>
      Tab 1 的内容
    </div>
    <div>
      Tab 2 的内容
    </div>
  </dd>
</dl>

配置说明

API接口

//方法一；当选项卡为单个时，定义变量并同时赋值。
var mytab = $("#tab").KandyTabs();//例：mytab.tab(5)
//方法二；当选项卡为多个时，定义变量并同时赋值，最后通过数组来设置对应选项卡。
var tabs = $("dl").KandyTabs();//例：tabs[0].tab(1); tabs[1].play("reverse"); tabs[n].add();
//方法三；当选项卡为多个时，首先生成KandyTabs选项卡。
$(".tab").KandyTabs();
var taba = $(".tab")[0].KandyTabs;//例：taba.add()
var tabb = $(".tab")[1].KandyTabs;//例：tabb.del()
var tabc = $(".tab")[2].KandyTabs;//例：tabc.play()

默认样式

  .kandyTabs{}
.kandyTabs .tabexcept-title{}
  .kandyTabs .tabtitle{}
  .kandyTabs .tabtitle .tabbtn{}
.kandyTabs .tabtitle .tabbtn .tabdel{}
.kandyTabs .tabtitle .tabbtn kbd{}
  .kandyTabs .tabtitle .tabcur{}
.kandyTabs .tabtitle .tabscroll{}
.kandyTabs .tabtitle .tabscroll .tabadd{}
.kandyTabs .tabtitle .tabscroll .tableft{}
.kandyTabs .tabtitle .tabscroll .tabright{}
  .kandyTabs .tabbody{}
  .kandyTabs .tabbody .tabcont{}
  .kandyTabs .tabbody .tabroll{}
  .kandyTabs .tabbody .tabroll .tabcont{}
.kandyTabs .tabexcept{}
.kandyTabs .tabporcess{}
.kandyTabs .tabnav{}
.kandyTabs .tabnav em.tabprev{}
.kandyTabs .tabnav em.tabprevno{}
.kandyTabs .tabnav b.tabnow{}
.kandyTabs .tabnav i{}
.kandyTabs .tabnav b.taball{}
.kandyTabs .tabnav em.tabnext{}
.kandyTabs .tabnav em.tabnextno{}
.kandyTabs .tabctrl{}
.kandyTabs .tabctrl .tabplay{}
.kandyTabs .tabctrl .tabpause{}

里程碑

下载

意见反馈或BUG提交

精彩案例

Tab选项卡效果演示

• Intro

  这是一个最最最最最最最普通的Tab选项卡，鼠标放上去就可以切换了。

  Xhtml

  <dl id="simple">
    <dt>简介</dt>
      <dd>......</dd>
    <dt>Xhtml</dt>
      <dd>......</dd>
    <dt>CSS</dt>
      <dd>......</dd>
    <dt>参数</dt>
      <dd>......</dd>
  </dl>
  

  CSS

  整理中...

  JS

  $("#simple").KandyTabs();
  

• Intro

  这是一个渐隐渐现效果的Tab选项卡，鼠标放上去要等1秒钟才会切换。

  Xhtml

  <dl id="fade">
    <dt>简介</dt>
      <dd>......</dd>
    <dt>Xhtml</dt>
      <dd>......</dd>
    <dt>CSS</dt>
      <dd>......</dd>
    <dt>参数</dt>
      <dd>......</dd>
  </dl>
  

  CSS

  #fade .tabtitle{
    text-align:center;
  }        
  

  JS

  $("#fade").KandyTabs(
    {
      action:"fade",
      delay:1000
    }
  );
  

• Intro

  这是一个渐隐渐现后调整高度效果的Tab选项卡，鼠标放上去要等半秒钟才会切换。

  Xhtml

  <dl id="fade">
    <dt>简介</dt>
      <dd>......</dd>
    <dt>Xhtml</dt>
      <dd>......</dd>
    <dt>CSS</dt>
      <dd>......</dd>
    <dt>参数</dt>
      <dd>......</dd>
  </dl>
  

  CSS

  #fade .tabtitle{
    text-align:center;
  }        
  

  JS

  $("#slifade").KandyTabs(
    {
      action:"slifade",
      delay:500
    }
  );
  

• Intro

  这是一个滑动切换效果的Tab选项卡，需要单击切换。

  Xhtml

  <dl id="slide">
    <dt>简介</dt>
      <dd>......</dd>
    <dt>Xhtml</dt>
      <dd>......</dd>
    <dt>CSS</dt>
      <dd>......</dd>
    <dt>参数</dt>
      <dd>......</dd>
  </dl>
  

  CSS

  整理中...

  JS

  $("#slide").KandyTabs(
    {
      action:"slide",
      trigger:"click"
    }
  );
  

• Intro

  这是一个水平滚动效果的Tab选项卡，鼠标按下释放后就会马上切换。

  Xhtml

  <dl id="rollleft">
    <dt>简介</dt>
      <dd>......</dd>
    <dt>Xhtml</dt>
      <dd>......</dd>
    <dt>CSS</dt>
      <dd>......</dd>
    <dt>参数</dt>
      <dd>......</dd>
  </dl>
  

  CSS

  #rollleft .tabtitle{
    float:left;
    margin:0 2px -2px 0;
    _margin-right:-1px;
    border:none;
  }
  #rollleft .tabtitle .tabbtn{
    display:block;
    width:50px;
    margin:0 0 2px;
    background:none;
    border:1px solid #DDD;
    cursor:pointer
  }
  #rollleft .tabtitle .tabcur{
    border:1px solid #ddd;
    background:#DDD;
    margin:0 -2px 2px 0;
    width:52px;
    cursor:default;
    _position:relative
  }
  #rollleft .tabbody{
    border-width:1px 1px 1px 2px;
    float:right
  }
  #rollleft .tabcont{
    margin:0 5px;
    width:237px
  }  
  

  JS

  $("#rollleft").KandyTabs(
  {
      action:"roll",
      trigger:"mouseup",
      direct:"left"
    }
  );
  

• Intro Xhtml CSS JS

  这是一个非标准的选项卡原型，目前为未生成KandyTabs时的外观，无法切换选项卡。你可以点此生成KandyTabs选项卡，并查看原型的xhtml代码结构。

  这是一个垂直滚动效果的Tab选项卡，鼠标按下后就会马上切换。你可以试试再生成一次或

  <dl>
    <dt class="tabtitle">
      <span class="tabcur tabbtn">
      Intro</span>
      <span class="tabbtn">
      Xhtml</span>
      <span class="tabbtn">CSS</span>
      <span class="tabbtn">JS</span>
    </dt>
    <dd class="tabbody">
      <div class="tabcont">...</div>
      <div class="tabcont">...</div>
      <div class="tabcont">...</div>
      <div class="tabcont">...</div>
    </dd>
  </dl>
  

  整理中...

  $("#roll").KandyTabs(
  {
      btn:"dt>span",
      cont:"dd>div",
      action:"roll",
      current:2,
      trigger:"mousedown"
    }
  );
  

fold折叠效果演示

• Intro

  这是一个最最最最最普通的fold折叠，鼠标放在标题上后就会马上切换。

  Xhtml

  <dl id="fold-simple">
    <dt>Intro</dt>
      <dd>......</dd>
    <dt>Xhtml</dt>
      <dd>......</dd>
    <dt>CSS</dt>
      <dd>......</dd>
    <dt>JS</dt>
      <dd>......</dd>
  </dl>
  

  CSS

  整理中...

  JS

  $("#fold-simple").KandyTabs(
  {
      classes:"kandyFold",
  	type:"fold"
    }
  );
  

• Intro

  这是一个切换效果的fold折叠，鼠标放在标题上后就会马上切换。

  Xhtml

  <dl id="fold-slide">
    <dt>Intro</dt>
      <dd>......</dd>
    <dt>Xhtml</dt>
      <dd>......</dd>
    <dt>CSS</dt>
      <dd>......</dd>
    <dt>JS</dt>
      <dd>......</dd>
  </dl>
  

  CSS

  整理中...

  JS

  $("#fold-slide").KandyTabs(
  {
      classes:"kandyFold",
  	action:"slide",
  	type:"fold"
    }
  );
  

• Intro

  这是一个渐隐渐现效果的fold折叠，鼠标点击标题后就会马上切换，并用CSS隐藏当前标题。

  Xhtml

  <dl id="fold-fade">
    <dt>Intro</dt>
      <dd>......</dd>
    <dt>Xhtml</dt>
      <dd>......</dd>
    <dt>CSS</dt>
      <dd>......</dd>
    <dt>JS</dt>
      <dd>......</dd>
  </dl>
  

  CSS

  #fold-fade .tabbtn{
    cursor:pointer
  }
  #fold-fade .tabcur{
    display:none
  }
  

  JS

  $("#fold-fade").KandyTabs(
  {
      classes:"kandyFold",
      action:"fade",
      type:"fold",
      trigger:"click"
    }
  );
  

• Intro

  这是一个横向滑动效果的fold折叠，鼠标点击标题后就会马上切换。

  Xhtml

  <dl id="fold-left">
    <dt>Intro</dt>
      <dd>......</dd>
    <dt>Xhtml</dt>
      <dd>......</dd>
    <dt>CSS</dt>
      <dd>......</dd>
    <dt>JS</dt>
      <dd>......</dd>
  </dl>
  

  CSS

  整理中...
  

  JS

  $("#fold-left").KandyTabs({
      classes:"kandyFold",
      type:"fold",
      action:"fade",
      trigger:"click",
      last:800
  })
  

• Intro

  这是一个标题在右侧的横向滑动效果的fold折叠，鼠标经过标题后就会马上切换。

  Xhtml

  <dl id="fold-right">
    <dt>Intro</dt>
      <dd>......</dd>
    <dt>Xhtml</dt>
      <dd>......</dd>
    <dt>CSS</dt>
      <dd>......</dd>
    <dt>JS</dt>
      <dd>......</dd>
  </dl>
  

  CSS

  整理中...
  

  JS

  $("#fold-right").KandyTabs({
      classes:"kandyFold",
      type:"fold",
      direct:"left",
      action:"slide",
      done:function(b,c,t){
          b.each(function(i){
              $(this).insertAfter(c[i])			
          })
          c.wrapInner("<div style='padding:10px'/>")
      }
  })
  

Slide幻灯片效果演示

1. 

   第1张图

2. 

   第2张图

3. 

   第3张图

4. 

   第4张图

5. 

   第5张图

6. 

   第6张图

Loop多列循环（旋转木马）效果演示

StepTab/Guide步骤表单/向导效果演示

Scroll选项卷轴/Add&Del内容增删/API外部控制演示

• Intro

  这是一个最简单的选项超多的选项卡演示。

  Xhtml

  <dl id="scroll">
    <dt>简介</dt>
      <dd>......</dd>
    <dt>Xhtml</dt>
      <dd>......</dd>
    <dt>CSS</dt>
      <dd>......</dd>
    <dt>参数</dt>
      <dd>......</dd>
  </dl>
  

  CSS

  有点多，懒得写了……

  JS

  $("#scroll").KandyTabs(
    {
      scroll:true
    }
  );
  

  长长长标题

  是用来占位置的！

  应该超出了吧

  超出了没？

  一开始

  咋了？

  你们是

  用铅笔写JAVA的专业前端工程师！？

  看不到

  谁？

  我们的

  切！

• Intro

  这是一个渐隐渐现效果的支持增删选项的Tab选项卡，请通过点击来切换选项，注意别点着关闭按钮了！你可以通过点击选项最右侧的“+”来添加新选项。

  Xhtml

  <dl id="deladd">
    <dt>简介</dt>
      <dd>......</dd>
    <dt>Xhtml</dt>
      <dd>......</dd>
    <dt>CSS</dt>
      <dd>......</dd>
    <dt>参数</dt>
      <dd>......</dd>
  </dl>
  

  CSS

  真的懒得写了……

  JS

  $("#deladd").KandyTabs(
    {
      action:"fade",
      trigger:"click",
      add:true,
      del:true,
      scroll:true,
      nav:true
    }
  );
  

• Intro

  这是一个被悄悄隐藏的H4标题！

  这是一个支持外部控制的选项卡。

  Xhtml

  <dl id="fade">
    <dt>简介</dt>
      <dd>......</dd>
    <dt>Xhtml</dt>
      <dd>......</dd>
    <dt>CSS</dt>
      <dd>......</dd>
    <dt>参数</dt>
      <dd>......</dd>
  </dl>
  

  CSS

  我就是不写……

  JS

  var tab
  $(function(){
    tab = $("#api").KandyTabs(
      {
        action:"slide"
      }
    );
  })
  

  改成fade切换 | 查看第4个选项 | 自动切换 | 停止切换 | 新增选项 | 新增选项并同时激活 | 新增自定义选项 | 新增自定义内容 | 新增iframe内容 | 新增ajax页内内容 | 删除最后一个选项 | 删除第二个选项

Full Background大背景/全屏幻灯效果演示

调整尺寸：缩窄 加宽 | 变矮 增高