Skip to content

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

增加9宫格高亮

parent b7e57d1e
Expand all Hide whitespace changes
Inline Side-by-side
Showing with 357 additions and 171 deletions
dist/css/mui.css
View file @ 695328ee
......@@ -229,6 +229,7 @@ th {
-moz-box-sizing: border-box;
box-sizing: border-box;
-webkit-user-select: none;
outline: none;
-webkit-tap-highlight-color: transparent;
-webkit-tap-highlight-color: transparent;
......@@ -794,27 +795,29 @@ p {
}
}
.mui-spin {
-webkit-transform-origin: 50% 54%;
transform-origin: 50% 54%;
-webkit-transform-origin: 50% 50%;
transform-origin: 50% 50%;
-webkit-animation: spin 1s infinite linear;
animation: spin 1s infinite linear;
-webkit-animation-fill-mode: forwards;
}
@-webkit-keyframes spin {
0% {
from {
-webkit-transform: rotate(0deg);
}
100% {
99% {
-webkit-transform: rotate(360deg);
}
}
@keyframes spin {
0% {
from {
transform: rotate(0deg);
}
100% {
99% {
transform: rotate(360deg);
}
}
......@@ -1554,14 +1557,20 @@ input[type="submit"]:active, input[type="submit"].mui-active,
}
.mui-grid-view.mui-grid-9 {
padding: 0 0 1px 0;
padding-right: 0;
background-color: #f2f2f2;
}
.mui-grid-view.mui-grid-9 .mui-table-view-cell {
padding: 11px 15px;
margin: 0;
vertical-align: top;
border-top: 1px solid #eee;
border-left: 1px solid #eee;
}
.mui-grid-view.mui-grid-9 .mui-table-view-cell.mui-active {
background-color: #eee;
}
.mui-grid-view.mui-grid-9 .mui-table-view-cell > a:not(.mui-btn) {
padding: 15px;
}
......@@ -2650,7 +2659,7 @@ select {
.mui-pull-bottom-pocket .mui-pull-loading {
display: none;
}
.mui-pull-bottom-pocket .mui-pull-loading.mui-active {
.mui-pull-bottom-pocket .mui-pull-loading.mui-in {
display: inline-block;
}
......@@ -2678,7 +2687,7 @@ select {
.mui-pull-caption {
position: relative;
display: inline-block;
margin-top: -5px;
margin-top: 0;
margin-left: 10px;
overflow: visible;
font-size: 15px;
......
dist/css/mui.min.css
View file @ 695328ee
This source diff could not be displayed because it is too large. You can view the blob instead.
dist/js/mui.js
View file @ 695328ee
......@@ -1177,15 +1177,15 @@ window.mui = mui;
webview = $.webviews[id].webview;
} else { //新增预加载窗口
//preload
webview = plus.webview.create(options.url, id, $.windowOptions(options.styles), {
webview = plus.webview.create(options.url, id, $.windowOptions(options.styles), $.extend({
preload: true
});
},options.extras));
if (options.subpages) {
$.each(options.subpages, function(index, subpage) {
//TODO 子窗口也可能已经创建，比如公用模板的情况；
var subWebview = plus.webview.create(subpage.url, subpage.id || subpage.url, $.windowOptions(subpage.styles), {
var subWebview = plus.webview.create(subpage.url, subpage.id || subpage.url, $.windowOptions(subpage.styles), $.extend({
preload: true
});
},subpage.extras));
webview.append(subWebview);
});
}
......@@ -1219,10 +1219,10 @@ window.mui = mui;
}
} else {
if (isCreate !== false) { //直接创建非预加载窗口
webview = plus.webview.create(options.url, id, $.windowOptions(options.styles));
webview = plus.webview.create(options.url, id, $.windowOptions(options.styles),options.extras);
if (options.subpages) {
$.each(options.subpages, function(index, subpage) {
var subWebview = plus.webview.create(subpage.url, subpage.id || subpage.url, $.windowOptions(subpage.styles));
var subWebview = plus.webview.create(subpage.url, subpage.id || subpage.url, $.windowOptions(subpage.styles),subpage.extras);
webview.append(subWebview);
});
}
......@@ -1284,7 +1284,7 @@ window.mui = mui;
var webview;
if (!$.webviews[id]) { //保证执行一遍
//TODO 这里也有隐患，比如某个webview不是作为subpage创建的，而是作为target webview的话；
webview = plus.webview.create(options.url, id, options.styles);
webview = plus.webview.create(options.url, id, options.styles,options.extras);
//TODO 理论上，子webview也应该计算到预加载队列中，但这样就麻烦了，要退必须退整体，否则可能出现问题；
webview.addEventListener('loaded', function() {
$.currentWebview.append(webview);
......@@ -1567,37 +1567,76 @@ window.mui = mui;
PullRefresh.prototype.initEvent = function() {
var self = this;
if (self.bottomPocket) {
if($.os.plus){
var pocket = self.bottomPocket;
pocket.style.display = "none";
//图标需要显示出来
pocket.querySelector('.'+CLASS_PULL_LOADING).className = CLASS_LOADING +' mui-active';
//不需要这么多节点，只显示正在加载即可；
pocket.querySelector('.'+CLASS_PULL_CAPTION).removeChild(pocket.querySelector('.'+CLASS_PULL_CAPTION_DOWN));
pocket.querySelector('.'+CLASS_PULL_CAPTION).removeChild(pocket.querySelector('.'+CLASS_PULL_CAPTION_OVER));
pocket.querySelector('.'+CLASS_PULL_CAPTION_REFRESH).classList.add('mui-in');;
document.addEventListener('plusscrollbottom',function(){
if(self.isLoading) return;
self.isLoading = true;
pocket.style.display = "block";
var callback = self.options.up.callback;
callback && callback(function() {
pocket.style.display = "none";
self.isLoading = false;
});
},false);
}else{
if (self.options.up.draggable) {
self.element.addEventListener('dragup', function(e) {
self.dragUp(e);
});
} else {
var callback = self.options.up.callback;
if (callback) {
var scrolling = false;
var isLoading = false;
setInterval(function() {
if (scrolling) {
scrolling = false;
if (isLoading) return;
var scrollHeight = document.body.scrollHeight;
if (window.innerHeight + window.scrollY + 5 > scrollHeight) {
self.isLoading = isLoading = true;
$.gestures.stoped = true;
//window.scrollTo(0, scrollHeight);
self.pullOptions = self.options.up;
self.loading = self.bottomPocket.querySelector('.' + CLASS_PULL_LOADING);
self.setCaption(CLASS_PULL_CAPTION_REFRESH);
callback(function() {
self.isLoading = isLoading = false;
self.setCaption(CLASS_PULL_CAPTION_DOWN);
self.pullOptions = null;
});
}
}
}, 250);
window.addEventListener('scroll', function() {
scrolling = true;
});
window.addEventListener('touchmove', function() {
scrolling = true;
});
}
}
// if ($.os.plus) {
// var pocket = self.bottomPocket;
// pocket.style.display = "none";
// //图标需要显示出来
// pocket.querySelector('.' + CLASS_PULL_LOADING).className = CLASS_LOADING + ' mui-active';
// //不需要这么多节点，只显示正在加载即可；
// pocket.querySelector('.' + CLASS_PULL_CAPTION).removeChild(pocket.querySelector('.' + CLASS_PULL_CAPTION_DOWN));
// pocket.querySelector('.' + CLASS_PULL_CAPTION).removeChild(pocket.querySelector('.' + CLASS_PULL_CAPTION_OVER));
// pocket.querySelector('.' + CLASS_PULL_CAPTION_REFRESH).classList.add('mui-in');;
// document.addEventListener('plusscrollbottom', function() {
// if (self.isLoading) return;
// self.isLoading = true;
// pocket.style.display = "block";
// var callback = self.options.up.callback;
// callback && callback(function() {
// pocket.style.display = "none";
// self.isLoading = false;
// });
// }, false);
// } else {
// self.element.addEventListener('dragup', function(e) {
// self.dragUp(e);
// });
// }
}
if (self.topPocket) {
self.element.addEventListener('dragdown', function(e) {
self.dragDown(e);
});
}
if (self.bottomPocket || self.topPocket) {
if ((self.bottomPocket && self.options.up.draggable === true) || self.topPocket) {
self.element.addEventListener('dragstart', function(e) {
self.dragStart(e);
});
......@@ -1697,7 +1736,7 @@ window.mui = mui;
this.setTranslate(0);
//恢复到正常状态，下拉可刷新
this.setCaption(CLASS_PULL_CAPTION_DOWN);
if (this.pullOptions.height > 0) {
if (this.pullOptions && this.pullOptions.height > 0) {
this.loading.classList.remove(CLASS_REVERSE);
}
this.pullOptions = null;
......@@ -1782,8 +1821,11 @@ window.mui = mui;
this.loading.className = CLASS_LOADING_DOWN;
}
} else {
//上拉处理的有点简单了，即使纯H5版本，也需要分开处理；
this.loading.className = CLASS_LOADING;
if (className === CLASS_PULL_CAPTION_REFRESH) {
this.loading.className = CLASS_LOADING + ' ' + CLASS_IN;
} else {
this.loading.className = CLASS_LOADING;
}
}
}
};
......@@ -2919,6 +2961,7 @@ window.mui = mui;
var CLASS_ACTIVE = 'mui-active';
var CLASS_SELECTED = 'mui-selected';
var CLASS_GRID_VIEW = 'mui-grid-view';
var CLASS_TABLE_VIEW_CELL = 'mui-table-view-cell';
var CLASS_DISABLED = 'mui-disabled';
var CLASS_TOGGLE = 'mui-switch';
......@@ -3166,9 +3209,11 @@ window.mui = mui;
}
}
}
var link = cell.querySelector('a');
if (link && link.parentNode === cell) { //li>a
a = link;
if (!cell.parentNode.classList.contains(CLASS_GRID_VIEW)) {
var link = cell.querySelector('a');
if (link && link.parentNode === cell) { //li>a
a = link;
}
}
sliderCell = cell.querySelector(SELECTOR_SLIDER_CELL);
if (sliderCell && sliderCell.parentNode === cell) {
......
dist/js/mui.min.js
View file @ 695328ee
This diff is collapsed.
dist/js/mui.tpl.js
View file @ 695328ee
......@@ -3476,10 +3476,31 @@ Handlebars.registerPartial("tableviewcell", Handlebars.template({"1":function(de
if (stack1 != null) { buffer += stack1; }
stack1 = helpers['if'].call(depth0, (depth0 != null ? depth0.tableview : depth0), {"name":"if","hash":{},"fn":this.program(12, data),"inverse":this.noop,"data":data});
if (stack1 != null) { buffer += stack1; }
buffer += "\">\n";
stack1 = ((helpers.ifCond || (depth0 && depth0.ifCond) || helperMissing).call(depth0, (depth0 != null ? depth0.navigate : depth0), "||", (depth0 != null ? depth0.href : depth0), {"name":"ifCond","hash":{},"fn":this.program(14, data),"inverse":this.noop,"data":data}));
buffer += "\">\n ";
stack1 = ((helpers.ifCond || (depth0 && depth0.ifCond) || helperMissing).call(depth0, (depth0 != null ? depth0.title : depth0), "||", (depth0 != null ? depth0.src : depth0), {"name":"ifCond","hash":{},"fn":this.program(14, data),"inverse":this.program(26, data),"data":data}));
if (stack1 != null) { buffer += stack1; }
stack1 = helpers['if'].call(depth0, (depth0 != null ? depth0.tableview : depth0), {"name":"if","hash":{},"fn":this.program(28, data),"inverse":this.noop,"data":data});
if (stack1 != null) { buffer += stack1; }
return buffer + "\n</li>\n";
},"2":function(depth0,helpers,partials,data) {
return "divider";
},"4":function(depth0,helpers,partials,data) {
return "cell";
},"6":function(depth0,helpers,partials,data) {
return " mui-radio";
},"8":function(depth0,helpers,partials,data) {
return " mui-checkbox";
},"10":function(depth0,helpers,partials,data) {
var lambda=this.lambda, escapeExpression=this.escapeExpression;
return " mui-"
+ escapeExpression(lambda(depth0, depth0));
},"12":function(depth0,helpers,partials,data) {
return " mui-collapse";
},"14":function(depth0,helpers,partials,data) {
var stack1, helperMissing=helpers.helperMissing, buffer = " ";
stack1 = ((helpers.ifCond || (depth0 && depth0.ifCond) || helperMissing).call(depth0, (depth0 != null ? depth0.navigate : depth0), "||", (depth0 != null ? depth0.href : depth0), {"name":"ifCond","hash":{},"fn":this.program(15, data),"inverse":this.noop,"data":data}));
if (stack1 != null) { buffer += stack1; }
stack1 = ((helpers.ifCond || (depth0 && depth0.ifCond) || helperMissing).call(depth0, (depth0 != null ? depth0.src : depth0), "||", (depth0 != null ? depth0.desc : depth0), {"name":"ifCond","hash":{},"fn":this.program(19, data),"inverse":this.program(21, data),"data":data}));
stack1 = ((helpers.ifCond || (depth0 && depth0.ifCond) || helperMissing).call(depth0, (depth0 != null ? depth0.src : depth0), "||", (depth0 != null ? depth0.desc : depth0), {"name":"ifCond","hash":{},"fn":this.program(20, data),"inverse":this.program(22, data),"data":data}));
if (stack1 != null) { buffer += stack1; }
buffer += "\n";
stack1 = this.invokePartial(partials.badge, ' ', 'badge', depth0, undefined, helpers, partials, data);
......@@ -3500,51 +3521,39 @@ Handlebars.registerPartial("tableviewcell", Handlebars.template({"1":function(de
stack1 = this.invokePartial(partials.media, ' ', 'media', depth0, undefined, helpers, partials, data);
if (stack1 != null) { buffer += stack1; }
buffer += "\n";
stack1 = ((helpers.ifCond || (depth0 && depth0.ifCond) || helperMissing).call(depth0, (depth0 != null ? depth0.navigate : depth0), "||", (depth0 != null ? depth0.href : depth0), {"name":"ifCond","hash":{},"fn":this.program(23, data),"inverse":this.noop,"data":data}));
if (stack1 != null) { buffer += stack1; }
buffer += " ";
stack1 = helpers['if'].call(depth0, (depth0 != null ? depth0.tableview : depth0), {"name":"if","hash":{},"fn":this.program(25, data),"inverse":this.noop,"data":data});
stack1 = ((helpers.ifCond || (depth0 && depth0.ifCond) || helperMissing).call(depth0, (depth0 != null ? depth0.navigate : depth0), "||", (depth0 != null ? depth0.href : depth0), {"name":"ifCond","hash":{},"fn":this.program(24, data),"inverse":this.noop,"data":data}));
if (stack1 != null) { buffer += stack1; }
return buffer + "\n</li>\n";
},"2":function(depth0,helpers,partials,data) {
return "divider";
},"4":function(depth0,helpers,partials,data) {
return "cell";
},"6":function(depth0,helpers,partials,data) {
return " mui-radio";
},"8":function(depth0,helpers,partials,data) {
return " mui-checkbox";
},"10":function(depth0,helpers,partials,data) {
var lambda=this.lambda, escapeExpression=this.escapeExpression;
return " mui-"
+ escapeExpression(lambda(depth0, depth0));
},"12":function(depth0,helpers,partials,data) {
return " mui-collapse";
},"14":function(depth0,helpers,partials,data) {
var stack1, buffer = " <a class=\"";
stack1 = helpers['if'].call(depth0, (depth0 != null ? depth0.navigate : depth0), {"name":"if","hash":{},"fn":this.program(15, data),"inverse":this.noop,"data":data});
return buffer;
},"15":function(depth0,helpers,partials,data) {
var stack1, buffer = "\n <a class=\"";
stack1 = helpers['if'].call(depth0, (depth0 != null ? depth0.navigate : depth0), {"name":"if","hash":{},"fn":this.program(16, data),"inverse":this.noop,"data":data});
if (stack1 != null) { buffer += stack1; }
buffer += "\" ";
stack1 = helpers['if'].call(depth0, (depth0 != null ? depth0.href : depth0), {"name":"if","hash":{},"fn":this.program(17, data),"inverse":this.noop,"data":data});
stack1 = helpers['if'].call(depth0, (depth0 != null ? depth0.href : depth0), {"name":"if","hash":{},"fn":this.program(18, data),"inverse":this.noop,"data":data});
if (stack1 != null) { buffer += stack1; }
return buffer + ">\n";
},"15":function(depth0,helpers,partials,data) {
},"16":function(depth0,helpers,partials,data) {
return "mui-navigate-right";
},"17":function(depth0,helpers,partials,data) {
},"18":function(depth0,helpers,partials,data) {
var helper, functionType="function", helperMissing=helpers.helperMissing, escapeExpression=this.escapeExpression;
return " href=\""
+ escapeExpression(((helper = (helper = helpers.href || (depth0 != null ? depth0.href : depth0)) != null ? helper : helperMissing),(typeof helper === functionType ? helper.call(depth0, {"name":"href","hash":{},"data":data}) : helper)))
+ "\" ";
},"19":function(depth0,helpers,partials,data) {
},"20":function(depth0,helpers,partials,data) {
return "";
},"21":function(depth0,helpers,partials,data) {
},"22":function(depth0,helpers,partials,data) {
var stack1, helper, functionType="function", helperMissing=helpers.helperMissing, buffer = " ";
stack1 = ((helper = (helper = helpers.title || (depth0 != null ? depth0.title : depth0)) != null ? helper : helperMissing),(typeof helper === functionType ? helper.call(depth0, {"name":"title","hash":{},"data":data}) : helper));
if (stack1 != null) { buffer += stack1; }
return buffer + "\n";
},"23":function(depth0,helpers,partials,data) {
return "\n </a>\r";
},"25":function(depth0,helpers,partials,data) {
},"24":function(depth0,helpers,partials,data) {
return "\n </a>\n";
},"26":function(depth0,helpers,partials,data) {
var stack1, lambda=this.lambda, buffer = " ";
stack1 = lambda(depth0, depth0);
if (stack1 != null) { buffer += stack1; }
return buffer + "\n";
},"28":function(depth0,helpers,partials,data) {
var stack1, buffer = " ";
stack1 = this.invokePartial(partials.tableview, '', 'tableview', depth0, undefined, helpers, partials, data);
if (stack1 != null) { buffer += stack1; }
......@@ -3564,14 +3573,14 @@ Handlebars.registerPartial("tableviewcell", Handlebars.template({"1":function(de
var div = document.createElement('div');
$.each(['tableview', 'slider', 'grid'], function(index, plugin) {
(function(name) {
var oldPlugin = oldPluginApi = null;
var oldPlugin = null;
var oldPluginApi = null;
if ($.fn[name]) {
oldPlugin = $.fn[name];
}
$.fn[name] = function(options) {
var opts = {
echo: true
output: true
};
if (isArray(options)) {
opts[name] = options;
......@@ -3581,19 +3590,22 @@ Handlebars.registerPartial("tableviewcell", Handlebars.template({"1":function(de
if (!opts.hasOwnProperty(name)) { //no data
return oldPlugin && oldPlugin.call(this, opts);
}
var template = Handlebars.compile('{{>' + name + '}}');
var template = Handlebars.compile(opts.tpl ? opts.tpl : '{{>' + name + '}}');
var html = '';
this.each(function() {
var id = this.id;
html = template($.extend({
id: id
}, opts));
if (opts.echo === false) {
if (opts.output === false) {
return false;
} else {
div.innerHTML = html;
var element = div.firstElementChild;
this.parentNode.replaceChild(element, this);
var element = null;
while (!!(element = div.firstElementChild)) {
this.parentNode.insertBefore(element, this);
}
this.parentNode.removeChild(this);
if (oldPlugin) {
$.ready(function() {
oldPluginApi = oldPlugin.call($(element), opts);
......@@ -3601,7 +3613,7 @@ Handlebars.registerPartial("tableviewcell", Handlebars.template({"1":function(de
}
}
});
if (opts.echo === false) {
if (opts.output === false) {
return html;
} else if (oldPluginApi) {
return oldPluginApi;
......
dist/js/mui.tpl.min.js
View file @ 695328ee
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 @ 695328ee
This source diff could not be displayed because it is too large. You can view the blob instead.
examples/hello-mui/examples/pulldown-with-plus-content-custom.html
View file @ 695328ee
......@@ -54,7 +54,7 @@
ws.endPullToRefresh();
wo.evalJS("pullReset()");
}, 2000);
setTimeout(function() {
var table = document.body.querySelector('.mui-table-view');
var cells = document.body.querySelectorAll('.mui-table-view-cell');
......@@ -67,8 +67,33 @@
ws.endPullToRefresh();
wo.evalJS("pullReset()");
}, 1000);
}
mui.init({
swipeBack: false,
optimize: false,
pullRefresh: {
container: '.mui-content-padded',
up: {
contentrefresh: '正在加载...',
callback: pullupRefresh
}
}
});
/**
* 上拉加载具体业务实现
*/
function pullupRefresh(callback) {
setTimeout(function() {
callback(); //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.appendChild(li);
}
}, 1500);
}
</script>
......
examples/hello-mui/examples/pulldown.html 0 → 100644
View file @ 695328ee
<!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-content-padded">
<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>
<script>
mui.init({
swipeBack: false,
pullRefresh: {
container: '.mui-content-padded',
down: {
callback: pullupRefresh
}
}
});
/**
* 上拉加载具体业务实现
*/
function pullupRefresh(callback) {
setTimeout(function() {
callback(); //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);
}
</script>
</body>
</html>
\ No newline at end of file
examples/hello-mui/examples/pullrefresh-main.html
View file @ 695328ee
......@@ -34,7 +34,8 @@
id : 'pullrefresh-content',
url : 'pullrefresh-content.html',
styles : {
top : '48px'
top : '48px',
bottom: "0px"
}
}]
});
......
examples/hello-mui/examples/pullup.html
View file @ 695328ee
......@@ -45,66 +45,7 @@
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>
......
examples/hello-mui/examples/test.html
View file @ 695328ee
......@@ -30,9 +30,17 @@
</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>
<script id="tpl" type="text/x-handlebars-template">
<h5 class="mui-content-padded">自定义模板</h5>
<div class="mui-card">
{{>tableview}}
</div>
</script>
</div>
<script>
var tableview = [];
......@@ -106,31 +114,36 @@
(function($) {
$(function() {
$('#tableview').tableview({
tpl: '', //可自己指定自定义模板
striped: true,
chevron: false,
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');
});
});
});
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,
......
examples/hello-mui/js/mui.min.js
View file @ 695328ee
This diff is collapsed.
examples/hello-mui/js/mui.tpl.min.js
View file @ 695328ee
This source diff could not be displayed because it is too large. You can view the blob instead.
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