Skip to content

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

提交plus版上拉加载

parent e0a84d5d
Expand all Show whitespace changes
Inline Side-by-side
Showing with 11478 additions and 229 deletions
dist/css/mui.css
View file @ b7e57d1e
...@@ -2650,7 +2650,7 @@ select { ...@@ -2650,7 +2650,7 @@ select {
.mui-pull-bottom-pocket .mui-pull-loading { .mui-pull-bottom-pocket .mui-pull-loading {
display: none; display: none;
} }
.mui-pull-bottom-pocket .mui-pull-loading.mui-in { .mui-pull-bottom-pocket .mui-pull-loading.mui-active {
display: inline-block; display: inline-block;
} }
......
dist/css/mui.min.css
View file @ b7e57d1e
This source diff could not be displayed because it is too large. You can view the blob instead.
dist/js/mui.js
View file @ b7e57d1e
This diff is collapsed.
dist/js/mui.min.js
View file @ b7e57d1e
This diff is collapsed.
dist/js/mui.tpl.js 0 → 100644
View file @ b7e57d1e
This source diff could not be displayed because it is too large. You can view the blob instead.
dist/js/mui.tpl.min.js 0 → 100644
View file @ b7e57d1e
This diff is collapsed.
examples/hello-mui/css/mui.min.css
View file @ b7e57d1e
This source diff could not be displayed because it is too large. You can view the blob instead.
examples/hello-mui/examples/pulldown-and-pullup.html → examples/hello-mui/examples/pullrefresh-content.html
View file @ b7e57d1e
...@@ -23,15 +23,56 @@ ...@@ -23,15 +23,56 @@
<body> <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">Pulldown and pullup</h1>
</header>
<div class="mui-content"> <div class="mui-content">
<div class="mui-content-padded"> <div class="mui-content-padded">
<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 15
</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 13
</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 11
</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 9
</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 7
</a>
</li>
<li class="mui-table-view-cell">
<a class="mui-navigate-right">
Item 6 Item 6
</a> </a>
</li> </li>
...@@ -70,15 +111,10 @@ ...@@ -70,15 +111,10 @@
pullRefresh: { pullRefresh: {
container: '.mui-content-padded', container: '.mui-content-padded',
down: { down: {
contentdown: '下拉可以刷新',
contentover: '释放立即刷新',
contentrefresh: '正在刷新...',
callback:pulldownRefresh callback:pulldownRefresh
}, },
up: { up: {
contentdown: '上拉显示更多', contentrefresh: '正在加载...',
contentover: '释放立即刷新',
contentrefresh: '正在刷新...',
callback: pullupRefresh callback: pullupRefresh
} }
} }
...@@ -98,13 +134,14 @@ ...@@ -98,13 +134,14 @@
table.insertBefore(li, table.firstChild); table.insertBefore(li, table.firstChild);
} }
callback(); //refresh completed callback(); //refresh completed
}, 1000); }, 1500);
} }
/** /**
* 上拉加载具体业务实现 * 上拉加载具体业务实现
*/ */
function pullupRefresh(callback){ function pullupRefresh(callback){
setTimeout(function() { setTimeout(function() {
callback(); //refresh completed
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++) {
...@@ -113,8 +150,7 @@ ...@@ -113,8 +150,7 @@
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);
} }
callback(); //refresh completed }, 1500);
}, 1000);
} }
</script> </script>
</body> </body>
......
examples/hello-mui/examples/titlebar-with-html5-and-5+.html → examples/hello-mui/examples/pullrefresh-main.html
View file @ b7e57d1e
...@@ -23,27 +23,20 @@ ...@@ -23,27 +23,20 @@
<body> <body>
<header class="mui-bar mui-bar-nav">
<a class="mui-action-back mui-icon mui-icon-back mui-pull-left"></a>
<h1 class="mui-title">下拉刷新、上拉加载</h1>
</header>
<script> <script>
mui.init({ mui.init({
optimize: false, subpages : [{
titleBar: { id : 'pullrefresh-content',
title: 'Title bar with 5+(html5)' url : 'pullrefresh-content.html',
} styles : {
}); top : '48px'
$.ready(function() {
$.get('pulldown.html', function(response) {
var wrap = document.createElement('div');
wrap.innerHTML = response;
var content = wrap.querySelector('.mui-content');
document.body.appendChild(content);
//动态执行html中的script代码
var scripts = wrap.querySelectorAll('script');
for (var i = 0, len = scripts.length; i < len; i++) {
var script = document.createElement("script");
script.text = scripts[i].innerHTML;
document.head.appendChild(script).parentNode.removeChild(script);
} }
}); }]
}); });
</script> </script>
</body> </body>
......
examples/hello-mui/examples/pullup.html
View file @ b7e57d1e
...@@ -25,7 +25,7 @@ ...@@ -25,7 +25,7 @@
<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">Pullup</h1> <h1 class="mui-title">上拉加载</h1>
</header> </header>
<div class="mui-content"> <div class="mui-content">
<div class="mui-content-padded"> <div class="mui-content-padded">
...@@ -60,6 +60,51 @@ ...@@ -60,6 +60,51 @@
Item 6 Item 6
</a> </a>
</li> </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> </ul>
</div> </div>
</div> </div>
...@@ -71,11 +116,12 @@ ...@@ -71,11 +116,12 @@
up: { up: {
contentdown: '上拉显示更多', contentdown: '上拉显示更多',
contentover: '释放立即刷新', contentover: '释放立即刷新',
contentrefresh: '正在刷新...', contentrefresh: '正在加载...',
callback: pullupRefresh callback: pullupRefresh
} }
} }
}); });
/** /**
* 上拉加载具体业务实现 * 上拉加载具体业务实现
*/ */
...@@ -90,7 +136,7 @@ ...@@ -90,7 +136,7 @@
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);
} }
}, 1000); }, 2000);
} }
</script> </script>
</body> </body>
......
examples/hello-mui/examples/slider-table-pagination.html
View file @ b7e57d1e
...@@ -64,11 +64,11 @@ ...@@ -64,11 +64,11 @@
</div> </div>
</div> </div>
<div class="mui-slider-indicator" style="position: static;background-color: #fff;"> <div class="mui-slider-indicator" style="position: static;background-color: #fff;">
<span class="mui-action mui-action-previous mui-icon mui-icon-left-nav"></span> <span class="mui-action mui-action-previous mui-icon mui-icon-back"></span>
<div class="mui-number"> <div class="mui-number">
<span>1</span> / 2 <span>1</span> / 2
</div> </div>
<span class="mui-action mui-action-next mui-icon mui-icon-right"></span> <span class="mui-action mui-action-next mui-icon mui-icon-forward"></span>
</div> </div>
</div> </div>
</div> </div>
......
examples/hello-mui/examples/test.html 0 → 100644
View file @ b7e57d1e
<!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/mui.tpl.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 id="tableview"></div>
<div id="slider"></div>
<div id="slider-table-pagination"></div>
<div id="grid"></div>
</div>
<script>
var tableview = [];
for (var i = 0; i < 10; i++) {
tableview.push({
title: '选项1',
//src: 'http://dcloudio.github.io/mui/assets/img/shuijiao.jpg',
//desc: '图片描述图片描述图片描述图片描述图片描述图片描述图片描述图片描述图片描述图片描述图片描述图片描述图片描述图片描述图片描述图片描述图片描述图片描述图片描述图片描述图片描述图片描述图片描述',
//ellipsis: 2,
//divider: false,
navigate: true,
striped: false, //二级列表
chevron: false, //二级列表
inverted: false, //二级列表
// badge:{
// text:'10',
// style:'primary'
// },
// btn:{
// text:'button',
// style:'primary'
// },
// switch: {
// style: 'primary',
// size:'mini',
// active: i % 3 == 1 ? false : true,
// },
// checkbox: {
// name: 'radio',
// value: i,
// },
tableview: [{
title: '子选项1'
}, {
title: '子选项2'
}, {
title: '子选项3'
}]
});
}
var slider = [];
var img1 = {
href: '',
src: 'http://dcloudio.github.io/mui/assets/img/shuijiao.jpg',
title: '图片1'
};
var img2 = {
href: '',
src: 'http://dcloudio.github.io/mui/assets/img/muwu.jpg',
title: '图片2'
};
var img3 = {
href: '',
src: 'http://dcloudio.github.io/mui/assets/img/cbd.jpg',
title: '图片3'
};
var img4 = {
href: '',
src: 'http://dcloudio.github.io/mui/assets/img/yuantiao.jpg',
title: '图片4'
};
slider.push(img1);
slider.push(img2);
slider.push(img3);
slider.push(img4);
var slidertable = [];
slidertable.push([img1, img2]);
slidertable.push([img3, img4]);
(function($) {
$(function() {
$('#tableview').tableview({
striped: true,
chevron: false,
inverted: false,
tableview: tableview,
});
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,
// });
});
})(mui);
</script>
</body>
</html>
\ No newline at end of file
examples/hello-mui/examples/titlebar-with-webview-and-5+.html deleted 100644 → 0
View file @ e0a84d5d
<!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>
<script>
mui.init({
titleBar: {
title: 'Title bar with 5+(webview)'
}
});
$.ready(function() {
$.get('pulldown-with-5+.html', function(response) {
document.body.innerHTML = response;
var padded = document.body.querySelector('.mui-content-padded');
if (padded) {
padded.style.marginTop = '0px';
}
//动态执行html中的script代码
var scripts = document.body.querySelectorAll('script');
for (var i = 0, len = scripts.length; i < len; i++) {
var script = document.createElement("script");
script.text = scripts[i].innerHTML;
document.head.appendChild(script).parentNode.removeChild(script);
}
//移除pulldown-with-5+.html的header
var header = document.body.querySelector('.mui-bar');
header.parentNode.removeChild(header);
});
});
</script>
</body>
</html>
\ No newline at end of file
examples/hello-mui/js/handlebars-v2.0.0.js 0 → 100644
View file @ b7e57d1e
This source diff could not be displayed because it is too large. You can view the blob instead.
examples/hello-mui/js/handlebars.runtime-v2.0.0.js 0 → 100644
View file @ b7e57d1e
This diff is collapsed.
examples/hello-mui/js/mui.min.js
View file @ b7e57d1e
This diff is collapsed.
examples/hello-mui/js/mui.tpl.js 0 → 100644
View file @ b7e57d1e
This diff is collapsed.
examples/hello-mui/js/mui.tpl.min.js 0 → 100644
View file @ b7e57d1e
This diff is collapsed.
examples/hello-mui/list.html
View file @ b7e57d1e
...@@ -328,7 +328,7 @@ ...@@ -328,7 +328,7 @@
</a> </a>
</li> </li>
<li class="mui-table-view-cell"> <li class="mui-table-view-cell">
<a class="mui-navigate-right" href="examples/pulldown-and-pullup.html"> <a class="mui-navigate-right" href="examples/pullrefresh-main.html">
同时支持下拉和上拉 同时支持下拉和上拉
</a> </a>
</li> </li>
...@@ -349,6 +349,16 @@ ...@@ -349,6 +349,16 @@
下拉刷新自定义样式 下拉刷新自定义样式
</a> </a>
</li> </li>
<li class="mui-table-view-cell ">
<a class="mui-navigate-right" href="examples/pullup.html">
上拉加载
</a>
</li>
<li class="mui-table-view-cell">
<a class="mui-navigate-right" href="examples/pullrefresh-main.html">
同时支持下拉和上拉
</a>
</li>
</ul> </ul>
</li> </li>
......
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