Skip to content

M
mui
Commit 1506d053 authored by fxy060608's avatar fxy060608
Browse files
Options

Merge branch 'gh-pages' of https://github.com/dcloudio/mui into gh-pages 

Conflicts:
	about/index.html
	components/index.html
	dist/js/mui.js
	dist/js/mui.min.js
	getting-started-old/index.html
	getting-started/index.html
	index.html
	javascript-old/index.html
	javascript/index.html
	sitemap.xml
parents 4f0091d0 730c40de
Show whitespace changes
Inline Side-by-side
Showing with 1277 additions and 531 deletions
about/index.html
View file @ 1506d053
...@@ -10,8 +10,13 @@ ...@@ -10,8 +10,13 @@
<meta name="apple-mobile-web-app-capable" content="yes"> <meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black"> <meta name="apple-mobile-web-app-status-bar-style" content="black">
<<<<<<< HEAD
<link rel="stylesheet" href="http://dcloudio.github.io/mui/dist/css/mui.min.css?v=2014-09-19 02:54:04 +0800"> <link rel="stylesheet" href="http://dcloudio.github.io/mui/dist/css/mui.min.css?v=2014-09-19 02:54:04 +0800">
<link rel="stylesheet" href="http://dcloudio.github.io/mui/assets/css/docs.css?v=2014-09-19 02:54:04 +0800"> <link rel="stylesheet" href="http://dcloudio.github.io/mui/assets/css/docs.css?v=2014-09-19 02:54:04 +0800">
=======
<link rel="stylesheet" href="http://dcloudio.github.io/mui/dist/css/mui.min.css?v=2014-09-23 21:45:03 +0800">
<link rel="stylesheet" href="http://dcloudio.github.io/mui/assets/css/docs.css?v=2014-09-23 21:45:03 +0800">
>>>>>>> FETCH_HEAD
<link rel="apple-touch-icon-precomposed" sizes="114x114" href="http://dcloudio.github.io/mui/assets/img/apple-touch-icon-114x114.png"> <link rel="apple-touch-icon-precomposed" sizes="114x114" href="http://dcloudio.github.io/mui/assets/img/apple-touch-icon-114x114.png">
...@@ -133,7 +138,7 @@ ...@@ -133,7 +138,7 @@
</p> </p>
<ul class="docs-footer-links"> <ul class="docs-footer-links">
<li>最新版本 v0.5.6</li> <li>最新版本 v0.5.7</li>
<li>&middot;</li> <li>&middot;</li>
<li><a href="https://github.com/dcloudio/mui/issues">Issues</a> <li><a href="https://github.com/dcloudio/mui/issues">Issues</a>
</li> </li>
...@@ -144,8 +149,13 @@ ...@@ -144,8 +149,13 @@
</ul> </ul>
</div> </div>
<script src="http://dcloudio.github.io/mui/dist/js/jquery-2.1.1.js"></script> <script src="http://dcloudio.github.io/mui/dist/js/jquery-2.1.1.js"></script>
<<<<<<< HEAD
<script src="http://dcloudio.github.io/mui/dist/js/mui.min.js?v=2014-09-19 02:54:04 +0800"></script> <script src="http://dcloudio.github.io/mui/dist/js/mui.min.js?v=2014-09-19 02:54:04 +0800"></script>
<script src="http://dcloudio.github.io/mui/assets/js/docs.min.js?v=2014-09-19 02:54:04 +0800"></script> <script src="http://dcloudio.github.io/mui/assets/js/docs.min.js?v=2014-09-19 02:54:04 +0800"></script>
=======
<script src="http://dcloudio.github.io/mui/dist/js/mui.min.js?v=2014-09-23 21:45:03 +0800"></script>
<script src="http://dcloudio.github.io/mui/assets/js/docs.min.js?v=2014-09-23 21:45:03 +0800"></script>
>>>>>>> FETCH_HEAD
</div> </div>
</div> </div>
......
components/index.html
View file @ 1506d053
...@@ -10,8 +10,13 @@ ...@@ -10,8 +10,13 @@
<meta name="apple-mobile-web-app-capable" content="yes"> <meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black"> <meta name="apple-mobile-web-app-status-bar-style" content="black">
<<<<<<< HEAD
<link rel="stylesheet" href="http://dcloudio.github.io/mui/dist/css/mui.min.css?v=2014-09-19 02:54:04 +0800"> <link rel="stylesheet" href="http://dcloudio.github.io/mui/dist/css/mui.min.css?v=2014-09-19 02:54:04 +0800">
<link rel="stylesheet" href="http://dcloudio.github.io/mui/assets/css/docs.css?v=2014-09-19 02:54:04 +0800"> <link rel="stylesheet" href="http://dcloudio.github.io/mui/assets/css/docs.css?v=2014-09-19 02:54:04 +0800">
=======
<link rel="stylesheet" href="http://dcloudio.github.io/mui/dist/css/mui.min.css?v=2014-09-23 21:45:03 +0800">
<link rel="stylesheet" href="http://dcloudio.github.io/mui/assets/css/docs.css?v=2014-09-23 21:45:03 +0800">
>>>>>>> FETCH_HEAD
<link rel="apple-touch-icon-precomposed" sizes="114x114" href="http://dcloudio.github.io/mui/assets/img/apple-touch-icon-114x114.png"> <link rel="apple-touch-icon-precomposed" sizes="114x114" href="http://dcloudio.github.io/mui/assets/img/apple-touch-icon-114x114.png">
...@@ -3630,7 +3635,7 @@ ...@@ -3630,7 +3635,7 @@
</p> </p>
<ul class="docs-footer-links"> <ul class="docs-footer-links">
<li>最新版本 v0.5.6</li> <li>最新版本 v0.5.7</li>
<li>&middot;</li> <li>&middot;</li>
<li><a href="https://github.com/dcloudio/mui/issues">Issues</a> <li><a href="https://github.com/dcloudio/mui/issues">Issues</a>
</li> </li>
...@@ -3641,8 +3646,13 @@ ...@@ -3641,8 +3646,13 @@
</ul> </ul>
</div> </div>
<script src="http://dcloudio.github.io/mui/dist/js/jquery-2.1.1.js"></script> <script src="http://dcloudio.github.io/mui/dist/js/jquery-2.1.1.js"></script>
<<<<<<< HEAD
<script src="http://dcloudio.github.io/mui/dist/js/mui.min.js?v=2014-09-19 02:54:04 +0800"></script> <script src="http://dcloudio.github.io/mui/dist/js/mui.min.js?v=2014-09-19 02:54:04 +0800"></script>
<script src="http://dcloudio.github.io/mui/assets/js/docs.min.js?v=2014-09-19 02:54:04 +0800"></script> <script src="http://dcloudio.github.io/mui/assets/js/docs.min.js?v=2014-09-19 02:54:04 +0800"></script>
=======
<script src="http://dcloudio.github.io/mui/dist/js/mui.min.js?v=2014-09-23 21:45:03 +0800"></script>
<script src="http://dcloudio.github.io/mui/assets/js/docs.min.js?v=2014-09-23 21:45:03 +0800"></script>
>>>>>>> FETCH_HEAD
</div> </div>
</div> </div>
......
dist/css/mui.css
View file @ 1506d053
...@@ -513,7 +513,7 @@ p { ...@@ -513,7 +513,7 @@ p {
width: 8.33333333%; width: 8.33333333%;
} }
} }
.mui-iscroll-wrapper { .mui-scroll-wrapper {
position: absolute; position: absolute;
top: 0; top: 0;
bottom: 0; bottom: 0;
...@@ -521,47 +521,49 @@ p { ...@@ -521,47 +521,49 @@ p {
z-index: 1; z-index: 1;
width: 100%; width: 100%;
overflow: hidden; overflow: hidden;
}
.mui-bar-nav ~ .mui-iscroll-wrapper {
top: 44px;
padding: 0;
}
.mui-bar-header-secondary ~ .mui-iscroll-wrapper {
top: 88px;
}
.mui-bar-footer ~ .mui-iscroll-wrapper { -webkit-backface-visibility: hidden;
bottom: 44px;
padding: 0;
} }
.mui-bar-footer-secondary ~ .mui-iscroll-wrapper { .mui-scroll {
bottom: 88px; position: absolute;
} z-index: 1;
width: 100%;
-webkit-transform: translateZ(0);
transform: translateZ(0);
.mui-bar-tab ~ .mui-iscroll-wrapper { -webkit-backface-visibility: hidden;
bottom: 50px;
padding: 0;
} }
.mui-bar-footer-secondary-tab ~ .mui-iscroll-wrapper { .mui-scrollbar {
bottom: 94px; position: absolute;
top: 0;
right: 1px;
bottom: 2px;
z-index: 9999;
width: 4px;
overflow: hidden;
opacity: 1;
-webkit-transition: 500ms;
transition: 500ms;
transform: translateZ(0px);
} }
.mui-iscroll { .mui-scrollbar-indicator {
position: absolute; position: absolute;
z-index: 1; display: block;
width: 100%; width: 100%;
-webkit-text-size-adjust: none; height: 147px;
-webkit-user-select: none; box-sizing: border-box;
-webkit-transform: translateZ(0); background: rgba(0, 0, 0, .39804);
transform: translateZ(0); border: 1px solid rgba(255, 255, 255, .80196);
border-top-left-radius: 2px;
-webkit-tap-highlight-color: transparent; border-top-right-radius: 2px;
-webkit-touch-callout: none; border-bottom-right-radius: 2px;
text-size-adjust: none; border-bottom-left-radius: 2px;
-webkit-transition: .01s cubic-bezier(.1, .57, .1, 1);
transition: .01s cubic-bezier(.1, .57, .1, 1);
transform: translate(0px, 0px) translateZ(0px);
} }
.mui-off-canvas-height-fixed { .mui-off-canvas-height-fixed {
...@@ -2411,6 +2413,8 @@ select { ...@@ -2411,6 +2413,8 @@ select {
white-space: nowrap; white-space: nowrap;
-webkit-transition: all 0s linear; -webkit-transition: all 0s linear;
transition: all 0s linear; transition: all 0s linear;
-webkit-backface-visibility: hidden;
} }
.mui-slider .mui-slider-group .mui-slider-item { .mui-slider .mui-slider-group .mui-slider-item {
position: relative; position: relative;
...@@ -2419,6 +2423,8 @@ select { ...@@ -2419,6 +2423,8 @@ select {
height: 100%; height: 100%;
font-size: 14px; font-size: 14px;
vertical-align: top; vertical-align: top;
-webkit-backface-visibility: hidden;
} }
.mui-slider .mui-slider-group .mui-slider-item a { .mui-slider .mui-slider-group .mui-slider-item a {
position: relative; position: relative;
...@@ -2636,7 +2642,6 @@ select { ...@@ -2636,7 +2642,6 @@ select {
width: 100%; width: 100%;
height: 490px; height: 490px;
overflow: hidden; overflow: hidden;
background: #efeff4;
} }
.mui-pull-top-pocket { .mui-pull-top-pocket {
...@@ -2667,14 +2672,14 @@ select { ...@@ -2667,14 +2672,14 @@ select {
} }
.mui-pull-loading { .mui-pull-loading {
display: inline-block;
width: 20px;
height: 20px;
vertical-align: middle; vertical-align: middle;
-webkit-transition-duration: 400ms; background-image: url("data:image/GIF;base64,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");
transition-duration: 400ms; background-repeat: no-repeat;
} background-position: center center;
background-size: contain;
.mui-pull-loading.mui-reverse {
-webkit-transform: translate(0, 0) rotate(180deg);
transform: translate(0, 0) rotate(180deg);
} }
.mui-pull-caption { .mui-pull-caption {
...@@ -2939,7 +2944,7 @@ select { ...@@ -2939,7 +2944,7 @@ select {
content: "\e464"; content: "\e464";
} }
.mui-icon-spinner-cycle:before { .mui-icon-spinner-cycle {
content: "\e465"; content: "\e465";
} }
...@@ -3074,3 +3079,20 @@ select { ...@@ -3074,3 +3079,20 @@ select {
.mui-icon-pulldown:before { .mui-icon-pulldown:before {
content: "\e588"; content: "\e588";
} }
.mui-fullscreen {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
width: 100%;
height: 100%;
}
.mui-fullscreen .mui-slider-group {
height: 100%;
}
.mui-fullscreen .mui-slider-item > a {
top: 50%;
transform: translateY(-50%);
}
dist/css/mui.min.css
View file @ 1506d053
This source diff could not be displayed because it is too large. You can view the blob instead.
dist/js/mui.js
View file @ 1506d053
...@@ -37,7 +37,7 @@ var mui = (function(document, undefined) { ...@@ -37,7 +37,7 @@ var mui = (function(document, undefined) {
var wrap = function(dom, selector) { var wrap = function(dom, selector) {
dom = dom || []; dom = dom || [];
dom.__proto__ = $.fn; dom['__proto__'] = $.fn;
dom.selector = selector || ''; dom.selector = selector || '';
return dom; return dom;
}; };
...@@ -408,7 +408,7 @@ var mui = (function(document, undefined) { ...@@ -408,7 +408,7 @@ var mui = (function(document, undefined) {
var targetElement = $.targets.click; var targetElement = $.targets.click;
if (targetElement) { if (targetElement) {
var clickEvent, touch; var clickEvent, touch;
// On some Android devices activeElement needs to be blurred otherwise the synthetic click will have no effect (#24) // On some Android devices activeElement needs to be blurred otherwise the synthetic click will have no effect
if (document.activeElement && document.activeElement !== targetElement) { if (document.activeElement && document.activeElement !== targetElement) {
document.activeElement.blur(); document.activeElement.blur();
} }
...@@ -523,7 +523,6 @@ var mui = (function(document, undefined) { ...@@ -523,7 +523,6 @@ var mui = (function(document, undefined) {
$.gestures.sort(function(a, b) { $.gestures.sort(function(a, b) {
return a.index - b.index; return a.index - b.index;
}); });
return $.gestures; return $.gestures;
}; };
/** /**
...@@ -575,7 +574,7 @@ var mui = (function(document, undefined) { ...@@ -575,7 +574,7 @@ var mui = (function(document, undefined) {
} }
$.each($.gestures, function(index, gesture) { $.each($.gestures, function(index, gesture) {
if (!$.gestures.stoped) { if (!$.gestures.stoped) {
if ($.options.gestureConfig[gesture.name]) { if ($.options.gestureConfig[gesture.name] !== false) {
if (gesture.hasOwnProperty('handle')) { if (gesture.hasOwnProperty('handle')) {
gesture.handle(event, touch); gesture.handle(event, touch);
} }
...@@ -586,16 +585,25 @@ var mui = (function(document, undefined) { ...@@ -586,16 +585,25 @@ var mui = (function(document, undefined) {
var touch = {}; var touch = {};
var detectTouchStart = function(event) { var detectTouchStart = function(event) {
$.gestures.stoped = false; $.gestures.stoped = false;
var now = Date.now();
var point = event.touches[0];
touch = { touch = {
target: event.target, target: event.target,
lastTarget: (touch.lastTarget ? touch.lastTarget : null), lastTarget: (touch.lastTarget ? touch.lastTarget : null),
startTime: Date.now(), startTime: now,
touchTime: 0, touchTime: 0,
flickStartTime: now,
lastTapTime: (touch.lastTapTime ? touch.lastTapTime : 0), lastTapTime: (touch.lastTapTime ? touch.lastTapTime : 0),
start: { start: {
x: event.touches[0].pageX, x: point.pageX,
y: event.touches[0].pageY y: point.pageY
}, },
flickStart: {
x: point.pageX,
y: point.pageY
},
flickDistanceX: 0,
flickDistanceY: 0,
move: { move: {
x: 0, x: 0,
y: 0 y: 0
...@@ -618,11 +626,16 @@ var mui = (function(document, undefined) { ...@@ -618,11 +626,16 @@ var mui = (function(document, undefined) {
if ($.gestures.stoped) { if ($.gestures.stoped) {
return; return;
} }
touch.touchTime = Date.now() - touch.startTime; var now = Date.now();
touch.touchTime = now - touch.startTime;
touch.move = { touch.move = {
x: event.touches[0].pageX, x: event.touches[0].pageX,
y: event.touches[0].pageY y: event.touches[0].pageY
}; };
if (now - touch.flickStartTime > 300) {
touch.flickStartTime = now;
touch.flickStart = touch.move;
}
touch.distance = getDistance(touch.start, touch.move); touch.distance = getDistance(touch.start, touch.move);
touch.angle = getAngle(touch.start, touch.move); touch.angle = getAngle(touch.start, touch.move);
touch.direction = getDirectionByAngle(touch.angle); touch.direction = getDirectionByAngle(touch.angle);
...@@ -638,7 +651,11 @@ var mui = (function(document, undefined) { ...@@ -638,7 +651,11 @@ var mui = (function(document, undefined) {
if ($.gestures.stoped) { if ($.gestures.stoped) {
return; return;
} }
touch.touchTime = Date.now() - touch.startTime; var now = Date.now();
touch.touchTime = now - touch.startTime;
touch.flickTime = now - touch.flickStartTime;
touch.flickDistanceX = touch.move.x - touch.flickStart.x;
touch.flickDistanceY = touch.move.y - touch.flickStart.y;
touch.gesture = event; touch.gesture = event;
detect(event, touch); detect(event, touch);
...@@ -698,6 +715,36 @@ var mui = (function(document, undefined) { ...@@ -698,6 +715,36 @@ var mui = (function(document, undefined) {
} }
}; };
})(mui, window); })(mui, window);
/**
* mui gesture flick[left|right|up|down]
* @param {type} $
* @param {type} name
* @returns {undefined}
*/
(function($, name) {
var handle = function(event, touch) {
if (event.type === $.EVENT_END || event.type === $.EVENT_CANCEL) {
var options = this.options;
if (touch.direction && options.flickMaxTime > touch.flickTime && touch.distance > options.flickMinDistince) {
touch.flick = true;
$.trigger(event.target, name, touch);
$.trigger(event.target, name + touch.direction, touch);
}
}
};
/**
* mui gesture flick
*/
$.registerGesture({
name: name,
index: 5,
handle: handle,
options: {
flickMaxTime: 300,
flickMinDistince: 10
}
});
})(mui, 'flick');
/** /**
* mui gesture swipe[left|right|up|down] * mui gesture swipe[left|right|up|down]
* @param {type} $ * @param {type} $
...@@ -709,12 +756,10 @@ var mui = (function(document, undefined) { ...@@ -709,12 +756,10 @@ var mui = (function(document, undefined) {
if (event.type === $.EVENT_END || event.type === $.EVENT_CANCEL) { if (event.type === $.EVENT_END || event.type === $.EVENT_CANCEL) {
var options = this.options; var options = this.options;
if (touch.direction && options.swipeMaxTime > touch.touchTime && touch.distance > options.swipeMinDistince) { if (touch.direction && options.swipeMaxTime > touch.touchTime && touch.distance > options.swipeMinDistince) {
if (event.target.type !== 'range') {//ignore input range
touch.swipe = true; touch.swipe = true;
$.trigger(event.target, name + touch.direction, touch); $.trigger(event.target, name + touch.direction, touch);
} }
} }
}
}; };
/** /**
* mui gesture swipe * mui gesture swipe
...@@ -778,9 +823,9 @@ var mui = (function(document, undefined) { ...@@ -778,9 +823,9 @@ var mui = (function(document, undefined) {
var handle = function(event, touch) { var handle = function(event, touch) {
if (event.type === $.EVENT_END || event.type === $.EVENT_CANCEL) { if (event.type === $.EVENT_END || event.type === $.EVENT_CANCEL) {
var options = this.options; var options = this.options;
if (touch.distance < options.tabMaxDistance && touch.touchTime < options.tapMaxTime) { if (touch.distance < options.tapMaxDistance && touch.touchTime < options.tapMaxTime) {
if ($.options.gestureConfig.doubletap && touch.lastTarget && (touch.lastTarget === event.target)) { //same target if ($.options.gestureConfig.doubletap && touch.lastTarget && (touch.lastTarget === event.target)) { //same target
if (touch.lastTapTime && (touch.startTime - touch.lastTapTime) < options.tabMaxInterval) { if (touch.lastTapTime && (touch.startTime - touch.lastTapTime) < options.tapMaxInterval) {
$.trigger(event.target, 'doubletap', touch); $.trigger(event.target, 'doubletap', touch);
touch.lastTapTime = Date.now(); touch.lastTapTime = Date.now();
touch.lastTarget = event.target; touch.lastTarget = event.target;
...@@ -794,15 +839,15 @@ var mui = (function(document, undefined) { ...@@ -794,15 +839,15 @@ var mui = (function(document, undefined) {
} }
}; };
/** /**
* mui gesture tab * mui gesture tap
*/ */
$.registerGesture({ $.registerGesture({
name: name, name: name,
index: 30, index: 30,
handle: handle, handle: handle,
options: { options: {
tabMaxInterval: 300, tapMaxInterval: 300,
tabMaxDistance: 5, tapMaxDistance: 5,
tapMaxTime: 250 tapMaxTime: 250
} }
}); });
...@@ -919,6 +964,7 @@ var mui = (function(document, undefined) { ...@@ -919,6 +964,7 @@ var mui = (function(document, undefined) {
tap: true, tap: true,
doubletap: true, doubletap: true,
longtap: true, longtap: true,
flick: true,
swipe: true, swipe: true,
drag: true drag: true
} }
...@@ -1236,6 +1282,17 @@ var mui = (function(document, undefined) { ...@@ -1236,6 +1282,17 @@ var mui = (function(document, undefined) {
return webview; return webview;
}; };
/**
* 预加载
*/
$.preload = function(options){
//调用预加载函数，不管是否传递preload参数，强制变为true
if(!options.preload){
options.preload = true;
}
$.createWindow(options);
}
/** /**
*关闭当前webview打开的所有webview； *关闭当前webview打开的所有webview；
*/ */
...@@ -1343,6 +1400,136 @@ var mui = (function(document, undefined) { ...@@ -1343,6 +1400,136 @@ var mui = (function(document, undefined) {
}); });
}); });
})(mui); })(mui);
/**
* mui back
* @param {type} $
* @param {type} window
* @returns {undefined}
*/
(function($, window) {
/**
* 后退
*/
$.back = function() {
if (window.history.length > 1) {
if (typeof $.options.back === 'function') {
if ($.options.back() !== false) {
window.history.back();
}
} else {
window.history.back();
}
}
};
window.addEventListener('tap', function(e) {
var action = $.targets.action;
if (action && action.classList.contains('mui-action-back')) {
$.back();
}
});
window.addEventListener('swiperight', function(e) {
var detail = e.detail;
if (detail.angle > -15 && detail.angle < 15 && $.options.swipeBack === true) {
if ($.targets.toggle) {
return;
}
$.back();
}
});
})(mui, window);
/**
* mui back 5+
* @param {type} $
* @param {type} window
* @returns {undefined}
*/
(function($, window) {
/**
* 后退(5+关闭当前窗口)
*/
$.back = function() {
var isBack = true;
var callback = false;
if (typeof $.options.back === 'function') {
callback = $.options.back();
if (callback === false) {
isBack = false;
}
}
if (!isBack) {
return;
}
if (window.plus) {
var wobj = $.currentWebview;
var parent = wobj.parent();
if (parent) {
wobj = parent;
}
wobj.canBack(function(e) {
//by chb 暂时注释，在碰到类似popover之类的锚点的时候，需多次点击才能返回；
if (e.canBack) { //webview history back
window.history.back();
} else { //webview close or hide
//TODO 会不会存在多层嵌套?如果存在需要递归找到最顶层
var opener = wobj.opener();
if (opener) {
//by chb 暂不自动处理老页面的隐藏；
// var openerParent = opener.parent();
// if (openerParent) {
// opener = openerParent;
// }
if (wobj.preload) {
wobj.hide("auto");
} else {
//关闭页面时，需要将其打开的所有子页面全部关闭；
$.closeAll(wobj);
}
//TODO 暂时屏蔽父窗口的隐藏与显示，与预加载一起使用时太多bug
//opener.show();
} else {
//首页不存在opener的情况下，后退实际上应该是退出应用；
//这个交给项目具体实现，框架暂不处理；
//plus.runtime.quit();
}
}
});
} else if (window.history.length > 1) {
window.history.back();
} else {
window.close();
}
};
$.menu = function() {
var menu = document.querySelector('.mui-action-menu');
if (menu) {
$.trigger(menu, 'tap');
} else { //执行父窗口的menu
if (window.plus) {
var wobj = $.currentWebview;
var parent = wobj.parent();
if (parent) { //又得evalJS
parent.evalJS('mui&&mui.menu();');
}
}
}
}
$.plusReady(function() {
plus.key.addEventListener('backbutton', function() {
$.back();
}, false);
plus.key.addEventListener('menubutton', function() {
$.menu();
}, false);
});
})(mui, window);
/** /**
* mui.init pulldownRefresh * mui.init pulldownRefresh
* @param {type} $ * @param {type} $
...@@ -1481,376 +1668,814 @@ var mui = (function(document, undefined) { ...@@ -1481,376 +1668,814 @@ var mui = (function(document, undefined) {
})(mui, window); })(mui, window);
/** /**
* pullRefresh plugin * scroll
* @param {type} $ * @param {type} $
* @param {type} window * @param {type} window
* @param {type} document * @param {type} document
* @param {type} undefined
* @returns {undefined} * @returns {undefined}
*/ */
(function($, window, document, undefined) { (function($, window, document, name, undefined) {
var CLASS_SCROLLBAR = 'mui-scrollbar';
var CLASS_INDICATOR = 'mui-scrollbar-indicator';
var CLASS_SCROLLBAR_VERTICAL = CLASS_SCROLLBAR + '-vertical';
var CLASS_SCROLLBAR_HORIZONTAL = CLASS_SCROLLBAR + '-horizontal';
var CLASS_PULL_TOP_POCKET = 'mui-pull-top-pocket'; var ease = {
var CLASS_PULL_BOTTOM_POCKET = 'mui-pull-bottom-pocket'; quadratic: {
var CLASS_PULL = 'mui-pull'; style: 'cubic-bezier(0.25, 0.46, 0.45, 0.94)',
var CLASS_PULL_ARROW = 'mui-pull-arrow'; fn: function(k) {
var CLASS_PULL_LOADING = 'mui-pull-loading'; return k * (2 - k);
var CLASS_PULL_CAPTION = 'mui-pull-caption'; }
var CLASS_PULL_CAPTION_DOWN = CLASS_PULL_CAPTION + '-down'; },
var CLASS_PULL_CAPTION_OVER = CLASS_PULL_CAPTION + '-over'; circular: {
var CLASS_PULL_CAPTION_REFRESH = CLASS_PULL_CAPTION + '-refresh'; style: 'cubic-bezier(0.1, 0.57, 0.1, 1)',
fn: function(k) {
return Math.sqrt(1 - (--k * k));
}
}
}
var Scroll = function(element, options) {
this.wrapper = this.element = element;
this.scroller = this.wrapper.children[0];
this.scrollerStyle = this.scroller.style;
var CLASS_ICON = 'mui-icon'; this.options = $.extend({
var CLASS_ICON_SPINNER = 'mui-icon-spinner-cycle'; scrollY: true,
var CLASS_ICON_PULLDOWN = 'mui-icon-pulldown'; scrollX: false,
var CLASS_SPIN = 'mui-spin'; startX: 0,
startY: 0,
hardwareAccelerated: true,
preventDefaultException: {
tagName: /^(INPUT|TEXTAREA|BUTTON|SELECT)$/
},
momentum: true,
var CLASS_IN = 'mui-in'; bounce: true,
var CLASS_REVERSE = 'mui-reverse'; bounceTime: 600,
bounceEasing: ease.circular.style,
var CLASS_HIDDEN = 'mui-hidden'; directionLockThreshold: 5,
var CLASS_LOADING_UP = CLASS_PULL_LOADING + ' ' + CLASS_ICON + ' ' + CLASS_ICON_PULLDOWN + ' ' + CLASS_REVERSE; }, options, true);
var CLASS_LOADING_DOWN = CLASS_PULL_LOADING + ' ' + CLASS_ICON + ' ' + CLASS_ICON_PULLDOWN;
var CLASS_LOADING = CLASS_PULL_LOADING + ' ' + CLASS_ICON + ' ' + CLASS_ICON_SPINNER + ' ' + CLASS_SPIN; this.x = 0;
var defaultOptions = { this.y = 0;
down: { this.translateZ = this.options.hardwareAccelerated ? ' translateZ(0)' : '';
height: 50,
contentdown: '下拉可刷新', this.init();
contentover: '释放立即刷新', this.refresh();
contentrefresh: '正在刷新...' this.scrollTo(this.options.startX, this.options.startY);
}, };
up: { Scroll.prototype.init = function() {
height: 50, this._initPullRefresh();
contentdown: '上拉显示更多', this._initIndicators();
contentover: '释放立即刷新',
contentrefresh: '正在加载...', this.initEvent();
duration: 300 };
Scroll.prototype._initIndicators = function() {
var indicators = [],
indicator;
var self = this;
self.indicators = [];
// Vertical scrollbar
if (self.options.scrollY) {
indicator = {
el: this.createScrollBar(CLASS_SCROLLBAR_VERTICAL),
listenX: false
};
this.wrapper.appendChild(indicator.el);
indicators.push(indicator);
} }
// Horizontal scrollbar
if (this.options.scrollX) {
indicator = {
el: this.createScrollBar(CLASS_SCROLLBAR_HORIZONTAL),
listenY: false
}; };
var html = ['<div class="' + CLASS_PULL + '">', '<div class="' + CLASS_LOADING_DOWN + '"></div>', '<div class="' + CLASS_PULL_CAPTION + '">', '<span class="' + CLASS_PULL_CAPTION_DOWN + ' ' + CLASS_IN + '">{downCaption}</span>', '<span class="' + CLASS_PULL_CAPTION_OVER + '">{overCaption}</span>', '<span class="' + CLASS_PULL_CAPTION_REFRESH + '">{refreshCaption}</span>', '</div>', '</div>'];
var PullRefresh = function(element, options) { this.wrapper.appendChild(indicator.el);
this.element = element; indicators.push(indicator);
this.options = $.extend(defaultOptions, options, true); }
this.options.up.height = -this.options.up.height;
this.pullOptions = null;
this.init(); if (this.options.indicators) {
indicators = indicators.concat(this.options.indicators);
}
for (var i = indicators.length; i--;) {
this.indicators.push(new Indicator(this, indicators[i]));
}
this.wrapper.addEventListener('scrollend', function() {
self.indicators.map(function(indicator) {
indicator.fade();
});
});
this.wrapper.addEventListener('scrollstart', function() {
self.indicators.map(function(indicator) {
indicator.fade(1);
});
});
this.wrapper.addEventListener('beforescrollstart', function() {
self.indicators.map(function(indicator) {
indicator.fade(1, true);
});
});
this.wrapper.addEventListener('refresh', function() {
self.indicators.map(function(indicator) {
indicator.refresh();
});
});
}; };
PullRefresh.prototype.init = function() {
this.element.style.webkitTransform = 'translate3d(0,0,0)';
this.element.style.position = 'relative';
this.element.style['-webkit-backface-visibility'] = 'hidden';
this.translateY = 0;
this.lastTranslateY = 0;
this.initPocket(); Scroll.prototype.initEvent = function() {
this.initEvent(); window.addEventListener('orientationchange', this);
window.addEventListener('resize', this);
this.wrapper.addEventListener('touchstart', this);
this.wrapper.addEventListener('touchcancel', this);
this.wrapper.addEventListener('touchend', this);
this.wrapper.addEventListener('drag', this);
this.wrapper.addEventListener('dragend', this);
this.wrapper.addEventListener('flick', this);
this.scroller.addEventListener('webkitTransitionEnd', this);
var that = this;
this.wrapper.addEventListener('scrollend', function() {
if (that.y <= that.maxScrollY) {
$.trigger(that.wrapper, 'scrollbottom', that);
}
});
}; };
PullRefresh.prototype.initPocket = function() { Scroll.prototype.handleEvent = function(e) {
var options = this.options;
if (options.down && options.down.hasOwnProperty('callback')) { switch (e.type) {
this.topPocket = this.element.querySelector('.' + CLASS_PULL_TOP_POCKET); case 'touchstart':
if (!this.topPocket) { this._start(e);
this.topPocket = this.createPocket(CLASS_PULL_TOP_POCKET, options.down); break;
this.element.insertBefore(this.topPocket, this.element.firstChild); case 'touchcancel':
case 'touchend':
this._end(e);
break;
case 'drag':
this._drag(e);
break;
case 'dragend':
case 'flick':
this._flick(e);
break;
case 'orientationchange':
case 'resize':
this._resize();
break;
case 'webkitTransitionEnd':
this._transitionEnd(e);
break;
} }
};
Scroll.prototype._transitionEnd = function(e) {
if (e.target != this.scroller || !this.isInTransition) {
return;
} }
if (options.up && options.up.hasOwnProperty('callback')) {
this.bottomPocket = this.element.querySelector('.' + CLASS_PULL_BOTTOM_POCKET); this._transitionTime();
if (!this.bottomPocket) { if (!this.resetPosition(this.options.bounceTime)) {
this.bottomPocket = this.createPocket(CLASS_PULL_BOTTOM_POCKET, options.up); this.isInTransition = false;
this.element.appendChild(this.bottomPocket); $.trigger(this.wrapper, 'scrollend', this);
}
};
Scroll.prototype.preventDefaultException = function(el, exceptions) {
for (var i in exceptions) {
if (exceptions[i].test(el[i])) {
return true;
} }
} }
return false;
}; };
PullRefresh.prototype.createPocket = function(clazz, options) { Scroll.prototype.getComputedPosition = function() {
var pocket = document.createElement('div'); return $.parseTranslateMatrix($.getStyles(this.scroller, 'webkitTransform'));
pocket.className = clazz;
pocket.innerHTML = html.join('').replace('{downCaption}', options.contentdown).replace('{overCaption}', options.contentover).replace('{refreshCaption}', options.contentrefresh);
return pocket;
}; };
PullRefresh.prototype.initEvent = function() { Scroll.prototype._start = function(e) {
var self = this;
if (self.bottomPocket) { this.moved = this.needReset = false;
if (self.options.up.draggable) { if (!this.loading) {
self.element.addEventListener('dragup', function(e) { this.pulldown = this.pullPocket = this.pullCaption = this.pullLoading = false
self.dragUp(e); }
});
} else { this._transitionTime();
var callback = self.options.up.callback;
if (callback) { if (this.isInTransition) {
var scrolling = false; this.needReset = true;
var isLoading = false; this.isInTransition = false;
setInterval(function() { var pos = this.getComputedPosition();
if (scrolling) { this._setTranslate(Math.round(pos.x), Math.round(pos.y));
scrolling = false; $.trigger(this.wrapper, 'scrollend', this);
if (isLoading) return;
var scrollHeight = document.body.scrollHeight;
if (window.innerHeight + window.scrollY + 5 > scrollHeight) {
self.isLoading = isLoading = true;
$.gestures.stoped = true;
//window.scrollTo(0, scrollHeight);
self.pullOptions = self.options.up;
self.loading = self.bottomPocket.querySelector('.' + CLASS_PULL_LOADING);
self.setCaption(CLASS_PULL_CAPTION_REFRESH);
callback(function() {
self.isLoading = isLoading = false;
self.setCaption(CLASS_PULL_CAPTION_DOWN);
self.pullOptions = null;
});
} }
this.reset();
$.trigger(this.wrapper, 'beforescrollstart', this);
};
Scroll.prototype._end = function(e) {
if (!this.moved && this.needReset) {
this.resetPosition(this.options.bounceTime);
} }
}, 250); };
Scroll.prototype._drag = function(e) {
var detail = e.detail;
window.addEventListener('scroll', function() { detail.gesture.preventDefault();
scrolling = true; var deltaX = detail.deltaX - detail.lastDeltaX;
}); var deltaY = detail.deltaY - detail.lastDeltaY;
window.addEventListener('dragend', function(event) { var absDeltaX = Math.abs(detail.deltaX);
if (event.detail.direction === 'up') { var absDeltaY = Math.abs(detail.deltaY);
scrolling = true; if (absDeltaX > absDeltaY + this.options.directionLockThreshold) {
} deltaY = 0;
}); } else if (absDeltaY >= absDeltaX + this.options.directionLockThreshold) {
} deltaX = 0;
}
}
// if ($.os.plus) { deltaX = this.hasHorizontalScroll ? deltaX : 0;
// var pocket = self.bottomPocket; deltaY = this.hasVerticalScroll ? deltaY : 0;
// pocket.style.display = "none"; var newX = this.x + deltaX;
// //图标需要显示出来 var newY = this.y + deltaY;
// pocket.querySelector('.' + CLASS_PULL_LOADING).className = CLASS_LOADING + ' mui-active'; // Slow down if outside of the boundaries
// //不需要这么多节点，只显示正在加载即可； if (newX > 0 || newX < this.maxScrollX) {
// pocket.querySelector('.' + CLASS_PULL_CAPTION).removeChild(pocket.querySelector('.' + CLASS_PULL_CAPTION_DOWN)); newX = this.options.bounce ? this.x + deltaX / 3 : newX > 0 ? 0 : this.maxScrollX;
// pocket.querySelector('.' + CLASS_PULL_CAPTION).removeChild(pocket.querySelector('.' + CLASS_PULL_CAPTION_OVER)); }
// pocket.querySelector('.' + CLASS_PULL_CAPTION_REFRESH).classList.add('mui-in');; if (newY > 0 || newY < this.maxScrollY) {
// document.addEventListener('plusscrollbottom', function() { newY = this.options.bounce ? this.y + deltaY / 3 : newY > 0 ? 0 : this.maxScrollY;
// if (self.isLoading) return;
// self.isLoading = true;
// pocket.style.display = "block";
// var callback = self.options.up.callback;
// callback && callback(function() {
// pocket.style.display = "none";
// self.isLoading = false;
// });
// }, false);
// } else {
// self.element.addEventListener('dragup', function(e) {
// self.dragUp(e);
// });
// }
} }
if (self.topPocket) { if (!this.requestAnimationFrame) {
self.element.addEventListener('dragdown', function(e) { this._updateTranslate();
self.dragDown(e); }
}); if (!this.moved) {
$.trigger(this.wrapper, 'scrollstart', this);
}
this.moved = true;
this.x = newX;
this.y = newY;
if (!this.pulldown && !this.loading && this.topPocket && detail.direction === 'down' && this.y >= 0) {
this.pulldown = true;
this.pullPocket = this.topPocket;
this.pullCaption = this.topCaption;
this.pullLoading = this.topLoading;
}
if (this.pulldown) {
this._setCaption(this.y > this.options.down.height ? this.options.down.contentover : this.options.down.contentdown);
}
};
Scroll.prototype._flick = function(e) {
var detail = e.detail;
this._clearRequestAnimationFrame();
if (e.type === 'dragend' && detail.flick) { //dragend
return;
} }
if ((self.bottomPocket && self.options.up.draggable === true) || self.topPocket) {
self.element.addEventListener('dragstart', function(e) { var newX = Math.round(this.x);
self.dragStart(e); var newY = Math.round(this.y);
this.isInTransition = false;
// reset if we are outside of the boundaries
if (this.resetPosition(this.options.bounceTime)) {
return;
}
this.scrollTo(newX, newY); // ensures that the last position is rounded
if (e.type === 'dragend') { //dragend
$.trigger(this.wrapper, 'scrollend', this);
return;
}
var time = 0;
var easing = '';
// start momentum animation if needed
if (this.options.momentum && detail.flickTime < 300) {
momentumX = this.hasHorizontalScroll ? this.momentum(this.x, detail.flickDistanceX, detail.flickTime, this.maxScrollX, this.options.bounce ? this.wrapperWidth : 0, this.options.deceleration) : {
destination: newX,
duration: 0
};
momentumY = this.hasVerticalScroll ? this.momentum(this.y, detail.flickDistanceY, detail.flickTime, this.maxScrollY, this.options.bounce ? this.wrapperHeight : 0, this.options.deceleration) : {
destination: newY,
duration: 0
};
newX = momentumX.destination;
newY = momentumY.destination;
time = Math.max(momentumX.duration, momentumY.duration);
this.isInTransition = true;
}
if (newX != this.x || newY != this.y) {
if (newX > 0 || newX < this.maxScrollX || newY > 0 || newY < this.maxScrollY) {
easing = ease.quadratic;
}
this.scrollTo(newX, newY, time, easing);
return;
}
$.trigger(this.wrapper, 'scrollend', this);
};
Scroll.prototype._resize = function() {
var that = this;
clearTimeout(this.resizeTimeout);
this.resizeTimeout = setTimeout(function() {
that.refresh();
}, this.options.resizePolling);
};
Scroll.prototype.momentum = function(current, distance, time, lowerMargin, wrapperSize, deceleration) {
var speed = parseFloat(Math.abs(distance) / time),
destination,
duration;
deceleration = deceleration === undefined ? 0.0006 : deceleration;
destination = current + (speed * speed) / (2 * deceleration) * (distance < 0 ? -1 : 1);
duration = speed / deceleration;
if (destination < lowerMargin) {
destination = wrapperSize ? lowerMargin - (wrapperSize / 2.5 * (speed / 8)) : lowerMargin;
distance = Math.abs(destination - current);
duration = distance / speed;
} else if (destination > 0) {
destination = wrapperSize ? wrapperSize / 2.5 * (speed / 8) : 0;
distance = Math.abs(current) + destination;
duration = distance / speed;
}
return {
destination: Math.round(destination),
duration: duration
};
};
Scroll.prototype.resetPosition = function(time) {
var x = this.x,
y = this.y;
time = time || 0;
if (!this.hasHorizontalScroll || this.x > 0) {
x = 0;
} else if (this.x < this.maxScrollX) {
x = this.maxScrollX;
}
if (this.pulldown && this.y >= this.options.down.height) {
this.pulldownLoading(x, time);
return true;
}
if (!this.hasVerticalScroll || this.y > 0) {
y = 0;
} else if (this.y < this.maxScrollY) {
y = this.maxScrollY;
}
if (x == this.x && y == this.y) {
return false;
}
this.scrollTo(x, y, time, this.options.bounceEasing);
return true;
};
Scroll.prototype.reset = function() {
this.wrapper.offsetHeight;
var paddingLeft = parseFloat($.getStyles(this.wrapper, 'padding-left')) || 0;
var paddingRight = parseFloat($.getStyles(this.wrapper, 'padding-right')) || 0;
var paddingTop = parseFloat($.getStyles(this.wrapper, 'padding-top')) || 0;
var paddingBottom = parseFloat($.getStyles(this.wrapper, 'padding-bottom')) || 0;
var clientWidth = this.wrapper.clientWidth;
var clientHeight = this.wrapper.clientHeight;
this.scrollerWidth = this.scroller.offsetWidth;
this.scrollerHeight = this.scroller.offsetHeight;
this.wrapperWidth = clientWidth - paddingLeft - paddingRight;
this.wrapperHeight = clientHeight - paddingTop - paddingBottom;
this.maxScrollX = Math.min(this.wrapperWidth - this.scrollerWidth, 0);
this.maxScrollY = Math.min(this.wrapperHeight - this.scrollerHeight, 0);
this.hasHorizontalScroll = this.options.scrollX && this.maxScrollX < 0;
this.hasVerticalScroll = (this.options.scrollY && this.maxScrollY < 0) || (this.topPocket ? true : false);
if (!this.hasHorizontalScroll) {
this.maxScrollX = 0;
this.scrollerWidth = this.wrapperWidth;
}
if (!this.hasVerticalScroll) {
this.maxScrollY = 0;
this.scrollerHeight = this.wrapperHeight;
}
this.indicators.map(function(indicator) {
indicator.refresh();
}); });
self.element.addEventListener('drag', function(e) { };
var direction = e.detail.direction; Scroll.prototype.refresh = function() {
//左右拖动处理逻辑？ this.reset();
if (self.dragDirection && direction !== 'up' && direction !== 'down') { $.trigger(this.wrapper, 'refresh', this);
if (self.pullOptions) { this.resetPosition();
if (self.pullOptions.height > 0) { };
self.dragDown(e);
Scroll.prototype.createScrollBar = function(clazz) {
var scrollbar = document.createElement('div');
var indicator = document.createElement('div');
scrollbar.className = CLASS_SCROLLBAR + ' ' + clazz;
indicator.className = CLASS_INDICATOR;
scrollbar.appendChild(indicator);
if (clazz === CLASS_SCROLLBAR_VERTICAL) {
this.scrollbarY = scrollbar;
this.scrollbarIndicatorY = indicator;
} else if (clazz === CLASS_SCROLLBAR_HORIZONTAL) {
this.scrollbarX = scrollbar;
this.scrollbarIndicatorX = indicator;
}
this.wrapper.appendChild(scrollbar);
return scrollbar;
};
Scroll.prototype.scrollTo = function(x, y, time, easing) {
var easing = easing || ease.circular;
this.isInTransition = time > 0;
if (this.isInTransition) {
this._clearRequestAnimationFrame();
this._transitionTimingFunction(easing.style);
this._transitionTime(time);
this._setTranslate(x, y);
} else { } else {
self.dragUp(e); this._setTranslate(x, y);
} }
};
Scroll.prototype._transitionTime = function(time) {
time = time || 0;
this.scrollerStyle['webkitTransitionDuration'] = time + 'ms';
if (!time && $.os.isBadAndroid) {
this.scrollerStyle['webkitTransitionDuration'] = '0.001s';
} }
if (this.indicators) {
for (var i = this.indicators.length; i--;) {
this.indicators[i].transitionTime(time);
} }
});
self.element.addEventListener('dragend', function(e) {
self.dragEnd(e);
});
} }
}; };
PullRefresh.prototype.dragStart = function(e) {
var detail = e.detail; Scroll.prototype._transitionTimingFunction = function(easing) {
if (detail.direction === 'up' || detail.direction === 'down') { this.scrollerStyle['webkitTransitionTimingFunction'] = easing;
this.element.style.webkitTransitionDuration = '0s'; if (this.indicators) {
this.isLoading = this.dragDirection = false; for (var i = this.indicators.length; i--;) {
this.indicators[i].transitionTimingFunction(easing);
}
}
};
Scroll.prototype._translate = function(x, y) {
this.x = x;
this.y = y;
};
Scroll.prototype._clearRequestAnimationFrame = function() {
if (this.requestAnimationFrame) {
cancelAnimationFrame(this.requestAnimationFrame);
this.requestAnimationFrame = null;
}
};
Scroll.prototype._setTranslate = function(x, y) {
this.x = x;
this.y = y;
this.scrollerStyle['webkitTransform'] = 'translate(' + x + 'px,' + y + 'px)' + this.translateZ;
if (this.indicators) {
for (var i = this.indicators.length; i--;) {
this.indicators[i].updatePosition();
}
}
this.lastX = this.x;
this.lastY = this.y;
};
Scroll.prototype._updateTranslate = function() {
var self = this;
if (self.x !== self.lastX || self.y !== self.lastY) {
self._setTranslate(self.x, self.y);
}
self.requestAnimationFrame = requestAnimationFrame(function() {
self._updateTranslate();
});
};
//pullrefreh
var CLASS_PULL_TOP_POCKET = 'mui-pull-top-pocket';
var CLASS_PULL_BOTTOM_POCKET = 'mui-pull-bottom-pocket';
var CLASS_PULL = 'mui-pull';
var CLASS_PULL_LOADING = 'mui-pull-loading';
var CLASS_PULL_CAPTION = 'mui-pull-caption';
var CLASS_ICON = 'mui-icon';
var CLASS_PRELOADER = 'mui-preloader';
var CLASS_PULLDOWN_ARROW = 'mui-pulldown-arrow';
var CLASS_PRELOADER_SPIN = 'mui-preloader-spin';
var CLASS_IN = 'mui-in';
var CLASS_REVERSE = 'mui-reverse';
var CLASS_LOADING_UP = CLASS_PULL_LOADING + ' ' + CLASS_PULLDOWN_ARROW + ' ' + CLASS_REVERSE;
var CLASS_LOADING_DOWN = CLASS_PULL_LOADING + ' ' + CLASS_PULLDOWN_ARROW;
var CLASS_LOADING = CLASS_PULL_LOADING + ' ' + CLASS_PRELOADER;
var pocketHtml = ['<div class="' + CLASS_PULL + '">', '<div class="' + CLASS_LOADING_DOWN + '"></div>', '<div class="' + CLASS_PULL_CAPTION + '">{downCaption}</div>', '</div>'].join('');
var pullRefreshOptions = {
down: {
height: 50,
contentdown: '下拉可以刷新',
contentover: '释放立即刷新',
contentrefresh: '正在刷新...'
},
up: {
height: 50,
contentdown: '上拉显示更多',
contentrefresh: '正在加载...',
duration: 300
} }
}; };
PullRefresh.prototype.dragUp = function(e) { Scroll.prototype.pulldownLoading = function(x, time) {
var self = this; x = x || 0;
if (self.isLoading || self.dragDirection === 'down') { this.scrollTo(x, this.options.down.height, time, this.options.bounceEasing);
if (this.loading) {
return; return;
} }
var scrollHeight = document.body.scrollHeight; this._setCaption(this.options.down.contentrefresh);
if (!self.dragDirection && window.innerHeight + window.scrollY + 40 < scrollHeight) { this.loading = true;
this.indicators.map(function(indicator) {
indicator.fade(0);
});
var callback = this.options.down.callback;
var that = this;
callback && callback(function() {
that.scrollTo(x, 0, time, that.options.bounceEasing);
that.loading = false;
that._setCaption(that.options.down.contentdown);
});
};
Scroll.prototype.pullupLoading = function(x, time) {
x = x || 0;
this.scrollTo(x, this.maxScrollY, time, this.options.bounceEasing);
if (this.loading) {
return; return;
} }
window.scrollTo(0, scrollHeight); this._setCaption(this.options.up.contentrefresh);
self.pullOptions = self.options.up; this.indicators.map(function(indicator) {
self.loading = self.bottomPocket.querySelector('.' + CLASS_PULL_LOADING); indicator.fade(0);
self.drag(e); });
this.loading = true;
var callback = this.options.up.callback;
var that = this;
callback && callback(function() {
that.loading = false;
that._setCaption(that.options.up.contentdown);
});
}; };
PullRefresh.prototype.dragDown = function(e) { Scroll.prototype._initPullRefresh = function() {
var self = this; this._initPocket();
if (self.isLoading || self.dragDirection === 'up') { };
return; Scroll.prototype._initPocket = function() {
var options = this.options;
if (options.down && options.down.hasOwnProperty('callback')) {
this.topPocket = this.scroller.querySelector('.' + CLASS_PULL_TOP_POCKET);
if (!this.topPocket) {
this.topPocket = this._createPocket(CLASS_PULL_TOP_POCKET, options.down);
this.scroller.insertBefore(this.topPocket, this.scroller.firstChild);
this.topLoading = this.topPocket.querySelector('.' + CLASS_PULL_LOADING);
this.topCaption = this.topPocket.querySelector('.' + CLASS_PULL_CAPTION);
} }
var scrollY = window.scrollY;
if (!self.dragDirection && scrollY > 5) {
return;
} else if (scrollY !== 0) {
window.scrollTo(0, 0);
} }
self.pullOptions = self.options.down; if (options.up && options.up.hasOwnProperty('callback')) {
self.loading = self.topPocket.querySelector('.' + CLASS_PULL_LOADING); this.bottomPocket = this.scroller.querySelector('.' + CLASS_PULL_BOTTOM_POCKET);
self.drag(e); if (!this.bottomPocket) {
}; this.bottomPocket = this._createPocket(CLASS_PULL_BOTTOM_POCKET, options.up);
PullRefresh.prototype.drag = function(e) { this.scroller.appendChild(this.bottomPocket);
if (!this.pullOptions) {
return; this.bottomLoading = this.bottomPocket.querySelector('.' + CLASS_PULL_LOADING);
this.bottomCaption = this.bottomPocket.querySelector('.' + CLASS_PULL_CAPTION);
} }
if (this.pullOptions.height > 0) { var that = this;
if (e.detail.deltaY < 0) { this.wrapper.addEventListener('scrollbottom', function() {
return; if (!that.pulldown && !that.loading) {
that.pullPocket = that.bottomPocket;
that.pullCaption = that.bottomCaption;
that.pullLoading = that.bottomLoading;
that.pullupLoading();
} }
});
} }
};
Scroll.prototype._createPocket = function(clazz, options) {
var pocket = document.createElement('div');
pocket.className = clazz;
pocket.innerHTML = pocketHtml.replace('{downCaption}', options.contentdown);
return pocket;
};
this.dragDirection = this.pullOptions.height > 0 ? 'down' : 'up'; Scroll.prototype._setCaption = function(title) {
if (!this.requestAnimationFrame) { if (this.loading) {
this.updateTranslate(); return;
} }
e.detail.gesture.preventDefault(); var options = this.options;
this.translateY = e.detail.deltaY * 0.4; var pocket = this.pullPocket;
}; if (pocket) {
PullRefresh.prototype.dragEnd = function(e) { if (title !== this.lastTitle) {
var self = this; var caption = this.pullCaption;
if (self.pullOptions) { var loading = this.pullLoading;
cancelAnimationFrame(self.requestAnimationFrame); caption.innerHTML = title;
//移动距离够了，就刷新，否则就啥都不干，恢复到原始状态； if (this.pulldown) {
if (Math.abs(e.detail.deltaY * 0.4) >= Math.abs(self.pullOptions.height)) { // if (title === options.down.contentrefresh) {
self.load(); loading.className = CLASS_LOADING;
// } else if (title === options.down.contentover) {
// loading.className = CLASS_LOADING_UP;
// } else if (title === options.down.contentdown) {
// loading.className = CLASS_LOADING_DOWN;
// }
} else {
if (title === options.up.contentrefresh) {
loading.className = CLASS_LOADING + ' ' + CLASS_IN;
} else { } else {
this.hide(); loading.className = CLASS_LOADING;
} }
$.gestures.stoped = true;
} }
this.lastTitle = title;
};
PullRefresh.prototype.hide = function() {
this.translateY = 0;
if (this.requestAnimationFrame) {
//在dragEnd中已经调用过了，可能重复了
cancelAnimationFrame(this.requestAnimationFrame);
this.requestAnimationFrame = null;
} }
this.element.style.webkitTransitionDuration = '0.5s';
this.setTranslate(0);
//恢复到正常状态，下拉可刷新
this.setCaption(CLASS_PULL_CAPTION_DOWN);
if (this.pullOptions && this.pullOptions.height > 0) {
this.loading.classList.remove(CLASS_REVERSE);
} }
this.pullOptions = null;
}; };
PullRefresh.prototype.updateTranslate = function() { //Indicator
var self = this; var Indicator = function(scroller, options) {
if (self.translateY !== self.lastTranslateY) { this.wrapper = typeof options.el == 'string' ? document.querySelector(options.el) : options.el;
self.translateY = Math.abs(self.translateY) < 2 ? 0 : self.translateY; this.wrapperStyle = this.wrapper.style;
self.setTranslate(self.translateY); this.indicator = this.wrapper.children[0];
if (Math.abs(self.translateY) >= Math.abs(self.pullOptions.height)) { this.indicatorStyle = this.indicator.style;
self.setCaption(CLASS_PULL_CAPTION_OVER); this.scroller = scroller;
} else {
self.setCaption(CLASS_PULL_CAPTION_DOWN); this.options = $.extend({
} listenX: true,
self.lastTranslateY = self.translateY; listenY: true,
fade: false,
speedRatioX: 0,
speedRatioY: 0
}, options);
this.sizeRatioX = 1;
this.sizeRatioY = 1;
this.maxPosX = 0;
this.maxPosY = 0;
if (this.options.fade) {
this.wrapperStyle['webkitTransform'] = this.scroller.translateZ;
this.wrapperStyle['webkitTransitionDuration'] = $.os.isBadAndroid ? '0.001s' : '0ms';
this.wrapperStyle.opacity = '0';
} }
self.requestAnimationFrame = requestAnimationFrame(function() {
self.updateTranslate();
});
};
PullRefresh.prototype.setTranslate = function(height) {
this.element.style.webkitTransform = 'translate3d(0,' + height + 'px,0)';
if (this.bottomPocket) {
if (height < 0) { //up
this.bottomPocket.style.bottom = (height > this.pullOptions.height ? height : this.pullOptions.height) + 'px';
} else if (height === 0) {
//this.bottomPocket.removeAttribute('style');//靠，为啥5+里边remove不掉呢
this.bottomPocket.setAttribute('style', '');
} }
Indicator.prototype = {
handleEvent: function(e) {
},
transitionTime: function(time) {
time = time || 0;
this.indicatorStyle['webkitTransitionDuration'] = time + 'ms';
if (!time && $.os.android) {
this.indicatorStyle['webkitTransitionDuration'] = '0.001s';
} }
}; },
PullRefresh.prototype.load = function() { transitionTimingFunction: function(easing) {
var self = this; this.indicatorStyle['webkitTransitionTimingFunction'] = easing;
self.isLoading = true; },
self.setCaption(CLASS_PULL_CAPTION_REFRESH);
self.setTranslate(self.pullOptions.height); refresh: function() {
var callback = self.pullOptions.callback; this.transitionTime();
callback && callback(function() {
if (self.pullOptions && self.pullOptions.height < 0) { if (this.options.listenX && !this.options.listenY) {
//self.bottomPocket.classList.add(CLASS_HIDDEN); this.indicatorStyle.display = this.scroller.hasHorizontalScroll ? 'block' : 'none';
var duration = Math.min(1000, self.pullOptions.duration); } else if (this.options.listenY && !this.options.listenX) {
setTimeout(function() { this.indicatorStyle.display = this.scroller.hasVerticalScroll ? 'block' : 'none';
$.scrollTo(document.body.scrollHeight - window.innerHeight, duration, function() {
self.isLoading = false;
//self.bottomPocket.classList.remove(CLASS_HIDDEN);
});
}, 100);
} else { } else {
self.isLoading = false; this.indicatorStyle.display = this.scroller.hasHorizontalScroll || this.scroller.hasVerticalScroll ? 'block' : 'none';
} }
self.hide();
});
};
// PullRefresh.prototype.showLoading = function(className) { this.wrapper.offsetHeight; // force refresh
// this.setCaption(className);
// }; if (this.options.listenX) {
// PullRefresh.prototype.hideLoading = function(className) { this.wrapperWidth = this.wrapper.clientWidth;
// this.setCaption(className); this.indicatorWidth = Math.max(Math.round(this.wrapperWidth * this.wrapperWidth / (this.scroller.scrollerWidth || this.wrapperWidth || 1)), 8);
// }; this.indicatorStyle.width = this.indicatorWidth + 'px';
PullRefresh.prototype.setCaption = function(className) { this.maxPosX = this.wrapperWidth - this.indicatorWidth;
var pocket = this.pullOptions && this.pullOptions.height > 0 ? this.topPocket : this.bottomPocket;
if (pocket) { this.minBoundaryX = 0;
var caption = pocket.querySelector('.' + CLASS_PULL_CAPTION); this.maxBoundaryX = this.maxPosX;
var last = caption.querySelector('.' + CLASS_IN);
if (last) { this.sizeRatioX = this.options.speedRatioX || (this.scroller.maxScrollX && (this.maxPosX / this.scroller.maxScrollX));
last.classList.remove(CLASS_IN);
}
var active = caption.querySelector('.' + className);
if (active) {
active.classList.add(CLASS_IN);
}
if (this.pullOptions && this.pullOptions.height > 0) {
if (className === CLASS_PULL_CAPTION_REFRESH) {
this.loading.className = CLASS_LOADING;
} else if (className === CLASS_PULL_CAPTION_OVER) {
this.loading.className = CLASS_LOADING_UP;
} else {
this.loading.className = CLASS_LOADING_DOWN;
} }
} else {
if (className === CLASS_PULL_CAPTION_REFRESH) { if (this.options.listenY) {
this.loading.className = CLASS_LOADING + ' ' + CLASS_IN; this.wrapperHeight = this.wrapper.clientHeight;
} else { this.indicatorHeight = Math.max(Math.round(this.wrapperHeight * this.wrapperHeight / (this.scroller.scrollerHeight || this.wrapperHeight || 1)), 8);
this.loading.className = CLASS_LOADING; this.indicatorStyle.height = this.indicatorHeight + 'px';
this.maxPosY = this.wrapperHeight - this.indicatorHeight;
this.minBoundaryY = 0;
this.maxBoundaryY = this.maxPosY;
this.sizeRatioY = this.options.speedRatioY || (this.scroller.maxScrollY && (this.maxPosY / this.scroller.maxScrollY));
}
this.updatePosition();
},
updatePosition: function() {
var x = this.options.listenX && Math.round(this.sizeRatioX * this.scroller.x) || 0,
y = this.options.listenY && Math.round(this.sizeRatioY * this.scroller.y) || 0;
if (x < this.minBoundaryX) {
this.width = Math.max(this.indicatorWidth + x, 8);
this.indicatorStyle.width = this.width + 'px';
x = this.minBoundaryX;
} else if (x > this.maxBoundaryX) {
this.width = Math.max(this.indicatorWidth - (x - this.maxPosX), 8);
this.indicatorStyle.width = this.width + 'px';
x = this.maxPosX + this.indicatorWidth - this.width;
} else if (this.width != this.indicatorWidth) {
this.width = this.indicatorWidth;
this.indicatorStyle.width = this.width + 'px';
}
if (y < this.minBoundaryY) {
this.height = Math.max(this.indicatorHeight + y * 3, 8);
this.indicatorStyle.height = this.height + 'px';
y = this.minBoundaryY;
} else if (y > this.maxBoundaryY) {
this.height = Math.max(this.indicatorHeight - (y - this.maxPosY) * 3, 8);
this.indicatorStyle.height = this.height + 'px';
y = this.maxPosY + this.indicatorHeight - this.height;
} else if (this.height != this.indicatorHeight) {
this.height = this.indicatorHeight;
this.indicatorStyle.height = this.height + 'px';
}
this.x = x;
this.y = y;
this.indicatorStyle['webkitTransform'] = 'translate(' + x + 'px,' + y + 'px)' + this.scroller.translateZ;
},
fade: function(val, hold) {
if (hold && !this.visible) {
return;
} }
clearTimeout(this.fadeTimeout);
this.fadeTimeout = null;
var time = val ? 250 : 500,
delay = val ? 0 : 300;
val = val ? '1' : '0';
this.wrapperStyle['webkitTransitionDuration'] = time + 'ms';
this.fadeTimeout = setTimeout((function(val) {
this.wrapperStyle.opacity = val;
this.visible = +val;
}).bind(this, val), delay);
} }
};
$.fn.scroll = function(options) {
this.each(function() {
var scroll = this.getAttribute('data-scroll');
if (!scroll) {
var id = ++$.uuid;
$.data[id] = new Scroll(this, options);
this.setAttribute('data-scroll', id);
} }
});
}; };
$.fn.pullRefresh = function(options) { $.fn.pullRefresh = function(options) {
this.each(function() { this.each(function() {
var pullrefresh = this.getAttribute('data-pullrefresh'); var pullrefresh = this.getAttribute('data-pullrefresh');
if (!pullrefresh) { if (!pullrefresh) {
var id = ++$.uuid; var id = ++$.uuid;
$.data[id] = new PullRefresh(this, options); $.data[id] = new Scroll(this, $.extend(pullRefreshOptions, options, true));
this.setAttribute('data-pullrefresh', id); this.setAttribute('data-pullrefresh', id);
} }
}); });
}; };
})(mui, window, document); })(mui, window, document, 'scroll');
/** /**
* pulldownRefresh 5+ * pulldownRefresh 5+
* @param {type} $ * @param {type} $
...@@ -2607,6 +3232,7 @@ var mui = (function(document, undefined) { ...@@ -2607,6 +3232,7 @@ var mui = (function(document, undefined) {
slider.addEventListener('drag', function(event) { slider.addEventListener('drag', function(event) {
if (isDragable) { if (isDragable) {
self.dragItem(event); self.dragItem(event);
event.stopPropagation();
} }
}); });
...@@ -2614,16 +3240,18 @@ var mui = (function(document, undefined) { ...@@ -2614,16 +3240,18 @@ var mui = (function(document, undefined) {
if (isDragable) { if (isDragable) {
self.gotoItem(self.getSlideNumber()); self.gotoItem(self.getSlideNumber());
isDragable = self.isSwipeable = false; isDragable = self.isSwipeable = false;
event.stopPropagation();
} }
}); });
// slider.addEventListener('flick', $.stopPropagation);
slider.addEventListener('swipeleft', function(event) { slider.addEventListener('swipeleft', function(event) {
if (self.isSwipeable) { if (self.isSwipeable) {
//stop dragend //stop dragend
$.gestures.stoped = true; $.gestures.stoped = true;
self.nextItem(); self.nextItem();
isDragable = self.isSwipeable = false; isDragable = self.isSwipeable = false;
event.stopImmediatePropagation();
} }
event.stopPropagation();
}); });
slider.addEventListener('swiperight', function(event) { slider.addEventListener('swiperight', function(event) {
if (self.isSwipeable) { if (self.isSwipeable) {
...@@ -2631,8 +3259,8 @@ var mui = (function(document, undefined) { ...@@ -2631,8 +3259,8 @@ var mui = (function(document, undefined) {
$.gestures.stoped = true; $.gestures.stoped = true;
self.prevItem(); self.prevItem();
isDragable = self.isSwipeable = false; isDragable = self.isSwipeable = false;
event.stopImmediatePropagation();
} }
event.stopPropagation();
}); });
slider.addEventListener('slide', function(e) { slider.addEventListener('slide', function(e) {
var detail = e.detail; var detail = e.detail;
...@@ -2921,6 +3549,11 @@ var mui = (function(document, undefined) { ...@@ -2921,6 +3549,11 @@ var mui = (function(document, undefined) {
isActive: slideOn isActive: slideOn
}); });
toggle.removeEventListener('dragstart', $.stopPropagation); toggle.removeEventListener('dragstart', $.stopPropagation);
<<<<<<< HEAD
=======
// toggle.removeEventListener('flick', $.stopPropagation);
event.stopPropagation();
>>>>>>> FETCH_HEAD
}; };
var dragToggle = function(event) { var dragToggle = function(event) {
if (!toggle) { if (!toggle) {
...@@ -2936,12 +3569,17 @@ var mui = (function(document, undefined) { ...@@ -2936,12 +3569,17 @@ var mui = (function(document, undefined) {
handle.style['-webkit-transition-duration'] = '0s'; handle.style['-webkit-transition-duration'] = '0s';
handle.style.webkitTransform = 'translate3d(' + deltaX + 'px,0,0)'; handle.style.webkitTransform = 'translate3d(' + deltaX + 'px,0,0)';
toggle.classList[(deltaX > (toggleWidth / 2 - handleWidth / 2)) ? 'add' : 'remove'](CLASS_ACTIVE); toggle.classList[(deltaX > (toggleWidth / 2 - handleWidth / 2)) ? 'add' : 'remove'](CLASS_ACTIVE);
event.stopPropagation();
}; };
window.addEventListener($.EVENT_START, function(e) { window.addEventListener($.EVENT_START, function(e) {
toggle = $.targets.toggle; toggle = $.targets.toggle;
if (toggle) { if (toggle) {
toggle.addEventListener('dragstart', $.stopPropagation); toggle.addEventListener('dragstart', $.stopPropagation);
<<<<<<< HEAD
=======
// toggle.addEventListener('flick', $.stopPropagation);
>>>>>>> FETCH_HEAD
handle = toggle.querySelector(SELECTOR_SWITCH_HANDLE); handle = toggle.querySelector(SELECTOR_SWITCH_HANDLE);
toggleWidth = toggle.clientWidth; toggleWidth = toggle.clientWidth;
handleWidth = handle.clientWidth; handleWidth = handle.clientWidth;
...@@ -3182,9 +3820,13 @@ var mui = (function(document, undefined) { ...@@ -3182,9 +3820,13 @@ var mui = (function(document, undefined) {
} }
}; };
window.addEventListener('touchstart', function(event) { window.addEventListener('touchstart', function(event) {
if (cell) {
toggleActive(false);
}
cell = a = sliderHandle = sliderLeft = sliderRight = isDraging = sliderRequestAnimationFrame = false; cell = a = sliderHandle = sliderLeft = sliderRight = isDraging = sliderRequestAnimationFrame = false;
translateX = lastTranslateX = sliderTranslateX = sliderHandleWidth = sliderLeftWidth = sliderRightWidth = 0; translateX = lastTranslateX = sliderTranslateX = sliderHandleWidth = sliderLeftWidth = sliderRightWidth = 0;
sliderLeftBg = sliderRightBg = ''; sliderLeftBg = sliderRightBg = '';
var target = event.target; var target = event.target;
var isDisabled = false; var isDisabled = false;
for (; target && target !== document; target = target.parentNode) { for (; target && target !== document; target = target.parentNode) {
...@@ -3308,7 +3950,11 @@ var mui = (function(document, undefined) { ...@@ -3308,7 +3950,11 @@ var mui = (function(document, undefined) {
isDraging = true; isDraging = true;
} }
} }
<<<<<<< HEAD
if(isDraging){ if(isDraging){
=======
if (isDraging) {
>>>>>>> FETCH_HEAD
event.stopPropagation(); event.stopPropagation();
} }
}, },
...@@ -3341,9 +3987,12 @@ var mui = (function(document, undefined) { ...@@ -3341,9 +3987,12 @@ var mui = (function(document, undefined) {
} }
if (isSwipeable) { if (isSwipeable) {
$.gestures.stoped = true; $.gestures.stoped = true;
event.stopImmediatePropagation();
endDraging(true, event.detail); endDraging(true, event.detail);
} }
<<<<<<< HEAD
=======
event.stopPropagation();
>>>>>>> FETCH_HEAD
}, },
swipeleft: function(event) { swipeleft: function(event) {
var isSwipeable = false; var isSwipeable = false;
...@@ -3360,9 +4009,9 @@ var mui = (function(document, undefined) { ...@@ -3360,9 +4009,9 @@ var mui = (function(document, undefined) {
} }
if (isSwipeable) { if (isSwipeable) {
$.gestures.stoped = true; $.gestures.stoped = true;
event.stopImmediatePropagation();
endDraging(true, event.detail); endDraging(true, event.detail);
} }
event.stopPropagation();
} }
} }
...@@ -3686,6 +4335,9 @@ var mui = (function(document, undefined) { ...@@ -3686,6 +4335,9 @@ var mui = (function(document, undefined) {
}; };
element.addEventListener('input', showTip); element.addEventListener('input', showTip);
element.addEventListener('tap', showTip); element.addEventListener('tap', showTip);
element.addEventListener('touchmove', function(e) {
e.stopPropagation();
});
} else { } else {
if (this.clearActionClass) { if (this.clearActionClass) {
var action = this.clearAction; var action = this.clearAction;
...@@ -3771,133 +4423,3 @@ var mui = (function(document, undefined) { ...@@ -3771,133 +4423,3 @@ var mui = (function(document, undefined) {
$('.mui-input-row input').input(); $('.mui-input-row input').input();
}); });
})(mui, window, document); })(mui, window, document);
/**
* mui back
* @param {type} $
* @param {type} window
* @returns {undefined}
*/
(function($, window) {
/**
* 后退
*/
$.back = function() {
if (window.history.length > 1) {
if (typeof $.options.back === 'function') {
if ($.options.back() !== false) {
window.history.back();
}
} else {
window.history.back();
}
}
};
window.addEventListener('tap', function(e) {
var action = $.targets.action;
if (action && action.classList.contains('mui-action-back')) {
$.back();
}
});
window.addEventListener('swiperight', function(e) {
var detail = e.detail;
if (detail.angle > -15 && detail.angle < 15 && $.options.swipeBack === true) {
if ($.targets.toggle) {
return;
}
$.back();
}
});
})(mui, window);
/**
* mui back 5+
* @param {type} $
* @param {type} window
* @returns {undefined}
*/
(function($, window) {
/**
* 后退(5+关闭当前窗口)
*/
$.back = function() {
var isBack = true;
var callback = false;
if (typeof $.options.back === 'function') {
callback = $.options.back();
if (callback === false) {
isBack = false;
}
}
if (!isBack) {
return;
}
if (window.plus) {
var wobj = $.currentWebview;
var parent = wobj.parent();
if (parent) {
wobj = parent;
}
wobj.canBack(function(e) {
//by chb 暂时注释，在碰到类似popover之类的锚点的时候，需多次点击才能返回；
if (e.canBack) { //webview history back
window.history.back();
} else { //webview close or hide
//TODO 会不会存在多层嵌套?如果存在需要递归找到最顶层
var opener = wobj.opener();
if (opener) {
//by chb 暂不自动处理老页面的隐藏；
// var openerParent = opener.parent();
// if (openerParent) {
// opener = openerParent;
// }
if (wobj.preload) {
wobj.hide("auto");
} else {
//关闭页面时，需要将其打开的所有子页面全部关闭；
$.closeAll(wobj);
}
//TODO 暂时屏蔽父窗口的隐藏与显示，与预加载一起使用时太多bug
//opener.show();
} else {
//首页不存在opener的情况下，后退实际上应该是退出应用；
//这个交给项目具体实现，框架暂不处理；
//plus.runtime.quit();
}
}
});
} else if (window.history.length > 1) {
window.history.back();
} else {
window.close();
}
};
$.menu = function() {
var menu = document.querySelector('.mui-action-menu');
if (menu) {
$.trigger(menu, 'tap');
} else { //执行父窗口的menu
if (window.plus) {
var wobj = $.currentWebview;
var parent = wobj.parent();
if (parent) { //又得evalJS
parent.evalJS('mui&&mui.menu();');
}
}
}
}
$.plusReady(function() {
plus.key.addEventListener('backbutton', function() {
$.back();
}, false);
plus.key.addEventListener('menubutton', function() {
$.menu();
}, false);
});
})(mui, window);
\ No newline at end of file
dist/js/mui.min.js
View file @ 1506d053
This source diff could not be displayed because it is too large. You can view the blob instead.
getting-started/index.html
View file @ 1506d053
...@@ -10,8 +10,13 @@ ...@@ -10,8 +10,13 @@
<meta name="apple-mobile-web-app-capable" content="yes"> <meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black"> <meta name="apple-mobile-web-app-status-bar-style" content="black">
<<<<<<< HEAD
<link rel="stylesheet" href="http://dcloudio.github.io/mui/dist/css/mui.min.css?v=2014-09-19 02:54:04 +0800"> <link rel="stylesheet" href="http://dcloudio.github.io/mui/dist/css/mui.min.css?v=2014-09-19 02:54:04 +0800">
<link rel="stylesheet" href="http://dcloudio.github.io/mui/assets/css/docs.css?v=2014-09-19 02:54:04 +0800"> <link rel="stylesheet" href="http://dcloudio.github.io/mui/assets/css/docs.css?v=2014-09-19 02:54:04 +0800">
=======
<link rel="stylesheet" href="http://dcloudio.github.io/mui/dist/css/mui.min.css?v=2014-09-19 18:04:16 +0800">
<link rel="stylesheet" href="http://dcloudio.github.io/mui/assets/css/docs.css?v=2014-09-19 18:04:16 +0800">
>>>>>>> FETCH_HEAD
<link rel="apple-touch-icon-precomposed" sizes="114x114" href="http://dcloudio.github.io/mui/assets/img/apple-touch-icon-114x114.png"> <link rel="apple-touch-icon-precomposed" sizes="114x114" href="http://dcloudio.github.io/mui/assets/img/apple-touch-icon-114x114.png">
...@@ -127,7 +132,7 @@ ...@@ -127,7 +132,7 @@
</p> </p>
<ul class="docs-footer-links"> <ul class="docs-footer-links">
<li>最新版本 v0.5.6</li> <li>最新版本 v0.5.7</li>
<li>&middot;</li> <li>&middot;</li>
<li><a href="https://github.com/dcloudio/mui/issues">Issues</a> <li><a href="https://github.com/dcloudio/mui/issues">Issues</a>
</li> </li>
...@@ -138,8 +143,13 @@ ...@@ -138,8 +143,13 @@
</ul> </ul>
</div> </div>
<script src="http://dcloudio.github.io/mui/dist/js/jquery-2.1.1.js"></script> <script src="http://dcloudio.github.io/mui/dist/js/jquery-2.1.1.js"></script>
<<<<<<< HEAD
<script src="http://dcloudio.github.io/mui/dist/js/mui.min.js?v=2014-09-19 02:54:04 +0800"></script> <script src="http://dcloudio.github.io/mui/dist/js/mui.min.js?v=2014-09-19 02:54:04 +0800"></script>
<script src="http://dcloudio.github.io/mui/assets/js/docs.min.js?v=2014-09-19 02:54:04 +0800"></script> <script src="http://dcloudio.github.io/mui/assets/js/docs.min.js?v=2014-09-19 02:54:04 +0800"></script>
=======
<script src="http://dcloudio.github.io/mui/dist/js/mui.min.js?v=2014-09-19 18:04:16 +0800"></script>
<script src="http://dcloudio.github.io/mui/assets/js/docs.min.js?v=2014-09-19 18:04:16 +0800"></script>
>>>>>>> FETCH_HEAD
</div> </div>
</div> </div>
......
index.html
View file @ 1506d053
...@@ -10,8 +10,13 @@ ...@@ -10,8 +10,13 @@
<meta name="apple-mobile-web-app-capable" content="yes"> <meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black"> <meta name="apple-mobile-web-app-status-bar-style" content="black">
<<<<<<< HEAD
<link rel="stylesheet" href="http://dcloudio.github.io/mui/dist/css/mui.min.css?v=2014-09-19 02:54:04 +0800"> <link rel="stylesheet" href="http://dcloudio.github.io/mui/dist/css/mui.min.css?v=2014-09-19 02:54:04 +0800">
<link rel="stylesheet" href="http://dcloudio.github.io/mui/assets/css/docs.css?v=2014-09-19 02:54:04 +0800"> <link rel="stylesheet" href="http://dcloudio.github.io/mui/assets/css/docs.css?v=2014-09-19 02:54:04 +0800">
=======
<link rel="stylesheet" href="http://dcloudio.github.io/mui/dist/css/mui.min.css?v=2014-09-21 19:34:31 +0800">
<link rel="stylesheet" href="http://dcloudio.github.io/mui/assets/css/docs.css?v=2014-09-21 19:34:31 +0800">
>>>>>>> FETCH_HEAD
<link rel="apple-touch-icon-precomposed" sizes="114x114" href="http://dcloudio.github.io/mui/assets/img/apple-touch-icon-114x114.png"> <link rel="apple-touch-icon-precomposed" sizes="114x114" href="http://dcloudio.github.io/mui/assets/img/apple-touch-icon-114x114.png">
...@@ -61,7 +66,7 @@ ...@@ -61,7 +66,7 @@
</p> </p>
<ul class="docs-footer-links"> <ul class="docs-footer-links">
<li>最新版本 v0.5.6</li> <li>最新版本 v0.5.7</li>
<li>&middot;</li> <li>&middot;</li>
<li><a href="https://github.com/dcloudio/mui/issues">Issues</a> <li><a href="https://github.com/dcloudio/mui/issues">Issues</a>
</li> </li>
...@@ -72,8 +77,13 @@ ...@@ -72,8 +77,13 @@
</ul> </ul>
</div> </div>
<script src="http://dcloudio.github.io/mui/dist/js/jquery-2.1.1.js"></script> <script src="http://dcloudio.github.io/mui/dist/js/jquery-2.1.1.js"></script>
<<<<<<< HEAD
<script src="http://dcloudio.github.io/mui/dist/js/mui.min.js?v=2014-09-19 02:54:04 +0800"></script> <script src="http://dcloudio.github.io/mui/dist/js/mui.min.js?v=2014-09-19 02:54:04 +0800"></script>
<script src="http://dcloudio.github.io/mui/assets/js/docs.min.js?v=2014-09-19 02:54:04 +0800"></script> <script src="http://dcloudio.github.io/mui/assets/js/docs.min.js?v=2014-09-19 02:54:04 +0800"></script>
=======
<script src="http://dcloudio.github.io/mui/dist/js/mui.min.js?v=2014-09-21 19:34:31 +0800"></script>
<script src="http://dcloudio.github.io/mui/assets/js/docs.min.js?v=2014-09-21 19:34:31 +0800"></script>
>>>>>>> FETCH_HEAD
</div> </div>
</div> </div>
......
javascript/index.html
View file @ 1506d053
...@@ -10,8 +10,13 @@ ...@@ -10,8 +10,13 @@
<meta name="apple-mobile-web-app-capable" content="yes"> <meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black"> <meta name="apple-mobile-web-app-status-bar-style" content="black">
<<<<<<< HEAD
<link rel="stylesheet" href="http://dcloudio.github.io/mui/dist/css/mui.min.css?v=2014-09-19 02:54:04 +0800"> <link rel="stylesheet" href="http://dcloudio.github.io/mui/dist/css/mui.min.css?v=2014-09-19 02:54:04 +0800">
<link rel="stylesheet" href="http://dcloudio.github.io/mui/assets/css/docs.css?v=2014-09-19 02:54:04 +0800"> <link rel="stylesheet" href="http://dcloudio.github.io/mui/assets/css/docs.css?v=2014-09-19 02:54:04 +0800">
=======
<link rel="stylesheet" href="http://dcloudio.github.io/mui/dist/css/mui.min.css?v=2014-09-25 15:29:28 +0800">
<link rel="stylesheet" href="http://dcloudio.github.io/mui/assets/css/docs.css?v=2014-09-25 15:29:28 +0800">
>>>>>>> FETCH_HEAD
<link rel="apple-touch-icon-precomposed" sizes="114x114" href="http://dcloudio.github.io/mui/assets/img/apple-touch-icon-114x114.png"> <link rel="apple-touch-icon-precomposed" sizes="114x114" href="http://dcloudio.github.io/mui/assets/img/apple-touch-icon-114x114.png">
...@@ -136,7 +141,8 @@ mui的解决思路是：将需要滚动的区域通过单独的webview实现， ...@@ -136,7 +141,8 @@ mui的解决思路是：将需要滚动的区域通过单独的webview实现，
<span class="nx">width</span><span class="o">:</span><span class="nx">subpage</span><span class="o">-</span><span class="nx">width</span><span class="p">,</span><span class="c1">//子页面宽度，默认为100%</span> <span class="nx">width</span><span class="o">:</span><span class="nx">subpage</span><span class="o">-</span><span class="nx">width</span><span class="p">,</span><span class="c1">//子页面宽度，默认为100%</span>
<span class="nx">height</span><span class="o">:</span><span class="nx">subpage</span><span class="o">-</span><span class="nx">height</span><span class="p">,</span><span class="c1">//子页面高度，默认为100%</span> <span class="nx">height</span><span class="o">:</span><span class="nx">subpage</span><span class="o">-</span><span class="nx">height</span><span class="p">,</span><span class="c1">//子页面高度，默认为100%</span>
<span class="p">......</span> <span class="p">......</span>
<span class="p">}</span> <span class="p">},</span>
<span class="nx">extras</span><span class="o">:</span><span class="p">{}</span><span class="c1">//额外扩展参数</span>
<span class="p">}]</span> <span class="p">}]</span>
<span class="p">});</span></code></pre></div> <span class="p">});</span></code></pre></div>
<p class="component-description"><strong>参数说明：</strong>styles表示窗口属性，参考<a href="http://www.dcloud.io/docs/api/zh_cn/webview.shtml#plus.webview.WebviewStyle">5+规范中的WebviewStyle</a>；特别注意，height和width两个属性,即使不设置，也默认按100%计算；因此若设置了top值为非"0px"的情况，建议同时设置bottom值，否则5+ runtime根据高度100%计算，可能会造成页面真实底部位置超出屏幕范围的情况；left、right同理。</p> <p class="component-description"><strong>参数说明：</strong>styles表示窗口属性，参考<a href="http://www.dcloud.io/docs/api/zh_cn/webview.shtml#plus.webview.WebviewStyle">5+规范中的WebviewStyle</a>；特别注意，height和width两个属性,即使不设置，也默认按100%计算；因此若设置了top值为非"0px"的情况，建议同时设置bottom值，否则5+ runtime根据高度100%计算，可能会造成页面真实底部位置超出屏幕范围的情况；left、right同理。</p>
...@@ -234,7 +240,7 @@ mui的解决思路是：单webview只承载单个页面的dom，减少dom层级 ...@@ -234,7 +240,7 @@ mui的解决思路是：单webview只承载单个页面的dom，减少dom层级
<li> <li>
styles表示窗口参数，参考<a href="http://www.dcloud.io/docs/api/zh_cn/webview.shtml#plus.webview.WebviewStyle">5+规范中的WebviewStyle</a>；特别注意，height和width两个属性,即使不设置，也默认按100%计算；因此若设置了top值为非"0px"的情况，建议同时设置bottom值，否则5+ runtime根据高度100%计算，可能会造成页面真实底部位置超出屏幕范围的情况；left、right同理。 styles表示窗口参数，参考<a href="http://www.dcloud.io/docs/api/zh_cn/webview.shtml#plus.webview.WebviewStyle">5+规范中的WebviewStyle</a>；特别注意，height和width两个属性,即使不设置，也默认按100%计算；因此若设置了top值为非"0px"的情况，建议同时设置bottom值，否则5+ runtime根据高度100%计算，可能会造成页面真实底部位置超出屏幕范围的情况；left、right同理。
</li> </li>
<li>extras:新窗口的额外扩展参数，可用来处理页面间传值；例如：<code>var webview = mui.openWindow({url:'info.html',extras:{name:'mui'}});console.log(webview.name);</code>，会输出"mui"字符串；</li> <li>extras:新窗口的额外扩展参数，可用来处理页面间传值；例如：<code>var webview = mui.openWindow({url:'info.html',extras:{name:'mui'}});console.log(webview.name);</code>，会输出"mui"字符串；注意：扩展参数仅在打开新窗口时有效，若目标窗口为预加载页面，则通过mui.openWindow方法打开时传递的extras参数无效。</li>
<li> <li>
show表示窗口显示控制。autoShow：目标窗口loaded事件发生后，是否自动显示；若目标页面为预加载页面，则该参数无效；aniShow表示页面显示动画，比如从右侧划入、从下侧划入等，具体可参考<a href="http://www.dcloud.io/docs/api/zh_cn/webview.shtml#plus.webview.AnimationTypeShow">5+规范中的AnimationTypeShow</a> show表示窗口显示控制。autoShow：目标窗口loaded事件发生后，是否自动显示；若目标页面为预加载页面，则该参数无效；aniShow表示页面显示动画，比如从右侧划入、从下侧划入等，具体可参考<a href="http://www.dcloud.io/docs/api/zh_cn/webview.shtml#plus.webview.AnimationTypeShow">5+规范中的AnimationTypeShow</a>
</li> </li>
...@@ -411,27 +417,20 @@ mui的解决思路是：单webview只承载单个页面的dom，减少dom层级 ...@@ -411,27 +417,20 @@ mui的解决思路是：单webview只承载单个页面的dom，减少dom层级
<span class="p">{</span> <span class="p">{</span>
<span class="nx">url</span><span class="o">:</span><span class="nx">prelaod</span><span class="o">-</span><span class="nx">page</span><span class="o">-</span><span class="nx">url</span><span class="p">,</span> <span class="nx">url</span><span class="o">:</span><span class="nx">prelaod</span><span class="o">-</span><span class="nx">page</span><span class="o">-</span><span class="nx">url</span><span class="p">,</span>
<span class="nx">id</span><span class="o">:</span><span class="nx">preload</span><span class="o">-</span><span class="nx">page</span><span class="o">-</span><span class="nx">id</span><span class="p">,</span> <span class="nx">id</span><span class="o">:</span><span class="nx">preload</span><span class="o">-</span><span class="nx">page</span><span class="o">-</span><span class="nx">id</span><span class="p">,</span>
<span class="nx">styles</span><span class="o">:</span><span class="p">{</span> <span class="nx">styles</span><span class="o">:</span><span class="p">{},</span><span class="c1">//窗口参数</span>
<span class="p">},</span> <span class="nx">extras</span><span class="o">:</span><span class="p">{},</span><span class="c1">//自定义扩展参数</span>
<span class="nx">subpages</span><span class="o">:</span><span class="p">[</span> <span class="nx">subpages</span><span class="o">:</span><span class="p">[{},{}]</span><span class="c1">//预加载页面的子页面</span>
<span class="p">{</span>
<span class="p">}</span>
<span class="p">]</span>
<span class="p">}</span> <span class="p">}</span>
<span class="p">]</span> <span class="p">]</span>
<span class="p">});</span></code></pre></div> <span class="p">});</span></code></pre></div>
<p class="component-note touch-only"><strong>Note:</strong> 若预加载的目标窗口包含子页面，也可以直接在preloadPages参数中中配置subpages，mui框架会自动预加载子页面；subpages参数参考<a href="#subpage">创建子页面</a>。</p> <p class="component-note touch-only"><strong>Note:</strong> 若预加载的目标窗口包含子页面，也可以直接在preloadPages参数中中配置subpages，mui框架会自动预加载子页面；subpages参数参考<a href="#subpage">创建子页面</a>。</p>
<p class="component-description">方式二：通过mui.createWindow方法预加载.</p> <p class="component-description">方式二：通过mui.preload方法预加载.</p>
<div class="highlight"><pre><code class="language-js" data-lang="js"><span class="nx">mui</span><span class="p">.</span><span class="nx">createWindow</span><span class="p">({</span> <div class="highlight"><pre><code class="language-js" data-lang="js"><span class="nx">mui</span><span class="p">.</span><span class="nx">preload</span><span class="p">({</span>
<span class="nx">url</span><span class="o">:</span><span class="k">new</span><span class="o">-</span><span class="nx">page</span><span class="o">-</span><span class="nx">url</span><span class="p">,</span> <span class="nx">url</span><span class="o">:</span><span class="k">new</span><span class="o">-</span><span class="nx">page</span><span class="o">-</span><span class="nx">url</span><span class="p">,</span>
<span class="nx">id</span><span class="o">:</span><span class="k">new</span><span class="o">-</span><span class="nx">page</span><span class="o">-</span><span class="nx">id</span><span class="p">,</span><span class="c1">//默认使用当前页面的url作为id</span> <span class="nx">id</span><span class="o">:</span><span class="k">new</span><span class="o">-</span><span class="nx">page</span><span class="o">-</span><span class="nx">id</span><span class="p">,</span><span class="c1">//默认使用当前页面的url作为id</span>
<span class="nx">styles</span><span class="o">:</span><span class="p">{</span> <span class="nx">styles</span><span class="o">:</span><span class="p">{},</span><span class="c1">//窗口参数</span>
<span class="nx">top</span><span class="o">:</span><span class="nx">subpage</span><span class="o">-</span><span class="nx">top</span><span class="o">-</span><span class="nx">position</span><span class="p">,</span><span class="c1">//子页面顶部位置，默认为0px</span> <span class="nx">extras</span><span class="o">:</span><span class="p">{}</span><span class="c1">//自定义扩展参数</span>
<span class="nx">bottom</span><span class="o">:</span><span class="nx">subpage</span><span class="o">-</span><span class="nx">bottom</span><span class="o">-</span><span class="nx">position</span><span class="p">,</span>
<span class="p">......</span>
<span class="p">},</span>
<span class="nx">preload</span><span class="o">:</span><span class="kc">true</span><span class="c1">//预加载标志，默认为false</span>
<span class="p">})</span></code></pre></div> <span class="p">})</span></code></pre></div>
<p class="component-description">示例：Hello mui首页显示后，用户点击badge（数字角标）、checkbox（复选框）、dialog（消息框）三个页面时，不会出现waiting等待框，而是立即打开了新页面；但点击icon（图标）页面时，则会先显示waiting等待框，再进入新页面；这种效果就是因为使用了预加载技术，Hello mui设置首页最多允许预加载3个页面（preloadLimit为3），然后在首页plusReady事件后，预加载了前3个一级列表页面，，故有前面所述的体验效果；实现代码如下：</p> <p class="component-description">示例：Hello mui首页显示后，用户点击badge（数字角标）、checkbox（复选框）、dialog（消息框）三个页面时，不会出现waiting等待框，而是立即打开了新页面；但点击icon（图标）页面时，则会先显示waiting等待框，再进入新页面；这种效果就是因为使用了预加载技术，Hello mui设置首页最多允许预加载3个页面（preloadLimit为3），然后在首页plusReady事件后，预加载了前3个一级列表页面，，故有前面所述的体验效果；实现代码如下：</p>
<div class="highlight"><pre><code class="language-js" data-lang="js"><span class="nx">$</span><span class="p">(</span><span class="s1">&#39;#list&gt;.mui-table-view-cell&#39;</span><span class="p">,</span> <span class="nb">document</span><span class="p">.</span><span class="nx">body</span><span class="p">).</span><span class="nx">each</span><span class="p">(</span><span class="kd">function</span><span class="p">()</span> <span class="p">{</span> <div class="highlight"><pre><code class="language-js" data-lang="js"><span class="nx">$</span><span class="p">(</span><span class="s1">&#39;#list&gt;.mui-table-view-cell&#39;</span><span class="p">,</span> <span class="nb">document</span><span class="p">.</span><span class="nx">body</span><span class="p">).</span><span class="nx">each</span><span class="p">(</span><span class="kd">function</span><span class="p">()</span> <span class="p">{</span>
...@@ -439,9 +438,8 @@ mui的解决思路是：单webview只承载单个页面的dom，减少dom层级 ...@@ -439,9 +438,8 @@ mui的解决思路是：单webview只承载单个页面的dom，减少dom层级
<span class="k">if</span> <span class="p">(</span><span class="o">!</span><span class="k">this</span><span class="p">.</span><span class="nx">classList</span><span class="p">.</span><span class="nx">contains</span><span class="p">(</span><span class="s1">&#39;mui-collapse&#39;</span><span class="p">))</span> <span class="p">{</span> <span class="k">if</span> <span class="p">(</span><span class="o">!</span><span class="k">this</span><span class="p">.</span><span class="nx">classList</span><span class="p">.</span><span class="nx">contains</span><span class="p">(</span><span class="s1">&#39;mui-collapse&#39;</span><span class="p">))</span> <span class="p">{</span>
<span class="kd">var</span> <span class="nx">url</span> <span class="o">=</span> <span class="k">this</span><span class="p">.</span><span class="nx">querySelector</span><span class="p">(</span><span class="s1">&#39;a&#39;</span><span class="p">).</span><span class="nx">getAttribute</span><span class="p">(</span><span class="s2">&quot;href&quot;</span><span class="p">);</span> <span class="kd">var</span> <span class="nx">url</span> <span class="o">=</span> <span class="k">this</span><span class="p">.</span><span class="nx">querySelector</span><span class="p">(</span><span class="s1">&#39;a&#39;</span><span class="p">).</span><span class="nx">getAttribute</span><span class="p">(</span><span class="s2">&quot;href&quot;</span><span class="p">);</span>
<span class="c1">//预加载，默认使用url作为其id</span> <span class="c1">//预加载，默认使用url作为其id</span>
<span class="nx">$</span><span class="p">.</span><span class="nx">createWindow</span><span class="p">({</span> <span class="nx">$</span><span class="p">.</span><span class="nx">preload</span><span class="p">({</span>
<span class="nx">url</span><span class="o">:</span> <span class="nx">url</span><span class="p">,</span> <span class="nx">url</span><span class="o">:</span> <span class="nx">url</span>
<span class="nx">preload</span><span class="o">:</span> <span class="kc">true</span><span class="c1">//必需</span>
<span class="p">});</span> <span class="p">});</span>
<span class="k">if</span> <span class="p">(</span><span class="o">++</span><span class="nx">count</span> <span class="o">&gt;=</span> <span class="nx">limit</span><span class="p">)</span> <span class="p">{</span> <span class="k">if</span> <span class="p">(</span><span class="o">++</span><span class="nx">count</span> <span class="o">&gt;=</span> <span class="nx">limit</span><span class="p">)</span> <span class="p">{</span>
<span class="k">return</span> <span class="kc">false</span><span class="p">;</span> <span class="k">return</span> <span class="kc">false</span><span class="p">;</span>
...@@ -530,6 +528,14 @@ mui的解决思路是：单webview只承载单个页面的dom，减少dom层级 ...@@ -530,6 +528,14 @@ mui的解决思路是：单webview只承载单个页面的dom，减少dom层级
<span class="p">}</span><span class="k">else</span><span class="p">{</span> <span class="p">}</span><span class="k">else</span><span class="p">{</span>
<span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="s2">&quot;关闭状态&quot;</span><span class="p">);</span> <span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="s2">&quot;关闭状态&quot;</span><span class="p">);</span>
<span class="p">}</span></code></pre></div> <span class="p">}</span></code></pre></div>
<p class="component-description">同理，要打开、关闭开控件，同样操作该控件的<code>.mui-active</code>类即可，如下为示例代码：</p>
<div class="highlight"><pre><code class="language-js" data-lang="js"><span class="kd">var</span> <span class="nx">mySwitch</span> <span class="o">=</span> <span class="nb">document</span><span class="p">.</span><span class="nx">getElementById</span><span class="p">(</span><span class="s2">&quot;mySwitch&quot;</span><span class="p">);</span>
<span class="c1">//添加mui-active类，打开开关</span>
<span class="nx">mySwitch</span><span class="p">.</span><span class="nx">classList</span><span class="p">.</span><span class="nx">add</span><span class="p">(</span><span class="s1">&#39;mui-active&#39;</span><span class="p">);</span>
<span class="c1">//删除mui-active类，关闭开关</span>
<span class="nx">mySwitch</span><span class="p">.</span><span class="nx">classList</span><span class="p">.</span><span class="nx">remove</span><span class="p">(</span><span class="s1">&#39;mui-active&#39;</span><span class="p">);</span>
<span class="c1">//也可以直接使用toggle方法自动处理打开或关闭</span>
<span class="nx">mySwitch</span><span class="p">.</span><span class="nx">classList</span><span class="p">.</span><span class="nx">toggle</span><span class="p">(</span><span class="s1">&#39;mui-active&#39;</span><span class="p">);</span></code></pre></div>
</article> </article>
<!-- slide事件 --> <!-- slide事件 -->
<article id="slide" class="component mui-active"> <article id="slide" class="component mui-active">
...@@ -586,6 +592,131 @@ mui的解决思路是：单webview只承载单个页面的dom，减少dom层级 ...@@ -586,6 +592,131 @@ mui的解决思路是：单webview只承载单个页面的dom，减少dom层级
<span class="nb">document</span><span class="p">.</span><span class="nx">getElementById</span><span class="p">(</span><span class="s2">&quot;info&quot;</span><span class="p">).</span><span class="nx">innerText</span> <span class="o">=</span> <span class="s2">&quot;你正在看第&quot;</span><span class="o">+</span><span class="p">(</span><span class="nx">event</span><span class="p">.</span><span class="nx">detail</span><span class="p">.</span><span class="nx">slideNumber</span><span class="o">+</span><span class="mi">1</span><span class="p">)</span><span class="o">+</span><span class="s2">&quot;张图片&quot;</span><span class="p">;</span> <span class="nb">document</span><span class="p">.</span><span class="nx">getElementById</span><span class="p">(</span><span class="s2">&quot;info&quot;</span><span class="p">).</span><span class="nx">innerText</span> <span class="o">=</span> <span class="s2">&quot;你正在看第&quot;</span><span class="o">+</span><span class="p">(</span><span class="nx">event</span><span class="p">.</span><span class="nx">detail</span><span class="p">.</span><span class="nx">slideNumber</span><span class="o">+</span><span class="mi">1</span><span class="p">)</span><span class="o">+</span><span class="s2">&quot;张图片&quot;</span><span class="p">;</span>
<span class="p">});</span></code></pre></div> <span class="p">});</span></code></pre></div>
</article> </article>
<!-- 自定义事件 -->
<article id="customevent" class="component mui-active">
<h3 class="component-title">自定义事件</h3>
<p class="component-description">用户开发应用中会大量使用事件功能。除了浏览器内置的事件及mui框架内置的事件（比如手势事件）外，mui同时支持用户触发和绑定自定义事件。通过自定义事件，用户可以轻松实现页面间数据传递。</p>
<p class="component-description"><strong>监听自定义事件</strong></p>
<p class="component-description">添加自定义事件监听操作和标准js事件监听类似，可直接通过window对象添加，如下：</p>
<div class="highlight"><pre><code class="language-js" data-lang="js"><span class="nb">window</span><span class="p">.</span><span class="nx">addEventListener</span><span class="p">(</span><span class="s1">&#39;customEvent&#39;</span><span class="p">,</span><span class="kd">function</span><span class="p">(</span><span class="nx">event</span><span class="p">){</span>
<span class="c1">//通过event.detail可获得传递过来的参数内容</span>
<span class="p">....</span>
<span class="p">});</span></code></pre></div>
<p class="component-description"><strong>触发自定义事件</strong></p>
<p class="component-description">通过mui.fire方法可触发目标窗口的自定义事件：</p>
<div class="highlight"><pre><code class="language-js" data-lang="js"><span class="nx">mui</span><span class="p">.</span><span class="nx">fire</span><span class="p">(</span><span class="nx">targetPage</span><span class="p">,</span><span class="s1">&#39;customEvent&#39;</span><span class="p">,{</span>
<span class="c1">//自定义事件参数</span>
<span class="p">});</span></code></pre></div>
<p class="component-description"><strong>示例：</strong>假设如下场景：从新闻列表页面进入新闻详情页面，新闻详情页面为共用页面，通过传递新闻ID通知详情页面需要显示具体哪个新闻，详情页面再动态向服务器请求数据，mui要实现类似需求可通过如下步骤实现：
<ul>
<li>
在列表页面中预加载详情页面（假设为detail.html）
</li>
<li>
列表页面在点击新闻标题时，首先，获得该新闻id，触发详情页面的newsId事件，并将新闻id作为事件参数传递过去；然后再打开详情页面；
</li>
<li>详情页面监听newsId自定义事件</li>
</ul>
</p>
<p class="component-description">列表页面代码如下：</p>
<div class="highlight"><pre><code class="language-js" data-lang="js"><span class="c1">//初始化预加载详情页面</span>
<span class="nx">mui</span><span class="p">.</span><span class="nx">init</span><span class="p">({</span>
<span class="nx">preloadPages</span><span class="o">:</span><span class="p">[{</span>
<span class="nx">id</span><span class="o">:</span><span class="s1">&#39;detail.html&#39;</span><span class="p">,</span>
<span class="nx">url</span><span class="o">:</span><span class="s1">&#39;detail.html&#39;</span>
<span class="p">}</span>
<span class="p">]</span>
<span class="p">});</span>
<span class="kd">var</span> <span class="nx">detailPage</span> <span class="o">=</span> <span class="kc">null</span><span class="p">;</span>
<span class="c1">//添加列表项的点击事件</span>
<span class="nx">mui</span><span class="p">(</span><span class="s1">&#39;.mui-content&#39;</span><span class="p">).</span><span class="nx">on</span><span class="p">(</span><span class="s1">&#39;tap&#39;</span><span class="p">,</span> <span class="s1">&#39;a&#39;</span><span class="p">,</span> <span class="kd">function</span><span class="p">(</span><span class="nx">e</span><span class="p">)</span> <span class="p">{</span>
<span class="kd">var</span> <span class="nx">id</span> <span class="o">=</span> <span class="k">this</span><span class="p">.</span><span class="nx">getAttribute</span><span class="p">(</span><span class="s1">&#39;id&#39;</span><span class="p">);</span>
<span class="c1">//获得详情页面</span>
<span class="k">if</span><span class="p">(</span><span class="o">!</span><span class="nx">detailPage</span><span class="p">){</span>
<span class="nx">detailPage</span> <span class="o">=</span> <span class="nx">plus</span><span class="p">.</span><span class="nx">webview</span><span class="p">.</span><span class="nx">getWebviewById</span><span class="p">(</span><span class="s1">&#39;detail.html&#39;</span><span class="p">);</span>
<span class="p">}</span>
<span class="c1">//触发详情页面的newsId事件</span>
<span class="nx">mui</span><span class="p">.</span><span class="nx">fire</span><span class="p">(</span><span class="nx">detailPage</span><span class="p">,</span><span class="s1">&#39;newsId&#39;</span><span class="p">,{</span>
<span class="nx">id</span><span class="o">:</span><span class="nx">id</span>
<span class="p">});</span>
<span class="c1">//打开详情页面 </span>
<span class="nx">mui</span><span class="p">.</span><span class="nx">openWindow</span><span class="p">({</span>
<span class="nx">id</span><span class="o">:</span><span class="s1">&#39;detail.html&#39;</span>
<span class="p">});</span>
<span class="p">});</span></code></pre></div>
<p class="component-description">详情页面代码如下：</p>
<div class="highlight"><pre><code class="language-js" data-lang="js"><span class="c1">//添加newId自定义事件监听</span>
<span class="nb">window</span><span class="p">.</span><span class="nx">addEventListener</span><span class="p">(</span><span class="s1">&#39;newsId&#39;</span><span class="p">,</span><span class="kd">function</span><span class="p">(</span><span class="nx">event</span><span class="p">){</span>
<span class="c1">//获得事件参数</span>
<span class="kd">var</span> <span class="nx">id</span> <span class="o">=</span> <span class="nx">event</span><span class="p">.</span><span class="nx">detail</span><span class="p">.</span><span class="nx">id</span><span class="p">;</span>
<span class="c1">//根据id向服务器请求新闻详情</span>
<span class="p">.....</span>
<span class="p">});</span></code></pre></div>
</article>
<!-- 图片轮播插件 -->
<article id="plugin-slider" class="component mui-active">
<h3 class="component-title">图片轮播</h3>
<p class="component-description">mui框架内置了图片轮播插件，通过该插件封装的JS API，用户可以设定是否自动轮播及轮播周期，如下为代码示例：</p>
<div class="highlight"><pre><code class="language-js" data-lang="js"><span class="c1">//获得slider插件对象</span>
<span class="kd">var</span> <span class="nx">gallery</span> <span class="o">=</span> <span class="nx">mui</span><span class="p">(</span><span class="s1">&#39;.mui-slider&#39;</span><span class="p">);</span>
<span class="nx">gallery</span><span class="p">.</span><span class="nx">slider</span><span class="p">({</span>
<span class="nx">slideshowDelay</span><span class="o">:</span><span class="mi">5000</span><span class="c1">//自动轮播周期，若为0则不自动播放，默认为0；</span>
<span class="p">});</span></code></pre></div>
<p class="component-description">因此若希望图片轮播不要自动播放，而是用户手动滑动才切换，只需要通过如上方法，将slideshowDelay参数设为0即可。</p>
<p class="component-description">若要跳转到第x张图片，则可以使用图片轮播插件的gotoItem方法，例如：</p>
<div class="highlight"><pre><code class="language-js" data-lang="js"><span class="c1">//获得slider插件对象</span>
<span class="kd">var</span> <span class="nx">gallery</span> <span class="o">=</span> <span class="nx">mui</span><span class="p">(</span><span class="s1">&#39;.mui-slider&#39;</span><span class="p">);</span>
<span class="nx">gallery</span><span class="p">.</span><span class="nx">slider</span><span class="p">(</span><span class="s1">&#39;gotoItem&#39;</span><span class="p">,</span><span class="nx">index</span><span class="p">);</span><span class="c1">//跳转到第index张图片，index从0开始；</span></code></pre></div>
<p class="component-description">图片轮播涉及的另外一个问题：是否支持循环播放，比如有1、2、3、4四张图片，从第1张图片起，依次向左滑动切换图片，当切换到第4张图片时，继续向左滑动，接下来会有两种效果：
<ul>
<li>支持循环：左滑，直接切换到第1张图片；</li>
<li>不支持循环：左滑，无反应，继续显示第4张图片，用户若要显示第1张图片，必须连续向右滑动切换到第1张图片；</li>
</ul>
当显示第1张图片时，继续右滑是否显示第4张图片，是同样问题；这个问题的实现需要通过<code>.mui-slider-loop</code>类及DOM节点来控制；若不支持循环，代码比较简单，如下：</p>
<div class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;mui-slider&quot;</span><span class="nt">&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;mui-slider-group&quot;</span><span class="nt">&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;mui-slider-item&quot;</span><span class="nt">&gt;&lt;a</span> <span class="na">href=</span><span class="s">&quot;#&quot;</span><span class="nt">&gt;&lt;img</span> <span class="na">src=</span><span class="s">&quot;1.jpg&quot;</span> <span class="nt">/&gt;&lt;/a&gt;&lt;/div&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;mui-slider-item&quot;</span><span class="nt">&gt;&lt;a</span> <span class="na">href=</span><span class="s">&quot;#&quot;</span><span class="nt">&gt;&lt;img</span> <span class="na">src=</span><span class="s">&quot;2.jpg&quot;</span> <span class="nt">/&gt;&lt;/a&gt;&lt;/div&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;mui-slider-item&quot;</span><span class="nt">&gt;&lt;a</span> <span class="na">href=</span><span class="s">&quot;#&quot;</span><span class="nt">&gt;&lt;img</span> <span class="na">src=</span><span class="s">&quot;3.jpg&quot;</span> <span class="nt">/&gt;&lt;/a&gt;&lt;/div&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;mui-slider-item&quot;</span><span class="nt">&gt;&lt;a</span> <span class="na">href=</span><span class="s">&quot;#&quot;</span><span class="nt">&gt;&lt;img</span> <span class="na">src=</span><span class="s">&quot;4.jpg&quot;</span> <span class="nt">/&gt;&lt;/a&gt;&lt;/div&gt;</span>
<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;/div&gt;</span></code></pre></div>
<p class="component-description">若要支持循环，则需要在<code>.mui-slider-group</code>节点上增加<code>.mui-slider-loop</code>类，同时需要重复增加2张图片，图片顺序变为：4、1、2、3、4、1，代码示例如下：</p>
<div class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;mui-slider&quot;</span><span class="nt">&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;mui-slider-group mui-slider-loop&quot;</span><span class="nt">&gt;</span>
<span class="c">&lt;!--支持循环，需要重复图片节点--&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;mui-slider-item mui-slider-item-duplicate&quot;</span><span class="nt">&gt;&lt;a</span> <span class="na">href=</span><span class="s">&quot;#&quot;</span><span class="nt">&gt;&lt;img</span> <span class="na">src=</span><span class="s">&quot;4.jpg&quot;</span> <span class="nt">/&gt;&lt;/a&gt;&lt;/div&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;mui-slider-item&quot;</span><span class="nt">&gt;&lt;a</span> <span class="na">href=</span><span class="s">&quot;#&quot;</span><span class="nt">&gt;&lt;img</span> <span class="na">src=</span><span class="s">&quot;1.jpg&quot;</span> <span class="nt">/&gt;&lt;/a&gt;&lt;/div&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;mui-slider-item&quot;</span><span class="nt">&gt;&lt;a</span> <span class="na">href=</span><span class="s">&quot;#&quot;</span><span class="nt">&gt;&lt;img</span> <span class="na">src=</span><span class="s">&quot;2.jpg&quot;</span> <span class="nt">/&gt;&lt;/a&gt;&lt;/div&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;mui-slider-item&quot;</span><span class="nt">&gt;&lt;a</span> <span class="na">href=</span><span class="s">&quot;#&quot;</span><span class="nt">&gt;&lt;img</span> <span class="na">src=</span><span class="s">&quot;3.jpg&quot;</span> <span class="nt">/&gt;&lt;/a&gt;&lt;/div&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;mui-slider-item&quot;</span><span class="nt">&gt;&lt;a</span> <span class="na">href=</span><span class="s">&quot;#&quot;</span><span class="nt">&gt;&lt;img</span> <span class="na">src=</span><span class="s">&quot;4.jpg&quot;</span> <span class="nt">/&gt;&lt;/a&gt;&lt;/div&gt;</span>
<span class="c">&lt;!--支持循环，需要重复图片节点--&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;mui-slider-item mui-slider-item-duplicate&quot;</span><span class="nt">&gt;&lt;a</span> <span class="na">href=</span><span class="s">&quot;#&quot;</span><span class="nt">&gt;&lt;img</span> <span class="na">src=</span><span class="s">&quot;1.jpg&quot;</span> <span class="nt">/&gt;&lt;/a&gt;&lt;/div&gt;</span>
<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;/div&gt;</span></code></pre></div>
</article>
<!-- 弹出菜单 -->
<article id="plugin-popover" class="component mui-active">
<h3 class="component-title">弹出菜单</h3>
<p class="component-description">mui框架内置了弹出菜单插件，弹出菜单显示内容不限，但必须包裹在一个含<code>.mui-popover</code>类的div中，如下即为一个弹出菜单内容：</p>
<div class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt">&lt;div</span> <span class="na">id=</span><span class="s">&quot;popover&quot;</span> <span class="na">class=</span><span class="s">&quot;mui-popover&quot;</span><span class="nt">&gt;</span>
<span class="nt">&lt;ul</span> <span class="na">class=</span><span class="s">&quot;mui-table-view&quot;</span><span class="nt">&gt;</span>
<span class="nt">&lt;li</span> <span class="na">class=</span><span class="s">&quot;mui-table-view-cell&quot;</span><span class="nt">&gt;&lt;a</span> <span class="na">href=</span><span class="s">&quot;#&quot;</span><span class="nt">&gt;</span>Item1<span class="nt">&lt;/a&gt;&lt;/li&gt;</span>
<span class="nt">&lt;li</span> <span class="na">class=</span><span class="s">&quot;mui-table-view-cell&quot;</span><span class="nt">&gt;&lt;a</span> <span class="na">href=</span><span class="s">&quot;#&quot;</span><span class="nt">&gt;</span>Item2<span class="nt">&lt;/a&gt;&lt;/li&gt;</span>
<span class="nt">&lt;li</span> <span class="na">class=</span><span class="s">&quot;mui-table-view-cell&quot;</span><span class="nt">&gt;&lt;a</span> <span class="na">href=</span><span class="s">&quot;#&quot;</span><span class="nt">&gt;</span>Item3<span class="nt">&lt;/a&gt;&lt;/li&gt;</span>
<span class="nt">&lt;li</span> <span class="na">class=</span><span class="s">&quot;mui-table-view-cell&quot;</span><span class="nt">&gt;&lt;a</span> <span class="na">href=</span><span class="s">&quot;#&quot;</span><span class="nt">&gt;</span>Item4<span class="nt">&lt;/a&gt;&lt;/li&gt;</span>
<span class="nt">&lt;li</span> <span class="na">class=</span><span class="s">&quot;mui-table-view-cell&quot;</span><span class="nt">&gt;&lt;a</span> <span class="na">href=</span><span class="s">&quot;#&quot;</span><span class="nt">&gt;</span>Item5<span class="nt">&lt;/a&gt;&lt;/li&gt;</span>
<span class="nt">&lt;/ul&gt;</span>
<span class="nt">&lt;/div&gt;</span></code></pre></div>
<p class="component-description">要显示、隐藏如上菜单，mui推荐使用锚点方式，例如：</p>
<div class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">&quot;#popover&quot;</span> <span class="na">class=</span><span class="s">&quot;mui-btn mui-btn-primary mui-btn-block&quot;</span><span class="nt">&gt;</span>打开弹出菜单<span class="nt">&lt;/a&gt;</span></code></pre></div>
<p class="component-description">点击如上定义的按钮，即可显示弹出菜单，再次点击弹出菜单之外的其他区域，均可关闭弹出菜单；这种使用方式最为简洁。</p>
<p class="component-description">若希望通过js的方式控制弹出菜单，则通过如下一个方法即可：</p>
<div class="highlight"><pre><code class="language-js" data-lang="js"><span class="c1">//传入toggle参数，用户也无需关心当前是显示还是隐藏状态，mui会自动识别处理；</span>
<span class="nx">mui</span><span class="p">(</span><span class="s1">&#39;.mui-popover&#39;</span><span class="p">).</span><span class="nx">popover</span><span class="p">(</span><span class="s1">&#39;toggle&#39;</span><span class="p">);</span></code></pre></div>
</article>
<!-- Footer --> <!-- Footer -->
<div class="docs-footer"> <div class="docs-footer">
...@@ -593,7 +724,7 @@ mui的解决思路是：单webview只承载单个页面的dom，减少dom层级 ...@@ -593,7 +724,7 @@ mui的解决思路是：单webview只承载单个页面的dom，减少dom层级
</p> </p>
<ul class="docs-footer-links"> <ul class="docs-footer-links">
<li>最新版本 v0.5.6</li> <li>最新版本 v0.5.7</li>
<li>&middot;</li> <li>&middot;</li>
<li><a href="https://github.com/dcloudio/mui/issues">Issues</a> <li><a href="https://github.com/dcloudio/mui/issues">Issues</a>
</li> </li>
...@@ -604,8 +735,13 @@ mui的解决思路是：单webview只承载单个页面的dom，减少dom层级 ...@@ -604,8 +735,13 @@ mui的解决思路是：单webview只承载单个页面的dom，减少dom层级
</ul> </ul>
</div> </div>
<script src="http://dcloudio.github.io/mui/dist/js/jquery-2.1.1.js"></script> <script src="http://dcloudio.github.io/mui/dist/js/jquery-2.1.1.js"></script>
<<<<<<< HEAD
<script src="http://dcloudio.github.io/mui/dist/js/mui.min.js?v=2014-09-19 02:54:04 +0800"></script> <script src="http://dcloudio.github.io/mui/dist/js/mui.min.js?v=2014-09-19 02:54:04 +0800"></script>
<script src="http://dcloudio.github.io/mui/assets/js/docs.min.js?v=2014-09-19 02:54:04 +0800"></script> <script src="http://dcloudio.github.io/mui/assets/js/docs.min.js?v=2014-09-19 02:54:04 +0800"></script>
=======
<script src="http://dcloudio.github.io/mui/dist/js/mui.min.js?v=2014-09-25 15:29:28 +0800"></script>
<script src="http://dcloudio.github.io/mui/assets/js/docs.min.js?v=2014-09-25 15:29:28 +0800"></script>
>>>>>>> FETCH_HEAD
</div> </div>
</div> </div>
......
sitemap.xml
View file @ 1506d053
...@@ -2,7 +2,11 @@ ...@@ -2,7 +2,11 @@
<urlset xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://www.sitemaps.org/schemas/sitemap/0.9 http://www.sitemaps.org/schemas/sitemap/0.9/sitemap.xsd" xmlns="http://www.sitemaps.org/schemas/sitemap/0.9"> <urlset xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://www.sitemaps.org/schemas/sitemap/0.9 http://www.sitemaps.org/schemas/sitemap/0.9/sitemap.xsd" xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
<url> <url>
<loc>http://dcloudio.github.io/mui/</loc> <loc>http://dcloudio.github.io/mui/</loc>
<<<<<<< HEAD
<lastmod>2014-09-19T02:54:04+08:00</lastmod> <lastmod>2014-09-19T02:54:04+08:00</lastmod>
=======
<lastmod>2014-09-23T21:45:03+08:00</lastmod>
>>>>>>> FETCH_HEAD
<changefreq>daily</changefreq> <changefreq>daily</changefreq>
<priority>1.0</priority> <priority>1.0</priority>
</url> </url>
...@@ -10,7 +14,11 @@ ...@@ -10,7 +14,11 @@
<url> <url>
<loc>http://dcloudio.github.io/mui/about/</loc> <loc>http://dcloudio.github.io/mui/about/</loc>
<<<<<<< HEAD
<lastmod>2014-09-19T02:54:04+08:00</lastmod> <lastmod>2014-09-19T02:54:04+08:00</lastmod>
=======
<lastmod>2014-09-23T21:45:03+08:00</lastmod>
>>>>>>> FETCH_HEAD
<changefreq>weekly</changefreq> <changefreq>weekly</changefreq>
<priority>0.7</priority> <priority>0.7</priority>
</url> </url>
...@@ -19,6 +27,7 @@ ...@@ -19,6 +27,7 @@
<url> <url>
<loc>http://dcloudio.github.io/mui/components/</loc> <loc>http://dcloudio.github.io/mui/components/</loc>
<<<<<<< HEAD
<lastmod>2014-09-19T02:54:04+08:00</lastmod> <lastmod>2014-09-19T02:54:04+08:00</lastmod>
<changefreq>weekly</changefreq> <changefreq>weekly</changefreq>
<priority>0.7</priority> <priority>0.7</priority>
...@@ -29,6 +38,9 @@ ...@@ -29,6 +38,9 @@
<url> <url>
<loc>http://dcloudio.github.io/mui/getting-started-old/</loc> <loc>http://dcloudio.github.io/mui/getting-started-old/</loc>
<lastmod>2014-09-19T02:54:04+08:00</lastmod> <lastmod>2014-09-19T02:54:04+08:00</lastmod>
=======
<lastmod>2014-09-23T21:45:03+08:00</lastmod>
>>>>>>> FETCH_HEAD
<changefreq>weekly</changefreq> <changefreq>weekly</changefreq>
<priority>0.7</priority> <priority>0.7</priority>
</url> </url>
...@@ -37,7 +49,11 @@ ...@@ -37,7 +49,11 @@
<url> <url>
<loc>http://dcloudio.github.io/mui/getting-started/</loc> <loc>http://dcloudio.github.io/mui/getting-started/</loc>
<<<<<<< HEAD
<lastmod>2014-09-19T02:54:04+08:00</lastmod> <lastmod>2014-09-19T02:54:04+08:00</lastmod>
=======
<lastmod>2014-09-23T21:45:03+08:00</lastmod>
>>>>>>> FETCH_HEAD
<changefreq>weekly</changefreq> <changefreq>weekly</changefreq>
<priority>0.7</priority> <priority>0.7</priority>
</url> </url>
...@@ -47,6 +63,7 @@ ...@@ -47,6 +63,7 @@
<url> <url>
<<<<<<< HEAD
<loc>http://dcloudio.github.io/mui/javascript-old/</loc> <loc>http://dcloudio.github.io/mui/javascript-old/</loc>
<lastmod>2014-09-19T02:54:04+08:00</lastmod> <lastmod>2014-09-19T02:54:04+08:00</lastmod>
<changefreq>weekly</changefreq> <changefreq>weekly</changefreq>
...@@ -58,6 +75,10 @@ ...@@ -58,6 +75,10 @@
<url> <url>
<loc>http://dcloudio.github.io/mui/javascript/</loc> <loc>http://dcloudio.github.io/mui/javascript/</loc>
<lastmod>2014-09-19T02:54:04+08:00</lastmod> <lastmod>2014-09-19T02:54:04+08:00</lastmod>
=======
<loc>http://dcloudio.github.io/mui/javascript/</loc>
<lastmod>2014-09-23T21:45:03+08:00</lastmod>
>>>>>>> FETCH_HEAD
<changefreq>weekly</changefreq> <changefreq>weekly</changefreq>
<priority>0.7</priority> <priority>0.7</priority>
</url> </url>
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment