Skip to content

M
mui
Commit 9ac0ae6d authored by hbcui1984's avatar hbcui1984
Browse files
Options

编译至mui v1.1.0

parent eac743bb
Show whitespace changes
Inline Side-by-side
Showing with 809 additions and 659 deletions
dist/css/mui.css
View file @ 9ac0ae6d
/*!
* =====================================================
* Mui v1.0.0 (https://github.com/dcloudio/mui)
* Mui v1.1.0 (https://github.com/dcloudio/mui)
* =====================================================
*/
......@@ -1842,7 +1842,8 @@ input[type="submit"]:active, input[type="submit"].mui-active,
background-color: #eee;
}
.mui-grid-view.mui-grid-9 .mui-table-view-cell > a:not(.mui-btn) {
padding: 15px;
padding: 10px 0;
margin: 0;
}
.mui-grid-view.mui-grid-9 .mui-media {
color: #797979;
......@@ -2328,13 +2329,25 @@ select:focus {
-webkit-touch-callout: none;
}
.mui-segmented-control.mui-scroll-wrapper {
height: 38px;
}
.mui-segmented-control.mui-scroll-wrapper .mui-scroll {
width: auto;
height: 40px;
white-space: nowrap;
}
.mui-segmented-control.mui-scroll-wrapper .mui-control-item {
display: inline-block;
width: auto;
padding: 0 20px;
border: 0;
}
.mui-segmented-control .mui-control-item {
display: table-cell;
width: 1%;
padding-top: 6px;
padding-bottom: 7px;
overflow: hidden;
line-height: 1;
line-height: 38px;
color: #007aff;
text-align: center;
text-overflow: ellipsis;
......@@ -2754,6 +2767,10 @@ select:focus {
position: static;
}
.mui-android .mui-modal .mui-bar-nav ~ .mui-content {
padding-top: 0;
}
.mui-slider {
position: relative;
width: 100%;
......@@ -2821,7 +2838,6 @@ select:focus {
.mui-slider-indicator.mui-segmented-control {
position: relative;
bottom: auto;
padding-top: 10px;
}
.mui-slider-indicator .mui-indicator {
display: inline-block;
......@@ -3476,6 +3492,13 @@ select:focus {
.mui-fullscreen .mui-slider-group {
height: 100%;
}
.mui-fullscreen .mui-segmented-control ~ .mui-slider-group {
position: absolute;
top: 40px;
bottom: 0;
width: 100%;
height: auto;
}
.mui-fullscreen .mui-slider-item > a {
top: 50%;
-webkit-transform: translateY(-50%);
......
dist/css/mui.min.css
View file @ 9ac0ae6d
This source diff could not be displayed because it is too large. You can view the blob instead.
dist/js/mui.js
View file @ 9ac0ae6d
/*!
* =====================================================
* Mui v1.0.0 (https://github.com/dcloudio/mui)
* Mui v1.1.0 (https://github.com/dcloudio/mui)
* =====================================================
*/
/**
......@@ -52,19 +52,54 @@ var mui = (function(document, undefined) {
* @param {type} deep
* @returns {unresolved}
*/
$.extend = function(target, source, deep) {
if (!target) {
$.extend = function() { //from jquery2
var options, name, src, copy, copyIsArray, clone,
target = arguments[0] || {},
i = 1,
length = arguments.length,
deep = false;
if (typeof target === "boolean") {
deep = target;
target = arguments[i] || {};
i++;
}
if (typeof target !== "object" && !$.isFunction(target)) {
target = {};
}
if (!source) {
source = {};
if (i === length) {
target = this;
i--;
}
for (var key in source)
if (source[key] !== undefined) {
if (deep && typeof target[key] === 'object') {
$.extend(target[key], source[key], deep);
for (; i < length; i++) {
if ((options = arguments[i]) != null) {
for (name in options) {
src = target[name];
copy = options[name];
if (target === copy) {
continue;
}
if (deep && copy && ($.isPlainObject(copy) || (copyIsArray = $.isArray(copy)))) {
if (copyIsArray) {
copyIsArray = false;
clone = src && $.isArray(src) ? src : [];
} else {
target[key] = source[key];
clone = src && $.isPlainObject(src) ? src : {};
}
target[name] = $.extend(deep, clone, copy);
} else if (copy !== undefined) {
target[name] = copy;
}
}
}
}
......@@ -164,6 +199,9 @@ var mui = (function(document, undefined) {
* @returns {_L8.$}
*/
$.each = function(elements, callback) {
if (!elements) {
return this;
}
if (typeof elements.length === 'number') {
[].every.call(elements, function(el, idx) {
return callback.call(el, idx, el) !== false;
......@@ -547,8 +585,10 @@ var mui = (function(document, undefined) {
var handle = function(event, target) {
if (target.type && (target.type === 'radio' || target.type === 'checkbox')) {
if (!target.disabled) { //disabled
return target;
}
}
return false;
};
......@@ -610,9 +650,7 @@ var mui = (function(document, undefined) {
// }
document.addEventListener('focusin', function(e) {
var target = e.target;
if (target.tagName && target.tagName !== 'INPUT') {
return;
}
if (target.tagName && target.tagName === 'INPUT' && target.type === 'text') {
document.body.classList.add(CLASS_FOCUSIN);
var isFooter = false;
for (; target && target !== document; target = target.parentNode) {
......@@ -629,6 +667,7 @@ var mui = (function(document, undefined) {
window.scrollTo(scrollLeft, scrollTop);
}, 20);
}
}
});
document.addEventListener('focusout', function(e) {
var classList = document.body.classList;
......@@ -863,10 +902,10 @@ var mui = (function(document, undefined) {
//fixed hashchange(android)
window.addEventListener($.EVENT_CLICK, function(e) {
//TODO 应该判断当前target是不是在targets.popover内部，而不是非要相等
if (($.targets.popover && e.target === $.targets.popover) || ($.targets.tab && $.targets.tab.hash && e.target === $.targets.tab) || $.targets.offcanvas || $.targets.modal) {
if (($.targets.popover && e.target === $.targets.popover) || ($.targets.tab) || $.targets.offcanvas || $.targets.modal) {
e.preventDefault();
}
});
}, true);
/**
* mui delegate events
......@@ -1125,7 +1164,7 @@ var mui = (function(document, undefined) {
* @returns {undefined}
*/
$.initGlobal = function(options) {
$.options = $.extend($.global, options, true);
$.options = $.extend(true, $.global, options);
return this;
};
var inits = {};
......@@ -1145,7 +1184,7 @@ var mui = (function(document, undefined) {
*/
$.init = function(options) {
isInitialized = true;
$.options = $.extend($.global, options || {}, true);
$.options = $.extend(true, $.global, options || {});
$.ready(function() {
$.each($.inits, function(index, init) {
var isInit = !!(!inits[init.name] || init.repeat);
......@@ -1197,14 +1236,14 @@ var mui = (function(document, undefined) {
};
//若执行了显示动画初始化操作，则要覆盖默认配置
if ($.options.show) {
defaultShow = $.extend(defaultShow, $.options.show, true);
defaultShow = $.extend(true, defaultShow, $.options.show);
}
$.currentWebview = null;
$.isHomePage = false;
$.extend($.global, defaultOptions, true);
$.extend($.options, defaultOptions, true);
$.extend(true, $.global, defaultOptions);
$.extend(true, $.options, defaultOptions);
/**
* 等待动画配置
* @param {type} options
......@@ -1259,7 +1298,7 @@ var mui = (function(document, undefined) {
*/
$.fire = function(webview, eventType, data) {
if (webview) {
webview.evalJS("mui&&mui.receive('" + eventType + "','" + JSON.stringify(data || {}) + "')");
webview.evalJS("typeof mui!=='undefined'&&mui.receive('" + eventType + "','" + JSON.stringify(data || {}) + "')");
}
};
/**
......@@ -1544,7 +1583,7 @@ var mui = (function(document, undefined) {
handle: function() {
var options = $.options;
var subpages = options.subpages || [];
if($.os.plus){
if ($.os.plus) {
$.plusReady(function() {
//TODO 这里需要判断一下，最好等子窗口加载完毕后，再调用主窗口的show方法；
//或者：在openwindow方法中，监听实现；
......@@ -1561,12 +1600,12 @@ var mui = (function(document, undefined) {
}, 300);
}
//设置ios顶部状态栏颜色；
if ($.os.ios&&$.options.statusBarBackground) {
if ($.os.ios && $.options.statusBarBackground) {
plus.navigator.setStatusBarBackground($.options.statusBarBackground);
}
});
}else{
if(subpages.length>0){
} else {
if (subpages.length > 0) {
var err = document.createElement('div');
err.className = 'mui-error';
//文字描述
......@@ -1814,7 +1853,7 @@ var mui = (function(document, undefined) {
* @param {type} $
* @returns {undefined}
*/
(function ($, window, undefined) {
(function($, window, undefined) {
var jsonType = 'application/json';
var htmlType = 'text/html';
......@@ -1829,7 +1868,7 @@ var mui = (function(document, undefined) {
error: $.noop,
complete: $.noop,
context: null,
xhr: function () {
xhr: function(protocol) {
return new window.XMLHttpRequest();
},
accepts: {
......@@ -1844,24 +1883,24 @@ var mui = (function(document, undefined) {
cache: true
};
var ajaxSuccess = function (data, xhr, settings) {
var ajaxSuccess = function(data, xhr, settings) {
settings.success.call(settings.context, data, 'success', xhr);
ajaxComplete('success', xhr, settings);
};
// type: "timeout", "error", "abort", "parsererror"
var ajaxError = function (error, type, xhr, settings) {
var ajaxError = function(error, type, xhr, settings) {
settings.error.call(settings.context, xhr, type, error);
ajaxComplete(type, xhr, settings);
};
// status: "success", "notmodified", "error", "timeout", "abort", "parsererror"
var ajaxComplete = function (status, xhr, settings) {
var ajaxComplete = function(status, xhr, settings) {
settings.complete.call(settings.context, xhr, status);
};
var serialize = function (params, obj, traditional, scope) {
var serialize = function(params, obj, traditional, scope) {
var type, array = $.isArray(obj),
hash = $.isPlainObject(obj);
$.each(obj, function (key, value) {
$.each(obj, function(key, value) {
type = $.type(value);
if (scope) {
key = traditional ? scope :
......@@ -1874,13 +1913,12 @@ var mui = (function(document, undefined) {
// recurse into nested objects
else if (type === "array" || (!traditional && type === "object")) {
serialize(params, value, traditional, key);
}
else {
} else {
params.add(key, value);
}
});
};
var serializeData = function (options) {
var serializeData = function(options) {
if (options.processData && options.data && typeof options.data !== "string") {
options.data = $.param(options.data, options.traditional);
}
......@@ -1889,13 +1927,13 @@ var mui = (function(document, undefined) {
options.data = undefined;
}
};
var appendQuery = function (url, query) {
var appendQuery = function(url, query) {
if (query === '') {
return url;
}
return (url + '&' + query).replace(/[&?]{1,2}/, '?');
};
var mimeToDataType = function (mime) {
var mimeToDataType = function(mime) {
if (mime) {
mime = mime.split(';', 2)[0];
}
......@@ -1904,7 +1942,7 @@ var mui = (function(document, undefined) {
scriptTypeRE.test(mime) ? 'script' :
xmlTypeRE.test(mime) && 'xml') || 'text';
};
var parseArguments = function (url, data, success, dataType) {
var parseArguments = function(url, data, success, dataType) {
if ($.isFunction(data)) {
dataType = success, success = data, data = undefined;
}
......@@ -1918,7 +1956,7 @@ var mui = (function(document, undefined) {
dataType: dataType
};
};
$.ajax = function (url, options) {
$.ajax = function(url, options) {
if (typeof url === "object") {
options = url;
url = undefined;
......@@ -1938,11 +1976,11 @@ var mui = (function(document, undefined) {
}
var mime = settings.accepts[dataType];
var headers = {};
var setHeader = function (name, value) {
var setHeader = function(name, value) {
headers[name.toLowerCase()] = [name, value];
};
var protocol = /^([\w-]+:)\/\//.test(settings.url) ? RegExp.$1 : window.location.protocol;
var xhr = settings.xhr();
var xhr = settings.xhr(protocol);
var nativeSetHeader = xhr.setRequestHeader;
var abortTimeout;
......@@ -1963,7 +2001,7 @@ var mui = (function(document, undefined) {
}
xhr.setRequestHeader = setHeader;
xhr.onreadystatechange = function () {
xhr.onreadystatechange = function() {
if (xhr.readyState === 4) {
xhr.onreadystatechange = $.noop;
clearTimeout(abortTimeout);
......@@ -2014,7 +2052,7 @@ var mui = (function(document, undefined) {
nativeSetHeader.apply(xhr, headers[name]);
}
if (settings.timeout > 0) {
abortTimeout = setTimeout(function () {
abortTimeout = setTimeout(function() {
xhr.onreadystatechange = $.noop;
xhr.abort();
ajaxError(null, 'timeout', xhr, settings);
......@@ -2025,31 +2063,31 @@ var mui = (function(document, undefined) {
};
$.param = function (obj, traditional) {
$.param = function(obj, traditional) {
var params = [];
params.add = function (k, v) {
params.add = function(k, v) {
this.push(encodeURIComponent(k) + '=' + encodeURIComponent(v));
};
serialize(params, obj, traditional);
return params.join('&').replace(/%20/g, '+');
};
$.get = function ( /* url, data, success, dataType */ ) {
$.get = function( /* url, data, success, dataType */ ) {
return $.ajax(parseArguments.apply(null, arguments));
};
$.post = function ( /* url, data, success, dataType */ ) {
$.post = function( /* url, data, success, dataType */ ) {
var options = parseArguments.apply(null, arguments);
options.type = 'POST';
return $.ajax(options);
};
$.getJSON = function ( /* url, data, success */ ) {
$.getJSON = function( /* url, data, success */ ) {
var options = parseArguments.apply(null, arguments);
options.dataType = 'json';
return $.ajax(options);
};
$.fn.load = function (url, data, success) {
$.fn.load = function(url, data, success) {
if (!this.length)
return this;
var self = this,
......@@ -2059,7 +2097,7 @@ var mui = (function(document, undefined) {
callback = options.success;
if (parts.length > 1)
options.url = parts[0], selector = parts[1];
options.success = function (response) {
options.success = function(response) {
if (selector) {
var div = document.createElement('div');
div.innerHTML = response.replace(rscript, "");
......@@ -2087,7 +2125,10 @@ var mui = (function(document, undefined) {
(function($) {
$.plusReady(function() {
$.ajaxSettings = $.extend($.ajaxSettings, {
xhr: function() {
xhr: function(protocol) {
if (protocol === 'file:') { //本地文件使用标准XMLHttpRequest
return new window.XMLHttpRequest();
}
return new plus.net.XMLHttpRequest();
}
});
......@@ -2216,7 +2257,7 @@ var mui = (function(document, undefined) {
var PullRefresh = {
init: function(element, options) {
this._super(element, $.extend({
this._super(element, $.extend(true, {
scrollY: true,
scrollX: false,
indicators: true,
......@@ -2233,7 +2274,7 @@ var mui = (function(document, undefined) {
contentnomore: '没有更多数据了',
duration: 300
}
}, options, true));
}, options));
},
_init: function() {
this._super();
......@@ -2354,6 +2395,8 @@ var mui = (function(document, undefined) {
var CLASS_SCROLLBAR_VERTICAL = CLASS_SCROLLBAR + '-vertical';
var CLASS_SCROLLBAR_HORIZONTAL = CLASS_SCROLLBAR + '-horizontal';
var CLASS_ACTIVE = 'mui-active';
var ease = {
quadratic: {
style: 'cubic-bezier(0.25, 0.46, 0.45, 0.94)',
......@@ -2372,10 +2415,10 @@ var mui = (function(document, undefined) {
init: function(element, options) {
this.wrapper = this.element = element;
this.scroller = this.wrapper.children[0];
this.scrollerStyle = this.scroller.style;
this.scrollerStyle = this.scroller && this.scroller.style;
this.stopped = false;
this.options = $.extend({
this.options = $.extend(true, {
scrollY: true,
scrollX: false,
startX: 0,
......@@ -2389,13 +2432,17 @@ var mui = (function(document, undefined) {
},
momentum: true,
snap: false,
bounce: true,
bounceTime: 300,
bounceEasing: ease.circular.style,
directionLockThreshold: 5,
}, options, true);
parallaxElement: false,
parallaxRatio: 0.5
}, options);
this.x = 0;
this.y = 0;
......@@ -2410,9 +2457,18 @@ var mui = (function(document, undefined) {
}
},
_init: function() {
this._initParallax();
this._initIndicators();
this._initEvent();
},
_initParallax: function() {
if (this.options.parallaxElement) {
this.parallaxElement = document.querySelector(this.options.parallaxElement);
this.parallaxStyle = this.parallaxElement.style;
this.parallaxHeight = this.parallaxElement.offsetHeight;
this.parallaxImgStyle = this.parallaxElement.querySelector('img').style;
}
},
_initIndicators: function() {
var self = this;
self.indicators = [];
......@@ -2472,6 +2528,83 @@ var mui = (function(document, undefined) {
});
});
},
_initSnap: function() {
this.currentPage = {};
this.pages = [];
var snaps = this.snaps;
var length = snaps.length;
var m = 0;
var n = -1;
var x = 0;
var cx = 0;
for (var i = 0; i < length; i++) {
var snap = snaps[i];
var offsetLeft = snap.offsetLeft;
var offsetWidth = snap.offsetWidth;
if (i === 0 || offsetLeft <= snaps[i - 1].offsetLeft) {
m = 0;
n++;
}
if (!this.pages[m]) {
this.pages[m] = [];
}
x = this._getSnapX(offsetLeft);
cx = x - Math.round((offsetWidth) / 2);
this.pages[m][n] = {
x: x,
cx: cx,
pageX: m,
element: snap
}
if (snap.classList.contains(CLASS_ACTIVE)) {
this.currentPage = this.pages[m][0];
}
if (x >= this.maxScrollX) {
m++;
}
}
this.options.startX = this.currentPage.x || 0;
},
_getSnapX: function(offsetLeft) {
return Math.max(Math.min(0, -offsetLeft + (this.wrapperWidth / 2)), this.maxScrollX);
},
_gotoPage: function(index) {
this.currentPage = this.pages[Math.min(index, this.pages.length - 1)][0];
for (var i = 0, len = this.snaps.length; i < len; i++) {
if (i === index) {
this.snaps[i].classList.add(CLASS_ACTIVE);
} else {
this.snaps[i].classList.remove(CLASS_ACTIVE);
}
}
this.scrollTo(this.currentPage.x, 0, this.options.bounceTime);
},
_nearestSnap: function(x) {
if (!this.pages.length) {
return {
x: 0,
pageX: 0
};
}
var i = 0;
var length = this.pages.length;
if (x > 0) {
x = 0;
} else if (x < this.maxScrollX) {
x = this.maxScrollX;
}
for (; i < length; i++) {
if (x >= this.pages[i][0].cx) {
return this.pages[i][0];
}
}
return {
x: 0,
pageX: 0
};
},
_initEvent: function() {
window.addEventListener('orientationchange', this);
window.addEventListener('resize', this);
......@@ -2488,6 +2621,9 @@ var mui = (function(document, undefined) {
if (this.options.scrollX) {
this.wrapper.addEventListener('swiperight', this);
}
if (this.wrapper.classList.contains('mui-segmented-control')) { //靠，这个bug排查了一下午
mui(this.wrapper).on('click', 'a', $.preventDefault);
}
},
handleEvent: function(e) {
if (this.stopped) {
......@@ -2531,7 +2667,6 @@ var mui = (function(document, undefined) {
_start: function(e) {
this.moved = this.needReset = false;
this._transitionTime();
if (this.isInTransition) {
this.needReset = true;
this.isInTransition = false;
......@@ -2551,13 +2686,17 @@ var mui = (function(document, undefined) {
// return;
// }
var detail = e.detail;
if (this.options.scrollY || detail.direction === 'up' || detail.direction === 'down') { //如果是竖向滚动或手势方向是上或下
//ios8 hack
if ($.os.ios && parseFloat($.os.version) >= 8) {
if ((detail.gesture.touches[0].clientY + 10) > window.innerHeight) {
if ($.os.ios && parseFloat($.os.version) >= 8) { //多webview时，离开当前webview会导致后续touch事件不触发
var clientY = detail.gesture.touches[0].clientY;
//下拉刷新 or 上拉加载
if ((clientY + 10) > window.innerHeight || clientY < 10) {
this.resetPosition(this.options.bounceTime);
return;
}
}
}
var isPreventDefault = isReturn = false;
if (detail.direction === 'left' || detail.direction === 'right') {
if (this.options.scrollX) {
......@@ -2584,6 +2723,7 @@ var mui = (function(document, undefined) {
} else {
e.stopPropagation(); //move期间阻止冒泡(scroll嵌套)
}
var deltaX = detail.deltaX - detail.lastDeltaX;
var deltaY = detail.deltaY - detail.lastDeltaY;
var absDeltaX = Math.abs(detail.deltaX);
......@@ -2613,8 +2753,7 @@ var mui = (function(document, undefined) {
this.moved = true;
this.x = newX;
this.y = newY;
$.trigger(this.wrapper, 'scroll', this);
},
_flick: function(e) {
// if (!this.moved || this.needReset) {
......@@ -2623,6 +2762,7 @@ var mui = (function(document, undefined) {
if (!this.moved) {
return;
}
e.stopPropagation();
var detail = e.detail;
this._clearRequestAnimationFrame();
if (e.type === 'dragend' && detail.flick) { //dragend
......@@ -2671,7 +2811,7 @@ var mui = (function(document, undefined) {
}
$.trigger(this.wrapper, 'scrollend', this);
e.stopPropagation();
// e.stopPropagation();
},
_end: function(e) {
this.needReset = false;
......@@ -2704,8 +2844,14 @@ var mui = (function(document, undefined) {
_transitionTime: function(time) {
time = time || 0;
this.scrollerStyle['webkitTransitionDuration'] = time + 'ms';
if (this.parallaxElement && this.options.scrollY) { //目前仅支持竖向视差效果
this.parallaxStyle['webkitTransitionDuration'] = time + 'ms';
}
if (this.options.fixedBadAndorid && !time && $.os.isBadAndroid) {
this.scrollerStyle['webkitTransitionDuration'] = '0.001s';
if (this.parallaxElement && this.options.scrollY) { //目前仅支持竖向视差效果
this.parallaxStyle['webkitTransitionDuration'] = '0.001s';
}
}
if (this.indicators) {
for (var i = this.indicators.length; i--;) {
......@@ -2715,6 +2861,9 @@ var mui = (function(document, undefined) {
},
_transitionTimingFunction: function(easing) {
this.scrollerStyle['webkitTransitionTimingFunction'] = easing;
if (this.parallaxElement && this.options.scrollY) { //目前仅支持竖向视差效果
this.parallaxStyle['webkitTransitionDuration'] = easing;
}
if (this.indicators) {
for (var i = this.indicators.length; i--;) {
this.indicators[i].transitionTimingFunction(easing);
......@@ -2778,6 +2927,21 @@ var mui = (function(document, undefined) {
this.indicators.map(function(indicator) {
indicator.refresh();
});
//以防slider类嵌套使用
if (this.options.snap && typeof this.options.snap === 'string') {
var items = this.scroller.querySelectorAll(this.options.snap);
this.itemLength = 0;
this.snaps = [];
for (var i = 0, len = items.length; i < len; i++) {
var item = items[i];
if (item.parentNode === this.scroller) {
this.itemLength++;
this.snaps.push(item);
}
}
this._initSnap(); //需要每次都_initSnap么。其实init的时候执行一次，后续resize的时候执行一次就行了吧.先这么做吧，如果影响性能，再调整
}
},
_momentum: function(current, distance, time, lowerMargin, wrapperSize, deceleration) {
var speed = parseFloat(Math.abs(distance) / time),
......@@ -2810,6 +2974,17 @@ var mui = (function(document, undefined) {
this.x = x;
this.y = y;
this.scrollerStyle['webkitTransform'] = 'translate3d(' + x + 'px,' + y + 'px,0px)' + this.translateZ;
if (this.parallaxElement && this.options.scrollY) { //目前仅支持竖向视差效果
var parallaxY = y * this.options.parallaxRatio;
var scale = 1 + parallaxY / ((this.parallaxHeight - parallaxY) / 2);
if (scale > 1) {
this.parallaxImgStyle['opacity'] = 1 - parallaxY / 100 * this.options.parallaxRatio;
this.parallaxStyle['webkitTransform'] = 'translate3d(0px,' + -parallaxY + 'px,0px) scale(' + scale + ',' + scale + ') ' + this.translateZ;
} else {
this.parallaxImgStyle['opacity'] = 1;
this.parallaxStyle['webkitTransform'] = 'translate3d(0px,-10px,0px) scale(1,1) ' + this.translateZ;
}
}
if (this.indicators) {
for (var i = this.indicators.length; i--;) {
this.indicators[i].updatePosition();
......@@ -2886,6 +3061,9 @@ var mui = (function(document, undefined) {
scrollToBottom: function(time, easing) {
time = time || this.options.bounceTime;
this.scrollTo(0, this.maxScrollY, time, easing);
},
gotoPage: function(index) {
this._gotoPage(index);
}
});
//Indicator
......@@ -3040,7 +3218,16 @@ var mui = (function(document, undefined) {
var id = self.getAttribute('data-scroll');
if (!id) {
id = ++$.uuid;
$.data[id] = scrollApi = new Scroll(self, options);
var _options = $.extend({}, options);
if (self.classList.contains('mui-segmented-control')) {
_options = $.extend(_options, {
scrollY: false,
scrollX: true,
indicators: false,
snap: '.mui-control-item'
});
}
$.data[id] = scrollApi = new Scroll(self, _options);
self.setAttribute('data-scroll', id);
} else {
scrollApi = $.data[id];
......@@ -3192,6 +3379,11 @@ var mui = (function(document, undefined) {
}
};
})(mui, window, document);
/**
* snap 重构
* @param {Object} $
* @param {Object} window
*/
(function($, window) {
var CLASS_SLIDER = 'mui-slider';
var CLASS_SLIDER_GROUP = 'mui-slider-group';
......@@ -3210,20 +3402,27 @@ var mui = (function(document, undefined) {
var Slider = $.Scroll.extend({
init: function(element, options) {
this._super(element, $.extend({
this._super(element, $.extend(true, {
interval: 0, //设置为0，则不定时轮播
scrollY: false,
scrollX: true,
indicators: false,
bounceTime: 200,
startX: false
}, options, true));
startX: false,
snap: SELECTOR_SLIDER_ITEM
}, options));
if (this.options.startX) {
$.trigger(this.wrapper, 'scrollend', this);
// $.trigger(this.wrapper, 'scrollend', this);
}
},
_init: function() {
this.scroller = this.wrapper.querySelector('.' + CLASS_SLIDER_GROUP);
var groups = this.wrapper.querySelectorAll('.' + CLASS_SLIDER_GROUP);
for (var i = 0, len = groups.length; i < len; i++) {
if (groups[i].parentNode === this.wrapper) {
this.scroller = groups[i];
break;
}
}
if (this.scroller) {
this.scrollerStyle = this.scroller.style;
this.progressBar = this.wrapper.querySelector(SELECTOR_SLIDER_PROGRESS_BAR);
......@@ -3248,33 +3447,35 @@ var mui = (function(document, undefined) {
self.wrapper.addEventListener('swiperight', $.stopPropagation);
self.wrapper.addEventListener('scrollend', function() {
self.isInTransition = false;
self.slideNumber = self._getSlideNumber();
var slideNumber = self.slideNumber;
var page = self.currentPage;
var oldSlideNumber = self.slideNumber;
self.slideNumber = self._fixedSlideNumber();
if (self.loop) {
if (self.slideNumber === 0) {
self.slideNumber = self.itemLength - 2;
self.setTranslate(-self.wrapperWidth * (self.itemLength - 2), 0);
} else if (self.slideNumber === (self.itemLength - 1)) {
self.slideNumber = 1;
self.setTranslate(-self.wrapperWidth, 0);
self.setTranslate(self.pages[1][0].x, 0);
} else if (self.slideNumber === self.itemLength - 3) {
self.setTranslate(self.pages[self.itemLength - 2][0].x, 0);
}
slideNumber = self.slideNumber - 1;
}
if (oldSlideNumber != self.slideNumber) {
$.trigger(self.wrapper, 'slide', {
slideNumber: slideNumber
slideNumber: self.slideNumber
});
}
});
self.wrapper.addEventListener('slide', function(e) {
if (e.target !== self.wrapper) {
return;
}
var detail = e.detail;
detail.slideNumber = detail.slideNumber || 0;
var items = self.wrapper.querySelectorAll(SELECTOR_SLIDER_ITEM);
var items = self.scroller.querySelectorAll(SELECTOR_SLIDER_ITEM);
var _slideNumber = detail.slideNumber;
if (self.loop) {
_slideNumber += 1;
}
if (!self.wrapper.classList.contains('mui-segmented-control')) {
for (var i = 0, len = items.length; i < len; i++) {
var item = items[i];
if (item.parentNode === self.scroller) {
......@@ -3285,8 +3486,12 @@ var mui = (function(document, undefined) {
}
}
}
}
var indicatorWrap = self.wrapper.querySelector('.mui-slider-indicator');
if (indicatorWrap) {
if (indicatorWrap.getAttribute('data-scroll')) { //scroll
$(indicatorWrap).scroll().gotoPage(detail.slideNumber);
}
var indicators = indicatorWrap.querySelectorAll('.mui-indicator');
if (indicators.length > 0) { //图片轮播
for (var i = 0, len = indicators.length; i < len; i++) {
......@@ -3350,36 +3555,30 @@ var mui = (function(document, undefined) {
slider.setAttribute('data-slidershowTimer', slidershowTimer);
}
},
_fixedSlideNumber: function(page) {
page = page || this.currentPage;
var slideNumber = page.pageX;
if (this.loop) {
if (page.pageX === 0) {
slideNumber = this.itemLength - 3;
} else if (page.pageX === (this.itemLength - 1)) {
slideNumber = 0;
} else {
slideNumber = page.pageX - 1;
}
}
return slideNumber;
},
_reLayout: function() {
this.hasHorizontalScroll = true;
this.loop = this.scroller.classList.contains(CLASS_SLIDER_LOOP);
//以防slider类嵌套使用
var items = this.scroller.querySelectorAll(SELECTOR_SLIDER_ITEM);
this.itemLength = 0;
var current = 0;
for (var i = 0, len = items.length; i < len; i++) {
if (items[i].parentNode === this.scroller) {
if (items[i].classList.contains(CLASS_ACTIVE)) {
current = this.itemLength;
}
this.itemLength++;
}
}
current = current === 0 ? (this.loop ? 1 : 0) : current;
//根据active修正startX
this.options.startX = current ? -this.scrollerWidth * current : 0;
this.scrollerWidth = this.itemLength * this.scrollerWidth;
this.maxScrollX = Math.min(this.wrapperWidth - this.scrollerWidth, 0);
this.slideNumber = this._getSlideNumber();
this._super();
},
_getScroll: function() {
var result = $.parseTranslateMatrix($.getStyles(this.scroller, 'webkitTransform'));
return result ? result.x : 0;
},
_getSlideNumber: function() {
return Math.abs(Math.round(Math.abs(this.x) / this.wrapperWidth));
},
_transitionEnd: function(e) {
if (e.target !== this.scroller || !this.isInTransition) {
return;
......@@ -3399,7 +3598,7 @@ var mui = (function(document, undefined) {
}
if (e.type === 'flick') {
if (detail.touchTime < 200) { //flick，太容易触发，额外校验一下touchtime
this.x = -(this.slideNumber + (direction === 'left' ? 1 : -1)) * this.wrapperWidth;
this.x = this._getPage((this.slideNumber + (direction === 'left' ? 1 : -1)), true).x;
}
this.resetPosition(this.options.bounceTime);
} else if (e.type === 'dragend' && !detail.flick) {
......@@ -3407,22 +3606,53 @@ var mui = (function(document, undefined) {
}
e.stopPropagation();
},
_gotoItem: function(slideNumber, time) {
this.scrollTo(-slideNumber * this.wrapperWidth, 0, time, this.options.bounceEasing);
if (time === 0) {
$.trigger(this.wrapper, 'scrollend', this);
_initSnap: function() {
this.scrollerWidth = this.itemLength * this.scrollerWidth;
this.maxScrollX = Math.min(this.wrapperWidth - this.scrollerWidth, 0);
this._super();
if (!this.currentPage.x) {
this.currentPage = this.pages[this.loop ? 1 : 0][0];
this.slideNumber = 0;
} else {
this.slideNumber = this._fixedSlideNumber();
}
this._initTimer();
this.options.startX = this.currentPage.x || 0;
},
_getSnapX: function(offsetLeft) {
return Math.max(-offsetLeft, this.maxScrollX);
},
_fixedSlideNumber: function(slideNumber) {
if (!this.loop) {
if (slideNumber < 0) {
_getPage: function(slideNumber, isFlick) {
if (this.loop) {
if (slideNumber > (this.itemLength - (isFlick ? 2 : 3))) {
slideNumber = 1;
time = 0;
} else if (slideNumber < (isFlick ? -1 : 0)) {
slideNumber = this.itemLength - 2;
time = 0;
} else {
slideNumber += 1;
}
} else {
if (!isFlick) {
if (slideNumber > (this.itemLength - 1)) {
slideNumber = 0;
} else if (slideNumber >= this.itemLength) {
time = 0;
} else if (slideNumber < 0) {
slideNumber = this.itemLength - 1;
time = 0;
}
}
return slideNumber;
slideNumber = Math.min(Math.max(0, slideNumber), this.itemLength - 1);
}
return this.pages[slideNumber][0];
},
_gotoItem: function(slideNumber, time) {
this.currentPage = this._getPage(slideNumber);
this.scrollTo(this.currentPage.x, 0, time, this.options.bounceEasing);
if (time === 0) {
$.trigger(this.wrapper, 'scrollend', this);
}
this._initTimer();
},
//API
setTranslate: function(x, y) {
......@@ -3439,33 +3669,27 @@ var mui = (function(document, undefined) {
} else if (this.x < this.maxScrollX) {
this.x = this.maxScrollX;
}
this._gotoItem(this._getSlideNumber(), time);
this.currentPage = this._nearestSnap(this.x);
this.scrollTo(this.currentPage.x, 0, time);
return true;
},
gotoItem: function(slideNumber, time) {
this._gotoItem(this._fixedSlideNumber(this.loop ? (slideNumber + 1) : slideNumber), time || this.options.bounceEasing);
this._gotoItem(slideNumber, time || this.options.bounceTime);
},
nextItem: function(auto) {
var slideNumber = this._fixedSlideNumber(this.slideNumber + 1);
var bounceTime = this.options.bounceTime;
if (auto && !this.loop) {
if (this.slideNumber + 1 >= this.itemLength) {
bounceTime = slideNumber = 0;
}
}
this._gotoItem(slideNumber, bounceTime);
// if (!auto) { //TODO 这个设置后续还得仔细过一遍
// this.isInTransition = false;
// }
nextItem: function() {
this._gotoItem(this.slideNumber + 1, this.options.bounceTime);
},
prevItem: function() {
this._gotoItem(this._fixedSlideNumber(this.slideNumber - 1), this.options.bounceTime);
this._gotoItem(this.slideNumber - 1, this.options.bounceTime);
},
getSlideNumber: function() {
return this.slideNumber || 0;
},
refresh: function(options) {
if (options) {
$.extend(this.options, options);
this._super();
this._gotoItem(this._getSlideNumber() + 1, this.options.bounceTime);
this.nextItem();
} else {
this._super();
}
......@@ -3497,6 +3721,12 @@ var mui = (function(document, undefined) {
$.ready(function() {
// setTimeout(function() {
$('.mui-slider').slider();
$('.mui-scroll-wrapper.mui-slider-indicator.mui-segmented-control').scroll({
scrollY: false,
scrollX: true,
indicators: false,
snap: '.mui-control-item'
});
// }, 500); //临时处理slider宽度计算不正确的问题(初步确认是scrollbar导致的)
});
......@@ -3713,11 +3943,11 @@ var mui = (function(document, undefined) {
options = $.parseJSON(options);
}
var pullRefreshApi = null;
var id = self.getAttribute('data-pullrefresh-plus-' + options.webviewId);
var attrWebviewId = options.webviewId && options.webviewId.replace(/\//g, "_"); //替换所有"/"
var id = self.getAttribute('data-pullrefresh-plus-' + attrWebviewId);
if (!id) { //避免重复初始化5+ pullrefresh
id = ++$.uuid;
self.setAttribute('data-pullrefresh-plus-' + options.webviewId, id);
self.setAttribute('data-pullrefresh-plus-' + attrWebviewId, id);
document.body.classList.add(CLASS_PLUS_PULLREFRESH);
$.data[id] = pullRefreshApi = new PlusPullRefresh(self, options);
} else {
......@@ -3755,9 +3985,9 @@ var mui = (function(document, undefined) {
this.scroller = this.wrapper.querySelector(SELECTOR_INNER_WRAP);
this.classList = this.wrapper.classList;
if (this.scroller) {
this.options = $.extend({
this.options = $.extend(true, {
dragThresholdX: 10
}, options, true);
}, options);
document.body.classList.add('mui-fullscreen'); //fullscreen
this.refresh();
this.initEvent();
......@@ -4361,6 +4591,9 @@ var mui = (function(document, undefined) {
});
var togglePopover = function(popover, anchor) {
//remove一遍，以免来回快速切换，导致webkitTransitionEnd不触发，无法remove
popover.removeEventListener('webkitTransitionEnd', onPopoverShown);
popover.removeEventListener('webkitTransitionEnd', onPopoverHidden);
backdrop.classList.remove(CLASS_BAR_BACKDROP);
backdrop.classList.remove(CLASS_ACTION_BACKDROP);
var _popover = document.querySelector('.mui-popover.mui-active');
......@@ -4525,12 +4758,15 @@ var mui = (function(document, undefined) {
(function($, window, document, name, undefined) {
var CLASS_CONTROL_ITEM = 'mui-control-item';
var CLASS_SEGMENTED_CONTROL = 'mui-segmented-control';
var CLASS_CONTROL_CONTENT = 'mui-control-content';
var CLASS_TAB_BAR = 'mui-bar-tab';
var CLASS_TAB_ITEM = 'mui-tab-item';
var CLASS_SLIDER_ITEM = 'mui-slider-item';
var handle = function(event, target) {
if (target.classList && (target.classList.contains(CLASS_CONTROL_ITEM) || target.classList.contains(CLASS_TAB_ITEM))) {
event.preventDefault(); //stop hash change
// if (target.hash) {
return target;
// }
......@@ -4556,8 +4792,17 @@ var mui = (function(document, undefined) {
var targetBody;
var className = 'mui-active';
var classSelector = '.' + className;
segmentedControl = targetTab.parentNode;
for (; segmentedControl && segmentedControl !== document; segmentedControl = segmentedControl.parentNode) {
if (segmentedControl.classList.contains(CLASS_SEGMENTED_CONTROL)) {
activeTab = segmentedControl.querySelector(classSelector + '.' + CLASS_CONTROL_ITEM);
break;
} else if (segmentedControl.classList.contains(CLASS_TAB_BAR)) {
activeTab = segmentedControl.querySelector(classSelector + '.' + CLASS_TAB_ITEM);
}
}
activeTab = targetTab.parentNode.querySelector(classSelector);
if (activeTab) {
activeTab.classList.remove(className);
......@@ -4594,11 +4839,10 @@ var mui = (function(document, undefined) {
targetBody.classList.add(className);
var contents = targetBody.parentNode.querySelectorAll('.' + CLASS_CONTROL_CONTENT);
$.trigger(targetBody, $.eventName('shown', name), {
tabNumber: Array.prototype.indexOf.call(contents, targetBody)
});
e.detail.gesture.preventDefault(); //fixed hashchange
e.detail && e.detail.gesture.preventDefault(); //fixed hashchange
});
})(mui, window, document, 'tab');
......@@ -4637,10 +4881,13 @@ var mui = (function(document, undefined) {
this.element = element;
this.classList = this.element.classList;
this.handle = this.element.querySelector(SELECTOR_SWITCH_HANDLE);
this.init();
this.initEvent();
};
Toggle.prototype.init = function() {
this.toggleWidth = this.element.offsetWidth;
this.handleWidth = this.handle.offsetWidth;
this.handleX = this.toggleWidth - this.handleWidth - 3;
this.initEvent();
};
Toggle.prototype.initEvent = function() {
this.element.addEventListener('touchstart', this);
......@@ -4669,6 +4916,9 @@ var mui = (function(document, undefined) {
};
Toggle.prototype.start = function(e) {
this.classList.add(CLASS_DRAGGING);
if (this.toggleWidth === 0 || this.handleWidth === 0) { //当switch处于隐藏状态时，width为0，需要重新初始化
this.init();
}
};
Toggle.prototype.drag = function(e) {
var detail = e.detail;
......
dist/js/mui.min.js
View file @ 9ac0ae6d
This source diff could not be displayed because it is too large. You can view the blob instead.
examples/hello-mui/css/mui.min.css
View file @ 9ac0ae6d
This source diff could not be displayed because it is too large. You can view the blob instead.
examples/hello-mui/examples/accordion.html
View file @ 9ac0ae6d
......@@ -54,8 +54,8 @@
<input type="text" class="mui-input-speech mui-input-clear" placeholder="语音输入">
</div>
<div class="mui-button-row">
<button class="mui-btn mui-btn-primary" onclick="return false;">确认</button>&nbsp;&nbsp;
<button class="mui-btn mui-btn-primary" onclick="return false;">取消</button>
<button class="mui-btn mui-btn-primary" type="button" onclick="return false;">确认</button>&nbsp;&nbsp;
<button class="mui-btn mui-btn-primary" type="button" onclick="return false;">取消</button>
</div>
</form>
</div>
......
examples/hello-mui/examples/info.html
View file @ 9ac0ae6d
......@@ -51,7 +51,7 @@
</p>
<p>更多详细介绍，请到<a href="http://dcloudio.github.io/mui">mui官网</a>查看；</p>
<h4>版本介绍</h4>
<p>当前版本为1.0.0，可到<a href="https://github.com/dcloudio/mui">Github</a>上获取最新版本。</p>
<p>当前版本为1.1.0，可到<a href="https://github.com/dcloudio/mui">Github</a>上获取最新版本。</p>
<h4>License</h4>
<p>
mui遵循MIT License，源码已提交至Github，<a href="https://github.com/dcloudio/mui">点击查看</a>;
......
examples/hello-mui/examples/scroll.html deleted 100644 → 0
View file @ eac743bb
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Hello MUI</title>
<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<link rel="stylesheet" href="../css/mui.min.css">
<script src="../js/mui.min.js"></script>
<script src="../js/app.js"></script>
<style>
html,body {
background-color: #efeff4;
}
header.mui-bar{
display: none;
}
.mui-bar-nav~.mui-content{
padding: 0;
}
</style>
<script>
mui.init();
</script>
</head>
<body>
<header class="mui-bar mui-bar-nav">
<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
<h1 class="mui-title">区域滚动</h1>
</header>
<nav class="mui-bar mui-bar-tab">
<a class="mui-tab-item mui-active" href="#tabbar">
<span class="mui-icon mui-icon-phone"></span>
<span class="mui-tab-label">电话咨询</span>
</a>
<a class="mui-tab-item" href="#tabbar-with-chat">
<span class="mui-icon mui-icon-email"></span>
<span class="mui-tab-label">短信咨询</span>
</a>
<a class="mui-tab-item" href="#tabbar-with-contact">
<span class="mui-icon mui-icon-contact"></span>
<span class="mui-tab-label">通讯录</span>
</a>
<a class="mui-tab-item" href="#tabbar-with-map">
<span class="mui-icon mui-icon-map"></span>
<span class="mui-tab-label">查看地图</span>
</a>
</nav>
<div id="scroll" class="mui-content mui-scroll-wrapper">
<div class="mui-scroll">
<div id="tableview"></div>
</div>
</div>
<script src="../js/mui.tpl.js"></script>
<script>
var tableview = [];
for (var i = 0; i < 200; i++) {
tableview.push({
title: '选项' + i,
navigate: true
});
}
(function($) {
$(function() {
$('#tableview').tableview({
striped: true,
//chevron: false,
//inverted: false,
tableview: tableview,
});
$('#scroll').scroll({
deceleration: 0.002 //flick 减速系数，系数越大，滚动速度越慢，滚动距离越小，默认值0.0006
});
});
})(mui);
</script>
</body>
</html>
\ No newline at end of file
examples/hello-mui/examples/tab-with-segmented-control.html
View file @ 9ac0ae6d
......@@ -36,9 +36,6 @@
.mui-card .mui-control-content {
padding: 10px;
}
.mui-segmented-control .mui-control-item {
padding: 10px 0;
}
.mui-control-content {
height: 150px;
}
......
examples/hello-mui/examples/tab-with-viewpagerindicator.html
View file @ 9ac0ae6d
......@@ -22,15 +22,6 @@
.mui-bar-nav~.mui-content {
padding: 0;
}
</style>
<script>
mui.init();
</script>
</head>
<body>
<style>
.mui-control-content {
background-color: white;
min-height: 215px;
......@@ -39,14 +30,17 @@
margin-top: 50px;
}
</style>
</head>
<body>
<header class="mui-bar mui-bar-nav">
<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
<h1 class="mui-title">可拖动式选项卡</h1>
</header>
<div class="mui-content">
<div id="slider" class="mui-slider">
<div id="slider" class="mui-slider mui-fullscreen">
<div id="sliderSegmentedControl" class="mui-slider-indicator mui-segmented-control mui-segmented-control-inverted">
<a class="mui-control-item" href="#item1mobile">
<a class="mui-control-item mui-active" href="#item1mobile">
待办公文
</a>
<a class="mui-control-item" href="#item2mobile">
......@@ -151,26 +145,7 @@
</div>
</div>
<h5 class="mui-content-padded">Color</h5>
<div class="mui-card">
<form class="mui-input-group">
<div class="mui-input-row mui-radio">
<label><span class="mui-bg-primary" style="display:block;width:25px;height:25px;"></span>
</label>
<input name="radio1" type="radio" checked value="primary">
</div>
<div class="mui-input-row mui-radio">
<label><span class="mui-bg-positive" style="display:block;width:25px;height:25px;"></span>
</label>
<input name="radio1" type="radio" value="positive">
</div>
<div class="mui-input-row mui-radio">
<label><span class="mui-bg-negative" style="display:block;width:25px;height:25px;"></span>
</label>
<input name="radio1" type="radio" value="negative">
</div>
</form>
</div>
</div>
<script>
......
examples/hello-mui/index.html
View file @ 9ac0ae6d
......@@ -20,11 +20,13 @@
<h1 class="mui-title">Hello mui</h1>
</header>
<script>
var menu = null,list=null,main=null;
var menu = null,
list = null,
main = null;
var showMenu = false;
mui.init({
swipeBack: false,
statusBarBackground:'#f7f7f7',
statusBarBackground: '#f7f7f7',
subpages: [{
id: 'list',
url: 'list.html',
......@@ -37,14 +39,14 @@
});
mui.plusReady(function() {
if(mui.os.android){
if (mui.os.android) {
plus.screen.lockOrientation("portrait-primary");
}
main = plus.webview.currentWebview();
main.addEventListener('maskClick',closeMenu);
main.addEventListener('maskClick', closeMenu);
//处理侧滑导航，为了避免和子页面初始化等竞争资源，延迟加载侧滑页面；
setTimeout(function () {
menu= mui.preload({
setTimeout(function() {
menu = mui.preload({
id: 'index-menu',
url: 'index-menu.html',
styles: {
......@@ -52,13 +54,13 @@
width: '70%',
zindex: -1
},
show:{
aniShow:'none'
show: {
aniShow: 'none'
}
});
},200);
}, 200);
});
......@@ -66,14 +68,14 @@
/**
* 显示侧滑菜单
*/
function openMenu(){
if(!showMenu){
function openMenu() {
if (!showMenu) {
//侧滑菜单处于隐藏状态，则立即显示出来；
menu.show('none',0,function () {
menu.show('none', 0, function() {
//主窗体开始侧滑并显示遮罩
main.setStyle({
mask:'rgba(0,0,0,0.4)',
left:'70%',
mask: 'rgba(0,0,0,0.4)',
left: '70%',
transition: {
duration: 150
}
......@@ -86,12 +88,13 @@
/**
* 关闭菜单
*/
function closeMenu(){
if(showMenu){
function closeMenu() {
if (showMenu) {
//关闭遮罩；
//主窗体开始侧滑；
main.setStyle({
mask:'none',
mask: 'none',
left: '0',
transition: {
duration: 200
......@@ -99,38 +102,39 @@
});
showMenu = false;
//等动画结束后，隐藏菜单webview，节省资源；
setTimeout(function () {
setTimeout(function() {
menu.hide();
},300);
}, 300);
}
}
//点击左上角侧滑图标，打开侧滑菜单；
document.querySelector('.mui-icon-bars').addEventListener('tap', function () {
if(showMenu){
document.querySelector('.mui-icon-bars').addEventListener('tap', function() {
if (showMenu) {
closeMenu();
}else{
} else {
openMenu();
}
});
//主界面向右滑动，若菜单未显示，则显示菜单；否则不做任何操作
window.addEventListener("swiperight",openMenu);
window.addEventListener("swiperight", openMenu);
//主界面向左滑动，若菜单已显示，则关闭菜单；否则，不做任何操作；
window.addEventListener("swipeleft",closeMenu);
window.addEventListener("swipeleft", closeMenu);
//侧滑菜单触发关闭菜单命令
window.addEventListener("menu:close",closeMenu);
window.addEventListener("menu:open",openMenu);
window.addEventListener("menu:close", closeMenu);
window.addEventListener("menu:open", openMenu);
//重写mui.menu方法，Android版本menu按键按下可自动打开、关闭侧滑菜单；
mui.menu = function () {
if(showMenu){
mui.menu = function() {
if (showMenu) {
closeMenu();
}else{
} else {
openMenu();
}
}
//处理右上角关于图标的点击事件；
var subWebview = null,template = null;
var subWebview = null,
template = null;
document.getElementById('info').addEventListener('tap', function() {
if (subWebview == null) {
//获取共用父窗体
......@@ -139,7 +143,10 @@
}
subWebview.loadURL('examples/info.html');
//修改共用父模板的标题
mui.fire(template,'updateHeader',{title:'关于',showMenu:false});
mui.fire(template, 'updateHeader', {
title: '关于',
showMenu: false
});
template.show('slide-in-right', 150);
});
......@@ -147,9 +154,9 @@
//处理逻辑：1秒内，连续两次按返回键，则退出应用；
var first = null;
mui.back = function() {
if(showMenu){
if (showMenu) {
closeMenu();
}else{
} else {
//首次按键，提示‘再按一次退出应用’
if (!first) {
first = new Date().getTime();
......@@ -165,7 +172,6 @@
}
};
</script>
</body>
......
examples/hello-mui/js/mui.min.js
View file @ 9ac0ae6d
This source diff could not be displayed because it is too large. You can view the blob instead.
examples/hello-mui/js/update.js
View file @ 9ac0ae6d
......@@ -69,7 +69,9 @@
* 检查升级数据
*/
function checkUpdateData( j ){
//当前客户端版本号
var curVer=plus.runtime.version,
inf = j[plus.os.name];
if ( inf ){
var srvVer = inf.version;
......@@ -97,37 +99,26 @@
}
/**
* 从服务器获取升级数据
* 从服务器获取升级数据，并存储到本地；
*/
function getUpdateData(){
var xhr = new plus.net.XMLHttpRequest();
xhr.onreadystatechange = function () {
switch ( xhr.readyState ) {
case 4:
if ( xhr.status == 200 ) {
mui.getJSON(server,{},function (data) {
if(data.appid==plus.runtime.appid){
// 保存到本地文件中
dir.getFile( localFile, {create:true}, function(fentry){
fentry.createWriter( function(writer){
writer.onerror = function(){
console.log( "获取升级数据，保存文件失败！" );
}
writer.write( xhr.responseText );
writer.write(data);
}, function(e){
console.log( "获取升级数据，创建写文件对象失败："+e.message );
} );
}, function(e){
console.log( "获取升级数据，打开保存文件失败："+e.message );
});
} else {
console.log( "获取升级数据，联网请求失败："+xhr.status );
}
break;
default :
break;
}
}
xhr.open( "GET", server );
xhr.send();
});
}
/**
......@@ -156,10 +147,6 @@
}
}
if ( w.plus ) {
initUpdate();
} else {
document.addEventListener("plusready", initUpdate, false );
}
mui.plusReady(initUpdate);
})(window);
\ No newline at end of file
examples/hello-mui/list.html
View file @ 9ac0ae6d
......@@ -420,7 +420,6 @@
id:name+"-main",
styles:{
popGesture:"hide",
zindex:2
},
extras:{
mType: 'main'
......@@ -433,7 +432,6 @@
styles:{
top: '48px',
bottom: '0px',
zindex:2
},
extras:{
mType: 'sub'
......@@ -473,11 +471,10 @@
//关闭splash页面；
plus.navigator.closeSplashscreen();
//初始化模板
//延迟加载的原因：等待index页面先创建menu和mask，这样就可以保证页面的zindex顺序；
//延迟加载的原因：；
setTimeout(function () {
initTemplates(); //预加载所有模板
},300);
});
//主列表点击事件
......
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