如何以BootStrapTab为例写一个前端组件

这篇文章将为大家详细讲解有关如何以BootStrap Tab为例写一个前端组件,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。

我们注重客户提出的每个要求,我们充分考虑每一个细节,我们积极的做好成都网站制作、做网站、外贸营销网站建设服务,我们努力开拓更好的视野,通过不懈的努力,成都创新互联赢得了业内的良好声誉,这一切,也不断的激励着我们更好的服务客户。 主要业务:网站建设,网站制作,网站设计,微信小程序,网站开发,技术开发实力,DIV+CSS,PHP及ASP,ASP.Net,SQL数据库的技术开发工程师。

实现效果:

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

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

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


  
      菜鸟教程
  
  
  • iOS
  •        Java                  
  •           jmeter       
  •       
  •           ejb       
  •                

    菜鸟教程是一个提供最新的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:组件骨架

    /**
     * Bootstrap tab组件封装
     * @author billjiang qq:475572229
     * @created 2017/7/24
     *
     */
    (function ($, window, document, undefined) {
      'use strict';
      var pluginName = 'tabs';
      //入口方法
      $.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, window, document)

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

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

    编写代码

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

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

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

    //默认配置
      BaseTab.prototype.default = {
        showIndex: 0, //默认显示页索引
        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();       })     });   }

    测试

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

    
    
    
      
      Tab组件
    
    
    
    
    
    
    
    
    
    
    
    

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

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

    扩展



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

    //新增一个tab页
      BaseTab.prototype.addTab=function (obj) {
        //nav-tab
        var ul_li = $(this.template.ul_li.format(obj.id, obj.text));
        //如果可关闭,插入关闭图标,并绑定关闭事件
        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;
      }

    关于“如何以BootStrap Tab为例写一个前端组件”这篇文章就分享到这里了,希望以上内容可以对大家有一定的帮助,使各位可以学到更多知识,如果觉得文章不错,请把它分享出去让更多的人看到。


    文章名称:如何以BootStrapTab为例写一个前端组件
    本文地址:http://bzwzjz.com/article/popdhg.html

    其他资讯

    Copyright © 2007-2020 广东宝晨空调科技有限公司 All Rights Reserved 粤ICP备2022107769号
    友情链接: 成都响应式网站建设 成都企业网站设计 响应式网站设计 网站建设公司 网站建设 温江网站设计 成都网站建设 网站制作公司 网站制作 营销型网站建设 成都网站设计 专业网站设计 外贸网站设计方案 成都定制网站建设 成都网站建设 成都网站制作 高端定制网站设计 企业网站设计 响应式网站设计方案 成都网站设计 移动网站建设 成都网站建设