轻松实现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 相关文章推荐
jQuery 1.0.4 - New Wave Javascript(js源文件)
Jan 15 Javascript
js函数内变量的作用域分析
Jan 12 Javascript
JavaScript通过function定义对象并给对象添加toString()方法实例分析
Mar 23 Javascript
javascript执行环境及作用域详解
May 05 Javascript
详解Node.js如何开发命令行工具
Aug 14 Javascript
Vue.js实例方法之生命周期详解
Jul 03 Javascript
js精确的加减乘除实例
Nov 14 Javascript
angular1配合gulp和bower的使用教程
Jan 19 Javascript
原生js实现拖拽功能基本思路详解
Apr 18 Javascript
浅谈node.js 命令行工具(cli)
May 10 Javascript
mpvue中使用flyjs全局拦截的实现代码
Sep 13 Javascript
Vue开发Html5微信公众号的步骤
Apr 11 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判断数组是否为空的常用方法(五种方法)
2017/02/08 PHP
为Yahoo! UI Extensions Grid增加内置的可编辑器
2007/03/10 Javascript
JavaScript中的View-Model使用介绍
2011/08/11 Javascript
js键盘事件的keyCode
2014/07/29 Javascript
JavaScript中使用自然对数ln的方法
2015/06/14 Javascript
JQuery和HTML5 Canvas实现弹幕效果
2017/01/04 Javascript
JavaScript实现二分查找实例代码
2017/02/22 Javascript
jQuery插件FusionCharts绘制的3D饼状图效果实例【附demo源码下载】
2017/03/03 Javascript
Avalonjs双向数据绑定与监听的实例代码
2017/06/23 Javascript
es7学习教程之fetch解决异步嵌套问题的方法示例
2017/07/21 Javascript
vue中的mvvm模式讲解
2019/01/31 Javascript
详解微信小程序胶囊按钮返回|首页自定义导航栏功能
2019/06/14 Javascript
JavaScript实现的滚动公告特效【基于jQuery】
2019/07/10 jQuery
nodejs读取图片返回给浏览器显示
2019/07/25 NodeJs
[50:17]Newbee vs Serenity 2018国际邀请赛小组赛BO2 第二场 8.17
2018/08/18 DOTA
python实现网页链接提取的方法分享
2014/02/25 Python
使用Python制作获取网站目录的图形化程序
2015/05/04 Python
PYTHON 中使用 GLOBAL引发的一系列问题
2016/10/12 Python
Python set常用操作函数集锦
2017/11/15 Python
Python3编码问题 Unicode utf-8 bytes互转方法
2018/10/26 Python
Python 分享10个PyCharm技巧
2019/07/13 Python
Pytorch卷积层手动初始化权值的实例
2019/08/17 Python
解决pyqt5异常退出无提示信息的问题
2020/04/08 Python
matplotlib 曲线图 和 折线图 plt.plot()实例
2020/04/17 Python
python画图时设置分辨率和画布大小的实现(plt.figure())
2021/01/08 Python
天猫国际进口超市直营:官方直采,一站购齐
2017/12/11 全球购物
size?法国官网:英国伦敦的球鞋精品店
2020/03/15 全球购物
怎样自定义一个异常类
2016/09/27 面试题
生物科学专业个人求职信范文
2013/12/05 职场文书
十八大报告观后感
2014/01/28 职场文书
务虚会发言材料
2014/12/25 职场文书
房地产工程部经理岗位职责
2015/04/09 职场文书
值班管理制度范本
2015/08/06 职场文书
企业开发CSS命名BEM代码规范实践
2022/02/12 HTML / CSS
MySQL 主从复制数据不一致的解决方法
2022/03/18 MySQL
Nginx安装配置详解
2022/06/25 Servers