位置: 编程技术 - 正文

JavaScript tab选项卡插件实例代码(js tab选项卡)

编辑:rootadmin

推荐整理分享JavaScript tab选项卡插件实例代码(js tab选项卡),希望有所帮助,仅作参考,欢迎阅读内容。

文章相关热门搜索词:js tab切换效果,js tabs,js tab页面切换,js中tab栏切换,jquery tab选项卡,js中tab栏切换,js中tab栏切换,js中tab栏切换,内容如对您有帮助,希望把文章链接给更多的朋友!

今天,先从最简单的开始,将已有的一个Tab选项卡切换功能改写成javascript插件形式。

原生函数写法

将一个javascript方法改写为js插件最简单的方式就是将这个方法挂载到window全局对象下面

我们先来看看最原始的使用函数写法的代码:

tab.html

h.css

上面两份代码为基本代码,之后我们后一步步在这份代码的基础上进行改进。

原生插件写法

好,现在,我们就来将这个方法改写成挂载在window对象下的插件:

tab.html

h_tabs.js

但是,我们发现这样的写法虽然很简单,但也有问题:window作为一个全局对象,如果我们把自己的方法都挂载到它下面作为插件使用的话,插件一多,就容易产生命名空间冲突,另一方面,使用原生js虽然可以减少对外部的依赖,但代码量相对还是很大,写法比较繁琐。

jquery写法

我们尝试引入jquery库,将此插件改写为jquery插件。

jquery插件有三种形式:类级别的形式,对象级别的形式,jquery UI组件的形式

jquery 类级别插件写法?单个方法

我们先来看类级别插件的形式。

第一种类级别插件的形式,直接把该方法挂载到jquery的根空间下,作为一个工具方法:

tab.html

h_tabs.js

jquery类级别插件写法-多个方法

如果你想要将多个方法绑定到jquery根空间上面,那么像下面这样写:

tab.html

JavaScript tab选项卡插件实例代码(js tab选项卡)

h_tabs.js

虽然使用$.extend()工具方法将自己的功能函数直接挂载到jquery根命名空间下,简单,省事儿,但很不幸的是,这样的方式不能利用jquery强大的sizzle引擎,即你选择到的DOM元素无法运用这个方法。

所以我们要用到对象级别的插件开发方式。

jquery对象级别插件写法

对象级别的插件开发方式是利用$.fn.extend()方法将自己的方法绑定到jquery原型上去,这样所有jquery对象队可以应用该方法来执行相应操作了

代码如下:

tab.html

h_tabs.js

这里,我们利用一个闭包封装了插件,避免了命名空间污染

在这里,还有一些问题,就是我们的方法必须传参数才可以运行,这就导致调用的时候我们使用$(‘#tab')选择了id为tab的div,然后在插件里我们又根据传入的ID获取了一遍该元素。

既然我们已经使用了jquery的选择器,那么我们就可以引入this来解决重复获取元素的冗余问题。

jquery对象级别插件写法-引入this

tab.html

h_tabs.js

这里需要注意的是,我们调用该插件的元素对象是(′tab′),则此时直接使用this.find()就等价于(‘tab').find(),而不是$(this).find(),注意使用代入法来区分这两种写法的差别。

作为一款插件,它应该是可以被开发者控制的,所以还应该提供给使用者一些配置接口。

jquery对象级别插件写法-加入配置项

tab.html

我们这里把一开始的”当前选项卡标签样式类名称“由”cur“改为了”current“,并将其作为配置项传入插件

h.css

我们在样式表中做出了相应的改动。

h_tabs.js

在这里我们使用了jquery的$.extend()方法的合并对象的功能,使用用户传入的配置项覆盖默认配置项并最终合并到一个新的配置项供后面的程序使用。

以上所述是小编给大家介绍的JavaScript tab选项卡插件实例代码,希望对大家有所帮助!

javascript每日必学之封装 朋友们好,前面我们已经讲解了有关javascript的基础,从今天的内容开始,我们就要开始讲有关封装的内容了,这里,我们就一点一点地接触到OOP(面向

学习Javascript面向对象编程之封装 Javascript是一种基于对象(object-based)的语言,你遇到的所有东西几乎都是对象。但是,它又不是一种真正的面向对象编程(OOP)语言,因为它的语法中

理解javascript封装 封装可以被定义为对对象的内部数据表现形式和实现细节进行隐藏。通过封装可以强制实施信息隐藏。在JavaScript中,并没有显示的声明私有成员的关键

标签: js tab选项卡

本文链接地址:https://www.jiuchutong.com/biancheng/380415.html 转载请保留说明!

上一篇:Javascript技术栈中的四种依赖注入详解(web技术栈)

下一篇:javascript每日必学之封装(javascript题)

  • 收取罚款
  • 流动资产周转天数下降说明什么
  • 兼职会计工资多少钱一个月
  • 中级会计实务主观题
  • 广告设计要交文科生吗
  • 出口退税正式申报撤销申请
  • 成品油经销企业开具的成品油电子专用发票
  • 票据背书转让常见的错误
  • 接受捐赠的固定资产进项税额可以抵扣吗
  • 银行贷款利息从几点计算
  • 年中股东红利分录怎么写
  • 搬运费计入
  • 非独立核算的分公司如何报税
  • 发票红冲退税是全额退吗
  • 研发费用需要发什么科目
  • 公司账户流水要交税吗
  • 发票分票怎么处理违章
  • 去年的季度所得税额怎么做账
  • 商业承兑汇票承兑人可以是银行吗
  • win10任务栏快捷图标不见了
  • php抽象类使用场景
  • 去年年终奖
  • 对于接受捐赠的资产价值,应计入当期损益
  • Win11 Build 22000.65更新体验:汉化更完善,右下角返回桌面回归
  • PHP:oci_bind_array_by_name()的用法_Oracle函数
  • 关闭非系统进程
  • abstract php
  • linux zen3
  • 商业企业会计科目表
  • 其他应付款转营业外收入摘要
  • laravel 5异常错误:FatalErrorException in Handler.php line 38的解决
  • 云霞下的麦田
  • aes-ecb和aes-gcm
  • php中include_once
  • vue中使用require报错
  • 公司变更需要哪些资料~问华杰 财务
  • laravel入门与实战:构建主流php应用开发框架
  • html用语
  • vue企业开发实战
  • exfat转换fat32命令
  • discuz 首页设置
  • 社保基数是按基本工资还是应发工资
  • 织梦自定义字段
  • mongodb如何修改数据
  • 利润表一般采用
  • 公积金个人缴纳和公司缴纳比例
  • 存货报废进项税额需要转出吗
  • 小规模企业缴纳公积金怎么做账
  • 提取安全生产费用是什么意思
  • 实收资本 增加
  • 增值税专用发票的税率是多少啊
  • 购买材料计入
  • 收到跨月的费用发票怎么入账
  • 法人购买设备投入企业
  • 企业购买原材料属于投资吗
  • 存货售出时可以冲减资产减值损失吗
  • 影视行业成本核算方案
  • 建账的基本要求
  • 安装sql server 2008硬件要求
  • linux CentOS6.5 yum安装mysql5.6
  • sql防御
  • mac键盘进水后会报废吗
  • windows有两个
  • winxp慢怎么办
  • 4G内存时linux的mtrr表不正确的解决
  • xboxone系统更新错误
  • 如何不让qq开机自启
  • vue.js作用
  • javascript常用语法
  • js 在线调试
  • javascript教程完整版
  • android开源库
  • python 二分查找函数
  • js文字滚动代码
  • 广东增值税电子普通发票怎么开
  • 扣缴义务人申报和综合所得年度自行申报
  • 苏州税务所电话是多少
  • 浙江省焊工操作证查询
  • 江西省税务局官网
  • 国家税务贵州省税务
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

    网站地图: 企业信息 工商信息 财税知识 网络常识 编程技术

    友情链接: 武汉网站建设