Skip to content

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

升级到0.5.5

parent 3ae75f3a
Expand all Hide whitespace changes
Inline Side-by-side
Showing with 517 additions and 531 deletions
dist/css/mui.css
View file @ c9a268e0
/*!
* =====================================================
* Mui v0.5.4 (https://github.com/dcloudio/mui)
* Mui v0.5.5 (https://github.com/dcloudio/mui)
* =====================================================
*/
......
dist/css/mui.min.css
View file @ c9a268e0
This diff is collapsed.
dist/js/mui.js
View file @ c9a268e0
/*!
* =====================================================
* 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;
swipeBack: false,
preloadPages: [], //5+ lazyLoad webview
preloadLimit: 10 //预加载窗口的数量限制(一旦超出，先进先出)
};
//默认页面动画
var defaultShow = {
duration:$.os.ios?200:100,
aniShow: 'slide-in-right'
}
//若执行了显示动画初始化操作，则要覆盖默认配置
if($.options.show){
defaultShow = $.extend(defaultShow, $.options.show,true);
}
$.currentWebview = null;
$.isHomePage = false;
......@@ -975,14 +984,7 @@ window.mui = mui;
* @returns {Object}
*/
$.showOptions = function(options) {
var duration = 100;
if ($.os.ios) {
duration = 200;
}
return $.extend({
aniShow: 'slide-in-right',
duration: duration
}, options);
return $.extend(defaultShow, options);
};
/**
* 窗口默认配置
......@@ -1070,6 +1072,7 @@ window.mui = mui;
* @param {object} options 可选:参数,等待,窗口,显示配置{params:{},waiting:{},styles:{},show:{}}
*/
$.openWindow = function(url, id, options) {
if (!window.plus) {
return;
}
......@@ -1087,13 +1090,29 @@ window.mui = mui;
}
options = options || {};
var params = options.params || {};
var webview;
var webview,nShow;
if ($.webviews[id]) { //已缓存
var webviewCache = $.webviews[id];
if (webviewCache.preload) { //预加载
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都需要传递动画参数；
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);
trigger(webview,'pagebeforeshow',false);
});
......@@ -1133,9 +1152,9 @@ window.mui = mui;
webview = $.createWindow(options);
}
if (options.showAfterLoad) {
var nWaitingOptions = $.waitingOptions(options.waiting);
var nWaiting = plus.nativeUI.showWaiting(nWaitingOptions.title || '', nWaitingOptions);
var nShow = $.showOptions(options.show);
var waitingConfig = $.waitingOptions(options.waiting);
var nWaiting = plus.nativeUI.showWaiting(waitingConfig.title || '', waitingConfig.options);
nShow = $.showOptions(options.show);
webview.addEventListener("loaded", function() {
nWaiting.close();
webview.show(nShow.aniShow, nShow.duration, function() {
......@@ -1172,7 +1191,7 @@ window.mui = mui;
var id = options.id || options.url;
var webview;
if (options.preload) {
if ($.webviews[id]) { //已经cache
if ($.webviews[id]&& $.webviews[id].webview.getURL()) { //已经cache
webview = $.webviews[id].webview;
} else { //新增预加载窗口
//preload
......@@ -1209,15 +1228,17 @@ window.mui = mui;
var first = $.data.preloads.shift();
var webviewCache = $.webviews[first];
if (webviewCache && webviewCache.webview) {
//IOS下 close的时候会导致卡顿。
webviewCache.webview.close(); //关闭该预加载webview
//需要将自己打开的所有页面，全部close；
//关闭该预加载webview
$.closeAll(webviewCache.webview);
}
//删除缓存
delete $.webviews[first];
}
} else {
//暂不支持存储配置，因为配置也占据预加载限额，需要细分；
//非预加载的webview存储窗口配置
$.webviews[id] = options;
// $.webviews[id] = options;
if (isCreate !== false) { //直接创建非预加载窗口
webview = plus.webview.create(options.url, id, $.windowOptions(options.styles));
if (options.subpages) {
......@@ -1230,6 +1251,36 @@ window.mui = mui;
}
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
* @param {type} options
......@@ -1351,19 +1402,6 @@ window.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
* @param {type} $
......@@ -2434,7 +2472,7 @@ window.mui = mui;
window.addEventListener('tap', function(e) {
var targetTab = $.targets.tab;
var targetTab = $.targets[name];
if (!targetTab) {
return;
}
......@@ -2464,23 +2502,24 @@ window.mui = mui;
if (!targetBody) {
return;
}
if (!targetBody.classList.contains(CLASS_CONTROL_CONTENT)) {//tab bar popover
//选项卡含二级菜单的情况，再次点击要隐藏子菜单
if (!targetBody.classList.contains(CLASS_CONTROL_CONTENT)) {
targetTab.classList[isLastActive ? 'remove' : 'add'](className);
return;
}
if (isLastActive) {//same
return;
}
//隐藏之前显示内容区
activeBodies = targetBody.parentNode.getElementsByClassName(className);
for (var i = 0; i < activeBodies.length; i++) {
activeBodies[i].classList.remove(className);
}
//显示目标内容区
targetBody.classList.add(className);
var contents = targetBody.parentNode.querySelectorAll('.' + CLASS_CONTROL_CONTENT);
//触发可拖动式选项卡的切换事件
$.trigger(targetBody, $.eventName('shown', name), {
tabNumber : Array.prototype.indexOf.call(contents, targetBody)
})
......@@ -2531,7 +2570,9 @@ window.mui = mui;
}, options);
if (this.options.slideshowDelay != newOptions.slideshowDelay) {
this.options.slideshowDelay = newOptions.slideshowDelay;
this.initTimer();
if (this.options.slideshowDelay) {
this.nextItem();
}
}
};
//TODO 暂时不做自动clone
......@@ -2828,6 +2869,9 @@ window.mui = mui;
}
});
};
$.ready(function() {
$('.mui-slider-group').slider();
});
})(mui, window);
/**
* Toggles switch
......@@ -3513,17 +3557,17 @@ window.mui = mui;
var Input = function(element, options) {
this.element = element;
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.sliderActionSelector = SELECTOR_TOOLTIP;
} else {//clear,speech,search
} else { //clear,speech,search
if (~this.options.actions.indexOf('clear')) {
this.clearActionClass = CLASS_ICON + ' ' + CLASS_ICON_CLEAR + (element.value ? '' : (' ' + CLASS_HIDDEN));
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.speechActionSelector = SELECTOR_ICON_SPEECH;
}
......@@ -3650,15 +3694,14 @@ window.mui = mui;
var self = this;
self.element.value = '';
plus.speech.startRecognize({
engine : 'iFly'
engine: 'iFly'
}, function(s) {
self.element.value += s;
setTimeout(function() {
self.element.focus();
}, 0);
plus.speech.stopRecognize();
}, function(e) {
});
}, function(e) {});
} else {
alert('only for 5+');
}
......@@ -3686,7 +3729,7 @@ window.mui = mui;
if (!id) {
id = ++$.uuid;
$.data[id] = new Input(this, {
actions : actions.join(',')
actions: actions.join(',')
});
for (var i = 0, len = actions.length; i < len; i++) {
this.setAttribute('data-input-' + actions[i], id);
......@@ -3695,8 +3738,10 @@ window.mui = mui;
});
};
$.ready(function() {
$('.mui-input-row input').input();
});
})(mui, window, document);
/**
* mui back
* @param {type} $
......@@ -3775,7 +3820,8 @@ window.mui = mui;
if (wobj.preload) {
wobj.hide("auto");
} else {
wobj.close();
//关闭页面时，需要将其打开的所有子页面全部关闭；
$.closeAll(wobj);
}
//TODO 暂时屏蔽父窗口的隐藏与显示，与预加载一起使用时太多bug
//opener.show();
......
dist/js/mui.min.js
View file @ c9a268e0
This diff is collapsed.
examples/hello-mui/css/mui.min.css
View file @ c9a268e0
This diff is collapsed.
examples/hello-mui/examples/icons.html
View file @ c9a268e0
......@@ -83,9 +83,10 @@
<a>
<span class="mui-icon mui-icon-pin"></span>
</a>
<a>
<span class="mui-icon mui-icon-phone"></span>
</a>
<!--电话-->
<a><span class="mui-icon mui-icon-phone"></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-map"></span>
</a>
......@@ -98,9 +99,9 @@
<a>
<span class="mui-icon mui-icon-search"></span>
</a>
<a>
<span class="mui-icon mui-icon-close"></span>
</a>
<a><span class="mui-icon mui-icon-close"></span></a>
<a><span class="mui-icon mui-icon-close-cycle"></span></a>
<a><span class="mui-icon mui-icon-clear"></span></a>
<a>
<span class="mui-icon mui-icon-reply"></span>
</a>
......@@ -113,9 +114,8 @@
<a>
<span class="mui-icon mui-icon-home"></span>
</a>
<a>
<span class="mui-icon mui-icon-category"></span>
</a>
<a><span class="mui-icon mui-icon-category"></span></a>
<a><span class="mui-icon mui-icon-bars"></span></a>
<a>
<span class="mui-icon mui-icon-calendar"></span>
</a>
......@@ -125,87 +125,33 @@
<a>
<span class="mui-icon mui-icon-speech"></span>
</a>
<a>
<span class="mui-icon mui-icon-arrow-left"></span>
</a>
<a>
<span class="mui-icon mui-icon-arrow-right"></span>
</a>
<a>
<span class="mui-icon mui-icon-up"></span>
</a>
<a>
<span class="mui-icon mui-icon-down"></span>
</a>
<a>
<span class="mui-icon mui-icon-right"></span>
</a>
<a>
<span class="mui-icon mui-icon-left-nav"></span>
</a>
<a>
<span class="mui-icon mui-icon-radio"></span>
</a>
<a>
<span class="mui-icon mui-icon-radio-checked"></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>-->
<a><span class="mui-icon mui-icon-pulldown"></span></a>
<a><span class="mui-icon mui-icon-arrow-left"></span></a>
<a><span class="mui-icon mui-icon-arrow-right"></span></a>
<!--较粗的箭头-->
<a><span class="mui-icon mui-icon-up"></span></a>
<a><span class="mui-icon mui-icon-down"></span></a>
<a><span class="mui-icon mui-icon-left"></span></a>
<a><span class="mui-icon mui-icon-right"></span></a>
<!--导航箭头-->
<a><span class="mui-icon mui-icon-up-nav"></span></a>
<a><span class="mui-icon mui-icon-down-nav"></span></a>
<a><span class="mui-icon mui-icon-left-nav"></span></a>
<a><span class="mui-icon mui-icon-right-nav"></span></a>
<a><span class="mui-icon mui-icon-radio"></span></a>
<a><span class="mui-icon mui-icon-radio-checked"></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-checked-cycle"></span></a>
<a><span class="mui-icon mui-icon-bars"></span></a>
<a><span class="mui-icon mui-icon-plus"></span></a>
</div>
</div>
......
examples/hello-mui/examples/info.html
View file @ c9a268e0
......@@ -44,10 +44,14 @@
</p><p>
若要使用MUI进行移动APP开发，可通过Hbuilder，新建“移动APP”，并选择“MUI”工程模板，该模板已内置MUI相关的资源文件。
</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>
<p >
mui遵循MIT License，源码已提交至Github，<a href="https://github.com/dcloudio/mui">点击查看</a>;
</p>
</div>
</div>
<style type="text/css">
......
examples/hello-mui/examples/pulldown.html deleted 100644 → 0
View file @ 3ae75f3a
<!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
examples/hello-mui/examples/pulldown-with-plus-content.html → examples/hello-mui/examples/pullrefresh-down-content.html
View file @ c9a268e0
......@@ -26,7 +26,7 @@
<div class="mui-content">
<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">
<a class="mui-navigate-right">
Item 6
......@@ -61,8 +61,9 @@
</div>
</div>
<script>
mui.init({
pullRefresh : {
mui.init({
pullRefresh : {
container: '#list',
down : {
callback :pulldownRefresh
}
......
examples/hello-mui/examples/pulldown-with-plus-main.html → examples/hello-mui/examples/pullrefresh-down-main.html
View file @ c9a268e0
......@@ -32,11 +32,10 @@
<script>
mui.init({
subpages : [{
id : 'pulldown-with-plus-content',
url : 'pulldown-with-plus-content.html',
id : 'pullrefresh-down-content',
url : 'pullrefresh-down-content.html',
styles : {
top : '48px',
bottom : 0
top : '48px'
}
}]
});
......
examples/hello-mui/examples/slider-table-pagination.html
View file @ c9a268e0
......@@ -74,9 +74,6 @@
</div>
</div>
<script>
$.ready(function() {
$('.mui-slider-group').slider();
});
mui.init({
swipeBack : false
});
......
examples/hello-mui/examples/slider-with-title.html
View file @ c9a268e0
......@@ -97,6 +97,9 @@
});
}
});
document.getElementById("slider").addEventListener('slide',function(e){
console.log(e.detail.slideNumber);
});
</script>
</body>
</html>
\ No newline at end of file
examples/hello-mui/examples/tab-webview-main.html 0 → 100644
View file @ c9a268e0
<!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
examples/hello-mui/examples/tabbar-with-sms.html → examples/hello-mui/examples/tab-webview-subpage-chat.html
View file @ c9a268e0
......@@ -24,27 +24,18 @@
<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(Page of SMS)</h1>
</header>
<nav class="mui-bar mui-bar-tab">
<a class="mui-tab-item" href="tabbar.html">
<span class="mui-icon mui-icon-phone"></span>
<span class="mui-tab-label">电话咨询</span>
</a>
<a class="mui-tab-item" 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 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>
<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
examples/hello-mui/examples/tabbar-with-map.html → examples/hello-mui/examples/tab-webview-subpage-map.html
View file @ c9a268e0
......@@ -24,27 +24,18 @@
<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(Page of Map)</h1>
</header>
<nav class="mui-bar mui-bar-tab">
<a class="mui-tab-item" href="tabbar.html">
<span class="mui-icon mui-icon-phone"></span>
<span class="mui-tab-label">电话咨询</span>
</a>
<a class="mui-tab-item" 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 mui-active" href="tabbar-with-map.html">
<span class="mui-icon mui-icon-map"></span>
<span class="mui-tab-label">查看地图</span>
</a>
</nav>
<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
examples/hello-mui/examples/tabbar-with-chat.html → examples/hello-mui/examples/tab-webview-subpage-phone.html
View file @ c9a268e0
......@@ -24,27 +24,12 @@
<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(Page of Chat)</h1>
</header>
<nav class="mui-bar mui-bar-tab">
<a class="mui-tab-item" href="tabbar.html">
<span class="mui-icon mui-icon-phone"></span>
<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>
<h3>电话咨询</h3>
<style type="text/css">
h3{
text-align: center;
margin: 50% auto;
}
</style>
</body>
</html>
\ No newline at end of file
examples/hello-mui/examples/tab-webview-subpage-sms.html 0 → 100644
View file @ c9a268e0
<!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
examples/hello-mui/examples/tabbar-with-anchor.html deleted 100644 → 0
View file @ 3ae75f3a
<!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
examples/hello-mui/examples/titlebar.html
View file @ c9a268e0
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Hello MUI</title>
......@@ -11,7 +12,8 @@
<script src="../js/mui.min.js"></script>
<script src="../js/app.js"></script>
<style>
html, body {
html,
body {
background-color: #efeff4;
}
</style>
......@@ -19,6 +21,7 @@
mui.init();
</script>
</head>
<body>
<header class="mui-bar mui-bar-nav">
......
examples/hello-mui/index.html
View file @ c9a268e0
......@@ -31,7 +31,7 @@
}]
});
document.getElementById('info').addEventListener('tap', function() {
$.openWindow('examples/info.html', 'info');
mui.openWindow({url:'examples/info.html', id:'info'});
});
mui.plusReady(function() {
......
examples/hello-mui/js/app.js
View file @ c9a268e0
......@@ -3,47 +3,9 @@
$.initGlobal({
optimize: true,
swipeBack: true,
showAfterLoad: true,
titleBar: false,
back: function() {
// return {
// preload : true//TODO 默认启用预加载等show，hide事件，动画都完成后放开预加载
// }
},
show: {
aniShow: 'slide-in-right',
duration: 400
}
showAfterLoad: true
});
/**
* 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);
/**
......
examples/hello-mui/js/mui.min.js
View file @ c9a268e0
This diff is collapsed.
examples/hello-mui/list.html
View file @ c9a268e0
......@@ -318,7 +318,7 @@
</a>
<ul class="mui-table-view mui-table-view-chevron">
<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>
</li>
......@@ -340,7 +340,7 @@
</a>
<ul class="mui-table-view mui-table-view-chevron">
<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>
</li>
......@@ -394,14 +394,14 @@
<ul class="mui-table-view mui-table-view-chevron">
<li class="mui-table-view-cell">
<a class="mui-navigate-right" href="examples/tabbar.html">
默认样式
div模式
</a>
</li>
<!--<li class="mui-table-view-cell">
<a class="mui-navigate-right" href="examples/tabbar-with-anchor.html">
Tab bar with anchor
</a>
</li>-->
<li class="mui-table-view-cell">
<a class="mui-navigate-right" href="examples/tab-webview-main.html">
webview模式
</a>
</li>
<li class="mui-table-view-cell">
<a class="mui-navigate-right" href="examples/tabbar-labels-only.html">
文字选项卡
......@@ -535,35 +535,28 @@
});
//监听展开事件
$('#demos').on('expand', '.mui-collapse', function(e) {
if (this.id !== 'pull-refresh-pandora') {
return;
}
count = 0;
$('.mui-table-view a', this).each(function() {
var id = this.getAttribute('href');
if (~id.indexOf('.html') && !~$.data.preloads.indexOf(id)) { //如果没在缓存，则创建预加载
var url = this.href;
//延迟100ms处理，避免影响操作流畅
setTimeout(function() {
$.createWindow({
id: id,
url: url,
preload: true
});
}, (count++) * 100);
if (count >= 3) {
return false;
}
}
});
$('#demos').on('expand', '.mui-collapse', function(e) {
count = 0;
$('.mui-table-view a', this).each(function() {
var id = this.getAttribute('href');
if (~id.indexOf('.html') && !~$.data.preloads.indexOf(id)) { //如果没在缓存，则创建预加载
var url = this.href;
//延迟100ms处理，避免影响操作流畅
setTimeout(function() {
$.createWindow({
id: id,
url: url,
preload: true
});
}, (count++) * 100);
}
});
});
}
// 关闭启动界面
plus.navigator.closeSplashscreen();
//下拉刷新两个平台有区别；
if ($.os.ios) {
document.getElementById('pull-refresh-pandora').style.display = "none";
} else if ($.os.android) {
......@@ -577,6 +570,45 @@
}
});
})(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>
</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