Skip to content

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

更新至0.5.8版本

parent bd5c71f4
Expand all Hide whitespace changes
Inline Side-by-side
Showing with 2284 additions and 1464 deletions
dist/css/mui.css
View file @ 94baca79
This diff is collapsed.
dist/css/mui.min.css
View file @ 94baca79
This source diff could not be displayed because it is too large. You can view the blob instead.
dist/js/mui.js
View file @ 94baca79
This diff is collapsed.
dist/js/mui.min.js
View file @ 94baca79
This source diff could not be displayed because it is too large. You can view the blob instead.
dist/js/mui.tpl.js
View file @ 94baca79
/*! /*!
* ===================================================== * =====================================================
* Mui v0.5.7 (https://github.com/dcloudio/mui) * Mui v0.5.8 (https://github.com/dcloudio/mui)
* ===================================================== * =====================================================
*/ */
/*! /*!
...@@ -3604,13 +3604,16 @@ Handlebars.registerPartial("tableviewcell", Handlebars.template({"1":function(de ...@@ -3604,13 +3604,16 @@ Handlebars.registerPartial("tableviewcell", Handlebars.template({"1":function(de
var element = null; var element = null;
while (!!(element = div.firstElementChild)) { while (!!(element = div.firstElementChild)) {
this.parentNode.insertBefore(element, this); this.parentNode.insertBefore(element, this);
if (oldPlugin) {
if (name === 'slider' && element.querySelector('.mui-slider-group')) {
$.ready(function() {
oldPluginApi = oldPlugin.call($(element), opts);
});
}
}
} }
this.parentNode.removeChild(this); this.parentNode.removeChild(this);
if (oldPlugin) {
$.ready(function() {
oldPluginApi = oldPlugin.call($(element), opts);
});
}
} }
}); });
if (opts.output === false) { if (opts.output === false) {
......
dist/js/mui.tpl.min.js
View file @ 94baca79
This diff is collapsed.
examples/hello-mui/css/mui.min.css
View file @ 94baca79
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 @ 94baca79
...@@ -45,7 +45,7 @@ ...@@ -45,7 +45,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>当前版本为0.5.6，可到<a href="https://github.com/dcloudio/mui">Github</a>上获取最新版本。</p> <p>当前版本为0.5.8，可到<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/inputs.html
View file @ 94baca79
...@@ -28,7 +28,7 @@ ...@@ -28,7 +28,7 @@
<h1 class="mui-title">输入框（Input）</h1> <h1 class="mui-title">输入框（Input）</h1>
</header> </header>
<div class="mui-content"> <div class="mui-content">
<div class="mui-content-padded" style="margin: 5px;"> <div class="mui-content-padded" style="margin: 5px;">
<h5>默认搜索框：</h5> <h5>默认搜索框：</h5>
<div class="mui-input-row mui-search"> <div class="mui-input-row mui-search">
...@@ -36,11 +36,11 @@ ...@@ -36,11 +36,11 @@
</div> </div>
<h5>语音输入搜索框：</h5> <h5>语音输入搜索框：</h5>
<div class="mui-input-row mui-search"> <div class="mui-input-row mui-search">
<input type="search" class="mui-input-speech mui-input-clear" placeholder="带语音识别的搜索框"> <input type="search" class="mui-input-speech mui-input-clear" placeholder="带语音输入的搜索框">
</div> </div>
<form class="mui-input-group"> <form class="mui-input-group">
<div class="mui-input-row"> <div class="mui-input-row">
<label>Input</label> <label>Input</label>
<input type="text" placeholder="普通输入框"> <input type="text" placeholder="普通输入框">
</div> </div>
<div class="mui-input-row"> <div class="mui-input-row">
...@@ -52,18 +52,20 @@ ...@@ -52,18 +52,20 @@
<label>Input</label> <label>Input</label>
<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">
<button class="mui-btn mui-btn-primary" onclick="return false;">确认</button>&nbsp;&nbsp;
<button class="mui-btn mui-btn-danger" onclick="return false;">取消</button>
</div>
</form> </form>
<div class="mui-input-row" style="margin: 10px 5px;"> <div class="mui-input-row" style="margin: 10px 5px;">
<textarea rows="5" placeholder="多行文本框"></textarea> <textarea rows="5" placeholder="多行文本框"></textarea>
</div> </div>
</div> </div>
</div> </div>
<style type="text/css"> <style type="text/css">
h5{ h5 {
margin: 5px 7px; margin: 5px 7px;
} }
</style> </style>
......
examples/hello-mui/examples/oa-grid.html
View file @ 94baca79
...@@ -69,7 +69,7 @@ ...@@ -69,7 +69,7 @@
</li> </li>
<li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3"> <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
<a href="#"> <a href="#">
<span class="mui-icon mui-icon-sms"><span class="mui-badge">5</span></span> <span class="mui-icon mui-icon-email"><span class="mui-badge">5</span></span>
<div class="mui-media-body"> <div class="mui-media-body">
Email Email
</div> </div>
...@@ -77,9 +77,9 @@ ...@@ -77,9 +77,9 @@
</li> </li>
<li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3"> <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
<a href="#"> <a href="#">
<span class="mui-icon mui-icon-calendar"></span> <span class="mui-icon mui-icon-contact"></span>
<div class="mui-media-body"> <div class="mui-media-body">
Calendar Contact
</div> </div>
</a> </a>
</li> </li>
...@@ -93,7 +93,7 @@ ...@@ -93,7 +93,7 @@
</li> </li>
<li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3"> <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
<a href="#"> <a href="#">
<span class="mui-icon mui-icon-category"></span> <span class="mui-icon mui-icon-list"></span>
<div class="mui-media-body"> <div class="mui-media-body">
Sort Sort
</div> </div>
...@@ -125,7 +125,7 @@ ...@@ -125,7 +125,7 @@
</li> </li>
<li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3"> <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
<a href="#"> <a href="#">
<span class="mui-icon mui-icon-cog"></span> <span class="mui-icon mui-icon-gear"></span>
<div class="mui-media-body"> <div class="mui-media-body">
Setting Setting
</div> </div>
......
examples/hello-mui/examples/offcanvas-left-plus-main.html
View file @ 94baca79
...@@ -135,6 +135,9 @@ ...@@ -135,6 +135,9 @@
width: '70%', width: '70%',
zindex: 9998 zindex: 9998
}, },
show:{
aniShow:'none'
},
waiting:{ waiting:{
autoShow:false autoShow:false
} }
......
examples/hello-mui/examples/offcanvas-right-plus-main.html
View file @ 94baca79
...@@ -128,10 +128,13 @@ ...@@ -128,10 +128,13 @@
id: 'offcanvas-plus-menu', id: 'offcanvas-plus-menu',
url: 'offcanvas-plus-menu.html', url: 'offcanvas-plus-menu.html',
styles: { styles: {
left: '30%', left: left,
width:'70%', width:'70%',
zindex: 9998 zindex: 9998
}, },
show:{
aniShow:'none'
},
waiting:{ waiting:{
autoShow:false autoShow:false
} }
......
examples/hello-mui/examples/popovers-with-cross-webviews-popover.html
View file @ 94baca79
...@@ -81,18 +81,20 @@ ...@@ -81,18 +81,20 @@
</div> </div>
<script> <script>
mui.init({ mui.init({
back : function() { back: function() {
var webview = plus.webview.currentWebview(); var webview = plus.webview.currentWebview();
var parent = webview.parent(); var parent = webview.parent();
if (parent) { if (parent) {
parent.hide('auto'); parent.hide('auto');
return false; return false;
}
} }
} })
}) (function($) {
document.addEventListener('plus:togglePopover', function() { document.addEventListener('plus:togglePopover', function() {
$('#popover').popover('toggle'); $('#popover').popover('toggle');
}); });
})(mui);
</script> </script>
</body> </body>
</html> </html>
\ No newline at end of file
examples/hello-mui/examples/popovers-with-cross-webviews.html
View file @ 94baca79
...@@ -31,16 +31,15 @@ ...@@ -31,16 +31,15 @@
<script> <script>
mui.plusReady(function() { mui.plusReady(function() {
var popover = plus.webview.create('popovers-with-cross-webviews-popover.html', null, { var popover = plus.webview.create('popovers-with-cross-webviews-popover.html', null, {
top : '45px', top: '45px',
bottom : 0 bottom: 0
}); });
plus.webview.currentWebview().append(popover); plus.webview.currentWebview().append(popover);
document.getElementById('M_Popover_Trigger').addEventListener('tap', function() { document.getElementById('M_Popover_Trigger').addEventListener('tap', function() {
//mui hack plus event //mui hack plus event
$.fire(popover, 'plus:togglePopover'); mui.fire(popover, 'plus:togglePopover');
}); });
}); });
</script> </script>
</body> </body>
</html> </html>
\ No newline at end of file
examples/hello-mui/examples/popovers-with-js-call.html
View file @ 94baca79
...@@ -24,46 +24,58 @@ ...@@ -24,46 +24,58 @@
<body> <body>
<style> <style>
.mui-popover{ .mui-popover {
top: 125px; top: 125px;
} }
</style> </style>
<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">Popovers</h1> <h1 class="mui-title">Popovers</h1>
</header> </header>
<div class="mui-content"> <div class="mui-content">
<div class="mui-content-padded"> <div class="mui-content-padded">
<a id="openPopover" class="mui-btn mui-btn-primary mui-btn-block">Open Popover</a> <a id="openPopover" class="mui-btn mui-btn-primary mui-btn-block">Open Popover</a>
</div> </div>
<div id="popover" class="mui-popover"> <div id="popover" class="mui-popover">
<div class="mui-content-padded"> <div class="mui-content-padded">
<a id="closePopover" class="mui-btn mui-btn-primary mui-btn-block">Close Popover</a> <a id="closePopover" class="mui-btn mui-btn-primary mui-btn-block">Close Popover</a>
</div> </div>
<ul class="mui-table-view"> <ul class="mui-table-view">
<li class="mui-table-view-cell"><a href="#">Item1</a></li> <li class="mui-table-view-cell"><a href="#">Item1</a>
<li class="mui-table-view-cell"><a href="#">Item2</a></li> </li>
<li class="mui-table-view-cell"><a href="#">Item3</a></li> <li class="mui-table-view-cell"><a href="#">Item2</a>
<li class="mui-table-view-cell"><a href="#">Item4</a></li> </li>
<li class="mui-table-view-cell"><a href="#">Item5</a></li> <li class="mui-table-view-cell"><a href="#">Item3</a>
<li class="mui-table-view-cell"><a href="#">Item6</a></li> </li>
<li class="mui-table-view-cell"><a href="#">Item7</a></li> <li class="mui-table-view-cell"><a href="#">Item4</a>
<li class="mui-table-view-cell"><a href="#">Item8</a></li> </li>
<li class="mui-table-view-cell"><a href="#">Item9</a></li> <li class="mui-table-view-cell"><a href="#">Item5</a>
<li class="mui-table-view-cell"><a href="#">Item10</a></li> </li>
</ul> <li class="mui-table-view-cell"><a href="#">Item6</a>
</div> </li>
<li class="mui-table-view-cell"><a href="#">Item7</a>
</li>
<li class="mui-table-view-cell"><a href="#">Item8</a>
</li>
<li class="mui-table-view-cell"><a href="#">Item9</a>
</li>
<li class="mui-table-view-cell"><a href="#">Item10</a>
</li>
</ul>
</div>
</div> </div>
<script> <script>
document.getElementById('openPopover').addEventListener('tap', function() { document.getElementById('openPopover').addEventListener('tap', function() {
$('#popover').popover('show', {left: 100, right: 200}); mui('#popover').popover('show', {
//$('#popover').popover('toggle');//也可以直接调用toggle。该方法自动识别是显示还是隐藏 left: 100,
}); right: 200
document.getElementById('closePopover').addEventListener('tap', function() { });
$('#popover').popover('hide'); //$('#popover').popover('toggle');//也可以直接调用toggle。该方法自动识别是显示还是隐藏
//$('#popover').popover('toggle');//也可以直接调用toggle。该方法自动识别是显示还是隐藏 });
}); document.getElementById('closePopover').addEventListener('tap', function() {
mui('#popover').popover('hide');
//$('#popover').popover('toggle');//也可以直接调用toggle。该方法自动识别是显示还是隐藏
});
</script> </script>
</body> </body>
......
examples/hello-mui/examples/preload.html
View file @ 94baca79
...@@ -43,62 +43,63 @@ ...@@ -43,62 +43,63 @@
<script> <script>
//通过init传递当前页面要打开的窗口配置(支持预加载窗口和非预加载窗口，后续只需openWindow传递该窗口id即可) //通过init传递当前页面要打开的窗口配置(支持预加载窗口和非预加载窗口，后续只需openWindow传递该窗口id即可)
mui.init({ mui.init({
preloadLimit : 10, //预加载窗口的数量限制(默认为10，超出数量后，先进先出，始终仅保持10个隐藏状态的预加载窗口) preloadLimit: 10, //预加载窗口的数量限制(默认为10，超出数量后，先进先出，始终仅保持10个隐藏状态的预加载窗口)
preloadPages : [//指定webview列表 preloadPages: [ //指定webview列表
{ {
//两个webview合成的预加载 //两个webview合成的预加载
id : 'preloadMixWebview', //可选ID，未设置的话使用URL作为窗口ID id: 'preloadMixWebview', //可选ID，未设置的话使用URL作为窗口ID
url : 'preload-mixwebview-main.html', url: 'preload-mixwebview-main.html',
subpages : [{ subpages: [{
id : 'preloadMixWebviewContent', id: 'preloadMixWebviewContent',
url : 'preload-mixwebview-content.html', url: 'preload-mixwebview-content.html',
styles : { styles: {
top : '45px' top: '45px'
}, },
}] }]
}, { }, {
id : 'preloadWebview', //可选ID，未设置的话使用URL作为窗口ID id: 'preloadWebview', //可选ID，未设置的话使用URL作为窗口ID
url : 'preload-webview.html', url: 'preload-webview.html',
styles : { styles: {},
}, afterShowMethodName: 'preload_webview', //跨webview的js call,不应该有这种东西，应该5+触发afterShow，预加载窗口监听实现
afterShowMethodName : 'preload_webview', //跨webview的js call,不应该有这种东西，应该5+触发afterShow，预加载窗口监听实现
}]
});
//点击打开mix窗口(两个webview合成的预加载窗口)
document.getElementById('M_InitMix').addEventListener('tap', function() {
//直接根据窗口ID，打开之前已经设置了的窗口
$.openWindow('preloadMixWebview', {
params : {
count : 10
} }
}); ]
}); });
//点击打开窗口 (function($) {
document.getElementById('M_Init').addEventListener('tap', function() { //点击打开mix窗口(两个webview合成的预加载窗口)
//直接根据窗口ID，打开之前已经设置了的窗口 document.getElementById('M_InitMix').addEventListener('tap', function() {
$.openWindow('preloadWebview', { //直接根据窗口ID，打开之前已经设置了的窗口
params : { $.openWindow('preloadMixWebview', {
count : 10 params: {
} count: 10
}
});
});
//点击打开窗口
document.getElementById('M_Init').addEventListener('tap', function() {
//直接根据窗口ID，打开之前已经设置了的窗口
$.openWindow('preloadWebview', {
params: {
count: 10
}
});
}); });
});
document.getElementById('M_OpenWindowByOptions').addEventListener('tap', function() { document.getElementById('M_OpenWindowByOptions').addEventListener('tap', function() {
//通过openWindow传递要打开的窗口参数( //通过openWindow传递要打开的窗口参数(
//非预加载窗口打开,会自动缓存该页面的配置信息,后续可直接使用ID打开 //非预加载窗口打开,会自动缓存该页面的配置信息,后续可直接使用ID打开
//预加载窗口,本次打开非预加载，以后打开为预加载 //预加载窗口,本次打开非预加载，以后打开为预加载
$.openWindow({ $.openWindow({
id : 'preloadWebviewByOpenWindow', id: 'preloadWebviewByOpenWindow',
url : 'preload-webview-with-openwindow.html', url: 'preload-webview-with-openwindow.html',
preload : true, preload: true,
styles : { styles: {},
}, params: {
params : { count: 10
count : 10 },
}, afterShowMethodName: 'preload_webview' //跨webview的js call,不应该有这种东西，应该5+触发afterShow，预加载窗口监听实现
afterShowMethodName : 'preload_webview'//跨webview的js call,不应该有这种东西，应该5+触发afterShow，预加载窗口监听实现 });
}); });
}); })(mui);
</script> </script>
</body> </body>
......
examples/hello-mui/examples/pulldown.html
View file @ 94baca79
...@@ -24,116 +24,127 @@ ...@@ -24,116 +24,127 @@
<body> <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 id="pullrefresh" class="mui-content mui-scroll-wrapper">
<div class="mui-content-padded"> <div class="mui-scroll">
<ul class="mui-table-view mui-table-view-chevron"> <ul class="mui-table-view mui-table-view-chevron">
<li class="mui-table-view-cell"> <li class="mui-table-view-cell">
<a class="mui-navigate-right"> <a class="mui-navigate-right">
Item 1 Item 1
</a> </a>
</li> </li>
<li class="mui-table-view-cell"> <li class="mui-table-view-cell">
<a class="mui-navigate-right"> <a class="mui-navigate-right">
Item 2 Item 2
</a> </a>
</li> </li>
<li class="mui-table-view-cell"> <li class="mui-table-view-cell">
<a class="mui-navigate-right"> <a class="mui-navigate-right">
Item 3 Item 3
</a> </a>
</li> </li>
<li class="mui-table-view-cell"> <li class="mui-table-view-cell">
<a class="mui-navigate-right"> <a class="mui-navigate-right">
Item 4 Item 4
</a> </a>
</li> </li>
<li class="mui-table-view-cell"> <li class="mui-table-view-cell">
<a class="mui-navigate-right"> <a class="mui-navigate-right">
Item 5 Item 5
</a> </a>
</li> </li>
<li class="mui-table-view-cell"> <li class="mui-table-view-cell">
<a class="mui-navigate-right"> <a class="mui-navigate-right">
Item 6 Item 6
</a> </a>
</li> </li>
<li class="mui-table-view-cell"> <li class="mui-table-view-cell">
<a class="mui-navigate-right"> <a class="mui-navigate-right">
Item 7 Item 7
</a> </a>
</li> </li>
<li class="mui-table-view-cell"> <li class="mui-table-view-cell">
<a class="mui-navigate-right"> <a class="mui-navigate-right">
Item 8 Item 8
</a> </a>
</li> </li>
<li class="mui-table-view-cell"> <li class="mui-table-view-cell">
<a class="mui-navigate-right"> <a class="mui-navigate-right">
Item 9 Item 9
</a> </a>
</li> </li>
<li class="mui-table-view-cell"> <li class="mui-table-view-cell">
<a class="mui-navigate-right"> <a class="mui-navigate-right">
Item 10 Item 10
</a> </a>
</li> </li>
<li class="mui-table-view-cell"> <li class="mui-table-view-cell">
<a class="mui-navigate-right"> <a class="mui-navigate-right">
Item 11
Item 11
</a> </a>
</li> </li>
<li class="mui-table-view-cell"> <li class="mui-table-view-cell">
<a class="mui-navigate-right"> <a class="mui-navigate-right">
Item 12
Item 12
</a> </a>
</li> </li>
<li class="mui-table-view-cell"> <li class="mui-table-view-cell">
<a class="mui-navigate-right"> <a class="mui-navigate-right">
Item 13
Item 13
</a> </a>
</li> </li>
<li class="mui-table-view-cell"> <li class="mui-table-view-cell">
<a class="mui-navigate-right"> <a class="mui-navigate-right">
Item 14
Item 14
</a> </a>
</li> </li>
<li class="mui-table-view-cell"> <li class="mui-table-view-cell">
<a class="mui-navigate-right"> <a class="mui-navigate-right">
Item 15
Item 15
</a> </a>
</li> </li>
</ul> </ul>
</div> </div>
</div> </div>
<script> <script>
mui.init({ mui.init({
swipeBack: false, swipeBack: false,
pullRefresh: { pullRefresh: {
container: '.mui-content-padded', container: '#pullrefresh',
down: { down: {
callback: pullupRefresh callback: pulldownRefresh
} }
} }
}); });
/** /**
* 上拉加载具体业务实现 * 下拉刷新具体业务实现
*/ */
function pullupRefresh(callback) { function pulldownRefresh() {
setTimeout(function() { var self = this;
callback(); //refresh completed setTimeout(function() {
var table = document.body.querySelector('.mui-table-view'); self.endPulldownToRefresh(); //refresh completed
var cells = document.body.querySelectorAll('.mui-table-view-cell'); var table = document.body.querySelector('.mui-table-view');
for (var i = cells.length, len = i + 3; i < len; i++) { var cells = document.body.querySelectorAll('.mui-table-view-cell');
var li = document.createElement('li'); for (var i = cells.length, len = i + 3; i < len; i++) {
li.className = 'mui-table-view-cell'; var li = document.createElement('li');
li.innerHTML = '<a class="mui-navigate-right">Item ' + (i + 1) + '</a>'; li.className = 'mui-table-view-cell';
table.insertBefore(li,table.firstElementChild); li.innerHTML = '<a class="mui-navigate-right">Item ' + (i + 1) + '</a>';
} table.insertBefore(li, table.firstElementChild);
}, 2000); }
}, 2000);
} }
</script> </script>
</body> </body>
......
examples/hello-mui/examples/pullrefresh-content.html
View file @ 94baca79
...@@ -23,8 +23,8 @@ ...@@ -23,8 +23,8 @@
<body> <body>
<div class="mui-content"> <div id="pullrefresh" class="mui-content mui-scroll-wrapper">
<div class="mui-content-padded"> <div class="mui-scroll">
<ul class="mui-table-view mui-table-view-chevron"> <ul class="mui-table-view mui-table-view-chevron">
<li class="mui-table-view-cell"> <li class="mui-table-view-cell">
<a class="mui-navigate-right"> <a class="mui-navigate-right">
...@@ -106,51 +106,54 @@ ...@@ -106,51 +106,54 @@
</div> </div>
<script> <script>
mui.init({ mui.init({
swipeBack:false, swipeBack: false,
pullRefresh: { pullRefresh: {
container: '.mui-content-padded', container: '#pullrefresh',
down: { down: {
callback:pulldownRefresh callback: pulldownRefresh
}, },
up: { up: {
contentrefresh: '正在加载...', contentrefresh: '正在加载...',
callback: pullupRefresh callback: pullupRefresh
} }
} }
}); });
/** /**
* 下拉刷新具体业务实现 * 下拉刷新具体业务实现
*/ */
function pulldownRefresh(callback){ function pulldownRefresh() {
setTimeout(function() { var self = this;
var table = document.body.querySelector('.mui-table-view'); setTimeout(function() {
var cells = document.body.querySelectorAll('.mui-table-view-cell'); var table = document.body.querySelector('.mui-table-view');
for (var i = cells.length, len = i + 3; i < len; i++) { var cells = document.body.querySelectorAll('.mui-table-view-cell');
var li = document.createElement('li'); for (var i = cells.length, len = i + 3; i < len; i++) {
li.className = 'mui-table-view-cell'; var li = document.createElement('li');
li.innerHTML = '<a class="mui-navigate-right">Item ' + (i + 1) + '</a>'; li.className = 'mui-table-view-cell';
//下拉刷新，新纪录插到最前面； li.innerHTML = '<a class="mui-navigate-right">Item ' + (i + 1) + '</a>';
table.insertBefore(li, table.firstChild); //下拉刷新，新纪录插到最前面；
} table.insertBefore(li, table.firstChild);
callback(); //refresh completed }
}, 1500); self.endPulldownToRefresh(); //refresh completed
} }, 1500);
/** }
* 上拉加载具体业务实现 var count = 0;
*/ /**
function pullupRefresh(callback){ * 上拉加载具体业务实现
setTimeout(function() { */
callback(); //refresh completed function pullupRefresh() {
var table = document.body.querySelector('.mui-table-view'); var self = this;
var cells = document.body.querySelectorAll('.mui-table-view-cell'); setTimeout(function() {
for (var i = cells.length, len = i + 3; i < len; i++) { self.endPullupToRefresh((++count > 2)); //参数为true代表没有更多数据了。
var li = document.createElement('li'); var table = document.body.querySelector('.mui-table-view');
li.className = 'mui-table-view-cell'; var cells = document.body.querySelectorAll('.mui-table-view-cell');
li.innerHTML = '<a class="mui-navigate-right">Item ' + (i + 1) + '</a>'; for (var i = cells.length, len = i + 3; i < len; i++) {
table.appendChild(li); var li = document.createElement('li');
} li.className = 'mui-table-view-cell';
}, 1500); li.innerHTML = '<a class="mui-navigate-right">Item ' + (i + 1) + '</a>';
} table.appendChild(li);
}
}, 1500);
}
</script> </script>
</body> </body>
</html> </html>
\ No newline at end of file
examples/hello-mui/examples/pullrefresh-down-content.html
View file @ 94baca79
...@@ -23,8 +23,8 @@ ...@@ -23,8 +23,8 @@
<body> <body>
<div class="mui-content"> <div id="pullrefresh" class="mui-content mui-scroll-wrapper">
<div class="mui-content-padded"> <div class="mui-scroll">
<ul id='list' 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"> <li class="mui-table-view-cell">
<a class="mui-navigate-right"> <a class="mui-navigate-right">
...@@ -61,16 +61,16 @@ ...@@ -61,16 +61,16 @@
</div> </div>
<script> <script>
mui.init({ mui.init({
pullRefresh : { pullRefresh: {
container: '#list', container: '#pullrefresh',
down : { down: {
callback :pulldownRefresh callback: pulldownRefresh
} }
} }
}); });
function pulldownRefresh() {
function pulldownRefresh(callback) { var self = this;
setTimeout(function() { setTimeout(function() {
var table = document.body.querySelector('.mui-table-view'); var table = document.body.querySelector('.mui-table-view');
var cells = document.body.querySelectorAll('.mui-table-view-cell'); var cells = document.body.querySelectorAll('.mui-table-view-cell');
...@@ -81,10 +81,9 @@ ...@@ -81,10 +81,9 @@
table.insertBefore(li, table.firstChild); table.insertBefore(li, table.firstChild);
} }
//refresh completed 这行代码必须调用 //refresh completed 这行代码必须调用
callback(); self.endPulldownToRefresh();
}, 1000); }, 1000);
} }
</script> </script>
</body> </body>
</html> </html>
\ No newline at end of file
examples/hello-mui/examples/pullup.html
View file @ 94baca79
...@@ -24,60 +24,111 @@ ...@@ -24,60 +24,111 @@
<body> <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 id="pullrefresh" class="mui-content mui-scroll-wrapper">
<div class="mui-content-padded"> <div class="mui-scroll">
<ul class="mui-table-view mui-table-view-chevron"> <ul class="mui-table-view mui-table-view-chevron">
<li class="mui-table-view-cell"> <li class="mui-table-view-cell">
<a class="mui-navigate-right"> <a class="mui-navigate-right">
Item 1 Item 1
</a> </a>
</li> </li>
<li class="mui-table-view-cell"> <li class="mui-table-view-cell">
<a class="mui-navigate-right"> <a class="mui-navigate-right">
Item 2 Item 2
</a> </a>
</li> </li>
<li class="mui-table-view-cell"> <li class="mui-table-view-cell">
<a class="mui-navigate-right"> <a class="mui-navigate-right">
Item 3 Item 3
</a> </a>
</li> </li>
<li class="mui-table-view-cell">
</ul> <a class="mui-navigate-right">
</div> 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> </div>
<script> <script>
mui.init({ mui.init({
swipeBack: false, swipeBack: false,
pullRefresh: { pullRefresh: {
container: '.mui-content-padded', container: '#pullrefresh',
up: { up: {
contentdown: '上拉显示更多', contentdown: '上拉显示更多',
contentover: '释放立即刷新', contentrefresh: '正在加载...',
contentrefresh: '正在加载...', callback: pullupRefresh
callback: pullupRefresh }
} }
} });
}); var count = 0;
/**
/** * 上拉加载具体业务实现
* 上拉加载具体业务实现 */
*/ function pullupRefresh() {
function pullupRefresh(callback) { var self = this;
setTimeout(function() { setTimeout(function() {
callback(); //refresh completed self.endPullupToRefresh((++count > 2)); //参数为true代表没有更多数据了。
var table = document.body.querySelector('.mui-table-view'); var table = document.body.querySelector('.mui-table-view');
var cells = document.body.querySelectorAll('.mui-table-view-cell'); var cells = document.body.querySelectorAll('.mui-table-view-cell');
for (var i = cells.length, len = i + 3; i < len; i++) { for (var i = cells.length, len = i + 3; i < len; i++) {
var li = document.createElement('li'); var li = document.createElement('li');
li.className = 'mui-table-view-cell'; li.className = 'mui-table-view-cell';
li.innerHTML = '<a class="mui-navigate-right">Item ' + (i + 1) + '</a>'; li.innerHTML = '<a class="mui-navigate-right">Item ' + (i + 1) + '</a>';
table.appendChild(li); table.appendChild(li);
} }
}, 2000); }, 600);
} }
</script> </script>
</body> </body>
......
examples/hello-mui/examples/slider-default.html
View file @ 94baca79
...@@ -38,32 +38,38 @@ ...@@ -38,32 +38,38 @@
</ul> </ul>
<div id="slider" class="mui-slider"> <div id="slider" class="mui-slider">
<div class="mui-slider-group mui-slider-loop"> <div class="mui-slider-group mui-slider-loop">
<div class="mui-slider-item"> <!-- 额外增加的一个节点(循环轮播：第一个节点是最后一张轮播) -->
<div class="mui-slider-item mui-slider-item-duplicate">
<a href="#"> <a href="#">
<img src="../images/yuantiao.jpg"> <img src="../images/yuantiao.jpg">
</a> </a>
</div> </div>
<!-- 第一张 -->
<div class="mui-slider-item"> <div class="mui-slider-item">
<a href="#"> <a href="#">
<img src="../images/shuijiao.jpg"> <img src="../images/shuijiao.jpg">
</a> </a>
</div> </div>
<!-- 第二张 -->
<div class="mui-slider-item"> <div class="mui-slider-item">
<a href="#"> <a href="#">
<img src="../images/muwu.jpg"> <img src="../images/muwu.jpg">
</a> </a>
</div> </div>
<!-- 第三张 -->
<div class="mui-slider-item"> <div class="mui-slider-item">
<a href="#"> <a href="#">
<img src="../images/cbd.jpg"> <img src="../images/cbd.jpg">
</a> </a>
</div> </div>
<!-- 第四张 -->
<div class="mui-slider-item"> <div class="mui-slider-item">
<a href="#"> <a href="#">
<img src="../images/yuantiao.jpg"> <img src="../images/yuantiao.jpg">
</a> </a>
</div> </div>
<div class="mui-slider-item"> <!-- 额外增加的一个节点(循环轮播：最后一个节点是第一张轮播) -->
<div class="mui-slider-item mui-slider-item-duplicate">
<a href="#"> <a href="#">
<img src="../images/shuijiao.jpg"> <img src="../images/shuijiao.jpg">
</a> </a>
...@@ -82,14 +88,14 @@ ...@@ -82,14 +88,14 @@
document.getElementById("switch").addEventListener('toggle', function(e) { document.getElementById("switch").addEventListener('toggle', function(e) {
if (e.detail.isActive) { if (e.detail.isActive) {
slider.slider({ slider.slider({
slideshowDelay: 5000 interval: 5000
}); });
} else { } else {
slider.slider({ slider.slider({
slideshowDelay: 0 interval: 0
}); });
} }
}); });
</script> </script>
......
examples/hello-mui/examples/slider-table-pagination.html
View file @ 94baca79
...@@ -30,7 +30,8 @@ ...@@ -30,7 +30,8 @@
<div class="mui-content"> <div class="mui-content">
<div class="mui-slider"> <div class="mui-slider">
<div class="mui-slider-group mui-slider-loop"> <div class="mui-slider-group mui-slider-loop">
<div class="mui-slider-item"> <!-- 额外增加的一个节点(循环轮播：第一个节点是最后一个图文表格) -->
<div class="mui-slider-item mui-slider-item-duplicate">
<ul class="mui-table-view mui-grid-view"> <ul class="mui-table-view mui-grid-view">
<li class="mui-table-view-cell mui-media mui-col-xs-6"><a href="#"><img class="mui-media-object" src="../images/cbd.jpg"> <li class="mui-table-view-cell mui-media mui-col-xs-6"><a href="#"><img class="mui-media-object" src="../images/cbd.jpg">
<div class="mui-media-body">Color of SIP CBD</div></a></li> <div class="mui-media-body">Color of SIP CBD</div></a></li>
...@@ -54,7 +55,8 @@ ...@@ -54,7 +55,8 @@
<div class="mui-media-body">静静看这世界</div></a></li> <div class="mui-media-body">静静看这世界</div></a></li>
</ul> </ul>
</div> </div>
<div class="mui-slider-item"> <!-- 额外增加的一个节点(循环轮播：最后一个节点是第一个图文表格) -->
<div class="mui-slider-item mui-slider-item-duplicate">
<ul class="mui-table-view mui-grid-view"> <ul class="mui-table-view mui-grid-view">
<li class="mui-table-view-cell mui-media mui-col-xs-6"><a href="#"><img class="mui-media-object" src="../images/shuijiao.jpg"> <li class="mui-table-view-cell mui-media mui-col-xs-6"><a href="#"><img class="mui-media-object" src="../images/shuijiao.jpg">
<div class="mui-media-body">幸福就是可以一起睡觉</div></a></li> <div class="mui-media-body">幸福就是可以一起睡觉</div></a></li>
......
examples/hello-mui/examples/slider-with-title.html
View file @ 94baca79
...@@ -38,7 +38,8 @@ ...@@ -38,7 +38,8 @@
</ul> </ul>
<div id="slider" class="mui-slider"> <div id="slider" class="mui-slider">
<div class="mui-slider-group mui-slider-loop"> <div class="mui-slider-group mui-slider-loop">
<div class="mui-slider-item"> <!-- 额外增加的一个节点(循环轮播：第一个节点是最后一张轮播) -->
<div class="mui-slider-item mui-slider-item-duplicate">
<a href="#"> <a href="#">
<img src="../images/yuantiao.jpg"> <img src="../images/yuantiao.jpg">
<p class="mui-slider-title">静静看这世界</p> <p class="mui-slider-title">静静看这世界</p>
...@@ -68,7 +69,8 @@ ...@@ -68,7 +69,8 @@
<p class="mui-slider-title">静静看这世界</p> <p class="mui-slider-title">静静看这世界</p>
</a> </a>
</div> </div>
<div class="mui-slider-item"> <!-- 额外增加的一个节点(循环轮播：最后一个节点是第一张轮播) -->
<div class="mui-slider-item mui-slider-item-duplicate">
<a href="#"> <a href="#">
<img src="../images/shuijiao.jpg"> <img src="../images/shuijiao.jpg">
<p class="mui-slider-title">幸福就是可以一起睡觉</p> <p class="mui-slider-title">幸福就是可以一起睡觉</p>
...@@ -88,11 +90,11 @@ ...@@ -88,11 +90,11 @@
document.getElementById("switch").addEventListener('toggle', function(e) { document.getElementById("switch").addEventListener('toggle', function(e) {
if (e.detail.isActive) { if (e.detail.isActive) {
slider.slider({ slider.slider({
slideshowDelay: 5000 interval: 5000
}); });
} else { } else {
slider.slider({ slider.slider({
slideshowDelay: 0 interval: 0
}); });
} }
}); });
......
examples/hello-mui/examples/tableviews-with-collapses.html
View file @ 94baca79
...@@ -24,37 +24,48 @@ ...@@ -24,37 +24,48 @@
<body> <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 class="mui-card"> <div class="mui-card">
<ul class="mui-table-view mui-table-view-chevron"> <ul class="mui-table-view mui-table-view-chevron">
<li class="mui-table-view-cell mui-hidden">cared <li class="mui-table-view-cell mui-hidden">cared
<div id="M_Toggle" class="mui-switch mui-active"> <div id="M_Toggle" class="mui-switch mui-active">
<div class="mui-switch-handle"></div> <div class="mui-switch-handle"></div>
</div> </div>
</li> </li>
<li class="mui-table-view-cell mui-collapse"><a class="mui-navigate-right" href="#">产品</a> <li class="mui-table-view-cell mui-collapse"><a class="mui-navigate-right" href="#">产品</a>
<ul class="mui-table-view mui-table-view-chevron"> <ul class="mui-table-view mui-table-view-chevron">
<li class="mui-table-view-cell"><a class="mui-navigate-right" href="#">iOS</a></li> <li class="mui-table-view-cell"><a class="mui-navigate-right" href="#">iOS</a>
<li class="mui-table-view-cell"><a class="mui-navigate-right" href="#">Android</a></li> </li>
<li class="mui-table-view-cell"><a class="mui-navigate-right" href="#">HTML5</a></li> <li class="mui-table-view-cell"><a class="mui-navigate-right" href="#">Android</a>
</ul></li> </li>
<li class="mui-table-view-cell mui-collapse"><a class="mui-navigate-right" href="#">方案</a> <li class="mui-table-view-cell"><a class="mui-navigate-right" href="#">HTML5</a>
<ul class="mui-table-view mui-table-view-chevron"> </li>
<li class="mui-table-view-cell"><a class="mui-navigate-right" href="#">PC方案</a></li> </ul>
<li class="mui-table-view-cell"><a class="mui-navigate-right" href="#">手机方案</a></li> </li>
<li class="mui-table-view-cell"><a class="mui-navigate-right" href="#">TV方案</a></li> <li class="mui-table-view-cell mui-collapse"><a class="mui-navigate-right" href="#">方案</a>
</ul></li> <ul class="mui-table-view mui-table-view-chevron">
<li class="mui-table-view-cell mui-collapse"><a class="mui-navigate-right" href="#">新闻</a> <li class="mui-table-view-cell"><a class="mui-navigate-right" href="#">PC方案</a>
<ul class="mui-table-view mui-table-view-chevron"> </li>
<li class="mui-table-view-cell"><a class="mui-navigate-right" href="#">公司新闻</a></li> <li class="mui-table-view-cell"><a class="mui-navigate-right" href="#">手机方案</a>
<li class="mui-table-view-cell"><a class="mui-navigate-right" href="#">行业新闻</a></li> </li>
</ul></li> <li class="mui-table-view-cell"><a class="mui-navigate-right" href="#">TV方案</a>
</ul> </li>
</div> </ul>
</li>
<li class="mui-table-view-cell mui-collapse"><a class="mui-navigate-right" href="#">新闻</a>
<ul class="mui-table-view mui-table-view-chevron">
<li class="mui-table-view-cell"><a class="mui-navigate-right" href="#">公司新闻</a>
</li>
<li class="mui-table-view-cell"><a class="mui-navigate-right" href="#">行业新闻</a>
</li>
</ul>
</li>
</ul>
</div>
</div> </div>
</body> </body>
</html> </html>
\ No newline at end of file
examples/hello-mui/examples/tableviews-with-swipe.html
View file @ 94baca79
...@@ -322,9 +322,6 @@ ...@@ -322,9 +322,6 @@
</ul> </ul>
</div> </div>
<script> <script>
mui.init({
swipeBack : false
});
(function($) { (function($) {
var btnArray = ['确认','取消']; var btnArray = ['确认','取消'];
$('#OA_task_1').on('tap', '.oa-task-action', function() { $('#OA_task_1').on('tap', '.oa-task-action', function() {
......
examples/hello-mui/examples/titlebar-with-buttons.html
View file @ 94baca79
...@@ -37,7 +37,7 @@ ...@@ -37,7 +37,7 @@
</div> </div>
<script> <script>
document.getElementById('M_Menu').addEventListener('tap', function() { document.getElementById('M_Menu').addEventListener('tap', function() {
alert('你刚点了按钮'); mui.alert('你刚点了按钮');
}); });
</script> </script>
</body> </body>
......
examples/hello-mui/js/mui.min.js
View file @ 94baca79
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 @ 94baca79
This diff is collapsed.
examples/hello-mui/js/mui.tpl.min.js
View file @ 94baca79
This diff is collapsed.
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