mobilebone.js使用筆記

時間 2019-11-12

標籤 mobilebone.js mobilebone 使用筆記欄目 JavaScript 简体版

原文原文鏈接

mobilebone.js主要用來是網頁呈現單頁效果，添加相似native app的頁面切換效果。原理是：當打開a連接裏的頁面時，再也不以傳統的新頁面打開，而是以ajax-html的方式，將新頁面的內容做爲一個頁面片斷追加到原來頁面。因爲默認的緩存做用，下次打開將瞬間打開子頁面。默認切換有切入切除效果。css

目錄結構

--
  --src   核心文件
    --mobilebone.js
    --mobilebone.css
    --mobilebone.animate.css 附加轉場動畫
  --example           精湛示例
  --docs              APIs文檔
  --test              UI比較挫的測試頁面
    index.html        測試引導
    --base-slide      基本切換
    --ajax-html       Ajax請求HTML測試
    --ajax-json       Ajax請求JSON數據測試
    --callback        回調測試
    --transition      其餘切換效果測試，animate.css能夠關注下
    --fixed-header-footer    固定的頭部與底部
    --form-submit     表單提交
    --prevent-default Mobilebone默認行爲的中斷與介入
    --modular-load    模塊化加載測試
    --backbone        與backbone組合使用演示
    --complex   複雜實例，微信模擬

簡單使用

代碼引入html

<link rel="stylesheet" href="mobilebone.css">
<script src="mobilebone.js"></script>

不依賴第三方插件。git

建議的網頁佈局：web

<body>
  <div id="pageHome" class="page out"></div>
  <div id="page1" class="page out"></div>
  <div id="page2" class="page out"></div>
  <div id="page3" class="page out"></div>
</body>

其中每一個帶有class="page"的都視爲一個頁面片斷，默認展現第一個頁面片斷，即示例裏的pageHome，其它子頁面被隱藏。id的做用是在返回的時候正確的找到原來的頁面。下面的完整例子進行講解：ajax

test/transition/index.html

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no">
<title>切換動畫</title>
<link rel="stylesheet" href="../../src/mobilebone.css">
<link rel="stylesheet" href="../test.css">
<link rel="stylesheet" href="animate.css">
<style>
.custome.in {
    -webkit-animation: fadein .35s .25s both;
    animation: fadein .35s .25s both;
}
.custome.out {
    -webkit-animation-name: fadeout;
    animation-name: fadeout;
}
</style>
</head>

<body class="turn-flip">
<div id="pageHome" class="page out" data-form="custome">
    <ul>
        <li><a href="#page1">頁面1 - fade</a></li>
        <li><a href="#page2">頁面2 - flip</a></li>
        <li><a href="#page3">頁面3 - turn</a></li>
        <li><a href="#page4">頁面4 - flow</a></li>
        <li><a href="#page5">頁面5 - slideup</a></li>
    </ul>
    <ul>
        <li><a href="../index.html" data-ajax="false">&laquo; 返回測試引導首頁</a></li>
    </ul>
</div>
<div id="page1" class="page out" data-form="fade">
    <a href="#pageHome" data-rel="back">&laquo;返回1</a>
    <p>淡入淡出效果</p>
</div>
<div id="page2" class="page out" data-form="flip">
    <a href="#pageHome" data-rel="back">&laquo;返回2</a>
    <p>彈入彈出效果</p>
</div>
<div id="page3" class="page out" data-form="turn">
    <a href="#pageHome" data-rel="back">&laquo;返回3</a>
    <p>翻頁效果</p>
</div>
<div id="page4" class="page out" data-form="flow">
    <a href="#pageHome" data-rel="back">&laquo;返回4</a>
    <p>流入流出效果</p>
</div>
<div id="page5" class="page out" data-form="slideup">
    <a href="#pageHome" data-rel="back">&laquo;返回5</a>
    <p>上移淡出效果</p>
</div>

<script src="../../src/mobilebone.js"></script>
</body>
</html>

訪問DEMO頁後，咱們會發現，只有id="pageHome"的div展現，也就是第一個page類。當點擊li裏的任意一個子連接會進入對應的頁面片斷，如#page1。json

如今作幾點總結：
mobilebone要生效，必須知足瀏覽器

主頁面的class必須有page類,out類建議也加上，不然在刷新子頁面會出現重疊。
連接必須是a連接，如<a href="#page1">頁面1 - fade</a>。其中href是子頁面連接，子頁面能夠是片斷，即不包含<head>、css、js等內容。

固然，a連接裏還能夠添加其它屬性。緩存

data-rel="back" 定義返回的方式，能夠沒有。tab頁切換建議值是auto
data-title="標題" 設置子頁面標題（適用於加載頁面片斷）
data-reload="false" 默認是false，爲true時子頁面每次刷新
data-ajax="false" 避免Ajax加載，使用傳統刷新
data-formdata="c=1&d=1" 給子頁面傳的參數
data-timeout="30000" 設置請求超時時間爲30秒。
data-params="datatype=json&timeout=20000&success=fun_success" 自定義參數
data-form="fade" 須要mobilebone.animate.css支持
data-success="globalObject.fun.xxx_ajax_success 請求成功會調用的方法，後面會講

示例：微信

<a href="#page1" data-title="子頁面" data-reload="false">頁面1</a>

有時候咱們多是在js裏進行返回到主頁面的，這時候沒有a連接能夠點擊，咱們可使用location.href = '#pageHome';方式進行返回，即只要觸發點擊href裏的#pageHome便可，就能夠返回對應的id的主頁面了。app

默認瀏覽器上的返回按鈕會返回到上一個page頁面裏。

子頁面回調

當使用了須要mobilebone.js加載子頁面時候，在子頁面寫js事件將無效。這時候須要在來源頁（即主頁面）使用須要mobilebone寫。

fallback(pageInto, pageOut, response → options)
每次過場頁面退出的時候都會執行, v.1.1.4+新增。參數與onpagefirstinto含義一致，不贅述。

上面摘自文檔。在主頁面咱們可使用普通的事件回調拿到頁面進入那時刻的內容，如表單裏的數據，可是對於在子頁面進行輸入再提交的數據取不到。使用Mobilebone.fallback()能夠取到。

在Mobilebone.fallback()方法裏能夠監聽到頁面退出時刻文檔裏的內容。

Mobilebone.fallback = function(pageInto, pageOut){
    $('#user_save').click(function(){
        var nickname = $("input[name='nickname']").val();
        var gender = $("input[name='gender']:checked").val();
        $.ajax({
            url: "#",
            data: {'nick':nickname, 'gender':gender},
            dataType: 'json',
            type:'POST',
            success: function(){},
            error: function(){}
        });
    });

  }

#user_save以及"input[name='nickname']"這裏都是子頁面的內容，是在主頁面使用Mobilebone.fallback()獲取到的。

pageOut爲子頁面退出（用戶點擊返回按鈕）時候的文檔DOM。使用console.log(pageOut)能夠打印輸出。

文檔上的示例：

Mobilebone.callback = function(pagein) {
    // NOT: var element = document.querySelector("#ID");
    var element = pagein.querySelector("#ID");
    // do sth by using elememt...
};