轻松实现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
jquery跨域请求示例分享(jquery发送ajax请求)
Mar 25 Javascript
jQuery获取动态生成的元素示例
Jun 15 Javascript
jQuery实现带滚动线条导航效果的方法
Jan 30 Javascript
跟我学习javascript的最新标准ES6
Nov 20 Javascript
Angular2 http jsonp的实例详解
Aug 31 Javascript
基于react组件之间的参数传递(详解)
Sep 05 Javascript
js 毫秒转天时分秒的实例
Nov 17 Javascript
JS实现将链接生成二维码并转为图片的方法
Mar 17 Javascript
Node.JS发送http请求批量检查文件中的网页地址、服务是否有效可用
Nov 20 Javascript
Nuxt页面级缓存的实现
Mar 09 Javascript
vue使用svg文件补充-svg放大缩小操作(使用d3.js)
Sep 22 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使用数组填充下拉列表框的方法
2015/03/31 PHP
PHP代码实现爬虫记录――超管用
2015/07/31 PHP
实例讲解YII2中多表关联的使用方法
2017/07/21 PHP
将HTMLCollection/NodeList/伪数组转换成数组的实现方法
2011/06/20 Javascript
JavaScript中的noscript元素属性位置及作用介绍
2013/04/11 Javascript
jQuery中toggleClass()方法用法实例
2015/01/05 Javascript
JavaScript页面模板库handlebars的简单用法
2015/03/02 Javascript
JavaScript中的small()方法使用详解
2015/06/08 Javascript
javascript获取重复次数最多的字符
2015/07/08 Javascript
requireJS使用指南
2016/04/27 Javascript
JavaScript学习笔记整理_简单实现枚举类型,扑克牌应用
2016/09/19 Javascript
微信小程序页面传值实例分析
2017/04/19 Javascript
JS 60秒后重新发送验证码的实例讲解
2017/07/26 Javascript
seajs中模块依赖的加载处理实例分析
2017/10/10 Javascript
javascript自定义事件功能与用法实例分析
2017/11/08 Javascript
JS实现获取毫秒值及转换成年月日时分秒的方法
2018/08/15 Javascript
js实现类似iphone的网页滑屏解锁功能示例【附源码下载】
2019/06/10 Javascript
node 版本切换的实现
2020/02/02 Javascript
Vue + Node.js + MongoDB图片上传组件实现图片预览和删除功能详解
2020/04/29 Javascript
vue中移动端调取本地的复制的文本方式
2020/07/18 Javascript
python线程锁(thread)学习示例
2013/12/04 Python
小白如何入门Python? 制作一个网站为例
2018/03/06 Python
Python使用__new__()方法为对象分配内存及返回对象的引用示例
2019/09/20 Python
python 通过手机号识别出对应的微信性别(实例代码)
2019/12/22 Python
Python 通过监听端口实现唯一脚本运行方式
2020/05/05 Python
Django中F函数的使用示例代码详解
2020/07/06 Python
python之语音识别speech模块
2020/09/09 Python
CSS3感应鼠标的背景闪烁和图片缩放动画效果
2014/05/14 HTML / CSS
美国领先的医疗警报服务:Philips Lifeline
2018/03/12 全球购物
大学毕业生简单自荐信
2013/11/05 职场文书
物流专业专科生职业生涯规划书
2014/09/14 职场文书
2014年财务科工作总结
2014/11/11 职场文书
2015年农村党员干部主题教育活动总结
2015/03/25 职场文书
社会主义核心价值观主题教育活动总结
2015/05/07 职场文书
关于JavaScript轮播图的实现
2021/11/20 Javascript
Python可视化神器pyecharts之绘制箱形图
2022/07/07 Python