約定

• 前端基于jQuery和Bootstrap V3開(kāi)發(fā),且遵循Bootstrap布局規(guī)范
• 基本使用方法

BtLayout(options)

• options說(shuō)明

{
  locale: 'en',//當(dāng)前語(yǔ)言標(biāo)識(shí)
  layoutDomain: 'http://XXX.XXX.XXX.XXX:3000',//數(shù)據(jù)來(lái)源地址,特殊情況下,需要覆蓋默認(rèn)值時(shí),請(qǐng)指定該參數(shù)
  headerDomId: 'header-id',//頭部容器id
  footerDomId: 'footer-id',//底部容器id
  avatar: 'avatar_url',//頭像地址
  userItems: [],//頭像下拉列表
  locals: [],//語(yǔ)言下拉列表
  afterRender: function(){} //頂部和底部渲染完成后執(zhí)行的函數(shù)
}

集成方式及實(shí)例

1、引入靜態(tài)資源

開(kāi)發(fā)版

link rel="stylesheet" type="text/css" 

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

正式版

link rel="stylesheet" type="text/css" 

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

2、在頁(yè)面上添加對(duì)應(yīng)的dom容器,并指定ID,例如:

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

header-height和footer-height分別是頂部和底部容器id

3、調(diào)用函數(shù),整理并傳入相關(guān)參數(shù),例如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: '簡(jiǎn)體中文',
        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();
        });
      }
    });
  });

根據(jù)系統(tǒng)登錄狀態(tài)和翻譯配置,自定義下拉菜單的內(nèi)容

商城擴(kuò)展

匯率

1、引入擴(kuò)展js

開(kāi)發(fā)版

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中調(diào)用擴(kuò)展方法

BtRateExtend.init({
  title: '匯率',
  btc2usd: 530.23, //BTC轉(zhuǎn)USD匯率
  usd2cny: 6.63 //USD轉(zhuǎn)CNY匯率
});

3、此后異步更新均這樣調(diào)用

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

購(gòu)物車(chē)顯示

1、引入擴(kuò)展js

開(kāi)發(fā)版

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中調(diào)用擴(kuò)展方法

BtShoppingCart.init({
  href: '/shopping_cart_href_example', //跳轉(zhuǎn)地址
  amount: 1 //數(shù)量
});

3、更新購(gòu)物車(chē)數(shù)量

BtShoppingCart.setAmount(1)

基本結(jié)構(gòu)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});
  }
});