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,
background-color: #eee;
}
.mui-grid-view.mui-grid-9 .mui-table-view-cell > a:not(.mui-btn) {
padding: 15px;
padding: 10px 0;
margin: 0;
}
.mui-grid-view.mui-grid-9 .mui-media {
color: #797979;
......@@ -2328,13 +2329,25 @@ select:focus {
-webkit-touch-callout: none;
}
.mui-segmented-control.mui-scroll-wrapper {
height: 38px;
}
.mui-segmented-control.mui-scroll-wrapper .mui-scroll {
width: auto;
height: 40px;
white-space: nowrap;
}
.mui-segmented-control.mui-scroll-wrapper .mui-control-item {
display: inline-block;
width: auto;
padding: 0 20px;
border: 0;
}
.mui-segmented-control .mui-control-item {
display: table-cell;
width: 1%;
padding-top: 6px;
padding-bottom: 7px;
overflow: hidden;
line-height: 1;
line-height: 38px;
color: #007aff;
text-align: center;
text-overflow: ellipsis;
......@@ -2754,6 +2767,10 @@ select:focus {
position: static;
}
.mui-android .mui-modal .mui-bar-nav ~ .mui-content {
padding-top: 0;
}
.mui-slider {
position: relative;
width: 100%;
......@@ -2821,7 +2838,6 @@ select:focus {
.mui-slider-indicator.mui-segmented-control {
position: relative;
bottom: auto;
padding-top: 10px;
}
.mui-slider-indicator .mui-indicator {
display: inline-block;
......@@ -3476,6 +3492,13 @@ select:focus {
.mui-fullscreen .mui-slider-group {
height: 100%;
}
.mui-fullscreen .mui-segmented-control ~ .mui-slider-group {
position: absolute;
top: 40px;
bottom: 0;
width: 100%;
height: auto;
}
.mui-fullscreen .mui-slider-item > a {
top: 50%;
-webkit-transform: translateY(-50%);
......
dist/css/mui.min.css
View file @ 9ac0ae6d
This source diff could not be displayed because it is too large. You can view the blob instead.
dist/js/mui.js
View file @ 9ac0ae6d
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 @@
<input type="text" class="mui-input-speech mui-input-clear" placeholder="语音输入">
</div>
<div class="mui-button-row">
<button class="mui-btn mui-btn-primary" onclick="return false;">确认</button>&nbsp;&nbsp;
<button class="mui-btn mui-btn-primary" onclick="return false;">取消</button>
<button class="mui-btn mui-btn-primary" type="button" onclick="return false;">确认</button>&nbsp;&nbsp;
<button class="mui-btn mui-btn-primary" type="button" onclick="return false;">取消</button>
</div>
</form>
</div>
......
examples/hello-mui/examples/info.html
View file @ 9ac0ae6d
......@@ -51,7 +51,7 @@
</p>
<p>更多详细介绍，请到<a href="http://dcloudio.github.io/mui">mui官网</a>查看；</p>
<h4>版本介绍</h4>
<p>当前版本为1.0.0，可到<a href="https://github.com/dcloudio/mui">Github</a>上获取最新版本。</p>
<p>当前版本为1.1.0，可到<a href="https://github.com/dcloudio/mui">Github</a>上获取最新版本。</p>
<h4>License</h4>
<p>
mui遵循MIT License，源码已提交至Github，<a href="https://github.com/dcloudio/mui">点击查看</a>;
......
examples/hello-mui/examples/scroll.html deleted 100644 → 0
View file @ eac743bb
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Hello MUI</title>
<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<link rel="stylesheet" href="../css/mui.min.css">
<script src="../js/mui.min.js"></script>
<script src="../js/app.js"></script>
<style>
html,body {
background-color: #efeff4;
}
header.mui-bar{
display: none;
}
.mui-bar-nav~.mui-content{
padding: 0;
}
</style>
<script>
mui.init();
</script>
</head>
<body>
<header class="mui-bar mui-bar-nav">
<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
<h1 class="mui-title">区域滚动</h1>
</header>
<nav class="mui-bar mui-bar-tab">
<a class="mui-tab-item mui-active" href="#tabbar">
<span class="mui-icon mui-icon-phone"></span>
<span class="mui-tab-label">电话咨询</span>
</a>
<a class="mui-tab-item" href="#tabbar-with-chat">
<span class="mui-icon mui-icon-email"></span>
<span class="mui-tab-label">短信咨询</span>
</a>
<a class="mui-tab-item" href="#tabbar-with-contact">
<span class="mui-icon mui-icon-contact"></span>
<span class="mui-tab-label">通讯录</span>
</a>
<a class="mui-tab-item" href="#tabbar-with-map">
<span class="mui-icon mui-icon-map"></span>
<span class="mui-tab-label">查看地图</span>
</a>
</nav>
<div id="scroll" class="mui-content mui-scroll-wrapper">
<div class="mui-scroll">
<div id="tableview"></div>
</div>
</div>
<script src="../js/mui.tpl.js"></script>
<script>
var tableview = [];
for (var i = 0; i < 200; i++) {
tableview.push({
title: '选项' + i,
navigate: true
});
}
(function($) {
$(function() {
$('#tableview').tableview({
striped: true,
//chevron: false,
//inverted: false,
tableview: tableview,
});
$('#scroll').scroll({
deceleration: 0.002 //flick 减速系数，系数越大，滚动速度越慢，滚动距离越小，默认值0.0006
});
});
})(mui);
</script>
</body>
</html>
\ No newline at end of file
examples/hello-mui/examples/tab-with-segmented-control.html
View file @ 9ac0ae6d
......@@ -36,9 +36,6 @@
.mui-card .mui-control-content {
padding: 10px;
}
.mui-segmented-control .mui-control-item {
padding: 10px 0;
}
.mui-control-content {
height: 150px;
}
......
examples/hello-mui/examples/tab-with-viewpagerindicator.html
View file @ 9ac0ae6d
......@@ -22,15 +22,6 @@
.mui-bar-nav~.mui-content {
padding: 0;
}
</style>
<script>
mui.init();
</script>
</head>
<body>
<style>
.mui-control-content {
background-color: white;
min-height: 215px;
......@@ -39,22 +30,25 @@
margin-top: 50px;
}
</style>
</head>
<body>
<header class="mui-bar mui-bar-nav">
<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
<h1 class="mui-title">可拖动式选项卡</h1>
</header>
<div class="mui-content">
<div id="slider" class="mui-slider">
<div id="slider" class="mui-slider mui-fullscreen">
<div id="sliderSegmentedControl" class="mui-slider-indicator mui-segmented-control mui-segmented-control-inverted">
<a class="mui-control-item" href="#item1mobile">
待办公文
</a>
<a class="mui-control-item mui-active" href="#item1mobile">
待办公文
</a>
<a class="mui-control-item" href="#item2mobile">
已办公文
</a>
已办公文
</a>
<a class="mui-control-item" href="#item3mobile">
全部公文
</a>
全部公文
</a>
</div>
<div id="sliderProgressBar" class="mui-slider-progress-bar mui-col-xs-4"></div>
<div class="mui-slider-group">
......@@ -151,26 +145,7 @@
</div>
</div>
<h5 class="mui-content-padded">Color</h5>
<div class="mui-card">
<form class="mui-input-group">
<div class="mui-input-row mui-radio">
<label><span class="mui-bg-primary" style="display:block;width:25px;height:25px;"></span>
</label>
<input name="radio1" type="radio" checked value="primary">
</div>
<div class="mui-input-row mui-radio">
<label><span class="mui-bg-positive" style="display:block;width:25px;height:25px;"></span>
</label>
<input name="radio1" type="radio" value="positive">
</div>
<div class="mui-input-row mui-radio">
<label><span class="mui-bg-negative" style="display:block;width:25px;height:25px;"></span>
</label>
<input name="radio1" type="radio" value="negative">
</div>
</form>
</div>
</div>
<script>
......
examples/hello-mui/index.html
View file @ 9ac0ae6d
......@@ -20,11 +20,13 @@
<h1 class="mui-title">Hello mui</h1>
</header>
<script>
var menu = null,list=null,main=null;
var menu = null,
list = null,
main = null;
var showMenu = false;
mui.init({
swipeBack: false,
statusBarBackground:'#f7f7f7',
statusBarBackground: '#f7f7f7',
subpages: [{
id: 'list',
url: 'list.html',
......@@ -37,14 +39,14 @@
});
mui.plusReady(function() {
if(mui.os.android){
if (mui.os.android) {
plus.screen.lockOrientation("portrait-primary");
}
main = plus.webview.currentWebview();
main.addEventListener('maskClick',closeMenu);
main.addEventListener('maskClick', closeMenu);
//处理侧滑导航，为了避免和子页面初始化等竞争资源，延迟加载侧滑页面；
setTimeout(function () {
menu= mui.preload({
setTimeout(function() {
menu = mui.preload({
id: 'index-menu',
url: 'index-menu.html',
styles: {
......@@ -52,85 +54,87 @@
width: '70%',
zindex: -1
},
show:{
aniShow:'none'
show: {
aniShow: 'none'
}
});
},200);
}, 200);
});
/**
* 显示侧滑菜单
*/
function openMenu(){
if(!showMenu){
//侧滑菜单处于隐藏状态，则立即显示出来；
menu.show('none',0,function () {
//主窗体开始侧滑并显示遮罩
function openMenu() {
if (!showMenu) {
//侧滑菜单处于隐藏状态，则立即显示出来；
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({
mask:'rgba(0,0,0,0.4)',
left:'70%',
mask: 'none',
left: '0',
transition: {
duration: 150
duration: 200
}
});
showMenu = true;
});
}
}
/**
* 关闭菜单
*/
function closeMenu(){
if(showMenu){
//关闭遮罩；
//主窗体开始侧滑；
main.setStyle({
mask:'none',
left: '0',
transition: {
duration: 200
}
});
showMenu = false;
//等动画结束后，隐藏菜单webview，节省资源；
setTimeout(function () {
menu.hide();
},300);
showMenu = false;
//等动画结束后，隐藏菜单webview，节省资源；
setTimeout(function() {
menu.hide();
}, 300);
}
}
}
//点击左上角侧滑图标，打开侧滑菜单；
document.querySelector('.mui-icon-bars').addEventListener('tap', function () {
if(showMenu){
//点击左上角侧滑图标，打开侧滑菜单；
document.querySelector('.mui-icon-bars').addEventListener('tap', function() {
if (showMenu) {
closeMenu();
}else{
} else {
openMenu();
}
});
//主界面向右滑动，若菜单未显示，则显示菜单；否则不做任何操作
window.addEventListener("swiperight",openMenu);
//主界面向左滑动，若菜单已显示，则关闭菜单；否则，不做任何操作；
window.addEventListener("swipeleft",closeMenu);
//侧滑菜单触发关闭菜单命令
window.addEventListener("menu:close",closeMenu);
window.addEventListener("menu:open",openMenu);
//重写mui.menu方法，Android版本menu按键按下可自动打开、关闭侧滑菜单；
mui.menu = function () {
if(showMenu){
//主界面向右滑动，若菜单未显示，则显示菜单；否则不做任何操作
window.addEventListener("swiperight", openMenu);
//主界面向左滑动，若菜单已显示，则关闭菜单；否则，不做任何操作；
window.addEventListener("swipeleft", closeMenu);
//侧滑菜单触发关闭菜单命令
window.addEventListener("menu:close", closeMenu);
window.addEventListener("menu:open", openMenu);
//重写mui.menu方法，Android版本menu按键按下可自动打开、关闭侧滑菜单；
mui.menu = function() {
if (showMenu) {
closeMenu();
}else{
} else {
openMenu();
}
}
//处理右上角关于图标的点击事件；
var subWebview = null,template = null;
//处理右上角关于图标的点击事件；
var subWebview = null,
template = null;
document.getElementById('info').addEventListener('tap', function() {
if (subWebview == null) {
//获取共用父窗体
......@@ -139,17 +143,20 @@
}
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);
});
//首页返回键处理
//处理逻辑：1秒内，连续两次按返回键，则退出应用；
//首页返回键处理
//处理逻辑：1秒内，连续两次按返回键，则退出应用；
var first = null;
mui.back = function() {
if(showMenu){
if (showMenu) {
closeMenu();
}else{
} else {
//首次按键，提示‘再按一次退出应用’
if (!first) {
first = new Date().getTime();
......@@ -163,9 +170,8 @@
}
}
}
};
</script>
</body>
......
examples/hello-mui/js/mui.min.js
View file @ 9ac0ae6d
This source diff could not be displayed because it is too large. You can view the blob instead.
examples/hello-mui/js/update.js
View file @ 9ac0ae6d
......@@ -69,7 +69,9 @@
* 检查升级数据
*/
function checkUpdateData( j ){
//当前客户端版本号
var curVer=plus.runtime.version,
inf = j[plus.os.name];
if ( inf ){
var srvVer = inf.version;
......@@ -97,37 +99,26 @@
}
/**
* 从服务器获取升级数据
* 从服务器获取升级数据，并存储到本地；
*/
function getUpdateData(){
var xhr = new plus.net.XMLHttpRequest();
xhr.onreadystatechange = function () {
switch ( xhr.readyState ) {
case 4:
if ( xhr.status == 200 ) {
// 保存到本地文件中
dir.getFile( localFile, {create:true}, function(fentry){
fentry.createWriter( function(writer){
writer.onerror = function(){
console.log( "获取升级数据，保存文件失败！" );
}
writer.write( xhr.responseText );
}, function(e){
console.log( "获取升级数据，创建写文件对象失败："+e.message );
} );
}, function(e){
console.log( "获取升级数据，打开保存文件失败："+e.message );
});
} else {
console.log( "获取升级数据，联网请求失败："+xhr.status );
}
break;
default :
break;
}
}
xhr.open( "GET", server );
xhr.send();
mui.getJSON(server,{},function (data) {
if(data.appid==plus.runtime.appid){
// 保存到本地文件中
dir.getFile( localFile, {create:true}, function(fentry){
fentry.createWriter( function(writer){
writer.onerror = function(){
console.log( "获取升级数据，保存文件失败！" );
}
writer.write(data);
}, function(e){
console.log( "获取升级数据，创建写文件对象失败："+e.message );
} );
}, function(e){
console.log( "获取升级数据，打开保存文件失败："+e.message );
});
}
});
}
/**
......@@ -155,11 +146,7 @@
return true;
}
}
if ( w.plus ) {
initUpdate();
} else {
document.addEventListener("plusready", initUpdate, false );
}
mui.plusReady(initUpdate);
})(window);
\ No newline at end of file
examples/hello-mui/list.html
View file @ 9ac0ae6d
......@@ -420,7 +420,6 @@
id:name+"-main",
styles:{
popGesture:"hide",
zindex:2
},
extras:{
mType: 'main'
......@@ -433,7 +432,6 @@
styles:{
top: '48px',
bottom: '0px',
zindex:2
},
extras:{
mType: 'sub'
......@@ -473,11 +471,10 @@
//关闭splash页面；
plus.navigator.closeSplashscreen();
//初始化模板
//延迟加载的原因：等待index页面先创建menu和mask，这样就可以保证页面的zindex顺序；
//延迟加载的原因：；
setTimeout(function () {
initTemplates(); //预加载所有模板
},300);
});
//主列表点击事件
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment