Skip to content

Commit

Permalink
升级到0.5.9版本
Browse files Browse the repository at this point in the history
  • Loading branch information
@hbcui1984
hbcui1984 committed Oct 17, 2014
1 parent 4511dbc commit 7f18483
Show file tree
Hide file tree
Showing 11 changed files with 299 additions and 159 deletions.
4 changes: 2 additions & 2 deletions examples/hello-mui/css/mui.min.css
View file

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion examples/hello-mui/examples/info.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -45,7 +45,7 @@ <h4>新手指南</h4>
</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>;
Expand Down
12 changes: 9 additions & 3 deletions examples/hello-mui/examples/inputs.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -28,15 +28,15 @@
<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">
<input type="search" class="mui-input-clear" placeholder="">
</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">
Expand All @@ -58,7 +58,7 @@ <h5>语音输入搜索框：</h5>
</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>
Expand All @@ -69,5 +69,11 @@ <h5>语音输入搜索框：</h5>
margin: 5px 7px;
}
</style>
<script>
//语音识别完成事件
document.getElementById("search").addEventListener('recognized', function(e) {
console.log(e.detail.value);
});
</script>
</body>
</html>
107 changes: 28 additions & 79 deletions examples/hello-mui/examples/pullup.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -30,73 +30,7 @@ <h1 class="mui-title">上拉加载</h1>
<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>
Expand All @@ -117,19 +51,34 @@ <h1 class="mui-title">上拉加载</h1>
* 上拉加载具体业务实现
*/
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>
37 changes: 17 additions & 20 deletions examples/hello-mui/examples/tab-with-segmented-control.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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;
}
Expand All @@ -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
Expand All @@ -68,7 +65,7 @@ <h1 class="mui-title">按钮式选项卡</h1>
</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
Expand All @@ -81,7 +78,7 @@ <h1 class="mui-title">按钮式选项卡</h1>
</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
Expand Down
130 changes: 130 additions & 0 deletions examples/hello-mui/examples/tableviews-with-collapses-content.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,130 @@
<!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>
Loading

0 comments on commit 7f18483

Please sign in to comment.