位置: 编程技术 - 正文

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

  • 海关完税价格计算公式
  • 计算企业所得税分录
  • 我国当前税制结构的基本情况是怎样的
  • 土地价款抵扣增值税怎么做账
  • 工会建账选择哪个科目好
  • 小规模季报利润表本月金额和本年累计金额
  • 办税人员绑定企业审核谁审核
  • 砖厂开票员的工作流程
  • 增值税13%税率有哪些
  • 进项和销项税额需要结转吗
  • 税控盘减免税额转出会计分录
  • 模具费入什么会计科目
  • 国有独资企业交企业所得税规定
  • 税收优惠有哪些类型
  • 期末小规模纳税人差额纳税的会计处理分析
  • 结转税金为贷方怎么结转?
  • 购入农产品的增值税率
  • 工地用材料如何分类
  • 企业期货投资收益何时记账的
  • 出口退税征税
  • 软件技术服务合同需要备案吗
  • 现代服务业要满足什么条件才转一般纳税人
  • 药店可以开具专票吗
  • 跨季度的发票怎么冲销
  • 咨询费收入交什么税种
  • 完税凭证号是几位数
  • 税控盘不存在怎么回事
  • 建筑企业异地预缴工会经费
  • 事业单位研发支出资本化
  • 土地补偿款属于专项资金吗
  • 物流公司转包出售合法吗
  • 资产置换会计处理办法
  • 固定资产 盘点
  • synchost.exe - synchost是什么进程 有什么作用
  • 如何激活windows11专业版?
  • 国家信用信息公司系公示
  • 如何安全的处置电子邮件
  • 中秋买东西有讲究吗?
  • 赠送积分有两种形式
  • 电脑桌面小工具软件
  • 出纳借方
  • php与js交互
  • 工资储备金制度
  • 社保缴费基数如何调整
  • 麒麟软件的linux桌面操作系统
  • 第十七届全国大学生智能车
  • react modal
  • 贷款利息现金流量项目
  • 供应商的质量扣款应该开什么发票
  • 长期股权投资的明细科目有哪些
  • python 读取图片
  • url静态化怎么操作
  • 帝国cms灵动标签调用外表
  • 收付转凭证和记帐凭证的区别?
  • 计算企业所得税分录
  • 保险车辆理赔入账流程
  • 法人和税务可以是一个人吗
  • 业务招待费需附上清单
  • 办公报销项目
  • 开票软件备份在哪里
  • mysql应用案例
  • win8怎么卸载
  • xp系统无法停用wifi连接
  • centos6启动不了
  • 备份ubuntu系统
  • linux 判断语句
  • media.codec是什么
  • linux怎么查看
  • [置顶] 《翻身称霸》
  • linux shell脚本命令
  • jquery实现
  • Node.js中的全局对象有
  • 教女朋友学粤语
  • 批处理删除自身命令
  • python运行py文件没反应
  • jsoni
  • javascript中br
  • 安卓view事件分发
  • js中改变css文件中的样式
  • 兖州宁德新能源官网首页
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设