Skip to content

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

编译至mui v1.1.0

parent eac743bb
Expand all 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
This diff is collapsed.
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