mobilebone
Version:
Bone main for mobile web APP with a sigle page mode by using HTML5 history API router.
61 lines (58 loc) • 3.37 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文档-Mobilebone.transition</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>Mobilebone.transition(pageInto[, pageOut][[, back], options])</h2>
<p>页面切换效果核心方法。含缓存机制、事件回调触发等。</p>
<h3>参数</h3>
<ul>
<li><code>pageInto</code> DOM元素。表示进入的page元素. 必须参数。</li>
<li><code>pageOut</code> DOM元素。表示要移出的page元素. 可选。没有移出元素使用<code>null</code>.</li>
<li><code>back</code> 布尔值。是否反方向过场。可缺省。</li>
<li><code>options</code> 对象。此参数多内部使用。当<code>back</code>缺省时候，可以占据<code>back</code>位置使用。</li>
</ul>
<h3>options参数</h3>
<p>如果对Mobilebone足够熟悉，就可以使用<code>Mobilebone.transition</code>编写插件，实现诸多自定义效果。例如: <code>plugins/ppt</code>目录中的<code>mobilebone.ppt.js</code>插件，此时，你需要对<code>options</code>支持的一些参数有所了解：</p>
<ul>
<li><code>id</code> 进入页面元素的<code>id</code>, 绝大多数情况下，你用不到此参数，Mobilebone有一套<code>id</code>获取机制。除非<code>pageInto</code>本身没有<code>id</code>，需要额外指定。</li>
<li><code>response</code> ajax请求的返回内容，此参数主要目的是暴露给回调函数，于是可以根据返回数据做一些其他事情。</li>
<li><code>target</code> 一般指点击的那个<code>a</code>元素，如果是表单提交，可能会代指<code>form</code>元素。此参数v2.3.0+后更加规范化，在处理复杂应用时，会比较有用。</li>
<li><code>remove</code> 是否移除同<code>id</code>缓存的元素。</li>
<li><code>history</code> 是否在新增一条历史记录。对于一些单页应用，或者内切换，可以设置<code>history: false</code>，与<code>Mobilebone.pushStateEnabled = false</code>作用异曲同工。</li>
<li><code>classPage</code> 当前切换对象识别类名，如果是内部切换，此值会与<code>Mobilebone.classPage</code>值不一样。</li>
</ul>
<h3>返回值</h3>
<p><code>undefined</code></p>
<h3>使用示例</h3>
<pre>Mobilebone.transition(element);
Mobilebone.transition(element1, element2);
Mobilebone.transition(element1, element2, true);
Mobilebone.transition(element1, element2, { id: "only" });
Mobilebone.transition(element1, element2, true, { id: "only" });
Mobilebone.transition(element1, element2, false, {
id: "only",
target: elementA,
remove: false,
history: false
});</pre>
</div>
</div>
<script src="../../src/mobilebone.js"></script>
<script>
Mobilebone.captureLink = false;
window.navKey = "transition";
</script>
<script src="nav.js"></script>
<script src="../assets/docs.js"></script>
</body>
</html>