Skip to content

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

升级到0.5.9版本

parent 4511dbcf
Expand all Hide whitespace changes
Inline Side-by-side
Showing with 299 additions and 159 deletions
examples/hello-mui/css/mui.min.css
View file @ 7f184836
This source diff could not be displayed because it is too large. You can view the blob instead.
examples/hello-mui/examples/info.html
View file @ 7f184836
......@@ -45,7 +45,7 @@
</p>
<p>更多详细介绍，请到<a href="http://dcloudio.github.io/mui">mui官网</a>查看；</p>
<h4>版本介绍</h4>
<p>当前版本为0.5.8，可到<a href="https://github.com/dcloudio/mui">Github</a>上获取最新版本。</p>
<p>当前版本为0.5.9，可到<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/inputs.html
View file @ 7f184836
......@@ -28,7 +28,7 @@
<h1 class="mui-title">输入框（Input）</h1>
</header>
<div class="mui-content">
<div class="mui-content-padded" style="margin: 5px;">
<h5>默认搜索框：</h5>
<div class="mui-input-row mui-search">
......@@ -36,7 +36,7 @@
</div>
<h5>语音输入搜索框：</h5>
<div class="mui-input-row mui-search">
<input type="search" class="mui-input-speech mui-input-clear" placeholder="带语音输入的搜索框">
<input id="search" type="search" class="mui-input-speech mui-input-clear" placeholder="带语音输入的搜索框">
</div>
<form class="mui-input-group">
<div class="mui-input-row">
......@@ -58,7 +58,7 @@
</div>
</form>
<div class="mui-input-row" style="margin: 10px 5px;">
<textarea rows="5" placeholder="多行文本框"></textarea>
<textarea id="textarea" rows="5" placeholder="多行文本框"></textarea>
</div>
</div>
</div>
......@@ -69,5 +69,11 @@
margin: 5px 7px;
}
</style>
<script>
//语音识别完成事件
document.getElementById("search").addEventListener('recognized', function(e) {
console.log(e.detail.value);
});
</script>
</body>
</html>
\ No newline at end of file
examples/hello-mui/examples/pullup.html
View file @ 7f184836
......@@ -30,73 +30,7 @@
<div id="pullrefresh" class="mui-content mui-scroll-wrapper">
<div class="mui-scroll">
<ul class="mui-table-view mui-table-view-chevron">
<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>
<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>
<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>
<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>
</ul>
</div>
</div>
......@@ -117,19 +51,34 @@
* 上拉加载具体业务实现
*/
function pullupRefresh() {
var self = this;
setTimeout(function() {
self.endPullupToRefresh((++count > 2)); //参数为true代表没有更多数据了。
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.appendChild(li);
var self = this;
setTimeout(function() {
self.endPullupToRefresh((++count > 2)); //参数为true代表没有更多数据了。
var table = document.body.querySelector('.mui-table-view');
var cells = document.body.querySelectorAll('.mui-table-view-cell');
for (var i = cells.length, len = i + 15; 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.appendChild(li);
}
}, 600);
}
//页面初始化时，自动执行一次上拉加载
(function($) {
if ($.os.plus && $.os.android) {
$.ready(function() {
$.plusReady(function() {
$('#pullrefresh').pullRefresh().pullupLoading();
});
})
} else {
$.ready(function() {
$('#pullrefresh').pullRefresh().pullupLoading();
});
}
}, 600);
}
})(mui);
</script>
</body>
</html>
\ No newline at end of file
examples/hello-mui/examples/tab-with-segmented-control.html
View file @ 7f184836
......@@ -24,13 +24,8 @@
<body>
<style>
.mui-bar-nav ~ .mui-content{padding-top:54px;}
.mui-segmented-control {
margin-top: 10px;
}
.mui-segmented-control:first-child {
margin-top: 0;
}
/*.mui-bar-nav ~ .mui-content{padding-top:54px;}*/
.mui-card .mui-control-content {
padding: 10px;
}
......@@ -43,19 +38,21 @@
<h1 class="mui-title">按钮式选项卡</h1>
</header>
<div class="mui-content">
<div id="segmentedControl" class="mui-segmented-control">
<a class="mui-control-item mui-active" href="#item1mobile">
待办公文（8）
</a>
<a class="mui-control-item" href="#item2mobile">
已办公文
</a>
<a class="mui-control-item" href="#item3mobile">
全部公文
</a>
<div style="padding: 10px 10px;">
<div id="segmentedControl" class="mui-segmented-control">
<a class="mui-control-item mui-active" href="#item1">
待办公文（8）
</a>
<a class="mui-control-item" href="#item2">
已办公文
</a>
<a class="mui-control-item" href="#item3">
全部公文
</a>
</div>
</div>
<div>
<div id="item1mobile" class="mui-control-content mui-active">
<div id="item1" class="mui-control-content mui-active">
<ul class="mui-table-view">
<li class="mui-table-view-cell">
第一个选项卡子项-1
......@@ -68,7 +65,7 @@
</li>
</ul>
</div>
<div id="item2mobile" class="mui-control-content">
<div id="item2" class="mui-control-content">
<ul class="mui-table-view">
<li class="mui-table-view-cell">
第二个选项卡子项-1
......@@ -81,7 +78,7 @@
</li>
</ul>
</div>
<div id="item3mobile" class="mui-control-content">
<div id="item3" class="mui-control-content">
<ul class="mui-table-view">
<li class="mui-table-view-cell">
第三个选项卡子项-1
......
examples/hello-mui/examples/tableviews-with-collapses-content.html 0 → 100644
View file @ 7f184836
<!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">折叠面板</h1>
</header>
<div class="mui-content">
<div class="mui-card">
<ul class="mui-table-view">
<li class="mui-table-view-cell mui-hidden">cared
<div id="M_Toggle" class="mui-switch mui-active">
<div class="mui-switch-handle"></div>
</div>
</li>
<li class="mui-table-view-cell mui-collapse"><a class="mui-navigate-right" href="#">表单</a>
<div class="mui-collapse-content">
<form class="mui-input-group">
<div class="mui-input-row">
<label>Input</label>
<input type="text" placeholder="普通输入框">
</div>
<div class="mui-input-row">
<label>Input</label>
<input type="text" class="mui-input-clear" placeholder="带清除按钮的输入框">
</div>
<div class="mui-input-row">
<label>Input</label>
<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>
</div>
</form>
</div>
</li>
<li class="mui-table-view-cell mui-collapse"><a class="mui-navigate-right" href="#">图片轮播</a>
<div class="mui-collapse-content">
<div id="slider" class="mui-slider">
<div class="mui-slider-group mui-slider-loop">
<!-- 额外增加的一个节点(循环轮播：第一个节点是最后一张轮播) -->
<div class="mui-slider-item mui-slider-item-duplicate">
<a href="#">
<img src="../images/yuantiao.jpg">
</a>
</div>
<!-- 第一张 -->
<div class="mui-slider-item">
<a href="#">
<img src="../images/shuijiao.jpg">
</a>
</div>
<!-- 第二张 -->
<div class="mui-slider-item">
<a href="#">
<img src="../images/muwu.jpg">
</a>
</div>
<!-- 第三张 -->
<div class="mui-slider-item">
<a href="#">
<img src="../images/cbd.jpg">
</a>
</div>
<!-- 第四张 -->
<div class="mui-slider-item">
<a href="#">
<img src="../images/yuantiao.jpg">
</a>
</div>
<!-- 额外增加的一个节点(循环轮播：最后一个节点是第一张轮播) -->
<div class="mui-slider-item mui-slider-item-duplicate">
<a href="#">
<img src="../images/shuijiao.jpg">
</a>
</div>
</div>
<div class="mui-slider-indicator">
<div class="mui-indicator mui-active"></div>
<div class="mui-indicator"></div>
<div class="mui-indicator"></div>
<div class="mui-indicator"></div>
</div>
</div>
</div>
</li>
<li class="mui-table-view-cell mui-collapse"><a class="mui-navigate-right" href="#">文字</a>
<div class="mui-collapse-content">
<h1>h1. Heading</h1>
<h2>h2. Heading</h2>
<h3>h3. Heading</h3>
<h4>h4. Heading</h4>
<h5>h5. Heading</h5>
<h6>h6. Heading</h6>
<p>
p. 目前最接近原生App效果的框架。
</p>
</div>
</li>
</ul>
</div>
</div>
</body>
</html>
\ No newline at end of file
examples/hello-mui/examples/test.html
View file @ 7f184836
......@@ -9,8 +9,8 @@
<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/mui.tpl.min.js"></script>
<script src="../js/mui.js"></script>
<script src="../js/mui.tpl.js"></script>
<script src="../js/app.js"></script>
<style>
html,
......@@ -26,27 +26,29 @@
<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>
<h1 class="mui-title">默认列表</h1>
</header>
<div class="mui-content">
<div id="tableview"></div>
<div id="tableview_tpl"></div>
<div id="slider"></div>
<div id="slider-table-pagination"></div>
<div id="grid"></div>
<div id="scroll" class="mui-content mui-scroll-wrapper">
<div class="mui-scroll">
<div id="tableview"></div>
<div id="tableview_tpl"></div>
<div id="slider"></div>
<div id="slider-table-pagination"></div>
<div id="grid"></div>
<script id="tpl" type="text/x-handlebars-template">
<h5 class="mui-content-padded">自定义模板</h5>
<div class="mui-card">
{{>tableview}}
</div>
</script>
<script id="tpl" type="text/x-handlebars-template">
<h5 class="mui-content-padded">自定义模板</h5>
<div class="mui-card">
{{>tableview}}
</div>
</script>
</div>
</div>
<script>
var tableview = [];
for (var i = 0; i < 10; i++) {
for (var i = 0; i < 15; i++) {
tableview.push({
title: '选项1',
title: '选项' + i,
//src: 'http://dcloudio.github.io/mui/assets/img/shuijiao.jpg',
//desc: '图片描述图片描述图片描述图片描述图片描述图片描述图片描述图片描述图片描述图片描述图片描述图片描述图片描述图片描述图片描述图片描述图片描述图片描述图片描述图片描述图片描述图片描述图片描述',
//ellipsis: 2,
......@@ -120,43 +122,92 @@
inverted: false,
tableview: tableview,
});
$('#tableview_tpl').tableview({
tpl: document.getElementById("tpl").innerText,//指定了自定义模板
tableview: ['item 1', 'item 2', 'item 3', 'item 4', 'item 5']
})
var sliderApi = $('#slider').slider({
loop: true,
slideshowDelay: 0,
slider: slider,
});
function testApi(index, callback) {
setTimeout(function() {
sliderApi.gotoItem(index);
callback();
}, 2000);
}
testApi(1, function() {
testApi(2, function() {
testApi(3, function() {
testApi(0, function() {
console.log('finish');
});
});
});
});
$('#slider-table-pagination').slider({
loop: true,
slideshowDelay: 0,
slider: slidertable,
});
//快捷用法(直接传数据数组)
$('#grid').grid(slider);
// $('#tableview_tpl').tableview({
// tpl: document.getElementById("tpl").innerText, //指定了自定义模板
// tableview: ['item 1', 'item 2', 'item 3', 'item 4', 'item 5']
// })
// var sliderApi = $('#slider').slider({
// loop: true,
// slideshowDelay: 0,
// slider: slider,
// });
//
// // function testApi(index, callback) {
// // setTimeout(function() {
// // sliderApi.gotoItem(index);
// // callback();
// // }, 2000);
// // }
// // testApi(1, function() {
// // testApi(2, function() {
// // testApi(3, function() {
// // testApi(0, function() {
// // console.log('finish');
// // });
// // });
// // });
// // });
// $('#slider-table-pagination').slider({
// loop: true,
// slideshowDelay: 0,
// slider: slidertable,
// });
// // //快捷用法(直接传数据数组)
// $('#grid').grid(slider);
//标准用法(传入一个包含数据数组的对象，以防需要其他额外的参数)
// $('#grid').grid({
// grid: slider,
// });
// setTimeout(function() {
$('#scroll').pullRefresh({
down: {
callback: pulldownRefresh
},
up: {
callback: pullupRefresh
}
}).pullupLoading();
// // }, 2000);
//
function pulldownRefresh() {
console.log('pulldown');
var self = this;
setTimeout(function() {
self.endPulldownToRefresh(); //refresh completed
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.firstElementChild);
}
}, 2000);
}
function pullupRefresh() {
console.log('pullup');
var self = this;
setTimeout(function() {
self.endPullupToRefresh(true); //refresh completed
setTimeout(function() {
//刷新当前上拉加载区域(参数为true时重新启用上拉加载;html5版会重新计算该区域大小,滚动条位置等信息)
//一般当区域内容发生变化时可手动调用此方法,举例：分类选项+上拉加载,不同分类选项显示不同条目+上拉加载功能
//点击分类选项后,手动调用此方法，会根据需要重新开启上拉加载功能
$('#scroll').pullRefresh().refresh(true);
}, 5000); //5秒后重新启用上拉加载
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.appendChild(li);
}
}, 2000);
}
});
})(mui);
</script>
</body>
......
examples/hello-mui/js/mui.min.js
View file @ 7f184836
This source diff could not be displayed because it is too large. You can view the blob instead.
examples/hello-mui/js/mui.tpl.js
View file @ 7f184836
/*!
* =====================================================
* Mui v0.5.8 (https://github.com/dcloudio/mui)
* Mui v0.5.9 (https://github.com/dcloudio/mui)
* =====================================================
*/
/*!
......
examples/hello-mui/js/mui.tpl.min.js
View file @ 7f184836
This diff is collapsed.
examples/hello-mui/list.html
View file @ 7f184836
......@@ -200,6 +200,13 @@
二级列表
</a>
</li>
<li class="mui-table-view-cell">
<a class="mui-navigate-right" href="examples/tableviews-with-collapses-content.html">
折叠面板
</a>
</li>
<li class="mui-table-view-cell">
<a class="mui-navigate-right" href="examples/tableviews-with-swipe.html">
滑动触发列表项菜单
......
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