以BootStrap Tab为例写一个前端组件

Bootstrap 前端之家
前端之家收集整理的这篇文章主要介绍了以BootStrap Tab为例写一个前端组件，前端之家小编觉得挺不错的，现在分享给大家，也给大家做个参考。

介绍

本文以Bootstrap标签页组件为例，介绍如何编写或者封装一个前端组件，以下是实现效果：

原生的Bootstrap-tab组件主要有html,css组成，开发者使用时，需要写很多代码，不易于使用，对bootstrap-tab封装后，可以更方便地使用，同时提供关闭、增加tab页、指定当前选中页、即使加载等功能，这样组件可以适配更多的场景。

原生bootstrap-tab组件使用可参考https://www.runoob.com/bootstrap/bootstrap-tab-plugin.html

其中官网一段实例代码是：

    • 菜鸟教程是一个提供最新的web技术站点，本站免费提供了建站相关的技术文档，帮助广大web技术爱好者快速入门并建立自己的网站。菜鸟先飞早入行——学的不仅是技术，更是梦想。

    iOS 是一个由苹果公司开发和发布的手机操作系统。最初是于 2007 年首次发布 iPhone、iPod Touch 和 Apple TV。iOS 派生自 OS X，它们共享 Darwin 基础。OS X 操作系统是用在苹果电脑上，iOS 是苹果的移动版本。

    jMeter 是一款开源的测试软件。它是 100% 纯 Java 应用程序，用于负载和性能测试。

    Enterprise Java Beans（EJB）是一个创建高度可扩展性和强大企业级应用程序的开发架构，部署在兼容应用程序服务器（比如 JBOSS、Web Logic 等）的 J2EE 上。

    那么如何封装或者开发一个组件呢？

    组件开发步骤

    Step1：结构化静态代码，梳理核心的问题

    在组件开发流程中，可能拿到前端设计的静态代码（html+css的组合），这时候要拆解代码结构，使得结构能够模板化。其次梳理核心问题，bootstrap-tab组件化之后，应该能够动态加载tab内容，这个可以通过jquery.load方法解决，这样可以做到主页面和子页面解耦。

    读懂了静态代码，理解了结构和核心问题就可以写代码了，首先搭建组件的架子。

    Step2：组件骨架

    方法 $.fn[pluginName] = function (options) { var self = $(this); if (this == null) return null; var data = this.data(pluginName); if (!data) { data = new BaseTab(this,options); self.data(pluginName,data); } return data; }; var BaseTab = function (element,options) { this.$element = $(element); this.options = $.extend(true,{},this.default,options); this.init(); } //默认配置 BaseTab.prototype.default = { } //结构模板 BaseTab.prototype.template = { } //初始化 BaseTab.prototype.init = function () { } })(jQuery,document)

    搭建了以上组件的骨架，并对组件命名为tabs，这样就可以通过$("#tab-container").data("tabs")获取组价的方法和属性。在入口方法中，会将初始化后的对象缓存到页面html中，这样可以避免重复创建对象。一些经典的开源前端组件都是这样写法，比如Bootstrap-treeview,大家有时间可以看看它的源码。

    以上的写法使用原型链的写法。定义了默认配置，结构模板，初始化入口。

    编写代码

    在组件的代码骨架里，填充模板代码，这里使用占位符{0}，{1}等表示外部传入的变量，然后在init方法中校验外部传入数据的合法性，然后构建组件，并且绑定关闭事件、点击事件。

    在开发前端组件的时候，往往不知道默认参数应该有什么，可以在开发的时候，用到就加上去，这里加了两个默认参数，一个showIndex是默认显示的tab页索引，一个loadAlltab是否一次性把所有的页面数据加载完。

    具体的逻辑请看下面的代码：

    显示页索引 loadAll: true,//true=一次全部加在页面,false=只加在showIndex指定的页面，其他点击时加载，提高响应速度 } //结构模板 BaseTab.prototype.template = { ul_nav: '
      ',ul_li: '
    • {1}
      • ',ul_li_close: '关闭">',div_content: '
      ',div_content_panel: '
      ' } //初始化 BaseTab.prototype.init = function () { if (!this.options.data || this.options.data.length == 0) { console.error("请指定tab页数据"); return; } //当前显示的显示的页面是否超出索引 if (this.options.showIndex < 0 || this.options.showIndex > this.options.data.length - 1) { console.error("showIndex超出了范围"); //指定为默认值 this.options.showIndex = this.default.showIndex; } //清除原来的tab页 this.$element.html(""); this.builder(this.options.data); } //使用模板搭建页面结构 BaseTab.prototype.builder = function (data) { var ul_nav = $(this.template.ul_nav); var div_content = $(this.template.div_content); for (var i = 0; i < data.length; i++) { //nav-tab var ul_li = $(this.template.ul_li.format(data[i].id,data[i].text)); //如果可关闭,插入关闭图标，并绑定关闭事件 if (data[i].closeable) { var ul_li_close = $(this.template.ul_li_close); ul_li.find("a").append(ul_li_close); ul_li.find("a").append(""); } ul_nav.append(ul_li); //div-content var div_content_panel = $(this.template.div_content_panel.format(data[i].id)); div_content.append(div_content_panel); } this.$element.append(ul_nav); this.$element.append(div_content); this.loadData(); this.$element.find(".nav-tabs li:eq(" + this.options.showIndex + ") a").tab("show"); } BaseTab.prototype.loadData = function () { var self = this; //tab点击即加载事件 //设置一个值，记录每个tab页是否加载过 this.stateObj = {}; var data = this.options.data; //如果是当前页或者配置了一次性全部加载，否则点击tab页时加载 for (var i = 0; i < data.length; i++) { if (this.options.loadAll || this.options.showIndex == i) { if (data[i].url) { $("#" + data[i].id).load(data[i].url); this.stateObj[data[i].id] = true; } else { console.error("id=" + data[i].id + "的tab页未指定url"); this.stateObj[data[i].id] = false; } } else { this.stateObj[data[i].id] = false; (function (id,url) { self.$element.find(".nav-tabs a[href='#" + id + "']").on('show.bs.tab',function () { if (!self.stateObj[id]) { $("#" + id).load(url); self.stateObj[id] = true; } }); }(data[i].id,data[i].url)) } } //关闭tab事件 this.$element.find(".nav-tabs li a i.closeable").each(function (index,item) { $(item).click(function () { var href = $(this).parents("a").attr("href").substr(1); $(this).parents("li").remove(); $("#" + href).parent().remove(); }) }); }

      测试

      编写一个前端界面，测试组件

      <Meta charset="UTF-8"> Tab组件

      通过配置各种参数，看看组件是否满足了预期的要求。

      扩展

      组件在使用的过程中还会遇到各种问题，或者各种需求，比如新增一个tab页面，比如获取当前tab的ID或index，这是可以在代码中按需扩展。

      关闭,插入关闭图标，并绑定关闭事件 if (obj.closeable) { var ul_li_close = $(this.template.ul_li_close); ul_li.find("a").append(ul_li_close); ul_li.find("a").append(""); } this.$element.find(".nav-tabs").append(ul_li); //div-content var div_content_panel = $(this.template.div_content_panel.format(obj.id)); this.$element.find(".tab-content").append(div_content_panel); $("#" + obj.id).load(obj.url); this.stateObj[obj.id] = true; if(obj.closeable){ this.$element.find(".nav-tabs li a[href='#" + obj.id + "'] i.closeable").click(function () { var href = $(this).parents("a").attr("href").substr(1); $(this).parents("li").remove(); $("#" + href).parent().remove(); }) } this.$element.find(".nav-tabs a[href='#" + obj.id + "']").tab("show"); } //根据id设置活动tab页 BaseTab.prototype.showTab=function (tabId) { this.$element.find(".nav-tabs li a[href='#" + tabId + "']").tab("show"); } //获取当前活动tab页的ID BaseTab.prototype.getCurrentTabId=function () { var href=this.$element.find(".nav-tabs li.active a").attr("href"); href=href.substring(1); return href; }

      更完善的bootrap-tab版本已经开源，详见我的Github地址:

      bootstrap-tab：https://github.com/bill1012/bootstrap-tab

      总结

      以上所述是小编给大家介绍的以BootStrap Tab为例写一个前端组件。编程之家 jb51.cc 收集整理的教程希望能对你有所帮助，如果觉得编程之家不错，可分享给好友！感谢支持。

      原文链接：https://www.f2er.com/bootstrap/37604.html
      bootstrapbootstraptabtab前端组件

    猜你在找的Bootstrap相关文章

    使用BootStrapValidator来完成前端输入验证
    BootStrapValidator可以用于完成基于BootStrap搭建的前端UI中的输入验证，由于本插件完全基...
    顶求网首页整体设计思路
    顶求网首页是一个web2.0博客类的网站首页，在该网站中用户可以发表博客，也可以推荐图书给...
    自己手写简约实用的Jquery tabs插件（基于bootstrap环境）
    一直想改版网站首页的图书展示部分，以前的展示是使用BootStrap的传统的collapse,网页篇幅...
    BootStrap中Affix控件的使用方法及如何保持布局的美观
    在视窗足够大的时候是没有任何问题的，但是当拖动改变视窗的大小后会发现布局又变乱了，这...
    针对BootStrap中tabs控件的美化和完善
    BootStrap中的tabs控件以其简单易用而很受广大开发者的欢迎。但是，它的样式比较单一，如何...
    使用BootStrap制作用户登录UI
    先看看劳动成果 布局 左右各一半（col-md-6） 左侧登录框占左侧一半的10/12 右侧是登录系统...
    打造简单实用的Thinkphp分页样式(Bootstrap版本)
    先吐槽一下ThinkPHP3.1版的分页样式，虽然看起来也很简单大方，但是所有的页码全是使用简单...
    Bootstrap轮播（carousel）插件中图片变形的终极解决方案——使用jqthumb.js
    在顶求网的首页中我使用了BootStrap的轮播（carousel）插件来展示文章中的图片。我在程序中...
    移动开发中单页异步加载所有列表项
    在做WEB开发的时候我们经常会遇到分页的处理，如果在PC上显示网页的话，使用传统的分页是可...
    仿豆瓣分类标签的实现
    为了和文章分类部分的样式进行区分，我决定自己动手写一个具有其他样式的分类标签集。刚好...
    HTMLHTML5JavaScriptCSSjQueryBootstrapAngularjsTypeScriptVueDojoJsonElectronNode.jsextjsExpress XMLES6AjaxFlashUnityReactFlexAnt DesignWeb前端微信小程序微信公众号
    关闭广告单独headers封装代码提示错误整数正则非0开头跳页出页码antd table提示URL未注册公众号支付vue hash模式iSlider车牌键盘循环图片echarts 双折左右布局DllPlugin对象创建打字游戏圈选两栏云函数蒙版ES2020橱窗无缝滚动轮播色块碰撞组件销毁文档操作