Skip to content

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

编译至mui v1.1.0

parent eac743bb
Hide 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, ...@@ -1842,7 +1842,8 @@ input[type="submit"]:active, input[type="submit"].mui-active,
background-color: #eee; background-color: #eee;
} }
.mui-grid-view.mui-grid-9 .mui-table-view-cell > a:not(.mui-btn) { .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 { .mui-grid-view.mui-grid-9 .mui-media {
color: #797979; color: #797979;
...@@ -2328,13 +2329,25 @@ select:focus { ...@@ -2328,13 +2329,25 @@ select:focus {
-webkit-touch-callout: none; -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 { .mui-segmented-control .mui-control-item {
display: table-cell; display: table-cell;
width: 1%; width: 1%;
padding-top: 6px;
padding-bottom: 7px;
overflow: hidden; overflow: hidden;
line-height: 1; line-height: 38px;
color: #007aff; color: #007aff;
text-align: center; text-align: center;
text-overflow: ellipsis; text-overflow: ellipsis;
...@@ -2754,6 +2767,10 @@ select:focus { ...@@ -2754,6 +2767,10 @@ select:focus {
position: static; position: static;
} }
.mui-android .mui-modal .mui-bar-nav ~ .mui-content {
padding-top: 0;
}
.mui-slider { .mui-slider {
position: relative; position: relative;
width: 100%; width: 100%;
...@@ -2821,7 +2838,6 @@ select:focus { ...@@ -2821,7 +2838,6 @@ select:focus {
.mui-slider-indicator.mui-segmented-control { .mui-slider-indicator.mui-segmented-control {
position: relative; position: relative;
bottom: auto; bottom: auto;
padding-top: 10px;
} }
.mui-slider-indicator .mui-indicator { .mui-slider-indicator .mui-indicator {
display: inline-block; display: inline-block;
...@@ -3476,6 +3492,13 @@ select:focus { ...@@ -3476,6 +3492,13 @@ select:focus {
.mui-fullscreen .mui-slider-group { .mui-fullscreen .mui-slider-group {
height: 100%; 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 { .mui-fullscreen .mui-slider-item > a {
top: 50%; top: 50%;
-webkit-transform: translateY(-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,21 +52,56 @@ var mui = (function(document, undefined) { ...@@ -52,21 +52,56 @@ var mui = (function(document, undefined) {
* @param {type} deep * @param {type} deep
* @returns {unresolved} * @returns {unresolved}
*/ */
$.extend = function(target, source, deep) { $.extend = function() { //from jquery2
if (!target) { 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 = {}; target = {};
} }
if (!source) {
source = {}; if (i === length) {
target = this;
i--;
} }
for (var key in source)
if (source[key] !== undefined) { for (; i < length; i++) {
if (deep && typeof target[key] === 'object') { if ((options = arguments[i]) != null) {
$.extend(target[key], source[key], deep); for (name in options) {
} else { src = target[name];
target[key] = source[key]; 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 {
clone = src && $.isPlainObject(src) ? src : {};
}
target[name] = $.extend(deep, clone, copy);
} else if (copy !== undefined) {
target[name] = copy;
}
} }
} }
}
return target; return target;
}; };
...@@ -164,6 +199,9 @@ var mui = (function(document, undefined) { ...@@ -164,6 +199,9 @@ var mui = (function(document, undefined) {
* @returns {_L8.$} * @returns {_L8.$}
*/ */
$.each = function(elements, callback) { $.each = function(elements, callback) {
if (!elements) {
return this;
}
if (typeof elements.length === 'number') { if (typeof elements.length === 'number') {
[].every.call(elements, function(el, idx) { [].every.call(elements, function(el, idx) {
return callback.call(el, idx, el) !== false; return callback.call(el, idx, el) !== false;
...@@ -547,7 +585,9 @@ var mui = (function(document, undefined) { ...@@ -547,7 +585,9 @@ var mui = (function(document, undefined) {
var handle = function(event, target) { var handle = function(event, target) {
if (target.type && (target.type === 'radio' || target.type === 'checkbox')) { if (target.type && (target.type === 'radio' || target.type === 'checkbox')) {
return target; if (!target.disabled) { //disabled
return target;
}
} }
return false; return false;
}; };
...@@ -610,24 +650,23 @@ var mui = (function(document, undefined) { ...@@ -610,24 +650,23 @@ var mui = (function(document, undefined) {
// } // }
document.addEventListener('focusin', function(e) { document.addEventListener('focusin', function(e) {
var target = e.target; var target = e.target;
if (target.tagName && target.tagName !== 'INPUT') { if (target.tagName && target.tagName === 'INPUT' && target.type === 'text') {
return; document.body.classList.add(CLASS_FOCUSIN);
} var isFooter = false;
document.body.classList.add(CLASS_FOCUSIN); for (; target && target !== document; target = target.parentNode) {
var isFooter = false; var classList = target.classList;
for (; target && target !== document; target = target.parentNode) { if (classList && classList.contains(CLASS_BAR_TAB) || classList.contains(CLASS_BAR_FOOTER) || classList.contains(CLASS_BAR_FOOTER_SECONDARY) || classList.contains(CLASS_BAR_FOOTER_SECONDARY_TAB)) {
var classList = target.classList; isFooter = true;
if (classList && classList.contains(CLASS_BAR_TAB) || classList.contains(CLASS_BAR_FOOTER) || classList.contains(CLASS_BAR_FOOTER_SECONDARY) || classList.contains(CLASS_BAR_FOOTER_SECONDARY_TAB)) { break;
isFooter = true; }
break; }
if (isFooter) {
var scrollTop = document.body.scrollHeight;
var scrollLeft = document.body.scrollLeft;
setTimeout(function() {
window.scrollTo(scrollLeft, scrollTop);
}, 20);
} }
}
if (isFooter) {
var scrollTop = document.body.scrollHeight;
var scrollLeft = document.body.scrollLeft;
setTimeout(function() {
window.scrollTo(scrollLeft, scrollTop);
}, 20);
} }
}); });
document.addEventListener('focusout', function(e) { document.addEventListener('focusout', function(e) {
...@@ -863,10 +902,10 @@ var mui = (function(document, undefined) { ...@@ -863,10 +902,10 @@ var mui = (function(document, undefined) {
//fixed hashchange(android) //fixed hashchange(android)
window.addEventListener($.EVENT_CLICK, function(e) { window.addEventListener($.EVENT_CLICK, function(e) {
//TODO 应该判断当前target是不是在targets.popover内部，而不是非要相等 //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(); e.preventDefault();
} }
}); }, true);
/** /**
* mui delegate events * mui delegate events
...@@ -1125,7 +1164,7 @@ var mui = (function(document, undefined) { ...@@ -1125,7 +1164,7 @@ var mui = (function(document, undefined) {
* @returns {undefined} * @returns {undefined}
*/ */
$.initGlobal = function(options) { $.initGlobal = function(options) {
$.options = $.extend($.global, options, true); $.options = $.extend(true, $.global, options);
return this; return this;
}; };
var inits = {}; var inits = {};
...@@ -1145,7 +1184,7 @@ var mui = (function(document, undefined) { ...@@ -1145,7 +1184,7 @@ var mui = (function(document, undefined) {
*/ */
$.init = function(options) { $.init = function(options) {
isInitialized = true; isInitialized = true;
$.options = $.extend($.global, options || {}, true); $.options = $.extend(true, $.global, options || {});
$.ready(function() { $.ready(function() {
$.each($.inits, function(index, init) { $.each($.inits, function(index, init) {
var isInit = !!(!inits[init.name] || init.repeat); var isInit = !!(!inits[init.name] || init.repeat);
...@@ -1197,14 +1236,14 @@ var mui = (function(document, undefined) { ...@@ -1197,14 +1236,14 @@ var mui = (function(document, undefined) {
}; };
//若执行了显示动画初始化操作，则要覆盖默认配置 //若执行了显示动画初始化操作，则要覆盖默认配置
if ($.options.show) { if ($.options.show) {
defaultShow = $.extend(defaultShow, $.options.show, true); defaultShow = $.extend(true, defaultShow, $.options.show);
} }
$.currentWebview = null; $.currentWebview = null;
$.isHomePage = false; $.isHomePage = false;
$.extend($.global, defaultOptions, true); $.extend(true, $.global, defaultOptions);
$.extend($.options, defaultOptions, true); $.extend(true, $.options, defaultOptions);
/** /**
* 等待动画配置 * 等待动画配置
* @param {type} options * @param {type} options
...@@ -1259,7 +1298,7 @@ var mui = (function(document, undefined) { ...@@ -1259,7 +1298,7 @@ var mui = (function(document, undefined) {
*/ */
$.fire = function(webview, eventType, data) { $.fire = function(webview, eventType, data) {
if (webview) { 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) { ...@@ -1544,7 +1583,7 @@ var mui = (function(document, undefined) {
handle: function() { handle: function() {
var options = $.options; var options = $.options;
var subpages = options.subpages || []; var subpages = options.subpages || [];
if($.os.plus){ if ($.os.plus) {
$.plusReady(function() { $.plusReady(function() {
//TODO 这里需要判断一下，最好等子窗口加载完毕后，再调用主窗口的show方法； //TODO 这里需要判断一下，最好等子窗口加载完毕后，再调用主窗口的show方法；
//或者：在openwindow方法中，监听实现； //或者：在openwindow方法中，监听实现；
...@@ -1561,17 +1600,17 @@ var mui = (function(document, undefined) { ...@@ -1561,17 +1600,17 @@ var mui = (function(document, undefined) {
}, 300); }, 300);
} }
//设置ios顶部状态栏颜色； //设置ios顶部状态栏颜色；
if ($.os.ios&&$.options.statusBarBackground) { if ($.os.ios && $.options.statusBarBackground) {
plus.navigator.setStatusBarBackground($.options.statusBarBackground); plus.navigator.setStatusBarBackground($.options.statusBarBackground);
} }
}); });
}else{ } else {
if(subpages.length>0){ if (subpages.length > 0) {
var err = document.createElement('div'); var err = document.createElement('div');
err.className = 'mui-error'; err.className = 'mui-error';
//文字描述 //文字描述
var span = document.createElement('span'); var span = document.createElement('span');
span.innerHTML = '在该浏览器下，不支持创建子页面，具体参考'; span.innerHTML = '在该浏览器下，不支持创建子页面，具体参考';
err.appendChild(span); err.appendChild(span);
var a = document.createElement('a'); var a = document.createElement('a');
a.innerHTML = '"mui框架适用场景"'; a.innerHTML = '"mui框架适用场景"';
...@@ -1580,9 +1619,9 @@ var mui = (function(document, undefined) { ...@@ -1580,9 +1619,9 @@ var mui = (function(document, undefined) {
document.body.appendChild(err); document.body.appendChild(err);
console.log('在该浏览器下，不支持创建子页面'); console.log('在该浏览器下，不支持创建子页面');
} }
} }
} }
}); });
window.addEventListener('preload', function() { window.addEventListener('preload', function() {
...@@ -1814,271 +1853,270 @@ var mui = (function(document, undefined) { ...@@ -1814,271 +1853,270 @@ var mui = (function(document, undefined) {
* @param {type} $ * @param {type} $
* @returns {undefined} * @returns {undefined}
*/ */
(function ($, window, undefined) { (function($, window, undefined) {
var jsonType = 'application/json';
var htmlType = 'text/html';
var rscript = /<script\b[^<]*(?:(?!<\/script>)<[^<]*)*<\/script>/gi;
var scriptTypeRE = /^(?:text|application)\/javascript/i;
var xmlTypeRE = /^(?:text|application)\/xml/i;
var blankRE = /^\s*$/;
$.ajaxSettings = {
type: 'GET',
success: $.noop,
error: $.noop,
complete: $.noop,
context: null,
xhr: function () {
return new window.XMLHttpRequest();
},
accepts: {
script: 'text/javascript, application/javascript, application/x-javascript',
json: jsonType,
xml: 'application/xml, text/xml',
html: htmlType,
text: 'text/plain'
},
timeout: 0,
processData: true,
cache: true
};
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) {
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) {
settings.complete.call(settings.context, xhr, status);
};
var serialize = function (params, obj, traditional, scope) {
var type, array = $.isArray(obj),
hash = $.isPlainObject(obj);
$.each(obj, function (key, value) {
type = $.type(value);
if (scope) {
key = traditional ? scope :
scope + '[' + (hash || type === 'object' || type === 'array' ? key : '') + ']';
}
// handle data in serializeArray() format
if (!scope && array) {
params.add(value.name, value.value);
}
// recurse into nested objects
else if (type === "array" || (!traditional && type === "object")) {
serialize(params, value, traditional, key);
}
else {
params.add(key, value);
}
});
};
var serializeData = function (options) {
if (options.processData && options.data && typeof options.data !== "string") {
options.data = $.param(options.data, options.traditional);
}
if (options.data && (!options.type || options.type.toUpperCase() === 'GET')) {
options.url = appendQuery(options.url, options.data);
options.data = undefined;
}
};
var appendQuery = function (url, query) {
if (query === '') {
return url;
}
return (url + '&' + query).replace(/[&?]{1,2}/, '?');
};
var mimeToDataType = function (mime) {
if (mime) {
mime = mime.split(';', 2)[0];
}
return mime && (mime === htmlType ? 'html' :
mime === jsonType ? 'json' :
scriptTypeRE.test(mime) ? 'script' :
xmlTypeRE.test(mime) && 'xml') || 'text';
};
var parseArguments = function (url, data, success, dataType) {
if ($.isFunction(data)) {
dataType = success, success = data, data = undefined;
}
if (!$.isFunction(success)) {
dataType = success, success = undefined;
}
return {
url: url,
data: data,
success: success,
dataType: dataType
};
};
$.ajax = function (url, options) {
if (typeof url === "object") {
options = url;
url = undefined;
}
var settings = options || {};
settings.url = url || settings.url;
for (key in $.ajaxSettings) {
if (settings[key] === undefined) {
settings[key] = $.ajaxSettings[key];
}
}
serializeData(settings);
var dataType = settings.dataType;
if (settings.cache === false || ((!options || options.cache !== true) && ('script' === dataType))) { var jsonType = 'application/json';
settings.url = appendQuery(settings.url, '_=' + Date.now()); var htmlType = 'text/html';
} var rscript = /<script\b[^<]*(?:(?!<\/script>)<[^<]*)*<\/script>/gi;
var mime = settings.accepts[dataType]; var scriptTypeRE = /^(?:text|application)\/javascript/i;
var headers = {}; var xmlTypeRE = /^(?:text|application)\/xml/i;
var setHeader = function (name, value) { var blankRE = /^\s*$/;
headers[name.toLowerCase()] = [name, value];
}; $.ajaxSettings = {
var protocol = /^([\w-]+:)\/\//.test(settings.url) ? RegExp.$1 : window.location.protocol; type: 'GET',
var xhr = settings.xhr(); success: $.noop,
var nativeSetHeader = xhr.setRequestHeader; error: $.noop,
var abortTimeout; complete: $.noop,
context: null,
setHeader('X-Requested-With', 'XMLHttpRequest'); xhr: function(protocol) {
setHeader('Accept', mime || '*/*'); return new window.XMLHttpRequest();
if (!!(mime = settings.mimeType || mime)) { },
if (mime.indexOf(',') > -1) { accepts: {
mime = mime.split(',', 2)[0]; script: 'text/javascript, application/javascript, application/x-javascript',
} json: jsonType,
xhr.overrideMimeType && xhr.overrideMimeType(mime); xml: 'application/xml, text/xml',
} html: htmlType,
if (settings.contentType || (settings.contentType !== false && settings.data && settings.type.toUpperCase() !== 'GET')) { text: 'text/plain'
setHeader('Content-Type', settings.contentType || 'application/x-www-form-urlencoded'); },
} timeout: 0,
if (settings.headers) { processData: true,
for (name in settings.headers) cache: true
setHeader(name, settings.headers[name]); };
}
xhr.setRequestHeader = setHeader;
xhr.onreadystatechange = function () {
if (xhr.readyState === 4) {
xhr.onreadystatechange = $.noop;
clearTimeout(abortTimeout);
var result, error = false;
if ((xhr.status >= 200 && xhr.status < 300) || xhr.status === 304 || (xhr.status === 0 && protocol === 'file:')) {
dataType = dataType || mimeToDataType(settings.mimeType || xhr.getResponseHeader('content-type'));
result = xhr.responseText;
try {
// http://perfectionkills.com/global-eval-what-are-the-options/
if (dataType === 'script') {
(1, eval)(result);
} else if (dataType === 'xml') {
result = xhr.responseXML;
} else if (dataType === 'json') {
result = blankRE.test(result) ? null : $.parseJSON(result);
}
} catch (e) {
error = e;
}
if (error) { var ajaxSuccess = function(data, xhr, settings) {
ajaxError(error, 'parsererror', xhr, settings); settings.success.call(settings.context, data, 'success', xhr);
} else { ajaxComplete('success', xhr, settings);
ajaxSuccess(result, xhr, settings); };
} // type: "timeout", "error", "abort", "parsererror"
} else { var ajaxError = function(error, type, xhr, settings) {
ajaxError(xhr.statusText || null, xhr.status ? 'error' : 'abort', xhr, settings); settings.error.call(settings.context, xhr, type, error);
} ajaxComplete(type, xhr, settings);
} };
}; // status: "success", "notmodified", "error", "timeout", "abort", "parsererror"
// if (ajaxBeforeSend(xhr, settings) === false) { var ajaxComplete = function(status, xhr, settings) {
// xhr.abort(); settings.complete.call(settings.context, xhr, status);
// ajaxError(null, 'abort', xhr, settings); };
// return xhr;
// } var serialize = function(params, obj, traditional, scope) {
var type, array = $.isArray(obj),
if (settings.xhrFields) { hash = $.isPlainObject(obj);
for (name in settings.xhrFields) { $.each(obj, function(key, value) {
xhr[name] = settings.xhrFields[name]; type = $.type(value);
} if (scope) {
} key = traditional ? scope :
scope + '[' + (hash || type === 'object' || type === 'array' ? key : '') + ']';
}
// handle data in serializeArray() format
if (!scope && array) {
params.add(value.name, value.value);
}
// recurse into nested objects
else if (type === "array" || (!traditional && type === "object")) {
serialize(params, value, traditional, key);
} else {
params.add(key, value);
}
});
};
var serializeData = function(options) {
if (options.processData && options.data && typeof options.data !== "string") {
options.data = $.param(options.data, options.traditional);
}
if (options.data && (!options.type || options.type.toUpperCase() === 'GET')) {
options.url = appendQuery(options.url, options.data);
options.data = undefined;
}
};
var appendQuery = function(url, query) {
if (query === '') {
return url;
}
return (url + '&' + query).replace(/[&?]{1,2}/, '?');
};
var mimeToDataType = function(mime) {
if (mime) {
mime = mime.split(';', 2)[0];
}
return mime && (mime === htmlType ? 'html' :
mime === jsonType ? 'json' :
scriptTypeRE.test(mime) ? 'script' :
xmlTypeRE.test(mime) && 'xml') || 'text';
};
var parseArguments = function(url, data, success, dataType) {
if ($.isFunction(data)) {
dataType = success, success = data, data = undefined;
}
if (!$.isFunction(success)) {
dataType = success, success = undefined;
}
return {
url: url,
data: data,
success: success,
dataType: dataType
};
};
$.ajax = function(url, options) {
if (typeof url === "object") {
options = url;
url = undefined;
}
var settings = options || {};
settings.url = url || settings.url;
for (key in $.ajaxSettings) {
if (settings[key] === undefined) {
settings[key] = $.ajaxSettings[key];
}
}
serializeData(settings);
var dataType = settings.dataType;
if (settings.cache === false || ((!options || options.cache !== true) && ('script' === dataType))) {
settings.url = appendQuery(settings.url, '_=' + Date.now());
}
var mime = settings.accepts[dataType];
var headers = {};
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(protocol);
var nativeSetHeader = xhr.setRequestHeader;
var abortTimeout;
setHeader('X-Requested-With', 'XMLHttpRequest');
setHeader('Accept', mime || '*/*');
if (!!(mime = settings.mimeType || mime)) {
if (mime.indexOf(',') > -1) {
mime = mime.split(',', 2)[0];
}
xhr.overrideMimeType && xhr.overrideMimeType(mime);
}
if (settings.contentType || (settings.contentType !== false && settings.data && settings.type.toUpperCase() !== 'GET')) {
setHeader('Content-Type', settings.contentType || 'application/x-www-form-urlencoded');
}
if (settings.headers) {
for (name in settings.headers)
setHeader(name, settings.headers[name]);
}
xhr.setRequestHeader = setHeader;
xhr.onreadystatechange = function() {
if (xhr.readyState === 4) {
xhr.onreadystatechange = $.noop;
clearTimeout(abortTimeout);
var result, error = false;
if ((xhr.status >= 200 && xhr.status < 300) || xhr.status === 304 || (xhr.status === 0 && protocol === 'file:')) {
dataType = dataType || mimeToDataType(settings.mimeType || xhr.getResponseHeader('content-type'));
result = xhr.responseText;
try {
// http://perfectionkills.com/global-eval-what-are-the-options/
if (dataType === 'script') {
(1, eval)(result);
} else if (dataType === 'xml') {
result = xhr.responseXML;
} else if (dataType === 'json') {
result = blankRE.test(result) ? null : $.parseJSON(result);
}
} catch (e) {
error = e;
}
var async = 'async' in settings ? settings.async : true; if (error) {
ajaxError(error, 'parsererror', xhr, settings);
} else {
ajaxSuccess(result, xhr, settings);
}
} else {
ajaxError(xhr.statusText || null, xhr.status ? 'error' : 'abort', xhr, settings);
}
}
};
// if (ajaxBeforeSend(xhr, settings) === false) {
// xhr.abort();
// ajaxError(null, 'abort', xhr, settings);
// return xhr;
// }
xhr.open(settings.type, settings.url, async, settings.username, settings.password); if (settings.xhrFields) {
for (name in settings.xhrFields) {
xhr[name] = settings.xhrFields[name];
}
}
for (name in headers) { var async = 'async' in settings ? settings.async : true;
nativeSetHeader.apply(xhr, headers[name]);
}
if (settings.timeout > 0) {
abortTimeout = setTimeout(function () {
xhr.onreadystatechange = $.noop;
xhr.abort();
ajaxError(null, 'timeout', xhr, settings);
}, settings.timeout);
}
xhr.send(settings.data ? settings.data : null);
return xhr;
};
xhr.open(settings.type, settings.url, async, settings.username, settings.password);
$.param = function (obj, traditional) { for (name in headers) {
var params = []; nativeSetHeader.apply(xhr, headers[name]);
params.add = function (k, v) { }
this.push(encodeURIComponent(k) + '=' + encodeURIComponent(v)); if (settings.timeout > 0) {
}; abortTimeout = setTimeout(function() {
serialize(params, obj, traditional); xhr.onreadystatechange = $.noop;
return params.join('&').replace(/%20/g, '+'); xhr.abort();
}; ajaxError(null, 'timeout', xhr, settings);
$.get = function ( /* url, data, success, dataType */ ) { }, settings.timeout);
return $.ajax(parseArguments.apply(null, arguments)); }
}; xhr.send(settings.data ? settings.data : null);
return xhr;
$.post = function ( /* url, data, success, dataType */ ) { };
var options = parseArguments.apply(null, arguments);
options.type = 'POST';
return $.ajax(options); $.param = function(obj, traditional) {
}; var params = [];
params.add = function(k, v) {
$.getJSON = function ( /* url, data, success */ ) { this.push(encodeURIComponent(k) + '=' + encodeURIComponent(v));
var options = parseArguments.apply(null, arguments); };
options.dataType = 'json'; serialize(params, obj, traditional);
return $.ajax(options); return params.join('&').replace(/%20/g, '+');
}; };
$.get = function( /* url, data, success, dataType */ ) {
$.fn.load = function (url, data, success) { return $.ajax(parseArguments.apply(null, arguments));
if (!this.length) };
return this;
var self = this, $.post = function( /* url, data, success, dataType */ ) {
parts = url.split(/\s/), var options = parseArguments.apply(null, arguments);
selector, options.type = 'POST';
options = parseArguments(url, data, success), return $.ajax(options);
callback = options.success; };
if (parts.length > 1)
options.url = parts[0], selector = parts[1]; $.getJSON = function( /* url, data, success */ ) {
options.success = function (response) { var options = parseArguments.apply(null, arguments);
if (selector) { options.dataType = 'json';
var div = document.createElement('div'); return $.ajax(options);
div.innerHTML = response.replace(rscript, ""); };
var selectorDiv = document.createElement('div');
var childs = div.querySelectorAll(selector); $.fn.load = function(url, data, success) {
if (childs && childs.length > 0) { if (!this.length)
for (var i = 0, len = childs.length; i < len; i++) { return this;
selectorDiv.appendChild(childs[i]); var self = this,
} parts = url.split(/\s/),
} selector,
self[0].innerHTML = selectorDiv.innerHTML; options = parseArguments(url, data, success),
} else { callback = options.success;
self[0].innerHTML = response; if (parts.length > 1)
} options.url = parts[0], selector = parts[1];
callback && callback.apply(self, arguments); options.success = function(response) {
}; if (selector) {
$.ajax(options); var div = document.createElement('div');
return this; div.innerHTML = response.replace(rscript, "");
}; var selectorDiv = document.createElement('div');
var childs = div.querySelectorAll(selector);
if (childs && childs.length > 0) {
for (var i = 0, len = childs.length; i < len; i++) {
selectorDiv.appendChild(childs[i]);
}
}
self[0].innerHTML = selectorDiv.innerHTML;
} else {
self[0].innerHTML = response;
}
callback && callback.apply(self, arguments);
};
$.ajax(options);
return this;
};
})(mui, window); })(mui, window);
/** /**
...@@ -2087,7 +2125,10 @@ var mui = (function(document, undefined) { ...@@ -2087,7 +2125,10 @@ var mui = (function(document, undefined) {
(function($) { (function($) {
$.plusReady(function() { $.plusReady(function() {
$.ajaxSettings = $.extend($.ajaxSettings, { $.ajaxSettings = $.extend($.ajaxSettings, {
xhr: function() { xhr: function(protocol) {
if (protocol === 'file:') { //本地文件使用标准XMLHttpRequest
return new window.XMLHttpRequest();
}
return new plus.net.XMLHttpRequest(); return new plus.net.XMLHttpRequest();
} }
}); });
...@@ -2216,7 +2257,7 @@ var mui = (function(document, undefined) { ...@@ -2216,7 +2257,7 @@ var mui = (function(document, undefined) {
var PullRefresh = { var PullRefresh = {
init: function(element, options) { init: function(element, options) {
this._super(element, $.extend({ this._super(element, $.extend(true, {
scrollY: true, scrollY: true,
scrollX: false, scrollX: false,
indicators: true, indicators: true,
...@@ -2233,7 +2274,7 @@ var mui = (function(document, undefined) { ...@@ -2233,7 +2274,7 @@ var mui = (function(document, undefined) {
contentnomore: '没有更多数据了', contentnomore: '没有更多数据了',
duration: 300 duration: 300
} }
}, options, true)); }, options));
}, },
_init: function() { _init: function() {
this._super(); this._super();
...@@ -2354,6 +2395,8 @@ var mui = (function(document, undefined) { ...@@ -2354,6 +2395,8 @@ var mui = (function(document, undefined) {
var CLASS_SCROLLBAR_VERTICAL = CLASS_SCROLLBAR + '-vertical'; var CLASS_SCROLLBAR_VERTICAL = CLASS_SCROLLBAR + '-vertical';
var CLASS_SCROLLBAR_HORIZONTAL = CLASS_SCROLLBAR + '-horizontal'; var CLASS_SCROLLBAR_HORIZONTAL = CLASS_SCROLLBAR + '-horizontal';
var CLASS_ACTIVE = 'mui-active';
var ease = { var ease = {
quadratic: { quadratic: {
style: 'cubic-bezier(0.25, 0.46, 0.45, 0.94)', style: 'cubic-bezier(0.25, 0.46, 0.45, 0.94)',
...@@ -2372,10 +2415,10 @@ var mui = (function(document, undefined) { ...@@ -2372,10 +2415,10 @@ var mui = (function(document, undefined) {
init: function(element, options) { init: function(element, options) {
this.wrapper = this.element = element; this.wrapper = this.element = element;
this.scroller = this.wrapper.children[0]; this.scroller = this.wrapper.children[0];
this.scrollerStyle = this.scroller.style; this.scrollerStyle = this.scroller && this.scroller.style;
this.stopped = false; this.stopped = false;
this.options = $.extend({ this.options = $.extend(true, {
scrollY: true, scrollY: true,
scrollX: false, scrollX: false,
startX: 0, startX: 0,
...@@ -2389,13 +2432,17 @@ var mui = (function(document, undefined) { ...@@ -2389,13 +2432,17 @@ var mui = (function(document, undefined) {
}, },
momentum: true, momentum: true,
snap: false,
bounce: true, bounce: true,
bounceTime: 300, bounceTime: 300,
bounceEasing: ease.circular.style, bounceEasing: ease.circular.style,
directionLockThreshold: 5, directionLockThreshold: 5,
}, options, true); parallaxElement: false,
parallaxRatio: 0.5
}, options);
this.x = 0; this.x = 0;
this.y = 0; this.y = 0;
...@@ -2410,9 +2457,18 @@ var mui = (function(document, undefined) { ...@@ -2410,9 +2457,18 @@ var mui = (function(document, undefined) {
} }
}, },
_init: function() { _init: function() {
this._initParallax();
this._initIndicators(); this._initIndicators();
this._initEvent(); 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() { _initIndicators: function() {
var self = this; var self = this;
self.indicators = []; self.indicators = [];
...@@ -2472,6 +2528,83 @@ var mui = (function(document, undefined) { ...@@ -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() { _initEvent: function() {
window.addEventListener('orientationchange', this); window.addEventListener('orientationchange', this);
window.addEventListener('resize', this); window.addEventListener('resize', this);
...@@ -2488,6 +2621,9 @@ var mui = (function(document, undefined) { ...@@ -2488,6 +2621,9 @@ var mui = (function(document, undefined) {
if (this.options.scrollX) { if (this.options.scrollX) {
this.wrapper.addEventListener('swiperight', this); this.wrapper.addEventListener('swiperight', this);
} }
if (this.wrapper.classList.contains('mui-segmented-control')) { //靠，这个bug排查了一下午
mui(this.wrapper).on('click', 'a', $.preventDefault);
}
}, },
handleEvent: function(e) { handleEvent: function(e) {
if (this.stopped) { if (this.stopped) {
...@@ -2531,7 +2667,6 @@ var mui = (function(document, undefined) { ...@@ -2531,7 +2667,6 @@ var mui = (function(document, undefined) {
_start: function(e) { _start: function(e) {
this.moved = this.needReset = false; this.moved = this.needReset = false;
this._transitionTime(); this._transitionTime();
if (this.isInTransition) { if (this.isInTransition) {
this.needReset = true; this.needReset = true;
this.isInTransition = false; this.isInTransition = false;
...@@ -2551,11 +2686,15 @@ var mui = (function(document, undefined) { ...@@ -2551,11 +2686,15 @@ var mui = (function(document, undefined) {
// return; // return;
// } // }
var detail = e.detail; var detail = e.detail;
//ios8 hack if (this.options.scrollY || detail.direction === 'up' || detail.direction === 'down') { //如果是竖向滚动或手势方向是上或下
if ($.os.ios && parseFloat($.os.version) >= 8) { //ios8 hack
if ((detail.gesture.touches[0].clientY + 10) > window.innerHeight) { if ($.os.ios && parseFloat($.os.version) >= 8) { //多webview时，离开当前webview会导致后续touch事件不触发
this.resetPosition(this.options.bounceTime); var clientY = detail.gesture.touches[0].clientY;
return; //下拉刷新 or 上拉加载
if ((clientY + 10) > window.innerHeight || clientY < 10) {
this.resetPosition(this.options.bounceTime);
return;
}
} }
} }
var isPreventDefault = isReturn = false; var isPreventDefault = isReturn = false;
...@@ -2584,6 +2723,7 @@ var mui = (function(document, undefined) { ...@@ -2584,6 +2723,7 @@ var mui = (function(document, undefined) {
} else { } else {
e.stopPropagation(); //move期间阻止冒泡(scroll嵌套) e.stopPropagation(); //move期间阻止冒泡(scroll嵌套)
} }
var deltaX = detail.deltaX - detail.lastDeltaX; var deltaX = detail.deltaX - detail.lastDeltaX;
var deltaY = detail.deltaY - detail.lastDeltaY; var deltaY = detail.deltaY - detail.lastDeltaY;
var absDeltaX = Math.abs(detail.deltaX); var absDeltaX = Math.abs(detail.deltaX);
...@@ -2613,8 +2753,7 @@ var mui = (function(document, undefined) { ...@@ -2613,8 +2753,7 @@ var mui = (function(document, undefined) {
this.moved = true; this.moved = true;
this.x = newX; this.x = newX;
this.y = newY; this.y = newY;
$.trigger(this.wrapper, 'scroll', this);
}, },
_flick: function(e) { _flick: function(e) {
// if (!this.moved || this.needReset) { // if (!this.moved || this.needReset) {
...@@ -2623,6 +2762,7 @@ var mui = (function(document, undefined) { ...@@ -2623,6 +2762,7 @@ var mui = (function(document, undefined) {
if (!this.moved) { if (!this.moved) {
return; return;
} }
e.stopPropagation();
var detail = e.detail; var detail = e.detail;
this._clearRequestAnimationFrame(); this._clearRequestAnimationFrame();
if (e.type === 'dragend' && detail.flick) { //dragend if (e.type === 'dragend' && detail.flick) { //dragend
...@@ -2671,7 +2811,7 @@ var mui = (function(document, undefined) { ...@@ -2671,7 +2811,7 @@ var mui = (function(document, undefined) {
} }
$.trigger(this.wrapper, 'scrollend', this); $.trigger(this.wrapper, 'scrollend', this);
e.stopPropagation(); // e.stopPropagation();
}, },
_end: function(e) { _end: function(e) {
this.needReset = false; this.needReset = false;
...@@ -2704,8 +2844,14 @@ var mui = (function(document, undefined) { ...@@ -2704,8 +2844,14 @@ var mui = (function(document, undefined) {
_transitionTime: function(time) { _transitionTime: function(time) {
time = time || 0; time = time || 0;
this.scrollerStyle['webkitTransitionDuration'] = time + 'ms'; this.scrollerStyle['webkitTransitionDuration'] = time + 'ms';
if (this.parallaxElement && this.options.scrollY) { //目前仅支持竖向视差效果
this.parallaxStyle['webkitTransitionDuration'] = time + 'ms';
}
if (this.options.fixedBadAndorid && !time && $.os.isBadAndroid) { if (this.options.fixedBadAndorid && !time && $.os.isBadAndroid) {
this.scrollerStyle['webkitTransitionDuration'] = '0.001s'; this.scrollerStyle['webkitTransitionDuration'] = '0.001s';
if (this.parallaxElement && this.options.scrollY) { //目前仅支持竖向视差效果
this.parallaxStyle['webkitTransitionDuration'] = '0.001s';
}
} }
if (this.indicators) { if (this.indicators) {
for (var i = this.indicators.length; i--;) { for (var i = this.indicators.length; i--;) {
...@@ -2715,6 +2861,9 @@ var mui = (function(document, undefined) { ...@@ -2715,6 +2861,9 @@ var mui = (function(document, undefined) {
}, },
_transitionTimingFunction: function(easing) { _transitionTimingFunction: function(easing) {
this.scrollerStyle['webkitTransitionTimingFunction'] = easing; this.scrollerStyle['webkitTransitionTimingFunction'] = easing;
if (this.parallaxElement && this.options.scrollY) { //目前仅支持竖向视差效果
this.parallaxStyle['webkitTransitionDuration'] = easing;
}
if (this.indicators) { if (this.indicators) {
for (var i = this.indicators.length; i--;) { for (var i = this.indicators.length; i--;) {
this.indicators[i].transitionTimingFunction(easing); this.indicators[i].transitionTimingFunction(easing);
...@@ -2778,6 +2927,21 @@ var mui = (function(document, undefined) { ...@@ -2778,6 +2927,21 @@ var mui = (function(document, undefined) {
this.indicators.map(function(indicator) { this.indicators.map(function(indicator) {
indicator.refresh(); 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) { _momentum: function(current, distance, time, lowerMargin, wrapperSize, deceleration) {
var speed = parseFloat(Math.abs(distance) / time), var speed = parseFloat(Math.abs(distance) / time),
...@@ -2810,6 +2974,17 @@ var mui = (function(document, undefined) { ...@@ -2810,6 +2974,17 @@ var mui = (function(document, undefined) {
this.x = x; this.x = x;
this.y = y; this.y = y;
this.scrollerStyle['webkitTransform'] = 'translate3d(' + x + 'px,' + y + 'px,0px)' + this.translateZ; 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) { if (this.indicators) {
for (var i = this.indicators.length; i--;) { for (var i = this.indicators.length; i--;) {
this.indicators[i].updatePosition(); this.indicators[i].updatePosition();
...@@ -2886,6 +3061,9 @@ var mui = (function(document, undefined) { ...@@ -2886,6 +3061,9 @@ var mui = (function(document, undefined) {
scrollToBottom: function(time, easing) { scrollToBottom: function(time, easing) {
time = time || this.options.bounceTime; time = time || this.options.bounceTime;
this.scrollTo(0, this.maxScrollY, time, easing); this.scrollTo(0, this.maxScrollY, time, easing);
},
gotoPage: function(index) {
this._gotoPage(index);
} }
}); });
//Indicator //Indicator
...@@ -3040,7 +3218,16 @@ var mui = (function(document, undefined) { ...@@ -3040,7 +3218,16 @@ var mui = (function(document, undefined) {
var id = self.getAttribute('data-scroll'); var id = self.getAttribute('data-scroll');
if (!id) { if (!id) {
id = ++$.uuid; 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); self.setAttribute('data-scroll', id);
} else { } else {
scrollApi = $.data[id]; scrollApi = $.data[id];
...@@ -3192,6 +3379,11 @@ var mui = (function(document, undefined) { ...@@ -3192,6 +3379,11 @@ var mui = (function(document, undefined) {
} }
}; };
})(mui, window, document); })(mui, window, document);
/**
* snap 重构
* @param {Object} $
* @param {Object} window
*/
(function($, window) { (function($, window) {
var CLASS_SLIDER = 'mui-slider'; var CLASS_SLIDER = 'mui-slider';
var CLASS_SLIDER_GROUP = 'mui-slider-group'; var CLASS_SLIDER_GROUP = 'mui-slider-group';
...@@ -3210,20 +3402,27 @@ var mui = (function(document, undefined) { ...@@ -3210,20 +3402,27 @@ var mui = (function(document, undefined) {
var Slider = $.Scroll.extend({ var Slider = $.Scroll.extend({
init: function(element, options) { init: function(element, options) {
this._super(element, $.extend({ this._super(element, $.extend(true, {
interval: 0, //设置为0，则不定时轮播 interval: 0, //设置为0，则不定时轮播
scrollY: false, scrollY: false,
scrollX: true, scrollX: true,
indicators: false, indicators: false,
bounceTime: 200, bounceTime: 200,
startX: false startX: false,
}, options, true)); snap: SELECTOR_SLIDER_ITEM
}, options));
if (this.options.startX) { if (this.options.startX) {
$.trigger(this.wrapper, 'scrollend', this); // $.trigger(this.wrapper, 'scrollend', this);
} }
}, },
_init: function() { _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) { if (this.scroller) {
this.scrollerStyle = this.scroller.style; this.scrollerStyle = this.scroller.style;
this.progressBar = this.wrapper.querySelector(SELECTOR_SLIDER_PROGRESS_BAR); this.progressBar = this.wrapper.querySelector(SELECTOR_SLIDER_PROGRESS_BAR);
...@@ -3248,45 +3447,51 @@ var mui = (function(document, undefined) { ...@@ -3248,45 +3447,51 @@ var mui = (function(document, undefined) {
self.wrapper.addEventListener('swiperight', $.stopPropagation); self.wrapper.addEventListener('swiperight', $.stopPropagation);
self.wrapper.addEventListener('scrollend', function() { self.wrapper.addEventListener('scrollend', function() {
self.isInTransition = false; self.isInTransition = false;
self.slideNumber = self._getSlideNumber(); var page = self.currentPage;
var slideNumber = self.slideNumber; var oldSlideNumber = self.slideNumber;
self.slideNumber = self._fixedSlideNumber();
if (self.loop) { if (self.loop) {
if (self.slideNumber === 0) { if (self.slideNumber === 0) {
self.slideNumber = self.itemLength - 2; self.setTranslate(self.pages[1][0].x, 0);
self.setTranslate(-self.wrapperWidth * (self.itemLength - 2), 0); } else if (self.slideNumber === self.itemLength - 3) {
} else if (self.slideNumber === (self.itemLength - 1)) { self.setTranslate(self.pages[self.itemLength - 2][0].x, 0);
self.slideNumber = 1;
self.setTranslate(-self.wrapperWidth, 0);
} }
slideNumber = self.slideNumber - 1;
} }
$.trigger(self.wrapper, 'slide', { if (oldSlideNumber != self.slideNumber) {
slideNumber: slideNumber $.trigger(self.wrapper, 'slide', {
}); slideNumber: self.slideNumber
});
}
}); });
self.wrapper.addEventListener('slide', function(e) { self.wrapper.addEventListener('slide', function(e) {
if (e.target !== self.wrapper) { if (e.target !== self.wrapper) {
return; return;
} }
var detail = e.detail; var detail = e.detail;
detail.slideNumber = detail.slideNumber || 0; 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; var _slideNumber = detail.slideNumber;
if (self.loop) { if (self.loop) {
_slideNumber += 1; _slideNumber += 1;
} }
for (var i = 0, len = items.length; i < len; i++) { if (!self.wrapper.classList.contains('mui-segmented-control')) {
var item = items[i]; for (var i = 0, len = items.length; i < len; i++) {
if (item.parentNode === self.scroller) { var item = items[i];
if (i === _slideNumber) { if (item.parentNode === self.scroller) {
item.classList.add(CLASS_ACTIVE); if (i === _slideNumber) {
} else { item.classList.add(CLASS_ACTIVE);
item.classList.remove(CLASS_ACTIVE); } else {
item.classList.remove(CLASS_ACTIVE);
}
} }
} }
} }
var indicatorWrap = self.wrapper.querySelector('.mui-slider-indicator'); var indicatorWrap = self.wrapper.querySelector('.mui-slider-indicator');
if (indicatorWrap) { if (indicatorWrap) {
if (indicatorWrap.getAttribute('data-scroll')) { //scroll
$(indicatorWrap).scroll().gotoPage(detail.slideNumber);
}
var indicators = indicatorWrap.querySelectorAll('.mui-indicator'); var indicators = indicatorWrap.querySelectorAll('.mui-indicator');
if (indicators.length > 0) { //图片轮播 if (indicators.length > 0) { //图片轮播
for (var i = 0, len = indicators.length; i < len; i++) { for (var i = 0, len = indicators.length; i < len; i++) {
...@@ -3350,36 +3555,30 @@ var mui = (function(document, undefined) { ...@@ -3350,36 +3555,30 @@ var mui = (function(document, undefined) {
slider.setAttribute('data-slidershowTimer', slidershowTimer); 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() { _reLayout: function() {
this.hasHorizontalScroll = true; this.hasHorizontalScroll = true;
this.loop = this.scroller.classList.contains(CLASS_SLIDER_LOOP); 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(); this._super();
}, },
_getScroll: function() { _getScroll: function() {
var result = $.parseTranslateMatrix($.getStyles(this.scroller, 'webkitTransform')); var result = $.parseTranslateMatrix($.getStyles(this.scroller, 'webkitTransform'));
return result ? result.x : 0; return result ? result.x : 0;
}, },
_getSlideNumber: function() {
return Math.abs(Math.round(Math.abs(this.x) / this.wrapperWidth));
},
_transitionEnd: function(e) { _transitionEnd: function(e) {
if (e.target !== this.scroller || !this.isInTransition) { if (e.target !== this.scroller || !this.isInTransition) {
return; return;
...@@ -3399,7 +3598,7 @@ var mui = (function(document, undefined) { ...@@ -3399,7 +3598,7 @@ var mui = (function(document, undefined) {
} }
if (e.type === 'flick') { if (e.type === 'flick') {
if (detail.touchTime < 200) { //flick，太容易触发，额外校验一下touchtime 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); this.resetPosition(this.options.bounceTime);
} else if (e.type === 'dragend' && !detail.flick) { } else if (e.type === 'dragend' && !detail.flick) {
...@@ -3407,23 +3606,54 @@ var mui = (function(document, undefined) { ...@@ -3407,23 +3606,54 @@ var mui = (function(document, undefined) {
} }
e.stopPropagation(); e.stopPropagation();
}, },
_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.options.startX = this.currentPage.x || 0;
},
_getSnapX: function(offsetLeft) {
return Math.max(-offsetLeft, this.maxScrollX);
},
_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;
time = 0;
} else if (slideNumber < 0) {
slideNumber = this.itemLength - 1;
time = 0;
}
}
slideNumber = Math.min(Math.max(0, slideNumber), this.itemLength - 1);
}
return this.pages[slideNumber][0];
},
_gotoItem: function(slideNumber, time) { _gotoItem: function(slideNumber, time) {
this.scrollTo(-slideNumber * this.wrapperWidth, 0, time, this.options.bounceEasing); this.currentPage = this._getPage(slideNumber);
this.scrollTo(this.currentPage.x, 0, time, this.options.bounceEasing);
if (time === 0) { if (time === 0) {
$.trigger(this.wrapper, 'scrollend', this); $.trigger(this.wrapper, 'scrollend', this);
} }
this._initTimer(); this._initTimer();
}, },
_fixedSlideNumber: function(slideNumber) {
if (!this.loop) {
if (slideNumber < 0) {
slideNumber = 0;
} else if (slideNumber >= this.itemLength) {
slideNumber = this.itemLength - 1;
}
}
return slideNumber;
},
//API //API
setTranslate: function(x, y) { setTranslate: function(x, y) {
this._super(x, y); this._super(x, y);
...@@ -3439,33 +3669,27 @@ var mui = (function(document, undefined) { ...@@ -3439,33 +3669,27 @@ var mui = (function(document, undefined) {
} else if (this.x < this.maxScrollX) { } else if (this.x < this.maxScrollX) {
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; return true;
}, },
gotoItem: function(slideNumber, time) { 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) { nextItem: function() {
var slideNumber = this._fixedSlideNumber(this.slideNumber + 1); this._gotoItem(this.slideNumber + 1, this.options.bounceTime);
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;
// }
}, },
prevItem: function() { 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) { refresh: function(options) {
if (options) { if (options) {
$.extend(this.options, options); $.extend(this.options, options);
this._super(); this._super();
this._gotoItem(this._getSlideNumber() + 1, this.options.bounceTime); this.nextItem();
} else { } else {
this._super(); this._super();
} }
...@@ -3497,6 +3721,12 @@ var mui = (function(document, undefined) { ...@@ -3497,6 +3721,12 @@ var mui = (function(document, undefined) {
$.ready(function() { $.ready(function() {
// setTimeout(function() { // setTimeout(function() {
$('.mui-slider').slider(); $('.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导致的) // }, 500); //临时处理slider宽度计算不正确的问题(初步确认是scrollbar导致的)
}); });
...@@ -3713,11 +3943,11 @@ var mui = (function(document, undefined) { ...@@ -3713,11 +3943,11 @@ var mui = (function(document, undefined) {
options = $.parseJSON(options); options = $.parseJSON(options);
} }
var pullRefreshApi = null; var pullRefreshApi = null;
var attrWebviewId = options.webviewId && options.webviewId.replace(/\//g, "_"); //替换所有"/"
var id = self.getAttribute('data-pullrefresh-plus-' + options.webviewId); var id = self.getAttribute('data-pullrefresh-plus-' + attrWebviewId);
if (!id) { //避免重复初始化5+ pullrefresh if (!id) { //避免重复初始化5+ pullrefresh
id = ++$.uuid; id = ++$.uuid;
self.setAttribute('data-pullrefresh-plus-' + options.webviewId, id); self.setAttribute('data-pullrefresh-plus-' + attrWebviewId, id);
document.body.classList.add(CLASS_PLUS_PULLREFRESH); document.body.classList.add(CLASS_PLUS_PULLREFRESH);
$.data[id] = pullRefreshApi = new PlusPullRefresh(self, options); $.data[id] = pullRefreshApi = new PlusPullRefresh(self, options);
} else { } else {
...@@ -3755,9 +3985,9 @@ var mui = (function(document, undefined) { ...@@ -3755,9 +3985,9 @@ var mui = (function(document, undefined) {
this.scroller = this.wrapper.querySelector(SELECTOR_INNER_WRAP); this.scroller = this.wrapper.querySelector(SELECTOR_INNER_WRAP);
this.classList = this.wrapper.classList; this.classList = this.wrapper.classList;
if (this.scroller) { if (this.scroller) {
this.options = $.extend({ this.options = $.extend(true, {
dragThresholdX: 10 dragThresholdX: 10
}, options, true); }, options);
document.body.classList.add('mui-fullscreen'); //fullscreen document.body.classList.add('mui-fullscreen'); //fullscreen
this.refresh(); this.refresh();
this.initEvent(); this.initEvent();
...@@ -4361,6 +4591,9 @@ var mui = (function(document, undefined) { ...@@ -4361,6 +4591,9 @@ var mui = (function(document, undefined) {
}); });
var togglePopover = function(popover, anchor) { 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_BAR_BACKDROP);
backdrop.classList.remove(CLASS_ACTION_BACKDROP); backdrop.classList.remove(CLASS_ACTION_BACKDROP);
var _popover = document.querySelector('.mui-popover.mui-active'); var _popover = document.querySelector('.mui-popover.mui-active');
...@@ -4525,12 +4758,15 @@ var mui = (function(document, undefined) { ...@@ -4525,12 +4758,15 @@ var mui = (function(document, undefined) {
(function($, window, document, name, undefined) { (function($, window, document, name, undefined) {
var CLASS_CONTROL_ITEM = 'mui-control-item'; var CLASS_CONTROL_ITEM = 'mui-control-item';
var CLASS_SEGMENTED_CONTROL = 'mui-segmented-control';
var CLASS_CONTROL_CONTENT = 'mui-control-content'; var CLASS_CONTROL_CONTENT = 'mui-control-content';
var CLASS_TAB_BAR = 'mui-bar-tab';
var CLASS_TAB_ITEM = 'mui-tab-item'; var CLASS_TAB_ITEM = 'mui-tab-item';
var CLASS_SLIDER_ITEM = 'mui-slider-item'; var CLASS_SLIDER_ITEM = 'mui-slider-item';
var handle = function(event, target) { var handle = function(event, target) {
if (target.classList && (target.classList.contains(CLASS_CONTROL_ITEM) || target.classList.contains(CLASS_TAB_ITEM))) { if (target.classList && (target.classList.contains(CLASS_CONTROL_ITEM) || target.classList.contains(CLASS_TAB_ITEM))) {
event.preventDefault(); //stop hash change
// if (target.hash) { // if (target.hash) {
return target; return target;
// } // }
...@@ -4556,8 +4792,17 @@ var mui = (function(document, undefined) { ...@@ -4556,8 +4792,17 @@ var mui = (function(document, undefined) {
var targetBody; var targetBody;
var className = 'mui-active'; var className = 'mui-active';
var classSelector = '.' + className; 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) { if (activeTab) {
activeTab.classList.remove(className); activeTab.classList.remove(className);
...@@ -4594,11 +4839,10 @@ var mui = (function(document, undefined) { ...@@ -4594,11 +4839,10 @@ var mui = (function(document, undefined) {
targetBody.classList.add(className); targetBody.classList.add(className);
var contents = targetBody.parentNode.querySelectorAll('.' + CLASS_CONTROL_CONTENT); var contents = targetBody.parentNode.querySelectorAll('.' + CLASS_CONTROL_CONTENT);
$.trigger(targetBody, $.eventName('shown', name), { $.trigger(targetBody, $.eventName('shown', name), {
tabNumber: Array.prototype.indexOf.call(contents, targetBody) 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'); })(mui, window, document, 'tab');
...@@ -4637,10 +4881,13 @@ var mui = (function(document, undefined) { ...@@ -4637,10 +4881,13 @@ var mui = (function(document, undefined) {
this.element = element; this.element = element;
this.classList = this.element.classList; this.classList = this.element.classList;
this.handle = this.element.querySelector(SELECTOR_SWITCH_HANDLE); this.handle = this.element.querySelector(SELECTOR_SWITCH_HANDLE);
this.init();
this.initEvent();
};
Toggle.prototype.init = function() {
this.toggleWidth = this.element.offsetWidth; this.toggleWidth = this.element.offsetWidth;
this.handleWidth = this.handle.offsetWidth; this.handleWidth = this.handle.offsetWidth;
this.handleX = this.toggleWidth - this.handleWidth - 3; this.handleX = this.toggleWidth - this.handleWidth - 3;
this.initEvent();
}; };
Toggle.prototype.initEvent = function() { Toggle.prototype.initEvent = function() {
this.element.addEventListener('touchstart', this); this.element.addEventListener('touchstart', this);
...@@ -4669,6 +4916,9 @@ var mui = (function(document, undefined) { ...@@ -4669,6 +4916,9 @@ var mui = (function(document, undefined) {
}; };
Toggle.prototype.start = function(e) { Toggle.prototype.start = function(e) {
this.classList.add(CLASS_DRAGGING); this.classList.add(CLASS_DRAGGING);
if (this.toggleWidth === 0 || this.handleWidth === 0) { //当switch处于隐藏状态时，width为0，需要重新初始化
this.init();
}
}; };
Toggle.prototype.drag = function(e) { Toggle.prototype.drag = function(e) {
var detail = e.detail; 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 @@ ...@@ -54,8 +54,8 @@
<input type="text" class="mui-input-speech mui-input-clear" placeholder="语音输入"> <input type="text" class="mui-input-speech mui-input-clear" placeholder="语音输入">
</div> </div>
<div class="mui-button-row"> <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" type="button" 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>
</div> </div>
</form> </form>
</div> </div>
......
examples/hello-mui/examples/info.html
View file @ 9ac0ae6d
...@@ -51,7 +51,7 @@ ...@@ -51,7 +51,7 @@
</p> </p>
<p>更多详细介绍，请到<a href="http://dcloudio.github.io/mui">mui官网</a>查看；</p> <p>更多详细介绍，请到<a href="http://dcloudio.github.io/mui">mui官网</a>查看；</p>
<h4>版本介绍</h4> <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> <h4>License</h4>
<p> <p>
mui遵循MIT License，源码已提交至Github，<a href="https://github.com/dcloudio/mui">点击查看</a>; 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 @@ ...@@ -36,9 +36,6 @@
.mui-card .mui-control-content { .mui-card .mui-control-content {
padding: 10px; padding: 10px;
} }
.mui-segmented-control .mui-control-item {
padding: 10px 0;
}
.mui-control-content { .mui-control-content {
height: 150px; height: 150px;
} }
......
examples/hello-mui/examples/tab-with-viewpagerindicator.html
View file @ 9ac0ae6d
...@@ -22,15 +22,6 @@ ...@@ -22,15 +22,6 @@
.mui-bar-nav~.mui-content { .mui-bar-nav~.mui-content {
padding: 0; padding: 0;
} }
</style>
<script>
mui.init();
</script>
</head>
<body>
<style>
.mui-control-content { .mui-control-content {
background-color: white; background-color: white;
min-height: 215px; min-height: 215px;
...@@ -39,22 +30,25 @@ ...@@ -39,22 +30,25 @@
margin-top: 50px; margin-top: 50px;
} }
</style> </style>
</head>
<body>
<header class="mui-bar mui-bar-nav"> <header class="mui-bar mui-bar-nav">
<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a> <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
<h1 class="mui-title">可拖动式选项卡</h1> <h1 class="mui-title">可拖动式选项卡</h1>
</header> </header>
<div class="mui-content"> <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"> <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>
<a class="mui-control-item" href="#item2mobile"> <a class="mui-control-item" href="#item2mobile">
已办公文 已办公文
</a> </a>
<a class="mui-control-item" href="#item3mobile"> <a class="mui-control-item" href="#item3mobile">
全部公文 全部公文
</a> </a>
</div> </div>
<div id="sliderProgressBar" class="mui-slider-progress-bar mui-col-xs-4"></div> <div id="sliderProgressBar" class="mui-slider-progress-bar mui-col-xs-4"></div>
<div class="mui-slider-group"> <div class="mui-slider-group">
...@@ -151,26 +145,7 @@ ...@@ -151,26 +145,7 @@
</div> </div>
</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> </div>
<script> <script>
......
examples/hello-mui/index.html
View file @ 9ac0ae6d
...@@ -20,11 +20,13 @@ ...@@ -20,11 +20,13 @@
<h1 class="mui-title">Hello mui</h1> <h1 class="mui-title">Hello mui</h1>
</header> </header>
<script> <script>
var menu = null,list=null,main=null; var menu = null,
list = null,
main = null;
var showMenu = false; var showMenu = false;
mui.init({ mui.init({
swipeBack: false, swipeBack: false,
statusBarBackground:'#f7f7f7', statusBarBackground: '#f7f7f7',
subpages: [{ subpages: [{
id: 'list', id: 'list',
url: 'list.html', url: 'list.html',
...@@ -37,14 +39,14 @@ ...@@ -37,14 +39,14 @@
}); });
mui.plusReady(function() { mui.plusReady(function() {
if(mui.os.android){ if (mui.os.android) {
plus.screen.lockOrientation("portrait-primary"); plus.screen.lockOrientation("portrait-primary");
} }
main = plus.webview.currentWebview(); main = plus.webview.currentWebview();
main.addEventListener('maskClick',closeMenu); main.addEventListener('maskClick', closeMenu);
//处理侧滑导航，为了避免和子页面初始化等竞争资源，延迟加载侧滑页面； //处理侧滑导航，为了避免和子页面初始化等竞争资源，延迟加载侧滑页面；
setTimeout(function () { setTimeout(function() {
menu= mui.preload({ menu = mui.preload({
id: 'index-menu', id: 'index-menu',
url: 'index-menu.html', url: 'index-menu.html',
styles: { styles: {
...@@ -52,85 +54,87 @@ ...@@ -52,85 +54,87 @@
width: '70%', width: '70%',
zindex: -1 zindex: -1
}, },
show:{ show: {
aniShow:'none' aniShow: 'none'
} }
}); });
},200); }, 200);
}); });
/** /**
* 显示侧滑菜单 * 显示侧滑菜单
*/ */
function openMenu(){ function openMenu() {
if(!showMenu){ if (!showMenu) {
//侧滑菜单处于隐藏状态，则立即显示出来； //侧滑菜单处于隐藏状态，则立即显示出来；
menu.show('none',0,function () { menu.show('none', 0, function() {
//主窗体开始侧滑并显示遮罩 //主窗体开始侧滑并显示遮罩
main.setStyle({
mask: 'rgba(0,0,0,0.4)',
left: '70%',
transition: {
duration: 150
}
});
showMenu = true;
});
}
}
/**
* 关闭菜单
*/
function closeMenu() {
if (showMenu) {
//关闭遮罩；
//主窗体开始侧滑；
main.setStyle({ main.setStyle({
mask:'rgba(0,0,0,0.4)', mask: 'none',
left:'70%', left: '0',
transition: { transition: {
duration: 150 duration: 200
} }
}); });
showMenu = true; showMenu = false;
}); //等动画结束后，隐藏菜单webview，节省资源；
setTimeout(function() {
} menu.hide();
} }, 300);
/** }
* 关闭菜单
*/
function closeMenu(){
if(showMenu){
//关闭遮罩；
//主窗体开始侧滑；
main.setStyle({
mask:'none',
left: '0',
transition: {
duration: 200
}
});
showMenu = false;
//等动画结束后，隐藏菜单webview，节省资源；
setTimeout(function () {
menu.hide();
},300);
} }
} //点击左上角侧滑图标，打开侧滑菜单；
//点击左上角侧滑图标，打开侧滑菜单； document.querySelector('.mui-icon-bars').addEventListener('tap', function() {
document.querySelector('.mui-icon-bars').addEventListener('tap', function () { if (showMenu) {
if(showMenu){
closeMenu(); closeMenu();
}else{ } else {
openMenu(); 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:close", closeMenu);
window.addEventListener("menu:open",openMenu); window.addEventListener("menu:open", openMenu);
//重写mui.menu方法，Android版本menu按键按下可自动打开、关闭侧滑菜单； //重写mui.menu方法，Android版本menu按键按下可自动打开、关闭侧滑菜单；
mui.menu = function () { mui.menu = function() {
if(showMenu){ if (showMenu) {
closeMenu(); closeMenu();
}else{ } else {
openMenu(); openMenu();
} }
} }
//处理右上角关于图标的点击事件； //处理右上角关于图标的点击事件；
var subWebview = null,template = null; var subWebview = null,
template = null;
document.getElementById('info').addEventListener('tap', function() { document.getElementById('info').addEventListener('tap', function() {
if (subWebview == null) { if (subWebview == null) {
//获取共用父窗体 //获取共用父窗体
...@@ -139,17 +143,20 @@ ...@@ -139,17 +143,20 @@
} }
subWebview.loadURL('examples/info.html'); 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); template.show('slide-in-right', 150);
}); });
//首页返回键处理 //首页返回键处理
//处理逻辑：1秒内，连续两次按返回键，则退出应用； //处理逻辑：1秒内，连续两次按返回键，则退出应用；
var first = null; var first = null;
mui.back = function() { mui.back = function() {
if(showMenu){ if (showMenu) {
closeMenu(); closeMenu();
}else{ } else {
//首次按键，提示‘再按一次退出应用’ //首次按键，提示‘再按一次退出应用’
if (!first) { if (!first) {
first = new Date().getTime(); first = new Date().getTime();
...@@ -163,9 +170,8 @@ ...@@ -163,9 +170,8 @@
} }
} }
} }
}; };
</script> </script>
</body> </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 @@ ...@@ -69,7 +69,9 @@
* 检查升级数据 * 检查升级数据
*/ */
function checkUpdateData( j ){ function checkUpdateData( j ){
//当前客户端版本号
var curVer=plus.runtime.version, var curVer=plus.runtime.version,
inf = j[plus.os.name]; inf = j[plus.os.name];
if ( inf ){ if ( inf ){
var srvVer = inf.version; var srvVer = inf.version;
...@@ -97,37 +99,26 @@ ...@@ -97,37 +99,26 @@
} }
/** /**
* 从服务器获取升级数据 * 从服务器获取升级数据，并存储到本地；
*/ */
function getUpdateData(){ function getUpdateData(){
var xhr = new plus.net.XMLHttpRequest(); mui.getJSON(server,{},function (data) {
xhr.onreadystatechange = function () { if(data.appid==plus.runtime.appid){
switch ( xhr.readyState ) { // 保存到本地文件中
case 4: dir.getFile( localFile, {create:true}, function(fentry){
if ( xhr.status == 200 ) { fentry.createWriter( function(writer){
// 保存到本地文件中 writer.onerror = function(){
dir.getFile( localFile, {create:true}, function(fentry){ console.log( "获取升级数据，保存文件失败！" );
fentry.createWriter( function(writer){ }
writer.onerror = function(){ writer.write(data);
console.log( "获取升级数据，保存文件失败！" ); }, function(e){
} console.log( "获取升级数据，创建写文件对象失败："+e.message );
writer.write( xhr.responseText ); } );
}, function(e){ }, function(e){
console.log( "获取升级数据，创建写文件对象失败："+e.message ); console.log( "获取升级数据，打开保存文件失败："+e.message );
} ); });
}, function(e){ }
console.log( "获取升级数据，打开保存文件失败："+e.message ); });
});
} else {
console.log( "获取升级数据，联网请求失败："+xhr.status );
}
break;
default :
break;
}
}
xhr.open( "GET", server );
xhr.send();
} }
/** /**
...@@ -155,11 +146,7 @@ ...@@ -155,11 +146,7 @@
return true; return true;
} }
} }
if ( w.plus ) { mui.plusReady(initUpdate);
initUpdate();
} else {
document.addEventListener("plusready", initUpdate, false );
}
})(window); })(window);
\ No newline at end of file
examples/hello-mui/list.html
View file @ 9ac0ae6d
...@@ -420,7 +420,6 @@ ...@@ -420,7 +420,6 @@
id:name+"-main", id:name+"-main",
styles:{ styles:{
popGesture:"hide", popGesture:"hide",
zindex:2
}, },
extras:{ extras:{
mType: 'main' mType: 'main'
...@@ -433,7 +432,6 @@ ...@@ -433,7 +432,6 @@
styles:{ styles:{
top: '48px', top: '48px',
bottom: '0px', bottom: '0px',
zindex:2
}, },
extras:{ extras:{
mType: 'sub' mType: 'sub'
...@@ -473,11 +471,10 @@ ...@@ -473,11 +471,10 @@
//关闭splash页面； //关闭splash页面；
plus.navigator.closeSplashscreen(); plus.navigator.closeSplashscreen();
//初始化模板 //初始化模板
//延迟加载的原因：等待index页面先创建menu和mask，这样就可以保证页面的zindex顺序； //延迟加载的原因：；
setTimeout(function () { setTimeout(function () {
initTemplates(); //预加载所有模板 initTemplates(); //预加载所有模板
},300); },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