门户Layout集成

约定

前端基于jQuery和Bootstrap V3开发,且遵循Bootstrap布局规范
基本使用方法

BtLayout(options)

options说明

{
  locale: 'en',//当前语言标识
  layoutDomain: 'http://XXX.XXX.XXX.XXX:3000',//数据来源地址,特殊情况下,需要覆盖默认值时,请指定该参数
  headerDomId: 'header-id',//头部容器id
  footerDomId: 'footer-id',//底部容器id
  avatar: 'avatar_url',//头像地址
  userItems: [],//头像下拉列表
  locals: [],//语言下拉列表
  afterRender: function(){} //顶部和底部渲染完成后执行的函数
}

集成方式及实例

1、引入静态资源

开发版

link rel="stylesheet" type="text/css" href="https://dn-bitmain-cdn.qbox.me/common-layout/test/bt-layout.css"

script src="https://dn-bitmain-cdn.qbox.me/common-layout/test/bt-layout.js"

正式版

link rel="stylesheet" type="text/css" href="https://dn-bitmain-cdn.qbox.me/common-layout/bt-layout.css"

script src="https://dn-bitmain-cdn.qbox.me/common-layout/bt-layout.js"

2、在页面上添加对应的dom容器,并指定ID,例如:

  <div id="header-height">
  = yield
  <div id="footer-height">

header-height和footer-height分别是顶部和底部容器id

3、调用函数,整理并传入相关参数,例如layout_js:

- if current_user
  javascript:
    var userItems = [{
      name: "#{t('header.current_user', username: current_user.email.split('@')[0])}",
      href: 'javascript:;',
      method: 'get',
      target: '_self'
    },{
      name: "#{t('user.manage')}",
      href: '/',
      method: 'get',
      target: '_self'
    },{
      name: "#{t('header.logout')}",
      href: '/logout',
      method: 'delete',
      target: '_self'
    }];
    
- else
  javascript:
    var userItems = [{
      name: "#{t('user.sign_in')}",
      href: '/',
      method: 'get',
      target: '_self'
    },{
      name: "#{t('user.sign_up')}",
      href: '/sign_up',
      method: 'get',
      target: '_self'
    }];

javascript:
  $(document).ready(function(){
    BtLayout({
      locale: '#{I18n.locale}',
      headerDomId: 'header-height',
      footerDomId: 'footer-height',
      avatar: '#{current_user.avatar}',
      userItems: userItems,
      locals: [{
        name: 'en',
        remark: 'English',
        href: '#{i18n_url(locale: "en")}'
      },{
        name: 'zh-CN',
        remark: '简体中文',
        href: '#{i18n_url(locale: "zh")}'
      }],
      afterRender: function(){
        var adaptContent = function(){
          var footer_height = $("#footer-height").height();
          var header_height = $("#header-height").height();
          $("#main-window").css("min-height", $(window).height() - header_height - footer_height);
        }

        $(window).on("resize",function(){
          adaptContent();
        })

        $(document).ready(function(){
          adaptContent();
        });
      }
    });
  });

根据系统登录状态和翻译配置,自定义下拉菜单的内容

商城扩展

汇率

1、引入扩展js

开发版

https://dn-bitmain-cdn.qbox.me/common-layout/test/bt-rate-extend.js

正式版

https://dn-bitmain-cdn.qbox.me/common-layout/bt-rate-extend.js

2、在afterRender中调用扩展方法

BtRateExtend.init({
  title: '汇率',
  btc2usd: 530.23, //BTC转USD汇率
  usd2cny: 6.63 //USD转CNY汇率
});

3、此后异步更新均这样调用

BtRateExtend.refresh({
  btc2usd: 531.23,
  usd2cny: 6.64
});

购物车显示

1、引入扩展js

开发版

https://dn-bitmain-cdn.qbox.me/common-layout/test/bt-shopping-cart-extend.js

正式版

https://dn-bitmain-cdn.qbox.me/common-layout/bt-shopping-cart-extend.js

2、在afterRender中调用扩展方法

BtShoppingCart.init({
  href: '/shopping_cart_href_example', //跳转地址
  amount: 1 //数量
});

3、更新购物车数量

BtShoppingCart.setAmount(1)

基本结构DEMO

BtLayout({
  locale: 'zh-CN',
  headerDomId: 'header-height',
  footerDomId: 'footer-height',
  afterRender: function(){
    BtRateExtend.init({
      title: '汇率',
      btc2usd: 530.23,
      usd2cny: 6.63
    });
    BtRateExtend.refresh({
      btc2usd: 531.23,
      usd2cny: 6.64
    });
    BtShoppingCart.init({href: '/shopping_cart_href_example', amount: 1});
  }
});

门户Layout集成

约定

集成方式及实例

商城扩展

汇率

购物车显示

基本结构DEMO

推荐阅读更多精彩内容