位置: 编程技术 - 正文

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

  • 折旧年限与税法有关吗
  • 金银首饰以旧换新增值税
  • 税务结清后多少时间内工商需要注销
  • 技术咨询服务开什么发票
  • 印花税申报表怎么填写
  • 建筑面积包括分摊建筑面积吗
  • 应收账款融资的优缺点
  • 先抵扣后付款怎么做账
  • 商贸企业销售商品结转成本是手工算吗
  • 供应商货款打折分录
  • 个人境外收入如何开发票
  • 个人所得税怎么查
  • 旅游景区税收标准
  • 转让集体土地所有权
  • 个人可以代公司缴税吗
  • 营业外支出怎么冲减
  • 利润表中财务费用可以为负数吗
  • 对外支付和对外转账
  • 主板类型大全
  • QuickBooks - QuickBooks是什么进程 有什么用
  • 月末一次加权平均法是什么意思
  • 怎么修改以前年度的账
  • 完税凭证遗失后还能用吗
  • 免抵退税的账务处理
  • 收到发票未抵扣需要做账吗
  • 项目优化管理工具
  • 收到员工罚款分录
  • psd格式文档
  • 汇兑应计入哪个科目
  • 手续费在银行系统哪里查
  • 计提工资个人所得税账务处理
  • 本月认证上月的进项票如何做
  • wordpress转化为html
  • php采集源码
  • php自动化脚本
  • gparted 命令行
  • 详细步骤怎么写
  • 预收安装费的会计分录
  • 企业会计准则规定了
  • 固定资产可收回金额怎么算
  • React props全面详细解析
  • 非盈利企业怎么做账
  • 社会团体会费票据查询
  • 出口企业出口退税流程
  • 两处取得工资薪金如何申报
  • 预收账款的账务处理怎么对企业有利
  • 收到上个月退税会计分录
  • 加计减免其他收入怎么填
  • 销售费用的主要构成
  • 房地产开发公司是做什么的
  • 销售额营业收入是指一年还是一个月
  • 企业差旅费的报销流程
  • 地税报表如何填写
  • 记账凭证的附件数可以手改吗
  • u盘装机大师手机下载电脑版
  • server2008 无法启动
  • Linux中终止某个用户的所有进程的简单方法
  • Ubuntu 16.04 Server Edition 英文版安装教程
  • 怎样开启bios
  • 电脑更新windows11后开机一黑屏
  • 忘记密码 ?
  • centos7 tcp6
  • win7升级win8.1失败
  • 怎么更改windows商店的安装位置
  • NkbMonitor.exe - NkbMonitor是什么进程文件 有什么作用
  • linux进程的环境变量
  • 在linux中使用什么命令可以执行shell脚本
  • ES6 javascript中class静态方法、属性与实例属性用法示例
  • 富文本编辑器模板
  • jQuery实现textarea自动增长宽高的方法
  • 安卓键盘软件
  • js的实现原理
  • js中!
  • python djang
  • JQuery EasyUI Layout 在from布局自适应窗口大小的实现方法
  • 垃圾填埋税率
  • 企业所得税每月怎么算
  • 补发上个月的工资怎么做账
  • 主管局长和分管局长谈心谈话
  • 普惠性和非普惠的区别
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设