轻松实现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 相关文章推荐
Javascript 面向对象特性
Dec 28 Javascript
Javascript公共脚本库系列(一): 弹出层脚本
Feb 24 Javascript
用JQuery实现表格隔行变色和突出显示当前行的代码
Feb 10 Javascript
基于jquery的放大镜效果
May 30 Javascript
AngularJS过滤器filter用法分析
Dec 11 Javascript
使用JavaScript中的lodash编写双色球效果
Jun 24 Javascript
微信小程序实现漂亮的弹窗效果
May 26 Javascript
Vue 实现列表动态添加和删除的两种方法小结
Sep 07 Javascript
vue安装遇到的5个报错及解决方法
Jun 12 Javascript
微信小程序-API接口安全详解
Jul 16 Javascript
详解element-ui表格中勾选checkbox,高亮当前行
Sep 02 Javascript
vuex管理状态仓库使用详解
Jul 29 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出错界面
2006/10/09 PHP
在PHP中输出JS语句以及乱码问题的解决方案
2019/02/13 PHP
PHP 命名空间和自动加载原理与用法实例分析
2020/04/29 PHP
[原创]js获取数组任意个不重复的随机数组元素
2010/03/15 Javascript
JS继承--原型链继承和类式继承
2013/04/08 Javascript
jQuery实现等比例缩放大图片让大图片自适应页面布局
2013/10/16 Javascript
微信JS接口汇总及使用详解
2015/01/09 Javascript
jQuery源码分析之jQuery.fn.each与jQuery.each用法
2015/01/23 Javascript
Bootstrap模态框调用功能实现方法
2016/09/19 Javascript
关于iframe跨域POST提交的方法示例
2017/01/15 Javascript
使用webpack-dev-server处理跨域请求的方法
2018/04/18 Javascript
AngularJS实现的base64编码与解码功能示例
2018/05/17 Javascript
在vue项目中使用Jquery-contextmenu插件的步骤讲解
2019/01/27 jQuery
Vue3.0数据响应式原理详解
2019/10/09 Javascript
浅谈TypeScript 用 Webpack/ts-node 运行的配置记录
2019/10/11 Javascript
Python脚本实现集群检测和管理功能
2015/03/06 Python
详解Python的单元测试
2015/04/28 Python
使用Python绘制图表大全总结
2017/02/11 Python
Python与R语言的简要对比
2017/11/14 Python
python tensorflow学习之识别单张图片的实现的示例
2018/02/09 Python
对Python信号处理模块signal详解
2019/01/09 Python
PyTorch基本数据类型(一)
2019/05/22 Python
基于python实现的百度新歌榜、热歌榜下载器(附代码)
2019/08/05 Python
解决pycharm导入本地py文件时,模块下方出现红色波浪线的问题
2020/06/01 Python
基于python实现音乐播放器代码实例
2020/07/01 Python
几款主流好用的富文本编辑器(所见即所得常用编辑器)介绍
2021/03/17 Javascript
会走动的图形html5时钟示例
2014/04/27 HTML / CSS
New Balance英国官方网站:始于1906年,百年慢跑品牌
2016/12/07 全球购物
Chantelle仙黛尔内衣美国官网:法国第一品牌内衣
2018/07/26 全球购物
英国标准协会商店:BSI Shop
2019/02/25 全球购物
乌克兰在线电子产品商店:MTA
2019/11/14 全球购物
加拿大大码女装购物网站:Penningtons
2020/12/26 全球购物
数学专业推荐信范文
2013/11/21 职场文书
决定成败的关键——创业计划书
2014/01/24 职场文书
关于诚信的活动方案
2014/08/18 职场文书
如何使用SQL Server语句创建表
2022/04/12 SQL Server