俺也来俺也去俺也射,国偷自产偷拍

通過簡單例子可以了解到bui的頁面標準,及控件的基本使用, 后面還有一些工具的簡單介紹.

簡單示例

焦點圖

這是BUI最簡單的使用方式,引入相應的庫即可使用.

  <link rel="stylesheet"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  />
  <!-- bui.js 依賴于Zepto或jQuery -->
  <script src="https://cdn.jsdelivr.net/npm/buijs/lib/zepto.js" rel="external nofollow"  rel="external nofollow"  rel="external nofollow" ></script>
    <script src="https://cdn.jsdelivr.net/npm/buijs/lib/latest/bui.js" rel="external nofollow"  rel="external nofollow"  rel="external nofollow" ></script>

index.html

<!DOCTYPE HTML>
<html lang="en-US">
  <head>
  <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
  <title>BUI 多頁開發(fā)標準頁面</title>
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
  <link rel="stylesheet"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  />
  </head>
  <body>
    <script src="https://cdn.jsdelivr.net/npm/buijs/lib/zepto.js" rel="external nofollow"  rel="external nofollow"  rel="external nofollow" ></script>
        <script src="https://cdn.jsdelivr.net/npm/buijs/lib/latest/bui.js" rel="external nofollow"  rel="external nofollow"  rel="external nofollow" ></script>
    <script>
        bui.ready(function() {
          // 所有控件及方法需要在這里執(zhí)行
        })
    </script>
  </body>
</html>

你還需要一個BUI的標準結構, 放在body中間.

1.6.x以后推薦使用以下結構,適配性更強

<div class="bui-page bui-box-vertical">
  <header>
    <!-- 固定頂部區(qū) -->
    <div class="bui-bar">
      <div class="bui-bar-left">
        <a class="bui-btn"><i class="icon-back"></i></a>
      </div>
      <div class="bui-bar-main">BUI標準頁面</div>
      <div class="bui-bar-right"></div>
    </div>
  </header>
  <main>
    <!-- 內容區(qū)滾動 -->
  </main>
  <footer>
    <!-- 固定底部區(qū) -->
  </footer>
</div>

一個頁面對應一個 bui-page, bui-box-vertical代表縱向布局, main自適應. BUI 頁面標準模板,包含 header(非必須) main(內容滾動區(qū)) footer(非必須), 不建議使用 position:fixed position:absolute 樣式.

效果預覽

效果有點像這樣: 可以直接在chrome瀏覽器打開html文件.

BUI標準頁預覽

控件基本使用

接下來我們給頁面加一個焦點圖控件, 一個BUI的控件包含結構跟腳本初始化. 結構放main標簽里面.

焦點圖結構

<div id="uiSlide" class="bui-slide"></div>

腳本初始化必須在 bui.ready 里面執(zhí)行, 多頁開發(fā)一個頁面對應一個 bui.ready 其它自由編寫, 便于自己維護就好.

焦點圖初始化

  // 焦點圖控件初始化
  var uiSlide = bui.slide({
        id: "#uiSlide",
        height: 380,
        autopage: true,
        data: [{
          image: "images/banner01.png",
          url: "pages/ui_controls/bui.slide_title.html",
        },{
          image: "images/banner02.png",
          url: "pages/ui_controls/bui.slide_title.html",
        }]
    })

給實例增加事件監(jiān)聽. tab可以通過滑動、點擊等方式觸發(fā), 需要通過以下方式來監(jiān)聽.

  // 監(jiān)聽跳轉以后觸發(fā)
  uiSlide.on("to",function(){
    // 獲取跳轉后的索引，從0開始
    var index = this.index();
    console.log(index)
  })

執(zhí)行實例對應的方法, 具體請查看對應的 API.

  // 跳轉到第2個,索引值從0開始
  uiSlide.to(1);

注意: 事件監(jiān)聽必須在方法執(zhí)行之前. slide默認支持滑動,點擊等事件, 但必須在手機或者開啟Chrome設備預覽才能操作,

在線預覽

最終組合以后的代碼, 你可以點擊這里在線預覽效果

手機預覽

index.html

<!DOCTYPE HTML>
<html lang="en-US">
  <head>
  <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
  <title>BUI 多頁開發(fā)標準頁面</title>
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
  <link rel="stylesheet"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  />
  </head>
  <body>
    <!-- BUI 頁面標準模板,包含 header(非必須) main(內容滾動區(qū)) footer(非必須) -->
    <div class="bui-page bui-box-vertical">
      <!-- 固定頂部區(qū) -->
      <header>
        <div class="bui-bar">
          <div class="bui-bar-left">
            <a class="bui-btn"><i class="icon-back"></i></a>
          </div>
          <div class="bui-bar-main">BUI標準頁面</div>
          <div class="bui-bar-right"></div>
        </div>
      </header>
      <main>
        <!-- 焦點圖 -->
        <div id="uiSlide" class="bui-slide"></div>
      </main>
      <footer>
        <!-- 固定底部區(qū) -->
      </footer>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/buijs/lib/zepto.js" rel="external nofollow"  rel="external nofollow"  rel="external nofollow" ></script>
        <script src="https://cdn.jsdelivr.net/npm/buijs/lib/latest/bui.js" rel="external nofollow"  rel="external nofollow"  rel="external nofollow" ></script>
    <script>
        bui.ready(function() {
          // 焦點圖控件初始化
            var uiSlide = bui.slide({
                id: "#slide",
                height: 380,
                autopage: true,
                data: [{
                  image: "images/banner01.png",
                  url: "pages/ui_controls/bui.slide_title.html",
                },{
                  image: "images/banner02.png",
                  url: "pages/ui_controls/bui.slide_title.html",
                }]
            })
            // 監(jiān)聽跳轉以后觸發(fā)
            uiSlide.on("to",function(index){
              console.log(index)
            })
            // 跳轉到第2個,索引值從0開始
            // uiSlide.to(1);
        })
    </script>
  </body>
</html>

BUI-Fast 讓編寫更簡單

這是BUI的多頁開發(fā)方式, 是不是很簡單? BUI不止簡單,還快. 上面的代碼如果使用 BUI-Fast 插件來使用的話, 只需這幾行代碼就可以了. 如何安裝BUI-Fast插件

方案1:

ui-html Tab 生成bui頁面引用

ui-page Tab 生成bui標準頁面結構

bui-slide-demo Tab 生成焦點圖控件初始化代碼及結構

方案2:

ui-html Tab 生成bui頁面引用
ui-page Tab 生成bui標準頁面結構
ui-slide Tab 生成焦點圖控件靜態(tài)結構
bui-slide Tab 生成焦點圖控件初始化代碼

準備好了嗎?

bui-fast 跟 buijs 這里給大家做個簡單的介紹, 接下來你可以繼續(xù)學習

BUI 快速開始

簡單示例

效果預覽

控件基本使用

在線預覽

BUI-Fast 讓編寫更簡單

準備好了嗎?