jQuery插件学习之选项卡Tab

在网站开发中经常会用到选项卡功能,为了节省一下写代码时间,封装了一下tab插件,方便调用。

来看一下效果:

  • tab-1
  • tab-2
  • tab-3

tabs-1-panel

tabs-2-panel

tabs-3-panel

MyUI-tabs

创建选项卡组件

使用方法: html结构

   <div id="tabs">
            <ul>
                <li><a href="#tabs-1">tab-1</a></li>
                <li><a href="#tabs-2">tab-2</a></li>
                <li><a href="#tabs-3">tab-3</a></li>
            </ul>
            <div id="tabs-1">tabs-1-panel</div>
            <div id="tabs-2">tabs-2-panel</div>
            <div id="tabs-3">tabs-3-panel</div>
 </div>

js调用

  $(‘#tab‘).tabs();

相关参数说明:

初始化参数
参数 默认值 参数说明
active null 设置被选中的选项卡的索引,默认值为null,例如设置选中第一个选项卡则设置为0
event click 选项卡的切换事件,默认为点击事件,可以设置mouseover
添加选项卡参数
参数 默认值 参数说明
title 选项卡显示的文本,默认为空
href 选项卡链接,如果为静态数据则填入对应的字符串(#str),远程数据则为对应的url
content 选项卡为静态数据时的内容,动态数据则无需填写
iconCls true 选项卡关闭按钮,默认为显示true,不显示则为false

Demo:

例子1: 静态数据:

<div id="tabs">
            <ul>
                <li><a href="#tabs-1">tab-1</a></li>
                <li><a href="#tabs-2">tab-2</a></li>
                <li><a href="#tabs-3">tab-3</a></li>
            </ul>
            <div id="tabs-1">tabs-1-panel</div>
            <div id="tabs-2">tabs-2-panel</div>
            <div id="tabs-3">tabs-3-panel</div>
 </div>

js调用:

  $(‘#tabs‘).tabs();

例子2: 通过远程数据加载页面,则动态创建panel,

<div id="tabs">
            <ul>
                <li><a href="#tabs-1">tab-1</a></li>
                <li><a href="index.jsp">tab-2</a></li>
                <li><a href="index.html">tab-3</a></li>
            </ul>
            <div id="tabs-1">tabs-1-panel</div>
 </div>

js调用:

  $(‘#tabs‘).tabs();

例子3: 传入参数,设置选项卡切换事件为mouseover

<div id="tabs">
            <ul>
                <li><a href="#tabs-1">tab-1</a></li>
                <li><a href="index.jsp">tab-2</a></li>
                <li><a href="index.html">tab-3</a></li>
            </ul>
            <div id="tabs-1">tabs-1-panel</div>
 </div>

js调用:

  $(‘#tabs‘).tabs({event:‘mouseover‘});

例子4: 添加选项卡:

<input type="button" value="添加选项卡" onclick="addTab()">

<div id="tabs">
            <ul>
                <li><a href="#tabs-1">tab-1</a></li>
                <li><a href="index.jsp">tab-2</a></li>
                <li><a href="index.html">tab-3</a></li>
            </ul>
            <div id="tabs-1">tabs-1-panel</div>
 </div>

js调用:

  $(‘#tabs‘).tabs();
  var tabCount =4;
  function addTab(){
      tab.tabs(‘add‘,{
          title:‘tab-‘+tabCount+‘‘,
          href:‘#tab-‘+tabCount+‘‘,
          content:‘Tab----‘+tabCount+‘‘,
          iconCls:true
      });
      tabCount++;
  }

总结:

通过不同的Id调用,就可以创建不同的tab结构,样式则通过id来自定义不同的样式即可。

小弟不才.欢迎各位大神指教....

Demo下载地址: MyUI-tabs

时间: 2024-10-16 02:58:58

jQuery插件学习之选项卡Tab的相关文章

jQuery插件学习笔记

最近在研究jQuery插件,插件编写的目的是给已经有的一系列方法或函数做一个封装,以便在其他地方重复使用,方便后期维护. JQuery除了提供一个简单.有效的方式进行管理元素以及脚本,它还还提供了例外一种机制:即给核心模块增加自己的方法和额外的功能.通过这种机制,Jquery允许我们自己创建属于我们自己的插件,提高我们在开发过程中的效率. 虽然在jQuery命名空间中,我们禁止使用了大量的javaScript函数名和变量名.但是仍然不可避免某些函数或变量名将于其他jQuery插件冲突,因此我们习

JQUERY插件学习之jQuery UI

jQuery UI:http://jqueryui.com/ jQuery UI介绍: jQuery UI 是以 jQuery 为基础的开源 JavaScript 网页用户界面代码库.包含底层用户交互.动画.特效和可更换主题的可视控件.我们可以直接用它来构建具有很好交互性的web应用程序.所有插件测试能兼容 IE 6.0+, Firefox 3+, Safari 3.1+, Opera 9.6+, 和 Google Chrome. 组件构成 jQuery UI 主要分为3个部分:交互.微件和效果

Jquery 插件学习笔记

Jquery 插件 1表单验证插件--validate 该插件自带包含必填.数字.URL在内容的验证规则,即时显示异常信息,此外,还允许自定义验证规则,插件调用方法如下: $(form).validate({options}) 其中form参数表示表单元素名称,options参数表示调用方法时的配置对象,所有的验证规则和异常信息显示的位置都在该对象中进行设置. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN&quo

jQuery插件学习(一)

由于项目开发需要,经常会用到一些jquery插件,但网上已有的插件常常又不能100%满足业务需求,所以就想自己能看懂插件的代码,进行一些功能上的改动和补充,或者能自己自定义插件就更好了.所以这段时间会对插件进行一些研究,现将学习的一些重要内容记录下来,供那些像我一样的初学者借鉴下.嘻嘻. (一)jQuery为开发插件提拱了两个方法 jQuery.extend(); 为扩展jQuery类本身.为类添加新的方法: jQuery.fn.extend();给jQuery对象添加方法: 它们之间的区别是:

jquery插件学习相关(1)

jQuery插件机制 jQuery提供了两个用于扩展jQuery功能的方法,即jQuery.fn.extend()和jQuery.extend()方法 jQuery.fn.extend()用于封装对象方法插件 jQuery.extend()用于封装全局函数的插件和选择器插件,同时也可扩展已有的Object对象. jQuery.extend() jQuery.extend(target,obj1...objN) 常用于设置插件方法的一系列默认参数 function foo(option){ opt

jquery插件 - 学习笔记 (插件参数及函数的调用)

今天研究的是jquery插件的基本写法: 比如我打算写一个名为 ImageZoom 的插件 前台调用: <script src="ImageZoom.js"></script>$.ImageZoom({ imageSelector: ".imgBox img", //图片选择器 wrapSelector: ".list-images", //层选择器 allowCustomeZoom: true, //允许手动缩放 spe

jQuery插件学习基础

1.给jQuery添加全局的函数: $.zgz={  fn1:function(){ alert('我是刚设置的第一个全局函数') },fn2:function(){ alert('我是刚设置的第二个全局函数') } } $(function(){ $.zgz.fn1(); $.zgz.fn2(); }) 2.给jQuery添加拓展函数方法一: $.fn.zgz=function() { alert(this.length) } $(function(){ $('oDiv').zgz(); })

jQuery 插件分享-非常优秀的tab插件tabulous- 学徒帮

干货jquery插件分享之tab. tab 选项卡切换,在日常开发中也是一种比较常见的呈现控件,今天这个tab控件效果还是蛮喜欢的,推荐给大家有用到的场景可以试试: tabulous.js A jQuery tabs module for todays web! 不过这个插件要IE10及以上才能支持,^-^!! 演示图片:   使用方法: 1. head中引入脚本及样式 <link href='tabulous.css' rel='stylesheet' type='text/css'> &l

Jquery 插件初学习

参考文章:插件开发精品教程,让你的jQuery提升一个台阶 刚刚学了一下jquery的插件插件开发,写个demo记录.练习一下.毕竟,输出才是最好的学习. 这个也不过是最基础的一个插件写法,只是,自己觉得当学习一样东西的时候,学习一些基础,在以后使用到的时候,再去根据实际情况好好的专研,提升自己的能力.这个也只是个人的一个学习方法,有更好的欢迎推荐哈. 所以,下面的这个jquery的插件写法,真心是基础到不行不行的...(*^__^*) css部分: #my_alert{line-height: