轻松实现jquery选项卡切换效果
26 浏览量
2020-11-27
01:23:34
上传
评论
收藏 36KB PDF 举报
轻松实现轻松实现jquery选项卡切换效果选项卡切换效果
很早之想就学习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>
weixin_38635996
- 粉丝: 3
- 资源: 852
最新资源
- 老飞飞搭建基础通用数据库V19数据库.rar
- jquery.js
- 机械设计多工位ACF贴胶带&预压设备sw18可编辑非常好的设计图纸100%好用.zip
- 基于Pytorch复现Point-Transformer，用于ShapeNet数据集点云分割
- 【医学影像分析】2D超声图像的分割检测（Ultrasound Nerve Segmentation - Kaggle数据集）
- 嘎嘎香的五款神仙谷歌插件
- .arch书源导入教程.mp4
- 贪心算法介绍及代码示例讲解
- CR13SP35MSI64 Crystal 水晶报表运行组件最后版本64位
- 图像分类数据集：玉米叶是否感染分类数据集（2分类，包含训练集、验证集）
资源上传下载、课程学习等过程中有任何疑问或建议，欢迎提出宝贵意见哦~我们会及时处理！
点击此处反馈
评论0