轻松实现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 相关文章推荐
IE和Mozilla的兼容性汇总event
Aug 12 Javascript
JavaScript高级程序设计 XML、Ajax 学习笔记
Sep 10 Javascript
js清理Word格式示例代码
Feb 13 Javascript
jquery下div 的resize事件示例代码
Mar 09 Javascript
Egret引擎开发指南之视觉编程
Sep 03 Javascript
Avalonjs 实现简单购物车功能(实例代码)
Feb 07 Javascript
Vue中的scoped实现原理及穿透方法
May 15 Javascript
简述vue状态管理模式之vuex
Aug 29 Javascript
Vue.js子组件向父组件通信的方法实例代码详解
Dec 10 Javascript
angular6根据environments配置文件更改开发所需要的环境的方法
Mar 06 Javascript
angula中使用iframe点击后不执行变更检测的问题
May 10 Javascript
何时/使用 Vue3 render 函数的教程详解
Jul 25 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
如何限制访问者的ip(PHPBB的代码)
2006/10/09 PHP
用PHP和ACCESS写聊天室(八)
2006/10/09 PHP
mysql中存储过程、函数的一些问题
2007/02/14 PHP
php简单图像创建入门实例
2015/06/10 PHP
php实现基于pdo的事务处理方法示例
2017/07/21 PHP
JavaScript中null与undefined分析
2009/07/25 Javascript
Javascript 页面模板化很多人没有使用过的方法
2012/06/05 Javascript
jquery 页面滚动到底部自动加载插件集合
2014/01/31 Javascript
js确认删除对话框效果的示例代码
2014/02/20 Javascript
select多选 multiple的使用示例
2014/06/16 Javascript
jQuery固定元素插件scrolltofixed使用指南
2015/04/21 Javascript
javascript移动开发中touch触摸事件详解
2016/03/18 Javascript
vue动态组件实现选项卡切换效果
2017/03/08 Javascript
利用js编写网页进度条效果
2017/10/08 Javascript
微信小程序组件之srcoll-view的详解
2017/10/19 Javascript
javascript实现电脑和手机版样式切换
2017/11/10 Javascript
vue2.0 实现页面导航提示引导的方法
2018/03/13 Javascript
使用node.js实现微信小程序实时聊天功能
2018/08/13 Javascript
微信小程序使用for循环动态渲染页面操作示例
2018/12/25 Javascript
JS异步宏队列与微队列原理区别详解
2020/07/02 Javascript
[58:23]LGD vs TNC 2019国际邀请赛小组赛 BO2 第一场 8.15
2019/08/16 DOTA
python应用程序在windows下不出现cmd窗口的办法
2014/05/29 Python
详解Python中DOM方法的动态性
2015/04/11 Python
Python3爬虫学习之爬虫利器Beautiful Soup用法分析
2018/12/12 Python
Python3 Tkinkter + SQLite实现登录和注册界面
2019/11/19 Python
用python爬取历史天气数据的方法示例
2019/12/30 Python
利用Python实现某OA系统的自动定位功能
2020/05/27 Python
pandas 按日期范围筛选数据的实现
2021/02/20 Python
HTML5 Canvas实现文本对齐的方法总结
2016/03/24 HTML / CSS
HTML5拖放功能_动力节点Java学院整理
2017/07/13 HTML / CSS
浅谈HTML5新增和废弃的标签
2019/04/28 HTML / CSS
马来西亚排名第一的宠物用品店:Pets Wonderland
2020/04/16 全球购物
矿泉水广告词
2014/03/20 职场文书
党员承诺书怎么写
2014/05/20 职场文书
党委书记个人检查对照材料思想汇报
2014/10/11 职场文书
离婚起诉书范本
2015/05/18 职场文书