位置: 编程技术 - 正文

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

  • 公司申报房产税 土地取得时间怎么写的
  • 嵌入式软件产品的增值税即征即退具体实例
  • 非营利组织企业所得税季度申报表
  • 其他综合收益影响递延所得税负债吗
  • 物业管理服务增值税2022
  • 软件租赁费计入哪个科目
  • 计入损益的税
  • 房地产开发票的时间
  • 营改增对房地产行业的影响
  • 房地产开发企业土地增值税清算
  • 足球俱乐部买卖球员的程序
  • 税收和税法是什么关系
  • 折旧方法改变属于会计政策变更还是估计变更
  • 退货重新下单要付款吗
  • 应返还财政额度是什么科目
  • 资产减值准备是
  • 支付宝手续费由谁承担
  • 单位之间借款利息可以开票么
  • 开了红字发票印花税怎么处理?
  • 差旅补贴需要缴纳个税吗
  • 兼营免税业务,如何才能享受免税的优惠政策?
  • 个人劳务法律规定
  • 垫资的利息的合法区间
  • 新公司值得入职吗
  • 租赁架子公司购车合法吗
  • 物流公司增项
  • 外卖收入增值税怎么算
  • 赊销商品填制什么科目
  • 开发间接费用定义
  • thinkphp6验证器
  • 运输公司的进项必须是专票吗
  • 房地产企业前期物业费
  • 山茶花的养殖方法和注意事项视频
  • 阿尔卑斯旱獭冬眠
  • 勃朗峰高度
  • 货物退回会计分录怎么做
  • php自定义变量的方法是
  • 会计常用单据样本大全
  • 固定资产盘盈、盘亏的账务处理?
  • 居民企业和非居民企业如何判定?
  • 税控盘全额抵扣政策
  • 建筑公司包含哪些业务
  • 支付网银年服务费
  • 全年累计个税扣除公式
  • 帝国cms使用手册
  • 织梦设置会员访问
  • 新入职员工什么时候发工资
  • 委外加工如何管理
  • 已经认证尚未抵扣的发票
  • 印花税计税依据怎么算
  • 劳务费如何开票给客户
  • 纺织品业务
  • 咨询服务业优惠政策
  • 来料加工账务处理案例
  • 用白纸写的收据怎么入帐?
  • 租来设备本身原因致人损害
  • 现金和银行存款的区别
  • 企业利润的构成内容
  • MySQL5.7中 performance和sys schema中的监控参数解释(推荐)
  • cf游戏初始化失败是因为什么
  • win8怎么设置指纹
  • centos怎么配置yum
  • win7开机taskeng
  • xp系统里的打印机怎么设置的和新7
  • 如何进入win10安装界面
  • macbook截
  • fp3是什么文件格式
  • Linux的bg和fg命令简单介绍
  • cocos2d-js-min.js
  • 关闭默认共享和共享文件夹
  • window.close(); 关闭浏览器窗口js代码的总结介绍
  • unity3d坐标转换平面坐标代码
  • clipboard.js无需Flash无需依赖任何JS库实现文本复制与剪切
  • python3.8.3怎么用
  • 怎么关闭android
  • 从批准文号怎么区分国产还是进口
  • 税务核查主要核算内容
  • 公司完税证明去哪里打印
  • 高新企业人才落户北京
  • 会计的各种税
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设