mobilebone
Version:
Bone main for mobile web APP with a sigle page mode by using HTML5 history API router.
74 lines (71 loc) • 6.22 kB
HTML
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no">
<title>Mobilebone.js API文档-data-callbackKeys</title>
<link rel="stylesheet" href="../../src/mobilebone.css">
<link rel="stylesheet" href="../assets/docs.css">
</head>
<body>
<header id="header"></header>
<aside id="aside"></aside>
<div class="page out">
<div class="content">
<h2>data-callbackKeys</h2>
<p>这里的<code>callbackKeys</code>只是一种统称，实际没有这个自定义属性的，指的是一系列回调写法，因为除了长相不一样，其他都类似，所以合在一起讲了。</p>
<p>其家庭成员包括：</p>
<ul>
<li><code>data-onpagefirstinto</code> 页面第一次载入执行，过场刚开始即执行。
<p>语法：</p>
<pre>onpagefirstinto(pageInto, pageOut, options)</pre>
<p>其中<code>pageInto</code>表示进入的页面的DOM，<code>pageOut</code>表示离开的页面的DOM，<code>options</code>为可选参数，具体：</p>
<ul>
<li><strong>options.response</strong> 返回的数据。这个参数多半应用在Ajax请求时候。</li>
<li><strong>options.target</strong> （触发过场）点击的页面元素。</li>
<li><strong>options.id</strong> 页面标示<code>id</code>, 一般仅在<code>url</code>请求时候存在。</li>
<li><strong>options.history</strong> 是否在浏览历史中添加一条记录。此属性大可不必关心。</li>
<li><strong>options.remove</strong> 是否删除同<code>id</code>的页面。此属性大可不必关心。</li>
<li><strong>options.query</strong> 执行载入的URL地址后面的查询参数。例如<code>#pageTarget?id=1</code>，此时<code>options.query</code>值是<code>{id: 1}</code>，又或者<code>/ajax/pageTarget.php?id=2</code>载入的页面，此时<code>options.query</code>值是<code>{id: 2}</code>。</li>
</ul>
</li>
<li><code>data-callback</code> 页面每次进入都会执行，过场刚开始即执行。<p>语法：</p><pre>callback(pageInto, pageOut, options)</pre></li>
<li><code>data-fallback</code> 页面每次离开都会执行，过场刚开始即执行。<p>语法：</p><pre>fallback(pageInto, pageOut, options)</pre></li>
<li><code>data-animationstart</code> 页面动画即将开始执行的回调，离开页面，进入页面均会触发。<p>语法：</p><pre>animationstart(page, intoOrOut, options)</pre></li>
<li><code>data-animationend</code> 页面动画结束之后执行的回调，离开页面，进入页面均会触发。<p>语法：</p><pre>animationend(page, intoOrOut, options)</pre></li>
<li><code>data-preventdefault</code> 介入回调，可以用来中断Mobilebone的一些默认行为，可以过场等行为触发之前实现一些自定义行为。<p>当使用在页面元素上时候的语法：</p><pre>preventdefault(pageInto, pageOut, options)</pre><p>当返回值为<code>true</code>的时候会阻断Mobilebone的一些默认行为。</p></li>
</ul>
<p>每个回调的作用于使用场景可参见博文说明：<a href="http://www.zhangxinxu.com/wordpress/2014/10/mobilebone-js-mobile-web-app-core/" class="link">点击这里</a>。</p>
<p>其中，<code>data-preventdefault</code>并非<code>page</code>元素专有，<code>a</code>元素，<code>form</code>元素也支持此回调，具体可<a href="data-preventDefault.html" class="link">点击这里</a>。</p>
<h3>其他说明</h3>
<p><code>data-ajaxKeys</code>也是类似的集合API。</p>
<h3>补充说明(<time>2015-04-15</time>)</h3>
<del>
<p>有很多人问过静态页面间传参的问题。由于是单页，因此，可以设置个全局对象，专门负责参数传递，但是，有些人就是不想走全局对象传参，怎么办？</p>
<p>是这样的，如果你是点击<code><a></code>元素触发的过场，则所有的回调函数中的<code>options</code>这个参数（是个纯对象）中会有一个target属性，其值就是我们之前点击的<code><a></code>元素，于是，你就可以获得你想要的参数了。例如：</p>
<pre><a href="load.html?id=111">页面111</a></pre>
<p>111可能是你想传递的参数，然后，就可以通过下面一行脚本获得：</p>
<pre>var id = options.target.href.replace(/\D/g, "");</pre>
</del>
<p><strong>更新于2019-05-15</strong></p>
<p>页面间传参请使用options.query，v2.7.4+支持。</p>
<h3>补充于2015-05-30(v2.5.8)</h3>
<p>尤其当使用<code>data-callback</code>和<code>data-fallback</code>处理一些回调的时候，有可能前后两个页面结构一致，数据不一样，就很有可能出现<code>id</code>一致的情况，如果单纯使用<code>$("#ID")</code>或<code>document.querySelector("#ID")</code>, 则得到的元素并不是新页面你希望选择的元素。怎么办，请使用回调方法中的页面参数作为容器去获取对应的元素，例如：</p>
<pre>Mobilebone.callback = function(<span style="color:#cd0000;">pagein</span>) {
<del style="color:green;">// NOT: var element = document.querySelector("#ID");</del>
var element = <span style="color:#cd0000;">pagein</span>.querySelector("#ID");
<span style="color:green;">// do sth by using elememt...</span>
};</pre>
<p><strong>更新于2019-05-15</strong></p>
<p>同一类别页面请使用<code>data-reload</code>控制，设置属性值为唯一的ID即可，可以避免同ID元素出现的情况。详见<a href="data-reload.html" class="link">data-reload</a>。</p>
</div>
</div>
<script src="../../src/mobilebone.js"></script>
<script>
Mobilebone.captureLink = false;
window.navKey = "data-callbackKeys";
</script>
<script src="nav.js"></script>
<script src="../assets/docs.js"></script>
</body>
</html>