轻松实现jquery选项卡切换效果


Posted in Javascript onOctober 10, 2016

很早之想就学习jquery的插件写法,一直拖到现在,今天趁着没什么工作忙,搜索些资料学习下,写了个比较简单的选项卡效果。

刚开始有看到一个很通俗易通的例子:alert对话框

jquery.alertMsg.js

/**
 * [description]
 * @param {[type]} $ [description]
 * @return {[type]} [description]
 */
(function($){

 $.fn.alertMsg = function(options) {

 var defaults = {
  mouseEvent: 'clcik',
  msg: 'hello world'
 }
 var options = $.extend(defaults, options);
 var $this = $(this);

 $this.on(options.mouseEvent, function(e){
  alert(options.msg);
 })
 }

})(jQuery)

调用方式:

<span id="test">test</span>

$(function(){
 $('#test').alertMsg({
  mouseEvent : "click", 
  msg : "第一次写插件!" 
 });
});

jQuery插件结构

(function($){
 // tabs 自定义的插件名称
 $.fn.tabs = function(options) {

  // 设置默认参数
  var defaults = {
   activeClass: 'active'
   ... 
  }
  // 对象扩展
  var options = $.extend(defaults, options);

  return $(this).each(function(){
   // 编写相应实现代码
  })
 }

})(jQuery)

选项卡实现:

1、HTML结构

<div id="tab">
 <ul>
  <li>选项1</li>
  <li>选项2</li>
  <li>选项3</li>
  <li>选项4</li>
 </ul>
 <div id="tabCon" class="tab-con">
  <div>1的内容</div>
  <div>2的内容</div>
  <div>3的内容</div>
  <div>4的内容</div>
 </div>
</div>

2、jquery.tabs.js

(function($){

 $.fn.tabs = function(options) {

   var defaults = {
    Event: 'click',
    activeClass: 'active'
   }
   var options = $.extend(defaults, options);

   return $(this).each(function(){

    var $thisTab = $(this).find('ul');
    var $tabCon = $thisTab.siblings('div');

    $tabCon.find('div').each(function(){
     $(this).hide();
    });

    $thisTab.find('li:first').addClass(options.activeClass);
    $tabCon.find('div:first').show();

    $thisTab.find('li').each(function(index){

     $(this).on(options.Event, function(){

      $(this).siblings().removeClass(options.activeClass);
      $(this).addClass(options.activeClass);
      $tabCon.find('div').eq(index).show().siblings().hide();

     });
     
    });
   });
  }
 
})(jQuery)

3、调用

$('#tab').tabs({
  activeClass: 'active'
 });

小结:对jQuery插件的初识,感觉应该还要继续优化和扩展,继续学习!

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

精彩专题分享:javascript选项卡操作方法汇总 jQuery选项卡操作方法汇总

Javascript 相关文章推荐
拖拉表格的JS函数
Nov 20 Javascript
IE8对JS通过属性和数组遍历解析不一样的地方探讨
May 06 Javascript
jQuery的css() 方法使用指南
May 03 Javascript
BootStrap扔进Django里的方法详解
May 13 Javascript
深入浅析JavaScript中的Function类型
Jul 09 Javascript
纯css下拉菜单 无需js
Aug 15 Javascript
jQuery插件FusionCharts实现的Marimekko图效果示例【附demo源码】
Mar 24 jQuery
详解Node.js中exports和module.exports的区别
Apr 19 Javascript
Angular 表单控件示例代码
Jun 26 Javascript
node中使用es5/6以及支持性与性能对比
Aug 11 Javascript
vue2.0 实现页面导航提示引导的方法
Mar 13 Javascript
JavaScript实现的DOM树遍历方法详解【二叉DOM树、多叉DOM树】
May 07 Javascript
为jQuery-easyui的tab组件添加右键菜单功能的简单实例
Oct 10 #Javascript
Javascript生成带参数的二维码示例
Oct 10 #Javascript
详细讲解JavaScript中的this绑定
Oct 10 #Javascript
jQuery EasyUI 右键菜单--关闭标签/选项卡的简单实例
Oct 10 #Javascript
jQuery EasyUI右键菜单实现关闭标签/选项卡
Oct 10 #Javascript
JavaScript 判断一个对象{}是否为空对象的简单方法
Oct 09 #Javascript
细数JavaScript 一个等号,两个等号,三个等号的区别
Oct 09 #Javascript
You might like
php防注
2007/01/15 PHP
The specified CGI application misbehaved by not returning a complete set of HTTP headers
2011/03/31 PHP
thinkphp3查询mssql数据库乱码解决方法分享
2014/02/11 PHP
Smarty最简单实现列表奇偶变色的方法
2015/07/01 PHP
JavaScript constructor和instanceof,JSOO中的一对欢喜冤家
2009/05/25 Javascript
由JavaScript中call()方法引发的对面向对象继承机制call的思考
2011/09/12 Javascript
一个JS的日期格式化算法示例
2013/07/31 Javascript
分享经典的JavaScript开发技巧
2015/11/21 Javascript
理解javascript定时器中的setTimeout与setInterval
2016/02/23 Javascript
纯javaScript、jQuery实现个性化图片轮播【推荐】
2017/01/08 Javascript
JavaScript常用正则函数用法示例
2017/01/23 Javascript
Nodejs多站点切换Htpps协议详解及简单实例
2017/02/23 NodeJs
又一款MVVM组件 构建自己的Vue组件(2)
2017/03/13 Javascript
微信小程序实现锚点定位楼层跳跃的实例
2017/05/18 Javascript
详解如何去除vue项目中的#——History模式
2017/10/13 Javascript
微信小程序动态添加和删除组件的现实
2020/02/28 Javascript
Element Breadcrumb 面包屑的使用方法
2020/07/26 Javascript
Vue使用轮询定时发送请求代码
2020/08/10 Javascript
[03:52]显微镜下的DOTA2第三期——英雄在无聊的时候干什么
2014/06/20 DOTA
Python中使用MELIAE分析程序内存占用实例
2015/02/18 Python
python 剪切移动文件的实现代码
2018/08/02 Python
Python3自动签到 定时任务 判断节假日的实例
2018/11/13 Python
详解python做UI界面的方法
2019/02/27 Python
python取余运算符知识点详解
2019/06/27 Python
Python pytesseract验证码识别库用法解析
2020/06/29 Python
通过代码实例了解Python异常本质
2020/09/16 Python
Python为何不支持switch语句原理详解
2020/10/21 Python
Lancome兰蔻官方旗舰店:来自法国的世界知名美妆品牌
2018/06/14 全球购物
北大自主招生自荐信
2013/10/19 职场文书
工商干部先进事迹
2014/05/14 职场文书
银行贷款委托书范本
2014/10/11 职场文书
见习报告格式要求
2014/11/04 职场文书
2015年发展党员工作总结报告
2015/03/31 职场文书
用CSS3画一个爱心
2021/04/27 HTML / CSS
MySql开发之自动同步表结构
2021/05/28 MySQL
DE1103使用报告
2022/04/05 无线电