Commit c9a268e0 authored by hbcui1984's avatar hbcui1984

升级到0.5.5

parent 3ae75f3a
/*! /*!
* ===================================================== * =====================================================
* Mui v0.5.4 (https://github.com/dcloudio/mui) * Mui v0.5.5 (https://github.com/dcloudio/mui)
* ===================================================== * =====================================================
*/ */
......
This diff is collapsed.
/*! /*!
* ===================================================== * =====================================================
* Mui v0.5.4 (https://github.com/dcloudio/mui) * Mui v0.5.5 (https://github.com/dcloudio/mui)
* ===================================================== * =====================================================
*/ */
/** /**
...@@ -953,9 +953,18 @@ window.mui = mui; ...@@ -953,9 +953,18 @@ window.mui = mui;
swipeBack: false, swipeBack: false,
preloadPages: [], //5+ lazyLoad webview preloadPages: [], //5+ lazyLoad webview
preloadLimit: 10 //预加载窗口的数量限制(一旦超出,先进先出) preloadLimit: 10 //预加载窗口的数量限制(一旦超出,先进先出)
}; };
//默认页面动画
var defaultShow = {
duration:$.os.ios?200:100,
aniShow: 'slide-in-right'
}
//若执行了显示动画初始化操作,则要覆盖默认配置
if($.options.show){
defaultShow = $.extend(defaultShow, $.options.show,true);
}
$.currentWebview = null; $.currentWebview = null;
$.isHomePage = false; $.isHomePage = false;
...@@ -975,14 +984,7 @@ window.mui = mui; ...@@ -975,14 +984,7 @@ window.mui = mui;
* @returns {Object} * @returns {Object}
*/ */
$.showOptions = function(options) { $.showOptions = function(options) {
var duration = 100; return $.extend(defaultShow, options);
if ($.os.ios) {
duration = 200;
}
return $.extend({
aniShow: 'slide-in-right',
duration: duration
}, options);
}; };
/** /**
* 窗口默认配置 * 窗口默认配置
...@@ -1070,6 +1072,7 @@ window.mui = mui; ...@@ -1070,6 +1072,7 @@ window.mui = mui;
* @param {object} options 可选:参数,等待,窗口,显示配置{params:{},waiting:{},styles:{},show:{}} * @param {object} options 可选:参数,等待,窗口,显示配置{params:{},waiting:{},styles:{},show:{}}
*/ */
$.openWindow = function(url, id, options) { $.openWindow = function(url, id, options) {
if (!window.plus) { if (!window.plus) {
return; return;
} }
...@@ -1087,13 +1090,29 @@ window.mui = mui; ...@@ -1087,13 +1090,29 @@ window.mui = mui;
} }
options = options || {}; options = options || {};
var params = options.params || {}; var params = options.params || {};
var webview; var webview,nShow;
if ($.webviews[id]) { //已缓存 if ($.webviews[id]) { //已缓存
var webviewCache = $.webviews[id]; var webviewCache = $.webviews[id];
if (webviewCache.preload) { //预加载 if (webviewCache.preload) { //预加载
webview = webviewCache.webview; webview = webviewCache.webview;
//需要处理用户手动关闭窗口的情况,此时webview应该是空的;
if(!webview||!webview.getURL()){
//再次新建一个webview;
options = $.extend(options, {
id: id,
url: url,
showAfterLoad: options.showAfterLoad === false ? false : true,
preload:true
});
webview = $.createWindow(options);
}
//每次show都需要传递动画参数; //每次show都需要传递动画参数;
webview.show(webviewCache.show.aniShow, webviewCache.show.duration, function() { //预加载的动画参数优先级:openWindow配置>preloadPages配置>mui默认配置;
nShow = webviewCache.show;
nShow = options.show?$.extend(nShow, options.show):nShow;
webview.show(nShow.aniShow, nShow.duration, function() {
triggerPreload(webview); triggerPreload(webview);
trigger(webview,'pagebeforeshow',false); trigger(webview,'pagebeforeshow',false);
}); });
...@@ -1133,9 +1152,9 @@ window.mui = mui; ...@@ -1133,9 +1152,9 @@ window.mui = mui;
webview = $.createWindow(options); webview = $.createWindow(options);
} }
if (options.showAfterLoad) { if (options.showAfterLoad) {
var nWaitingOptions = $.waitingOptions(options.waiting); var waitingConfig = $.waitingOptions(options.waiting);
var nWaiting = plus.nativeUI.showWaiting(nWaitingOptions.title || '', nWaitingOptions); var nWaiting = plus.nativeUI.showWaiting(waitingConfig.title || '', waitingConfig.options);
var nShow = $.showOptions(options.show); nShow = $.showOptions(options.show);
webview.addEventListener("loaded", function() { webview.addEventListener("loaded", function() {
nWaiting.close(); nWaiting.close();
webview.show(nShow.aniShow, nShow.duration, function() { webview.show(nShow.aniShow, nShow.duration, function() {
...@@ -1172,7 +1191,7 @@ window.mui = mui; ...@@ -1172,7 +1191,7 @@ window.mui = mui;
var id = options.id || options.url; var id = options.id || options.url;
var webview; var webview;
if (options.preload) { if (options.preload) {
if ($.webviews[id]) { //已经cache if ($.webviews[id]&& $.webviews[id].webview.getURL()) { //已经cache
webview = $.webviews[id].webview; webview = $.webviews[id].webview;
} else { //新增预加载窗口 } else { //新增预加载窗口
//preload //preload
...@@ -1209,15 +1228,17 @@ window.mui = mui; ...@@ -1209,15 +1228,17 @@ window.mui = mui;
var first = $.data.preloads.shift(); var first = $.data.preloads.shift();
var webviewCache = $.webviews[first]; var webviewCache = $.webviews[first];
if (webviewCache && webviewCache.webview) { if (webviewCache && webviewCache.webview) {
//IOS下 close的时候会导致卡顿。 //需要将自己打开的所有页面,全部close;
webviewCache.webview.close(); //关闭该预加载webview //关闭该预加载webview
$.closeAll(webviewCache.webview);
} }
//删除缓存 //删除缓存
delete $.webviews[first]; delete $.webviews[first];
} }
} else { } else {
//暂不支持存储配置,因为配置也占据预加载限额,需要细分;
//非预加载的webview存储窗口配置 //非预加载的webview存储窗口配置
$.webviews[id] = options; // $.webviews[id] = options;
if (isCreate !== false) { //直接创建非预加载窗口 if (isCreate !== false) { //直接创建非预加载窗口
webview = plus.webview.create(options.url, id, $.windowOptions(options.styles)); webview = plus.webview.create(options.url, id, $.windowOptions(options.styles));
if (options.subpages) { if (options.subpages) {
...@@ -1230,6 +1251,36 @@ window.mui = mui; ...@@ -1230,6 +1251,36 @@ window.mui = mui;
} }
return webview; return webview;
}; };
/**
*关闭当前webview打开的所有webview;
*/
$.closeOpened = function(webview){
var opened = webview.opened();
if(opened){
for(var i=0,len = opened.length;i<len;i++){
var openedWebview = opened[i];
var open_open = openedWebview.opened();
if(open_open&&open_open.length>0){
$.closeOpened(openedWebview);
}else{
//如果直接孩子节点,就不用关闭了,因为父关闭的时候,会自动关闭子;
if(openedWebview.parent()!==webview){
openedWebview.close('none');
}
}
}
}
}
$.closeAll = function(webview,aniShow){
$.closeOpened(webview);
if(aniShow){
webview.close(aniShow);
}else{
webview.close();
}
}
/** /**
* 批量创建webview * 批量创建webview
* @param {type} options * @param {type} options
...@@ -1351,19 +1402,6 @@ window.mui = mui; ...@@ -1351,19 +1402,6 @@ window.mui = mui;
}); });
})(mui); })(mui);
/**
* mui.init plugins
* @param {type} $
* @returns {undefined}
*/
(function($) {
$.init.add(function() {
//slider
$('.mui-slider-group').slider();
//input
$('.mui-input-row input').input();
});
})(mui);
/** /**
* mui titlebar * mui titlebar
* @param {type} $ * @param {type} $
...@@ -2434,7 +2472,7 @@ window.mui = mui; ...@@ -2434,7 +2472,7 @@ window.mui = mui;
window.addEventListener('tap', function(e) { window.addEventListener('tap', function(e) {
var targetTab = $.targets.tab; var targetTab = $.targets[name];
if (!targetTab) { if (!targetTab) {
return; return;
} }
...@@ -2464,23 +2502,24 @@ window.mui = mui; ...@@ -2464,23 +2502,24 @@ window.mui = mui;
if (!targetBody) { if (!targetBody) {
return; return;
} }
if (!targetBody.classList.contains(CLASS_CONTROL_CONTENT)) {//tab bar popover //选项卡含二级菜单的情况,再次点击要隐藏子菜单
if (!targetBody.classList.contains(CLASS_CONTROL_CONTENT)) {
targetTab.classList[isLastActive ? 'remove' : 'add'](className); targetTab.classList[isLastActive ? 'remove' : 'add'](className);
return; return;
} }
if (isLastActive) {//same if (isLastActive) {//same
return; return;
} }
//隐藏之前显示内容区
activeBodies = targetBody.parentNode.getElementsByClassName(className); activeBodies = targetBody.parentNode.getElementsByClassName(className);
for (var i = 0; i < activeBodies.length; i++) { for (var i = 0; i < activeBodies.length; i++) {
activeBodies[i].classList.remove(className); activeBodies[i].classList.remove(className);
} }
//显示目标内容区
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)
}) })
...@@ -2531,7 +2570,9 @@ window.mui = mui; ...@@ -2531,7 +2570,9 @@ window.mui = mui;
}, options); }, options);
if (this.options.slideshowDelay != newOptions.slideshowDelay) { if (this.options.slideshowDelay != newOptions.slideshowDelay) {
this.options.slideshowDelay = newOptions.slideshowDelay; this.options.slideshowDelay = newOptions.slideshowDelay;
this.initTimer(); if (this.options.slideshowDelay) {
this.nextItem();
}
} }
}; };
//TODO 暂时不做自动clone //TODO 暂时不做自动clone
...@@ -2828,6 +2869,9 @@ window.mui = mui; ...@@ -2828,6 +2869,9 @@ window.mui = mui;
} }
}); });
}; };
$.ready(function() {
$('.mui-slider-group').slider();
});
})(mui, window); })(mui, window);
/** /**
* Toggles switch * Toggles switch
...@@ -3513,17 +3557,17 @@ window.mui = mui; ...@@ -3513,17 +3557,17 @@ window.mui = mui;
var Input = function(element, options) { var Input = function(element, options) {
this.element = element; this.element = element;
this.options = options || { this.options = options || {
actions : 'clear' actions: 'clear'
}; };
if (~this.options.actions.indexOf('slider')) {//slider if (~this.options.actions.indexOf('slider')) { //slider
this.sliderActionClass = CLASS_TOOLTIP + ' ' + CLASS_HIDDEN; this.sliderActionClass = CLASS_TOOLTIP + ' ' + CLASS_HIDDEN;
this.sliderActionSelector = SELECTOR_TOOLTIP; this.sliderActionSelector = SELECTOR_TOOLTIP;
} else {//clear,speech,search } else { //clear,speech,search
if (~this.options.actions.indexOf('clear')) { if (~this.options.actions.indexOf('clear')) {
this.clearActionClass = CLASS_ICON + ' ' + CLASS_ICON_CLEAR + (element.value ? '' : (' ' + CLASS_HIDDEN)); this.clearActionClass = CLASS_ICON + ' ' + CLASS_ICON_CLEAR + (element.value ? '' : (' ' + CLASS_HIDDEN));
this.clearActionSelector = SELECTOR_ICON_CLOSE; this.clearActionSelector = SELECTOR_ICON_CLOSE;
} }
if (~this.options.actions.indexOf('speech')) {//only for 5+ if (~this.options.actions.indexOf('speech')) { //only for 5+
this.speechActionClass = CLASS_ICON + ' ' + CLASS_ICON_SPEECH; this.speechActionClass = CLASS_ICON + ' ' + CLASS_ICON_SPEECH;
this.speechActionSelector = SELECTOR_ICON_SPEECH; this.speechActionSelector = SELECTOR_ICON_SPEECH;
} }
...@@ -3650,15 +3694,14 @@ window.mui = mui; ...@@ -3650,15 +3694,14 @@ window.mui = mui;
var self = this; var self = this;
self.element.value = ''; self.element.value = '';
plus.speech.startRecognize({ plus.speech.startRecognize({
engine : 'iFly' engine: 'iFly'
}, function(s) { }, function(s) {
self.element.value += s; self.element.value += s;
setTimeout(function() { setTimeout(function() {
self.element.focus(); self.element.focus();
}, 0); }, 0);
plus.speech.stopRecognize(); plus.speech.stopRecognize();
}, function(e) { }, function(e) {});
});
} else { } else {
alert('only for 5+'); alert('only for 5+');
} }
...@@ -3686,7 +3729,7 @@ window.mui = mui; ...@@ -3686,7 +3729,7 @@ window.mui = mui;
if (!id) { if (!id) {
id = ++$.uuid; id = ++$.uuid;
$.data[id] = new Input(this, { $.data[id] = new Input(this, {
actions : actions.join(',') actions: actions.join(',')
}); });
for (var i = 0, len = actions.length; i < len; i++) { for (var i = 0, len = actions.length; i < len; i++) {
this.setAttribute('data-input-' + actions[i], id); this.setAttribute('data-input-' + actions[i], id);
...@@ -3695,8 +3738,10 @@ window.mui = mui; ...@@ -3695,8 +3738,10 @@ window.mui = mui;
}); });
}; };
$.ready(function() {
$('.mui-input-row input').input();
});
})(mui, window, document); })(mui, window, document);
/** /**
* mui back * mui back
* @param {type} $ * @param {type} $
...@@ -3775,7 +3820,8 @@ window.mui = mui; ...@@ -3775,7 +3820,8 @@ window.mui = mui;
if (wobj.preload) { if (wobj.preload) {
wobj.hide("auto"); wobj.hide("auto");
} else { } else {
wobj.close(); //关闭页面时,需要将其打开的所有子页面全部关闭;
$.closeAll(wobj);
} }
//TODO 暂时屏蔽父窗口的隐藏与显示,与预加载一起使用时太多bug //TODO 暂时屏蔽父窗口的隐藏与显示,与预加载一起使用时太多bug
//opener.show(); //opener.show();
......
This diff is collapsed.
This diff is collapsed.
...@@ -83,9 +83,10 @@ ...@@ -83,9 +83,10 @@
<a> <a>
<span class="mui-icon mui-icon-pin"></span> <span class="mui-icon mui-icon-pin"></span>
</a> </a>
<a> <!--电话-->
<span class="mui-icon mui-icon-phone"></span> <a><span class="mui-icon mui-icon-phone"></span></a>
</a> <a><span class="mui-icon mui-icon-phone-solid"></span></a>
<a><span class="mui-icon mui-icon-phone-filled"></span></a>
<a> <a>
<span class="mui-icon mui-icon-map"></span> <span class="mui-icon mui-icon-map"></span>
</a> </a>
...@@ -98,9 +99,9 @@ ...@@ -98,9 +99,9 @@
<a> <a>
<span class="mui-icon mui-icon-search"></span> <span class="mui-icon mui-icon-search"></span>
</a> </a>
<a> <a><span class="mui-icon mui-icon-close"></span></a>
<span class="mui-icon mui-icon-close"></span> <a><span class="mui-icon mui-icon-close-cycle"></span></a>
</a> <a><span class="mui-icon mui-icon-clear"></span></a>
<a> <a>
<span class="mui-icon mui-icon-reply"></span> <span class="mui-icon mui-icon-reply"></span>
</a> </a>
...@@ -113,9 +114,8 @@ ...@@ -113,9 +114,8 @@
<a> <a>
<span class="mui-icon mui-icon-home"></span> <span class="mui-icon mui-icon-home"></span>
</a> </a>
<a> <a><span class="mui-icon mui-icon-category"></span></a>
<span class="mui-icon mui-icon-category"></span> <a><span class="mui-icon mui-icon-bars"></span></a>
</a>
<a> <a>
<span class="mui-icon mui-icon-calendar"></span> <span class="mui-icon mui-icon-calendar"></span>
</a> </a>
...@@ -125,87 +125,33 @@ ...@@ -125,87 +125,33 @@
<a> <a>
<span class="mui-icon mui-icon-speech"></span> <span class="mui-icon mui-icon-speech"></span>
</a> </a>
<a> <a><span class="mui-icon mui-icon-pulldown"></span></a>
<span class="mui-icon mui-icon-arrow-left"></span> <a><span class="mui-icon mui-icon-arrow-left"></span></a>
</a> <a><span class="mui-icon mui-icon-arrow-right"></span></a>
<a> <!--较粗的箭头-->
<span class="mui-icon mui-icon-arrow-right"></span> <a><span class="mui-icon mui-icon-up"></span></a>
</a> <a><span class="mui-icon mui-icon-down"></span></a>
<a> <a><span class="mui-icon mui-icon-left"></span></a>
<span class="mui-icon mui-icon-up"></span> <a><span class="mui-icon mui-icon-right"></span></a>
</a> <!--导航箭头-->
<a> <a><span class="mui-icon mui-icon-up-nav"></span></a>
<span class="mui-icon mui-icon-down"></span> <a><span class="mui-icon mui-icon-down-nav"></span></a>
</a> <a><span class="mui-icon mui-icon-left-nav"></span></a>
<a> <a><span class="mui-icon mui-icon-right-nav"></span></a>
<span class="mui-icon mui-icon-right"></span>
</a> <a><span class="mui-icon mui-icon-radio"></span></a>
<a> <a><span class="mui-icon mui-icon-radio-checked"></span></a>
<span class="mui-icon mui-icon-left-nav"></span>
</a> <a><span class="mui-icon mui-icon-checkbox"></span></a>
<a> <a><span class="mui-icon mui-icon-checkbox-checked"></span></a>
<span class="mui-icon mui-icon-radio"></span> <a><span class="mui-icon mui-icon-checkbox-checked-cycle"></span></a>
</a>
<a>
<span class="mui-icon mui-icon-radio-checked"></span> <a><span class="mui-icon mui-icon-bars"></span></a>
</a> <a><span class="mui-icon mui-icon-plus"></span></a>
<a>
<span class="mui-icon mui-icon-checkbox"></span>
</a>
<a>
<span class="mui-icon mui-icon-checkbox-checked"></span>
</a>
<a>
<span class="mui-icon mui-icon-checkbox-cycle"></span>
</a>
<a>
<span class="mui-icon mui-icon-checkbox-checked-cycle"></span>
</a>
<a>
<span class="mui-icon mui-icon-bars"></span>
</a>
<a>
<span class="mui-icon mui-icon-plus"></span>
</a>
<a>
<span class="mui-icon mui-icon-phone-solid"></span>
</a>
<a>
<span class="mui-icon mui-icon-phone-filled"></span>
</a>
<a>
<span class="mui-icon mui-icon-close-cycle"></span>
</a>
</div>
<div class="mui-content-padded">
<!--<div class="mui-spinner">
<div class="mui-spinner-indicator mui-spinner-indicator1"></div>
<div class="mui-spinner-indicator mui-spinner-indicator2"></div>
<div class="mui-spinner-indicator mui-spinner-indicator3"></div>
<div class="mui-spinner-indicator mui-spinner-indicator4"></div>
<div class="mui-spinner-indicator mui-spinner-indicator5"></div>
<div class="mui-spinner-indicator mui-spinner-indicator6"></div>
<div class="mui-spinner-indicator mui-spinner-indicator7"></div>
<div class="mui-spinner-indicator mui-spinner-indicator8"></div>
<div class="mui-spinner-indicator mui-spinner-indicator9"></div>
<div class="mui-spinner-indicator mui-spinner-indicator10"></div>
<div class="mui-spinner-indicator mui-spinner-indicator11"></div>
<div class="mui-spinner-indicator mui-spinner-indicator12"></div>
</div>-->
<!--<div class="mui-spinner mui-spinner-large">
<div class="mui-spinner-indicator mui-spinner-indicator1"></div>
<div class="mui-spinner-indicator mui-spinner-indicator2"></div>
<div class="mui-spinner-indicator mui-spinner-indicator3"></div>
<div class="mui-spinner-indicator mui-spinner-indicator4"></div>
<div class="mui-spinner-indicator mui-spinner-indicator5"></div>
<div class="mui-spinner-indicator mui-spinner-indicator6"></div>
<div class="mui-spinner-indicator mui-spinner-indicator7"></div>
<div class="mui-spinner-indicator mui-spinner-indicator8"></div>
<div class="mui-spinner-indicator mui-spinner-indicator9"></div>
<div class="mui-spinner-indicator mui-spinner-indicator10"></div>
<div class="mui-spinner-indicator mui-spinner-indicator11"></div>
<div class="mui-spinner-indicator mui-spinner-indicator12"></div>
</div>-->
</div> </div>
</div> </div>
......
...@@ -44,10 +44,14 @@ ...@@ -44,10 +44,14 @@
</p><p> </p><p>
若要使用MUI进行移动APP开发,可通过Hbuilder,新建“移动APP”,并选择“MUI”工程模板,该模板已内置MUI相关的资源文件。 若要使用MUI进行移动APP开发,可通过Hbuilder,新建“移动APP”,并选择“MUI”工程模板,该模板已内置MUI相关的资源文件。
</p> </p>
<p>更多详细介绍,请到<a href="http://dcloudio.github.io/mui">mui官网</a>查看;</p>
<h4>版本介绍</h4>
<p>当前版本为0.5.5,可到<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>;
</p> </p>
</div> </div>
</div> </div>
<style type="text/css"> <style type="text/css">
......
<!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;
}
</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">Pulldown</h1>
</header>
<div class="mui-content">
<div class="mui-content-padded">
<ul class="mui-table-view mui-table-view-chevron">
<li class="mui-table-view-cell">
<a class="mui-navigate-right">
Item 6
</a>
</li>
<li class="mui-table-view-cell">
<a class="mui-navigate-right">
Item 5
</a>
</li>
<li class="mui-table-view-cell">
<a class="mui-navigate-right">
Item 4
</a>
</li>
<li class="mui-table-view-cell">
<a class="mui-navigate-right">
Item 3
</a>
</li>
<li class="mui-table-view-cell">
<a class="mui-navigate-right">
Item 2
</a>
</li>
<li class="mui-table-view-cell">
<a class="mui-navigate-right">
Item 1
</a>
</li>
</ul>
</div>
</div>
<script>
mui.init({
swipeBack:false,
optimize: false,
pullRefresh: {
container: '.mui-content-padded',
down: {
contentdown: '下拉可以刷新',
contentover: '释放立即刷新',
contentrefresh: '正在刷新...',
callback: pulldownRefresh
}
}
});
/**
* 下拉刷新具体业务实现
*/
function pulldownRefresh(callback){
setTimeout(function() {
var table = document.body.querySelector('.mui-table-view');
var cells = document.body.querySelectorAll('.mui-table-view-cell');
for (var i = cells.length, len = i + 3; i < len; i++) {
var li = document.createElement('li');
li.className = 'mui-table-view-cell';
li.innerHTML = '<a class="mui-navigate-right">Item ' + (i + 1) + '</a>';
table.insertBefore(li, table.firstChild);
}
callback(); //refresh completed
}, 1000);
}
</script>
</body>
</html>
\ No newline at end of file
...@@ -26,7 +26,7 @@ ...@@ -26,7 +26,7 @@
<div class="mui-content"> <div class="mui-content">
<div class="mui-content-padded"> <div class="mui-content-padded">
<ul class="mui-table-view mui-table-view-chevron"> <ul id='list' class="mui-table-view mui-table-view-chevron">
<li class="mui-table-view-cell"> <li class="mui-table-view-cell">
<a class="mui-navigate-right"> <a class="mui-navigate-right">
Item 6 Item 6
...@@ -61,8 +61,9 @@ ...@@ -61,8 +61,9 @@
</div> </div>
</div> </div>
<script> <script>
mui.init({ mui.init({
pullRefresh : { pullRefresh : {
container: '#list',
down : { down : {
callback :pulldownRefresh callback :pulldownRefresh
} }
......
...@@ -32,11 +32,10 @@ ...@@ -32,11 +32,10 @@
<script> <script>
mui.init({ mui.init({
subpages : [{ subpages : [{
id : 'pulldown-with-plus-content', id : 'pullrefresh-down-content',
url : 'pulldown-with-plus-content.html', url : 'pullrefresh-down-content.html',
styles : { styles : {
top : '48px', top : '48px'
bottom : 0
} }
}] }]
}); });
......
...@@ -74,9 +74,6 @@ ...@@ -74,9 +74,6 @@
</div> </div>
</div> </div>
<script> <script>
$.ready(function() {
$('.mui-slider-group').slider();
});
mui.init({ mui.init({
swipeBack : false swipeBack : false
}); });
......
...@@ -97,6 +97,9 @@ ...@@ -97,6 +97,9 @@
}); });
} }
}); });
document.getElementById("slider").addEventListener('slide',function(e){
console.log(e.detail.slideNumber);
});
</script> </script>
</body> </body>
</html> </html>
\ No newline at end of file
<!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;
}
</style>
<script>
mui.init();
</script>
</head>
<body>
<style>
.mui-control-content h3 {
padding-top: 100px;
text-align: center;
}
</style>
<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">选项卡(Tab)</h1>
</header>
<nav class="mui-bar mui-bar-tab">
<a id="defaultTab" class="mui-tab-item mui-active" href="tab-webview-subpage-phone.html">
<span class="mui-icon mui-icon-phone"></span>
<span class="mui-tab-label">电话咨询</span>
</a>
<a class="mui-tab-item" href="tab-webview-subpage-chat.html">
<span class="mui-icon mui-icon-chat"></span>
<span class="mui-tab-label">在线咨询</span>
</a>
<a class="mui-tab-item" href="tab-webview-subpage-sms.html">
<span class="mui-icon mui-icon-sms"></span>
<span class="mui-tab-label">短信咨询</span>
</a>
<a class="mui-tab-item" href="tab-webview-subpage-map.html">
<span class="mui-icon mui-icon-map"></span>
<span class="mui-tab-label">查看地图</span>
</a>
</nav>
<script type="text/javascript" charset="utf-8">
//选项卡设计思路:
//1、第一个选项卡对应webview,作为入口页面,主页面加载后需立即展现
//故将其作为子页面append到主窗口,这样主窗口预加载时,会同时预加载子页面;
//2、其它选项卡对应webview,不会立即展现,故可在主页面显示时,再进行预加载;
mui.init({
subpages:[{
url:'tab-webview-subpage-phone.html',
id:'tab-webview-subpage-phone.html',
styles:{
top:'48px',
bottom:'50px'
}
}],
preloadPages:[{
url:'tab-webview-subpage-chat.html',
id:'tab-webview-subpage-chat.html',
styles:{
top:'48px',
bottom:'50px'
}
},{
url:'tab-webview-subpage-sms.html',
id:'tab-webview-subpage-sms.html',
styles:{
top:'48px',
bottom:'50px'
}
},{
url:'tab-webview-subpage-map.html',
id:'tab-webview-subpage-map.html',
styles:{
top:'48px',
bottom:'50px'
}
}]
});
//当前激活选项,默认为第一个;
var firstTab = activeTab = 'tab-webview-subpage-phone.html';
//选项卡点击事件
$('.mui-bar-tab').on('tap', 'a', function(e) {
var targetTab = this.getAttribute('href');
if(targetTab==activeTab){
return;
}
//当前为第一个选项卡,则仅显示目标选项卡即可;
if(activeTab==firstTab){
$.openWindow({url:targetTab,id:targetTab,show:{aniShow:'none'}});
}else{
//如果目标选项卡为第一个选项卡,则直接隐藏当前选项卡即可;
if(targetTab == firstTab){
plus.webview.hide(activeTab);
}else{
//先显示目标选项卡,再隐藏当前选项卡
$.openWindow({url:targetTab,id:targetTab,show:{aniShow:'none'}});
plus.webview.hide(activeTab);
}
}
activeTab = targetTab;
});
var defaultBack = mui.back;
mui.back = function(){
//先隐藏自己;
defaultBack();
//再隐藏当前显示的子webview
plus.webview.hide(activeTab);
}
window.addEventListener("pagebeforeshow",function(){
if(activeTab!==firstTab){
$.openWindow({url:activeTab,id:activeTab,show:{aniShow:'none'}});
}
});
</script>
</body>
</html>
\ No newline at end of file
...@@ -24,27 +24,18 @@ ...@@ -24,27 +24,18 @@
<body> <body>
<header class="mui-bar mui-bar-nav"> <h3>在线咨询</h3>
<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a> <style type="text/css">
<h1 class="mui-title">Tab bar(Page of SMS)</h1> h3{
</header> text-align: center;
<nav class="mui-bar mui-bar-tab"> margin: 50% auto;
<a class="mui-tab-item" href="tabbar.html"> }
<span class="mui-icon mui-icon-phone"></span> </style>
<span class="mui-tab-label">电话咨询</span> <script type="text/javascript" charset="utf-8">
</a> mui.back = function(){
<a class="mui-tab-item" href="tabbar-with-chat.html"> //执行父页面的关闭逻辑;
<span class="mui-icon mui-icon-chat"></span> mui.currentWebview.opener().evalJS("mui.back()");
<span class="mui-tab-label">在线咨询</span> }
</a> </script>
<a class="mui-tab-item mui-active" href="tabbar-with-sms.html">
<span class="mui-icon mui-icon-sms"></span>
<span class="mui-tab-label">短信咨询</span>
</a>
<a class="mui-tab-item" href="tabbar-with-map.html">
<span class="mui-icon mui-icon-map"></span>
<span class="mui-tab-label">查看地图</span>
</a>
</nav>
</body> </body>
</html> </html>
\ No newline at end of file
...@@ -24,27 +24,18 @@ ...@@ -24,27 +24,18 @@
<body> <body>
<header class="mui-bar mui-bar-nav"> <h3>查看地图</h3>
<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a> <style type="text/css">
<h1 class="mui-title">Tab bar(Page of Map)</h1> h3{
</header> text-align: center;
<nav class="mui-bar mui-bar-tab"> margin: 50% auto;
<a class="mui-tab-item" href="tabbar.html"> }
<span class="mui-icon mui-icon-phone"></span> </style>
<span class="mui-tab-label">电话咨询</span> <script type="text/javascript" charset="utf-8">
</a> mui.back = function(){
<a class="mui-tab-item" href="tabbar-with-chat.html"> //执行父页面的关闭逻辑;
<span class="mui-icon mui-icon-chat"></span> mui.currentWebview.opener().evalJS("mui.back()");
<span class="mui-tab-label">在线咨询</span> }
</a> </script>
<a class="mui-tab-item" href="tabbar-with-sms.html">
<span class="mui-icon mui-icon-sms"></span>
<span class="mui-tab-label">短信咨询</span>
</a>
<a class="mui-tab-item mui-active" href="tabbar-with-map.html">
<span class="mui-icon mui-icon-map"></span>
<span class="mui-tab-label">查看地图</span>
</a>
</nav>
</body> </body>
</html> </html>
\ No newline at end of file
...@@ -24,27 +24,12 @@ ...@@ -24,27 +24,12 @@
<body> <body>
<header class="mui-bar mui-bar-nav"> <h3>电话咨询</h3>
<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a> <style type="text/css">
<h1 class="mui-title">Tab bar(Page of Chat)</h1> h3{
</header> text-align: center;
<nav class="mui-bar mui-bar-tab"> margin: 50% auto;
<a class="mui-tab-item" href="tabbar.html"> }
<span class="mui-icon mui-icon-phone"></span> </style>
<span class="mui-tab-label">电话咨询</span>
</a>
<a class="mui-tab-item mui-active" href="tabbar-with-chat.html">
<span class="mui-icon mui-icon-chat"></span>
<span class="mui-tab-label">在线咨询</span>
</a>
<a class="mui-tab-item" href="tabbar-with-sms.html">
<span class="mui-icon mui-icon-sms"></span>
<span class="mui-tab-label">短信咨询</span>
</a>
<a class="mui-tab-item" href="tabbar-with-map.html">
<span class="mui-icon mui-icon-map"></span>
<span class="mui-tab-label">查看地图</span>
</a>
</nav>
</body> </body>
</html> </html>
\ No newline at end of file
<!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;
}
</style>
<script>
mui.init();
</script>
</head>
<body>
<h3>短信咨询</h3>
<style type="text/css">
h3{
text-align: center;
margin: 50% auto;
}
</style>
<script type="text/javascript" charset="utf-8">
mui.back = function(){
//执行父页面的关闭逻辑;
mui.currentWebview.opener().evalJS("mui.back()");
}
</script>
</body>
</html>
\ No newline at end of file
<!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;
}
</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">Tab bar</h1>
</header>
<nav class="mui-bar mui-bar-tab">
<a class="mui-tab-item mui-active" href="#table1">
<span class="mui-icon mui-icon-phone"></span>
<span class="mui-tab-label">Table1</span>
</a>
<a class="mui-tab-item" href="#table2">
<span class="mui-icon mui-icon-chat"></span>
<span class="mui-tab-label">Table2</span>
</a>
<a class="mui-tab-item" href="#table3">
<span class="mui-icon mui-icon-sms"></span>
<span class="mui-tab-label">Table3</span>
</a>
<a class="mui-tab-item" href="#table4">
<span class="mui-icon mui-icon-map"></span>
<span class="mui-tab-label">Table4</span>
</a>
</nav>
<div class="mui-content">
<span id="table1" class="mui-anchor"></span>
<div class="mui-content-padded">table1</div>
<div class="mui-card">
<ul class="mui-table-view">
<li class="mui-table-view-cell">
<a class="mui-navigate-right">
Item 1
</a>
</li>
<li class="mui-table-view-cell">
<a class="mui-navigate-right">
Item 2
</a>
</li>
<li class="mui-table-view-cell">
<a class="mui-navigate-right">
Item 3
</a>
</li>
</ul>
</div>
<span id="table2" class="mui-anchor"></span>
<div class="mui-content-padded">table2</div>
<div class="mui-card">
<ul class="mui-table-view">
<li class="mui-table-view-cell">
<a class="mui-navigate-right">
Item 4
</a>
</li>
<li class="mui-table-view-cell">
<a class="mui-navigate-right">
Item 5
</a>
</li>
<li class="mui-table-view-cell">
<a class="mui-navigate-right">
Item 6
</a>
</li>
</ul>
</div>
<span id="table3" class="mui-anchor"></span>
<div class="mui-content-padded">table3</div>
<div class="mui-card">
<ul class="mui-table-view">
<li class="mui-table-view-cell">
<a class="mui-navigate-right">
Item 7
</a>
</li>
<li class="mui-table-view-cell">
<a class="mui-navigate-right">
Item 8
</a>
</li>
<li class="mui-table-view-cell">
<a class="mui-navigate-right">
Item 9
</a>
</li>
</ul>
</div>
<span id="table4" class="mui-anchor"></span>
<div class="mui-content-padded">table4</div>
<div class="mui-card">
<ul class="mui-table-view">
<li class="mui-table-view-cell">
<a class="mui-navigate-right">
Item 10
</a>
</li>
<li class="mui-table-view-cell">
<a class="mui-navigate-right">
Item 11
</a>
</li>
<li class="mui-table-view-cell">
<a class="mui-navigate-right">
Item 12
</a>
</li>
<li class="mui-table-view-cell">
<a class="mui-navigate-right">
Item 13
</a>
</li>
<li class="mui-table-view-cell">
<a class="mui-navigate-right">
Item 14
</a>
</li>
<li class="mui-table-view-cell">
<a class="mui-navigate-right">
Item 15
</a>
</li>
<li class="mui-table-view-cell">
<a class="mui-navigate-right">
Item 16
</a>
</li>
<li class="mui-table-view-cell">
<a class="mui-navigate-right">
Item 17
</a>
</li>
<li class="mui-table-view-cell">
<a class="mui-navigate-right">
Item 18
</a>
</li>
<li class="mui-table-view-cell">
<a class="mui-navigate-right">
Item 19
</a>
</li>
<li class="mui-table-view-cell">
<a class="mui-navigate-right">
Item 20
</a>
</li>
<li class="mui-table-view-cell">
<a class="mui-navigate-right">
Item 21
</a>
</li>
<li class="mui-table-view-cell">
<a class="mui-navigate-right">
Item 22
</a>
</li>
<li class="mui-table-view-cell">
<a class="mui-navigate-right">
Item 23
</a>
</li>
<li class="mui-table-view-cell">
<a class="mui-navigate-right">
Item 24
</a>
</li>
<li class="mui-table-view-cell">
<a class="mui-navigate-right">
Item 25
</a>
</li>
</ul>
</div>
</div>
</body>
</html>
\ No newline at end of file
<!DOCTYPE html> <!DOCTYPE html>
<html> <html>
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8">
<title>Hello MUI</title> <title>Hello MUI</title>
...@@ -11,7 +12,8 @@ ...@@ -11,7 +12,8 @@
<script src="../js/mui.min.js"></script> <script src="../js/mui.min.js"></script>
<script src="../js/app.js"></script> <script src="../js/app.js"></script>
<style> <style>
html, body { html,
body {
background-color: #efeff4; background-color: #efeff4;
} }
</style> </style>
...@@ -19,6 +21,7 @@ ...@@ -19,6 +21,7 @@
mui.init(); mui.init();
</script> </script>
</head> </head>
<body> <body>
<header class="mui-bar mui-bar-nav"> <header class="mui-bar mui-bar-nav">
......
...@@ -31,7 +31,7 @@ ...@@ -31,7 +31,7 @@
}] }]
}); });
document.getElementById('info').addEventListener('tap', function() { document.getElementById('info').addEventListener('tap', function() {
$.openWindow('examples/info.html', 'info'); mui.openWindow({url:'examples/info.html', id:'info'});
}); });
mui.plusReady(function() { mui.plusReady(function() {
......
...@@ -3,47 +3,9 @@ ...@@ -3,47 +3,9 @@
$.initGlobal({ $.initGlobal({
optimize: true, optimize: true,
swipeBack: true, swipeBack: true,
showAfterLoad: true, showAfterLoad: true
titleBar: false,
back: function() {
// return {
// preload : true//TODO 默认启用预加载等show,hide事件,动画都完成后放开预加载
// }
},
show: {
aniShow: 'slide-in-right',
duration: 400
}
}); });
/**
* hyperlink
*/
$.ready(function() {
$('body').on('tap', 'a', function(e) {
var id = this.getAttribute('href');
if (id) {
if (~id.indexOf('.html')) {
if (window.plus) {
$.openWindow({
id: id,
url: this.href,
styles:{
zindex:9999,
},
preload: $.os.ios ? false : true //TODO 暂时屏蔽IOS的预加载
});
} else {
document.location.href = this.href;
}
} else {
if (typeof plus !== 'undefined') {
plus.runtime.openURL(id);
}
}
}
});
});
})(mui); })(mui);
/** /**
......
This diff is collapsed.
...@@ -318,7 +318,7 @@ ...@@ -318,7 +318,7 @@
</a> </a>
<ul class="mui-table-view mui-table-view-chevron"> <ul class="mui-table-view mui-table-view-chevron">
<li class="mui-table-view-cell "> <li class="mui-table-view-cell ">
<a class="mui-navigate-right" href="examples/pulldown.html"> <a class="mui-navigate-right" href="examples/pullrefresh-down-main.html">
下拉刷新 下拉刷新
</a> </a>
</li> </li>
...@@ -340,7 +340,7 @@ ...@@ -340,7 +340,7 @@
</a> </a>
<ul class="mui-table-view mui-table-view-chevron"> <ul class="mui-table-view mui-table-view-chevron">
<li class="mui-table-view-cell"> <li class="mui-table-view-cell">
<a class="mui-navigate-right" href="examples/pulldown-with-plus-main.html"> <a class="mui-navigate-right" href="examples/pullrefresh-down-main.html">
下拉刷新默认样式 下拉刷新默认样式
</a> </a>
</li> </li>
...@@ -394,14 +394,14 @@ ...@@ -394,14 +394,14 @@
<ul class="mui-table-view mui-table-view-chevron"> <ul class="mui-table-view mui-table-view-chevron">
<li class="mui-table-view-cell"> <li class="mui-table-view-cell">
<a class="mui-navigate-right" href="examples/tabbar.html"> <a class="mui-navigate-right" href="examples/tabbar.html">
默认样 div模
</a> </a>
</li> </li>
<!--<li class="mui-table-view-cell"> <li class="mui-table-view-cell">
<a class="mui-navigate-right" href="examples/tabbar-with-anchor.html"> <a class="mui-navigate-right" href="examples/tab-webview-main.html">
Tab bar with anchor webview模式
</a> </a>
</li>--> </li>
<li class="mui-table-view-cell"> <li class="mui-table-view-cell">
<a class="mui-navigate-right" href="examples/tabbar-labels-only.html"> <a class="mui-navigate-right" href="examples/tabbar-labels-only.html">
文字选项卡 文字选项卡
...@@ -535,35 +535,28 @@ ...@@ -535,35 +535,28 @@
}); });
//监听展开事件 //监听展开事件
$('#demos').on('expand', '.mui-collapse', function(e) { $('#demos').on('expand', '.mui-collapse', function(e) {
if (this.id !== 'pull-refresh-pandora') { count = 0;
return; $('.mui-table-view a', this).each(function() {
} var id = this.getAttribute('href');
count = 0; if (~id.indexOf('.html') && !~$.data.preloads.indexOf(id)) { //如果没在缓存,则创建预加载
$('.mui-table-view a', this).each(function() { var url = this.href;
var id = this.getAttribute('href'); //延迟100ms处理,避免影响操作流畅
if (~id.indexOf('.html') && !~$.data.preloads.indexOf(id)) { //如果没在缓存,则创建预加载 setTimeout(function() {
var url = this.href; $.createWindow({
//延迟100ms处理,避免影响操作流畅 id: id,
setTimeout(function() { url: url,
$.createWindow({ preload: true
id: id, });
url: url, }, (count++) * 100);
preload: true }
}); });
}, (count++) * 100);
if (count >= 3) {
return false;
}
}
});
}); });
} }
// 关闭启动界面 // 关闭启动界面
plus.navigator.closeSplashscreen(); plus.navigator.closeSplashscreen();
//下拉刷新两个平台有区别;
if ($.os.ios) { if ($.os.ios) {
document.getElementById('pull-refresh-pandora').style.display = "none"; document.getElementById('pull-refresh-pandora').style.display = "none";
} else if ($.os.android) { } else if ($.os.android) {
...@@ -577,6 +570,45 @@ ...@@ -577,6 +570,45 @@
} }
}); });
})(mui); })(mui);
/**
* 处理链接点击事件
*/
$.ready(function() {
$('body').on('tap', 'a', function(e) {
var id = this.getAttribute('href');
if (id) {
if (~id.indexOf('.html')) {
if (window.plus) {
//侧滑导航涉及Index问题,需要单独处理;
if(~id.indexOf('offcanvas-')){
$.openWindow({
id: id,
url: this.href,
styles:{
zindex:9999,
},
preload: $.os.ios ? false : true //TODO 暂时屏蔽IOS的预加载
});
}else{
$.openWindow({
id: id,
url: this.href,
preload: $.os.ios ? false : true //TODO 暂时屏蔽IOS的预加载
});
}
} else {
document.location.href = this.href;
}
} else {
if (typeof plus !== 'undefined') {
plus.runtime.openURL(id);
}
}
}
});
});
</script> </script>
</body> </body>
......
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