Skip to content

Commit e1c812d

Browse files
author
zhangxinxu
committed
ppt go
ppt go, more useful, more content~
1 parent 1b54f8d commit e1c812d

File tree

3 files changed

+81
-4
lines changed

3 files changed

+81
-4
lines changed

‎plugins/ppt/index.html

Lines changed: 59 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -68,13 +68,70 @@ <h1>如何使用？</h1>
6868
page</pre>
6969
</div>
7070
</div>
71-
<div id="page4" class="page out">
71+
<div class="page out">
7272
<div class="content only-header">
7373
<h1>优势？</h1>
7474
<p>mobilebone.js只做了一件事情，切换。所以，JS文件很小，gzip后3~4K, 而且很灵活，几乎没有任何UI的限制，适用于各个项目各个场景。</p>
7575
</div>
7676
</div>
77-
<div id="page5" class="page out">
77+
78+
<div class="page out">
79+
<div class="content only-header">
80+
<h1>mobilebone.js深入</h1>
81+
<h4>基本触发机制</h4>
82+
<p>与jQuery Mobile类似的机制，引入mobilebone.js, 即对页面所有a标签做了委托。根据<code>href</code>值做智能判断直接过场，Ajax请求过场，还是无作为(javascript:*或外链)。<code>data-ajax="false"</code>会还原链接为传统跳转。</p>
83+
<p>默认是<code>click</code>绑定，但如果你引用类似Zepto的<code>touch</code>模块，则mobilebone走<code>touch</code>事件。</p>
84+
<p><code>Mobilebone.captureLink = false</code>全局设置，会让页面所有链接普通化，除非有<code>data-ajax=true</code>.</p>
85+
<p>对页面所有<code>form</code>的<code>submit</code>也做了委托，默认所有的表单都是<code>ajax</code>提交，并根据返回内容实现过场效果。规则与<code>a</code>元素<code>ajax</code>提交类似。</p>
86+
</div>
87+
</div>
88+
89+
<div class="page out">
90+
<div class="content only-header">
91+
<h1>mobilebone.js深入</h1>
92+
<h4>过场原理</h4>
93+
<p>与jQuery Mobile一样的机制，in/out/reverse类名切换触发：</p>
94+
<pre class="f20">"page slide in" / "page slide out" → "page slide out" / "page slide in"</pre>
95+
<p class="fade out">其中<code>slide</code>是动画的类型，默认值。你可以自定义，或者使用<code>animate.css</code>(jQuery Mobile中CSS分离), 含更多过场效果。</p>
96+
<div class="fade out">
97+
<h4>路由管理机制</h4>
98+
<p>使用HTML5 <code>history</code> API. 使用url <code>hash</code>记录, 格式同样借鉴J&amp;M, <code>#&amp;</code>, 后面跟随每个页面对应的标志量（页面id或ajax地址）。</p>
99+
<p>每当页面刷新、前进或后退(<code>popstate</code>), Mobilebone会根据<code>hash</code>对应标志量直接显示或重新请求对应页面。</p>
100+
</div>
101+
</div>
102+
</div>
103+
104+
<div class="page out">
105+
<div class="content only-header">
106+
<h1>mobilebone.js深入</h1>
107+
<h4>页面缓存机制</h4>
108+
<p>默认即存在的page默认都缓存；ajax请求页面默认缓存，<code>data-reload="true"</code>时候请求页面不会缓存。</p>
109+
<div class="fade out">
110+
<h4>页面事件管理</h4>
111+
<p>可全局或单独页面设置各类回调事件，目前有：<code>callback</code>, <code>fallback</code>, <code>onpagefirstinto</code>, <code>animationstart</code>, <code>animationend</code>, <code>preventdefault</code>.</p>
112+
<p>全局定义如：Mobilebone.callback = function() {};</p>
113+
<p>局部定义<code>data-callback="function_key"</code>. 可以使用<code>data-root</code>指定暴露的全局对象，例如：<code>data-root="$"</code></p>
114+
<p><code>Mobilebone.mergeCallback</code>可以控制全局和局部回调是覆盖还是合并(默认)。</p>
115+
</div>
116+
</div>
117+
</div>
118+
119+
<div class="page out">
120+
<div class="content only-header">
121+
<h1>mobilebone.js深入</h1>
122+
<h4 class="mb-3">Ajax参数以及事件管理</h4>
123+
<p>与jQuery, Zepto <code>$.ajax()</code>一致，例如<code>data-success</code>, <code>data-error</code>, <code>data-timeout</code>等，也可以使用<code>data-params</code>以查询字符串形式设置多个参数。</p>
124+
<p class="fade out"><code>form</code>表单也是如此。</p>
125+
<p class="fade out">如果<code>datatype</code>为<code>"json"</code>，Mobilebone会拿<code>Mobilebone.jsonHandle(response)</code>的返回值作为新页面载入。如果是默认字符串类型，则直接载入<code>response</code>(有处理，获取<code>title</code>, <code>page</code>元素等).</p>
126+
<div class="fade out">
127+
<h4 class="mb-3">其他细节</h4>
128+
<p>有<code>title</code>管理机制，方向管理机制<code>data-rel="abck/auto"</code>，菊花可定制（整页或某元素内），或者模块化加载等。</p>
129+
<pre class="mt-3">var Mobilebone = require('mobilebone');
130+
Mobilebone.init();</pre>
131+
</div>
132+
</div>
133+
</div>
134+
<div class="page out">
78135
<div class="content section-header">
79136
<h1>Q&amp;A</h1>
80137
<h2>by zhangxinxu 2014-10</h2>

‎plugins/ppt/mobilebone.ppt.js

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -112,5 +112,24 @@ if (window.Mobilebone && Mobilebone.support) {
112112
}
113113
};
114114

115+
// 确定缩放比例
116+
var funGetScale = function() {
117+
var width = window.innerWidth, height = window.innerHeight;
118+
var scaleWidth = width / 1024,
119+
scaleHeight = height / 768;
120+
return Math.min(scaleWidth, scaleHeight).toFixed(2);
121+
};
122+
123+
var scale = funGetScale();
124+
125+
var style = document.createElement("style");
126+
style.innerHTML = '.content{-webkit-transform:scale('+ scale +');transform:scale('+ scale +');}';
127+
document.querySelector("head").appendChild(style);
128+
129+
window.addEventListener("resize", function() {
130+
scale = funGetScale();
131+
style.innerHTML = '.content{-webkit-transform:scale('+ scale +');transform:scale('+ scale +');}';
132+
});
133+
115134
})(window, document);
116135
}

‎plugins/ppt/ppt.css

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,9 @@
1-
.content { width: 1024px; height: 768px; max-height: 100%; max-width: 100%; line-height: 1.5; position: absolute; left: 0; top: 0; right: 0; bottom: 0; margin: auto; box-sizing: border-box; padding-left: 50px; padding-right: 50px; font-size: 24px; font-family: 'microsoft yahei'; box-shadow: 0 0 10px rgba(0,0,0,.25); overflow: hidden; }
1+
.content { width: 1024px; height: 768px; line-height: 1.5; position: absolute; left: 0; top: 0; right: 0; bottom: 0; margin: auto; box-sizing: border-box; padding-left: 50px; padding-right: 50px; font-size: 24px; font-family: 'microsoft yahei'; overflow: hidden; }
22
.content .out { display: none; }
33
.section-header { text-align: center; }
44
.section-header > h1 { position: absolute; top: 50%; left: 0; right: 0; margin: -72px 0 0; font-size: 48px; }
55
.section-header > h2 { position: absolute; top: 50%; left: 0; right: 0; margin: 42px 0 0; font-size: 28px; color: #666; }
66

77
.only-header > h1 { font-size: 36px; margin: 1em 0; }
8-
.only-header pre { background-color: #eee; font-family: "Lucida Console", Monaco, monospace; padding: .5em; white-space: pre-wrap; word-wrap: break-word; }
8+
.only-header pre, .only-header code { background-color: #eee; font-family: "Lucida Console", Monaco, monospace; padding: .5em; white-space: pre-wrap; word-wrap: break-word; }
9+
.only-header code { padding: .2em .4em; margin: 0 .1em; }

0 commit comments

Comments
 (0)