日韩成人av片免费,国产SUV精品一区二区88

通過(guò)簡(jiǎn)單例子可以了解到bui的頁(yè)面標(biāo)準(zhǔn),及控件的基本使用, 后面還有一些工具的簡(jiǎn)單介紹.

簡(jiǎn)單示例

焦點(diǎn)圖

這是BUI最簡(jiǎn)單的使用方式,引入相應(yīng)的庫(kù)即可使用.

  <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 多頁(yè)開(kāi)發(fā)標(biāo)準(zhǔn)頁(yè)面</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>

你還需要一個(gè)BUI的標(biāo)準(zhǔn)結(jié)構(gòu), 放在body中間.

1.6.x以后推薦使用以下結(jié)構(gòu),適配性更強(qiáng)

<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標(biāo)準(zhǔn)頁(yè)面</div>
      <div class="bui-bar-right"></div>
    </div>
  </header>
  <main>
    <!-- 內(nèi)容區(qū)滾動(dòng) -->
  </main>
  <footer>
    <!-- 固定底部區(qū) -->
  </footer>
</div>

一個(gè)頁(yè)面對(duì)應(yīng)一個(gè) bui-page, bui-box-vertical代表縱向布局, main自適應(yīng). BUI 頁(yè)面標(biāo)準(zhǔn)模板,包含 header(非必須) main(內(nèi)容滾動(dòng)區(qū)) footer(非必須), 不建議使用 position:fixed position:absolute 樣式.

效果預(yù)覽

效果有點(diǎn)像這樣: 可以直接在chrome瀏覽器打開(kāi)html文件.

BUI標(biāo)準(zhǔn)頁(yè)預(yù)覽

控件基本使用

接下來(lái)我們給頁(yè)面加一個(gè)焦點(diǎn)圖控件, 一個(gè)BUI的控件包含結(jié)構(gòu)跟腳本初始化. 結(jié)構(gòu)放main標(biāo)簽里面.

焦點(diǎn)圖結(jié)構(gòu)

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

腳本初始化必須在 bui.ready 里面執(zhí)行, 多頁(yè)開(kāi)發(fā)一個(gè)頁(yè)面對(duì)應(yīng)一個(gè) bui.ready 其它自由編寫(xiě), 便于自己維護(hù)就好.

焦點(diǎn)圖初始化

  // 焦點(diǎn)圖控件初始化
  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",
        }]
    })

給實(shí)例增加事件監(jiān)聽(tīng). tab可以通過(guò)滑動(dòng)、點(diǎn)擊等方式觸發(fā), 需要通過(guò)以下方式來(lái)監(jiān)聽(tīng).

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

執(zhí)行實(shí)例對(duì)應(yīng)的方法, 具體請(qǐng)查看對(duì)應(yīng)的 API.

  // 跳轉(zhuǎn)到第2個(gè),索引值從0開(kāi)始
  uiSlide.to(1);

注意: 事件監(jiān)聽(tīng)必須在方法執(zhí)行之前. slide默認(rèn)支持滑動(dòng),點(diǎn)擊等事件, 但必須在手機(jī)或者開(kāi)啟Chrome設(shè)備預(yù)覽才能操作,

在線預(yù)覽

最終組合以后的代碼, 你可以點(diǎn)擊這里在線預(yù)覽效果

手機(jī)預(yù)覽

index.html

<!DOCTYPE HTML>
<html lang="en-US">
  <head>
  <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
  <title>BUI 多頁(yè)開(kāi)發(fā)標(biāo)準(zhǔn)頁(yè)面</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 頁(yè)面標(biāo)準(zhǔn)模板,包含 header(非必須) main(內(nèi)容滾動(dòng)區(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標(biāo)準(zhǔn)頁(yè)面</div>
          <div class="bui-bar-right"></div>
        </div>
      </header>
      <main>
        <!-- 焦點(diǎn)圖 -->
        <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() {
          // 焦點(diǎn)圖控件初始化
            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)聽(tīng)跳轉(zhuǎn)以后觸發(fā)
            uiSlide.on("to",function(index){
              console.log(index)
            })
            // 跳轉(zhuǎn)到第2個(gè),索引值從0開(kāi)始
            // uiSlide.to(1);
        })
    </script>
  </body>
</html>

BUI-Fast 讓編寫(xiě)更簡(jiǎn)單

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

方案1:

ui-html Tab 生成bui頁(yè)面引用

ui-page Tab 生成bui標(biāo)準(zhǔn)頁(yè)面結(jié)構(gòu)

bui-slide-demo Tab 生成焦點(diǎn)圖控件初始化代碼及結(jié)構(gòu)

方案2:

ui-html Tab 生成bui頁(yè)面引用
ui-page Tab 生成bui標(biāo)準(zhǔn)頁(yè)面結(jié)構(gòu)
ui-slide Tab 生成焦點(diǎn)圖控件靜態(tài)結(jié)構(gòu)
bui-slide Tab 生成焦點(diǎn)圖控件初始化代碼

準(zhǔn)備好了嗎?

bui-fast 跟 buijs 這里給大家做個(gè)簡(jiǎn)單的介紹, 接下來(lái)你可以繼續(xù)學(xué)習(xí)

BUI 快速開(kāi)始

簡(jiǎn)單示例

效果預(yù)覽

控件基本使用

在線預(yù)覽

BUI-Fast 讓編寫(xiě)更簡(jiǎn)單

準(zhǔn)備好了嗎?