mobilebone
Version:
Bone main for mobile web APP with a sigle page mode by using HTML5 history API router.
143 lines (131 loc) • 6.14 kB
HTML
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no">
<title>ajax请求HTML</title>
<link rel="stylesheet" href="../../src/mobilebone.css">
<link rel="stylesheet" href="../test.css">
</head>
<body>
<div id="container"></div>
<div id="pageHome" class="page out" style="overflow:auto;">
<ul>
<li><a href="ajax-page.html" data-params="id=1" data-container="container">请求缓存，data-container测试</a></li>
<li><a href="ajax-page.html#a=1#b=1&c=1#" data-reload>每次都请求，data-reload测试，自动删除上一次</a></li>
<li><a href="ajax-page.html?&&" data-formdata="?a=1" data-history="false">请求缓存，url过滤测试，data-history历史无变化</a></li>
<li><a href="ajax-page.html?debug=zhangrui.songyi#&/index.php/Home/Mall/index/sid/251 " data-reload data-formdata="?a=1">data-formdata传参测试-全覆盖loading</a></li>
<li><a href="ajax-page.html?a=1&#tt_fo#nt=m&tt_#daymode=1" data-reload data-formdata="&c=1" data-mask="true">data-formdata传参测试-data-mask内覆盖loading</a></li>
<li><a href="ajax-page.html?a=1&b=" class="follow" data-reload data-params="c=1&d=1" data-mask="true">data-params传参测试-跟随loading by CSS重置</a></li>
</ul>
<ul>
<li><a href="ajax-without-page.html" data-title="纯a标签元素返回页面" data-reload>点击加载-返回不含page, 自动创建page</a></li>
<li><a href="ajax-without-page.html" data-reload>svg中title测试（目标效果为不显示）</a></li>
</ul>
<ul id="rootReload">
<li><a href="root-reload.php?id=1">root-reload.php?id=1加载，缓存</a></li>
<li><a href="root-reload.php?id=2">root-reload.php?id=2加载，缓存</a></li>
<li><a href="root-reload.php?id=3">root-reload.php?id=3加载，缓存</a></li>
<li style="padding: 5px;"><button id="removePage">手动清除上面3个页面存储</button> <small>需打开控制台观察</small> <code>Mobilebone.remove(trigger)</code></li>
</ul>
<ul>
<li><a href="nosuffix">地址就是个简单名词</a></li>
</ul>
<ul>
<li><a href="b.html">连续加载测试-加载b页面</a></li>
<li><a href="b.html?a=1">连续加载测试-加载b页面</a></li>
</ul>
<ul>
<li><a href="ajax-page.html?v=1" data-reload="anyUniqueId">唯一详情页加载测试 <small>data-reload="anyUniqueId"</small></a></li>
<li><a href="ajax-page.html?v=2" data-reload="anyUniqueId">唯一详情页加载测试</a></li>
<li><a href="ajax-page.html?v=3" data-reload="anyUniqueId">唯一详情页加载测试</a></li>
<li><a href="ajax-page.html?v=4" data-reload="anyUniqueId">唯一详情页加载测试</a></li>
<li style="padding: 5px;"><button id="ajaxLoad">Mobilebone.ajax()方法唯一详情页加载</button></li>
</ul>
<ul>
<li><a href="http://www.zhangxinxu.com/sp/char.html" target="_blank">外部地址测试，应该直接跳转</a></li>
</ul>
<ul>
<li><a href="../index.html" data-ajax="false">« 返回测试引导首页</a></li>
</ul>
</div>
<script src="../../src/mobilebone.js"></script>
<script src="../../src/mobilebone.js"></script>
<!-- 厂子的frozenjs兼容测试 -->
<script src="../base-slide/zepto.js"></script>
<!-- <script src="../base-slide/frozen.js"></script> -->
<script>
// store title
document.getElementById("pageHome").setAttribute("data-title", document.title);
var optionsTest = function(elein, eleout, options) {
// ajax过场回调options参数测试
// console.log("点击的元素是：" + (options.target && options.target.outerHTML));
// console.log("请求内容是：" + options.response);
console.log("查询参数是：", options.query);
};
var init = function(ele, eleOut, params) {
var button = document.querySelector(".ajaxButton");
button.addEventListener("click", function() {
console.log("clicked!");
});
ele.querySelector(".result").innerHTML += 'inited! ' + '参数是：' + JSON.stringify(params.query);
ele.querySelector("#createPage").addEventListener("click", function() {
Mobilebone.createPage('<p>点击浏览器的后退再点击按钮创建，目标效果为不停创建。</p>');
});
ele.querySelector("#createPage2").addEventListener("click", function() {
Mobilebone.createPage('<p>点击浏览器的后退再点击按钮创建，目标效果为之前创建会删除，因为指定了id以及remove: true。</p><pre style="white-space:pre-wrap;">Mobilebone.createPage("...", {\
remove: true,\
id: "idJustUnique"\
});</pre>', {
remove: true,
id: 'idJustUnique'
});
});
};
var root_reload = function(pagein) {
var show = pagein.querySelector("#idShow"), should = pagein.querySelector("#idShould");
if (show && should) {
show.innerHTML = should.innerHTML;
}
};
var page_b_first = function() {
// console.log("first?");
if (window.$) $("#link").on("tap", function() {
location.href = this.href;
});
};
var page_root_first = function(pageinto) {
console.log("firstinto excuted!");
pageinto.querySelector("#ajaxFirstInto").addEventListener("click", function() {
console.log("should console only once!");
this.style.color = "#" + (Math.random() + "").slice(-6) ;
});
};
Mobilebone.evalScript = true;
var btnRemovePage = document.getElementById('removePage');
if (btnRemovePage) {
btnRemovePage.addEventListener('click', function () {
[].slice.call(document.querySelectorAll('#rootReload a')).forEach(function (ele) {
Mobilebone.remove(ele);
});
});
}
var version = 5;
document.querySelector('#ajaxLoad').addEventListener('click', function () {
Mobilebone.ajax({
url: 'ajax-page.html',
data: {
v: version++
},
remove: true,
id: 'anyUniqueId'
});
});
// 此为captureLink测试
// Mobilebone.captureLink = false;
/*$("a").tap(function() {
console.log("taped");
});*/
</script>
</body>
</html>