mobilebone
Version:
Bone main for mobile web APP with a sigle page mode by using HTML5 history API router.
69 lines (65 loc) • 3.47 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.createPage</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.createPage(domOrHtml[[, elementOrOptions], options])</h2>
<p>重要API. 直接根据DOM或者HTML字符串创建页面，并载入。别看API名字较长，好像很复杂，其实很简单滴。</p>
<h3>参数</h3>
<ul>
<li><code>domOrHtml</code> DOM元素或字符串。必须参数。生成创建页面的主内容。</li>
<li><code>elementOrOptions</code> DOM元素或者对象。可选参数，可以是<code><a></code>元素，page元素，也可以是第3个<code>options</code>参数。此参数主要用来获得触发元素上绑定的一些属性值，例如<code>data-title</code>。</li>
<li><code>options</code> 键值序列对象。可选参数。</li>
</ul>
<h3>返回值</h3>
<p>-</p>
<h3>更多说明 <time>(add on 2015-05-04 and 2017-11-19)</time></h3>
<ol>
<li>当<code>options</code>参数缺省的时候，第二个参数<code>elementOrOptions</code>可以作为<code>options</code>参数使用；</li>
<li>目前，常用<code>options</code>选项有：
<ul>
<li><code>options.id</code> 创建页面的id，如果缺省，Mobilebone会生成唯一id；</li>
<li><code>options.remove</code> 是否移除重复的页面元素（页面仅保留最新创建的），此参数生效需要通常需要指定页面<code>id</code>，Mobilebone内置的<code>ajax()</code>方法会以请求<code>url</code>作为id，如果纯字符或DOM创建，则需要自己指定<code>options.id</code>，否则无法准确删除对应的页面；</li>
<li><code>options.target</code> 点击触发过场的元素；</li>
<li><code>options.history</code> 是否增加历史记录；</li>
</ul>
<p>其他选项，还包括：</p>
<ul>
<li><code>options.title</code> 新页面标题；</li>
<li><code>options.container</code> 装载新页面的容器；</li>
<li><code>options.classPage</code> 内切换的类名；</li>
<li><code>options.back</code> 布尔型。是否过场是返回类型；</li>
</ul>
</li>
</ol>
<h3>使用示例</h3>
<pre>Mobilebone.createPage(pageDom);
Mobilebone.createPage(generalDom);
Mobilebone.createPage('<div class="page out">xxx</div>');
Mobilebone.createPage('<p>xxx</p>', {
remove: true,
id: "idJustUnique"
});
Mobilebone.createPage(pageDom, triggerLink);
Mobilebone.createPage(pageDom, { reponse: '<div…>' });
Mobilebone.createPage(pageDom, triggerLink, { reponse: '<div…>' });</pre>
</div>
</div>
<script src="../../src/mobilebone.js"></script>
<script>
Mobilebone.captureLink = false;
window.navKey = "createPage";
</script>
<script src="nav.js"></script>
<script src="../assets/docs.js"></script>
</body>
</html>