位置: 编程技术 - 正文

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题)

  • 商品流通企业印花税购销合同计税依据
  • 小规模企业跨月专票如何冲红
  • 开具技术服务费发票需要注意什么
  • 期末未缴税额为负数怎么办
  • 固定资产投资损失怎么做账
  • 红字信息表可以开一半吗
  • 年度财务报表和季度财务报表一样吗
  • 公司刚注册之后怎么办
  • 开房屋租金发票需要带什么资料
  • 私营独资企业可以变更法人吗
  • 销售免税货物如何开票
  • 逾期认证未抵扣的文件
  • 购进货物既用于应税项目又用于免税项目的
  • 企业购入投资性房地产
  • 物业公司代收的电费差额收入
  • 增值税普通发票可以抵扣吗
  • 哪些进项税不能转出
  • 个税申报中劳务报酬
  • 资产负债表其他应付款包括哪些
  • 生育津贴有什么作用
  • 分红转增股本什么意思
  • 收到返还代扣代缴手续费如何入账?
  • 员工付款的手续费怎么算
  • rebootandselectproperbotdevice
  • 事业单位年终事迹材料
  • 如何养成良好的安全行为
  • 电脑上一键复制是哪个键
  • PHP:Memcached::resetServerList()的用法_Memcached类
  • 什么是原始凭证?审核原始凭证主要审查哪些内容?
  • 股权转让所得怎么做账
  • windows7旗舰版最新版本
  • 月末结转本年利润怎么算
  • framework core
  • 微信支付高速通行费怎么开电子发票
  • python输入三个数输出最小的
  • 交易性金融资产是什么意思
  • mongodb数据查询
  • 一般纳税人认定管理办法
  • 费用报销审批单和费用报销单区别
  • 工资单应该盖什么章
  • 建筑劳务单位
  • 预付房租计入长期待摊费用吗
  • 财务报表与分析outcome2
  • 外购商品发放给员工 进项税额能不能抵扣
  • 所得税纳税年度
  • 增值税税控系列是什么
  • 长期待摊费用的摊销期限应该是
  • 科目汇总表借方和贷方相等吗
  • 生产企业电费怎么做账
  • 把其他应付款转成实收资本的话需要去工商改注册资本么
  • 给客户优惠货款怎么写
  • 企业支付宝收款码是进公账吗
  • 企业自建厂房需要有资质吗
  • 什么是应收账款管理
  • 顺风车没有发票是否合法
  • 税前扣除项目主要包括
  • 应收票据贷方余额
  • 会计凭证用什么纸打印
  • 其他商业项目
  • sql server在表里查找具体数据
  • 分析sql语句性能实现
  • xp系统开机一直在滚动条
  • win1021年更新
  • win8系统修改密码
  • 如何使用u盘安装linux
  • vim如何复制粘贴
  • 密钥升级win10专业版有问题吗
  • scumpve服务器
  • Android Chronometer(定时器)
  • javascript怎么用
  • js中math.pow
  • js中的$是什么意思
  • u盘备份系统操作步骤
  • javascript教程完整版
  • jquery.form.js实现文件上传
  • 安卓手机怎么自定义
  • python如何用pi
  • 怎么算税额和单位税额
  • 江苏网上税务局官网登录
  • 网上税务局网址
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设