轻松实现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打造支持汉字,拼音,英文快速定位查询的超级select插件
Jun 18 Javascript
textarea中的手动换行处理的jquery代码
Feb 26 Javascript
IE中JS跳转丢失referrer问题的2个解决方法
Jul 18 Javascript
JQuery select(下拉框)操作方法汇总
Apr 15 Javascript
JavaScript判断undefined类型的正确方法
Jun 30 Javascript
谈谈我对JavaScript中typeof和instanceof的深入理解
Dec 25 Javascript
底部悬浮通栏可以关闭广告位的实现方法
Jun 01 Javascript
JavaScript学习笔记之函数记忆
Sep 06 Javascript
Web开发使用Angular实现用户密码强度判别的方法
Sep 27 Javascript
微信小程序云开发获取文件夹下所有文件(推荐)
Nov 14 Javascript
微信小程序中网络请求缓存的解决方法
Dec 29 Javascript
ant design pro中可控的筛选和排序实例
Nov 17 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使用curl检测网页是否被百度收录的示例分享
2014/01/31 PHP
PHP中数组的分组排序实例
2014/06/01 PHP
PHP框架Laravel的小技巧两则
2015/02/10 PHP
PHP爬虫之百万级别知乎用户数据爬取与分析
2016/01/22 PHP
Laravel中10个有用的用法小结
2019/05/06 PHP
JavaScript高级程序设计(第3版)学习笔记13 ECMAScript5新特性
2012/10/11 Javascript
javascript object array方法使用详解
2012/12/03 Javascript
原始的js代码和jquery对比体会
2013/09/10 Javascript
location.href用法总结(最主要的)
2013/12/27 Javascript
js图片闪动特效可以控制间隔时间如几分钟闪动一下
2014/08/12 Javascript
javascript实现鼠标放上后下边对应内容变换的效果
2015/08/06 Javascript
JavaScript数据存储 Cookie篇
2016/07/02 Javascript
JavaScript使用forEach()与jQuery使用each遍历数组时return false 的区别
2016/08/26 Javascript
详解Vue.js动态绑定class
2016/12/20 Javascript
js操作浏览器的参数方法
2017/01/21 Javascript
微信小程序request请求后台接口php的实例详解
2017/09/20 Javascript
vue2.0实现前端星星评分功能组件实例代码
2018/02/12 Javascript
nodejs微信扫码支付功能实现
2018/02/17 NodeJs
基于vue-element组件实现音乐播放器功能
2018/05/06 Javascript
jQuery+CSS实现的标签页效果示例【测试可用】
2018/08/14 jQuery
微信小程序实现同一页面取值的方法分析
2019/04/30 Javascript
ElementUI 修改默认样式的几种办法(小结)
2020/07/29 Javascript
ant design vue导航菜单与路由配置操作
2020/10/28 Javascript
[00:31]DOTA2上海特级锦标赛 Fnatic战队宣传片
2016/03/04 DOTA
python的Template使用指南
2014/09/11 Python
Django model 中设置联合约束和联合索引的方法
2019/08/06 Python
Python FtpLib模块应用操作详解
2019/12/12 Python
如何基于Python实现word文档重新排版
2020/09/29 Python
教你如何用python操作摄像头以及对视频流的处理
2020/10/12 Python
用canvas做一个DVD待机动画的实现代码
2019/04/12 HTML / CSS
公共事业管理本科生求职信
2013/10/07 职场文书
2014购房个人委托书范本
2014/10/12 职场文书
慰问信格式
2015/02/14 职场文书
辞职信如何写
2015/02/27 职场文书
学术会议通知
2015/04/15 职场文书
mysql 获取相邻数据项
2022/05/11 MySQL