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 { ...@@ -229,6 +229,7 @@ th {
-moz-box-sizing: border-box; -moz-box-sizing: border-box;
box-sizing: border-box; box-sizing: border-box;
-webkit-user-select: none; -webkit-user-select: none;
outline: none;
-webkit-tap-highlight-color: transparent; -webkit-tap-highlight-color: transparent;
-webkit-tap-highlight-color: transparent; -webkit-tap-highlight-color: transparent;
...@@ -794,27 +795,29 @@ p { ...@@ -794,27 +795,29 @@ p {
} }
} }
.mui-spin { .mui-spin {
-webkit-transform-origin: 50% 54%; -webkit-transform-origin: 50% 50%;
transform-origin: 50% 54%; transform-origin: 50% 50%;
-webkit-animation: spin 1s infinite linear; -webkit-animation: spin 1s infinite linear;
animation: spin 1s infinite linear; animation: spin 1s infinite linear;
-webkit-animation-fill-mode: forwards;
} }
@-webkit-keyframes spin { @-webkit-keyframes spin {
0% { from {
-webkit-transform: rotate(0deg); -webkit-transform: rotate(0deg);
} }
100% { 99% {
-webkit-transform: rotate(360deg); -webkit-transform: rotate(360deg);
} }
} }
@keyframes spin { @keyframes spin {
0% { from {
transform: rotate(0deg); transform: rotate(0deg);
} }
100% { 99% {
transform: rotate(360deg); transform: rotate(360deg);
} }
} }
...@@ -1554,14 +1557,20 @@ input[type="submit"]:active, input[type="submit"].mui-active, ...@@ -1554,14 +1557,20 @@ input[type="submit"]:active, input[type="submit"].mui-active,
} }
.mui-grid-view.mui-grid-9 { .mui-grid-view.mui-grid-9 {
padding: 0 0 1px 0;
padding-right: 0; padding-right: 0;
background-color: #f2f2f2; background-color: #f2f2f2;
} }
.mui-grid-view.mui-grid-9 .mui-table-view-cell { .mui-grid-view.mui-grid-9 .mui-table-view-cell {
padding: 11px 15px;
margin: 0;
vertical-align: top; vertical-align: top;
border-top: 1px solid #eee; border-top: 1px solid #eee;
border-left: 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) { .mui-grid-view.mui-grid-9 .mui-table-view-cell > a:not(.mui-btn) {
padding: 15px; padding: 15px;
} }
...@@ -2650,7 +2659,7 @@ select { ...@@ -2650,7 +2659,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-active { .mui-pull-bottom-pocket .mui-pull-loading.mui-in {
display: inline-block; display: inline-block;
} }
...@@ -2678,7 +2687,7 @@ select { ...@@ -2678,7 +2687,7 @@ select {
.mui-pull-caption { .mui-pull-caption {
position: relative; position: relative;
display: inline-block; display: inline-block;
margin-top: -5px; margin-top: 0;
margin-left: 10px; margin-left: 10px;
overflow: visible; overflow: visible;
font-size: 15px; 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; ...@@ -1177,15 +1177,15 @@ window.mui = mui;
webview = $.webviews[id].webview; webview = $.webviews[id].webview;
} else { //新增预加载窗口 } else { //新增预加载窗口
//preload //preload
webview = plus.webview.create(options.url, id, $.windowOptions(options.styles), { webview = plus.webview.create(options.url, id, $.windowOptions(options.styles), $.extend({
preload: true preload: true
}); },options.extras));
if (options.subpages) { if (options.subpages) {
$.each(options.subpages, function(index, subpage) { $.each(options.subpages, function(index, subpage) {
//TODO 子窗口也可能已经创建，比如公用模板的情况； //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 preload: true
}); },subpage.extras));
webview.append(subWebview); webview.append(subWebview);
}); });
} }
...@@ -1219,10 +1219,10 @@ window.mui = mui; ...@@ -1219,10 +1219,10 @@ window.mui = mui;
} }
} else { } else {
if (isCreate !== false) { //直接创建非预加载窗口 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) { if (options.subpages) {
$.each(options.subpages, function(index, subpage) { $.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); webview.append(subWebview);
}); });
} }
...@@ -1284,7 +1284,7 @@ window.mui = mui; ...@@ -1284,7 +1284,7 @@ window.mui = mui;
var webview; var webview;
if (!$.webviews[id]) { //保证执行一遍 if (!$.webviews[id]) { //保证执行一遍
//TODO 这里也有隐患，比如某个webview不是作为subpage创建的，而是作为target webview的话； //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也应该计算到预加载队列中，但这样就麻烦了，要退必须退整体，否则可能出现问题； //TODO 理论上，子webview也应该计算到预加载队列中，但这样就麻烦了，要退必须退整体，否则可能出现问题；
webview.addEventListener('loaded', function() { webview.addEventListener('loaded', function() {
$.currentWebview.append(webview); $.currentWebview.append(webview);
...@@ -1567,37 +1567,76 @@ window.mui = mui; ...@@ -1567,37 +1567,76 @@ window.mui = mui;
PullRefresh.prototype.initEvent = function() { PullRefresh.prototype.initEvent = function() {
var self = this; var self = this;
if (self.bottomPocket) { if (self.bottomPocket) {
if($.os.plus){ if (self.options.up.draggable) {
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.element.addEventListener('dragup', function(e) {
self.dragUp(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) { if (self.topPocket) {
self.element.addEventListener('dragdown', function(e) { self.element.addEventListener('dragdown', function(e) {
self.dragDown(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.element.addEventListener('dragstart', function(e) {
self.dragStart(e); self.dragStart(e);
}); });
...@@ -1697,7 +1736,7 @@ window.mui = mui; ...@@ -1697,7 +1736,7 @@ window.mui = mui;
this.setTranslate(0); this.setTranslate(0);
//恢复到正常状态，下拉可刷新 //恢复到正常状态，下拉可刷新
this.setCaption(CLASS_PULL_CAPTION_DOWN); 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.loading.classList.remove(CLASS_REVERSE);
} }
this.pullOptions = null; this.pullOptions = null;
...@@ -1782,8 +1821,11 @@ window.mui = mui; ...@@ -1782,8 +1821,11 @@ window.mui = mui;
this.loading.className = CLASS_LOADING_DOWN; this.loading.className = CLASS_LOADING_DOWN;
} }
} else { } else {
//上拉处理的有点简单了，即使纯H5版本，也需要分开处理； if (className === CLASS_PULL_CAPTION_REFRESH) {
this.loading.className = CLASS_LOADING; this.loading.className = CLASS_LOADING + ' ' + CLASS_IN;
} else {
this.loading.className = CLASS_LOADING;
}
} }
} }
}; };
...@@ -2919,6 +2961,7 @@ window.mui = mui; ...@@ -2919,6 +2961,7 @@ window.mui = mui;
var CLASS_ACTIVE = 'mui-active'; var CLASS_ACTIVE = 'mui-active';
var CLASS_SELECTED = 'mui-selected'; var CLASS_SELECTED = 'mui-selected';
var CLASS_GRID_VIEW = 'mui-grid-view';
var CLASS_TABLE_VIEW_CELL = 'mui-table-view-cell'; var CLASS_TABLE_VIEW_CELL = 'mui-table-view-cell';
var CLASS_DISABLED = 'mui-disabled'; var CLASS_DISABLED = 'mui-disabled';
var CLASS_TOGGLE = 'mui-switch'; var CLASS_TOGGLE = 'mui-switch';
...@@ -3166,9 +3209,11 @@ window.mui = mui; ...@@ -3166,9 +3209,11 @@ window.mui = mui;
} }
} }
} }
var link = cell.querySelector('a'); if (!cell.parentNode.classList.contains(CLASS_GRID_VIEW)) {
if (link && link.parentNode === cell) { //li>a var link = cell.querySelector('a');
a = link; if (link && link.parentNode === cell) { //li>a
a = link;
}
} }
sliderCell = cell.querySelector(SELECTOR_SLIDER_CELL); sliderCell = cell.querySelector(SELECTOR_SLIDER_CELL);
if (sliderCell && sliderCell.parentNode === 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 ...@@ -3476,10 +3476,31 @@ Handlebars.registerPartial("tableviewcell", Handlebars.template({"1":function(de
if (stack1 != null) { buffer += stack1; } 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}); 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; } if (stack1 != null) { buffer += stack1; }
buffer += "\">\n"; 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})); 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; } 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; } if (stack1 != null) { buffer += stack1; }
buffer += "\n"; buffer += "\n";
stack1 = this.invokePartial(partials.badge, ' ', 'badge', depth0, undefined, helpers, partials, data); stack1 = this.invokePartial(partials.badge, ' ', 'badge', depth0, undefined, helpers, partials, data);
...@@ -3500,51 +3521,39 @@ Handlebars.registerPartial("tableviewcell", Handlebars.template({"1":function(de ...@@ -3500,51 +3521,39 @@ Handlebars.registerPartial("tableviewcell", Handlebars.template({"1":function(de
stack1 = this.invokePartial(partials.media, ' ', 'media', depth0, undefined, helpers, partials, data); stack1 = this.invokePartial(partials.media, ' ', 'media', depth0, undefined, helpers, partials, data);
if (stack1 != null) { buffer += stack1; } if (stack1 != null) { buffer += stack1; }
buffer += "\n"; 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})); 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; }
buffer += " ";
stack1 = helpers['if'].call(depth0, (depth0 != null ? depth0.tableview : depth0), {"name":"if","hash":{},"fn":this.program(25, data),"inverse":this.noop,"data":data});
if (stack1 != null) { buffer += stack1; } if (stack1 != null) { buffer += stack1; }
return buffer + "\n</li>\n"; return buffer;
},"2":function(depth0,helpers,partials,data) { },"15":function(depth0,helpers,partials,data) {
return "divider"; var stack1, buffer = "\n <a class=\"";
},"4":function(depth0,helpers,partials,data) { stack1 = helpers['if'].call(depth0, (depth0 != null ? depth0.navigate : depth0), {"name":"if","hash":{},"fn":this.program(16, data),"inverse":this.noop,"data":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});
if (stack1 != null) { buffer += stack1; } if (stack1 != null) { buffer += stack1; }
buffer += "\" "; 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; } if (stack1 != null) { buffer += stack1; }
return buffer + ">\n"; return buffer + ">\n";
},"15":function(depth0,helpers,partials,data) { },"16":function(depth0,helpers,partials,data) {
return "mui-navigate-right"; 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; var helper, functionType="function", helperMissing=helpers.helperMissing, escapeExpression=this.escapeExpression;
return " href=\"" 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))) + 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 ""; return "";
},"21":function(depth0,helpers,partials,data) { },"22":function(depth0,helpers,partials,data) {
var stack1, helper, functionType="function", helperMissing=helpers.helperMissing, buffer = " "; 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)); 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; } if (stack1 != null) { buffer += stack1; }
return buffer + "\n"; return buffer + "\n";
},"23":function(depth0,helpers,partials,data) { },"24":function(depth0,helpers,partials,data) {
return "\n </a>\r"; return "\n </a>\n";
},"25":function(depth0,helpers,partials,data) { },"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 = " "; var stack1, buffer = " ";
stack1 = this.invokePartial(partials.tableview, '', 'tableview', depth0, undefined, helpers, partials, data); stack1 = this.invokePartial(partials.tableview, '', 'tableview', depth0, undefined, helpers, partials, data);
if (stack1 != null) { buffer += stack1; } if (stack1 != null) { buffer += stack1; }
...@@ -3564,14 +3573,14 @@ Handlebars.registerPartial("tableviewcell", Handlebars.template({"1":function(de ...@@ -3564,14 +3573,14 @@ Handlebars.registerPartial("tableviewcell", Handlebars.template({"1":function(de
var div = document.createElement('div'); var div = document.createElement('div');
$.each(['tableview', 'slider', 'grid'], function(index, plugin) { $.each(['tableview', 'slider', 'grid'], function(index, plugin) {
(function(name) { (function(name) {
var oldPlugin = oldPluginApi = null; var oldPlugin = null;
var oldPluginApi = null;
if ($.fn[name]) { if ($.fn[name]) {
oldPlugin = $.fn[name]; oldPlugin = $.fn[name];
} }
$.fn[name] = function(options) { $.fn[name] = function(options) {
var opts = { var opts = {
echo: true output: true
}; };
if (isArray(options)) { if (isArray(options)) {
opts[name] = options; opts[name] = options;
...@@ -3581,19 +3590,22 @@ Handlebars.registerPartial("tableviewcell", Handlebars.template({"1":function(de ...@@ -3581,19 +3590,22 @@ Handlebars.registerPartial("tableviewcell", Handlebars.template({"1":function(de
if (!opts.hasOwnProperty(name)) { //no data if (!opts.hasOwnProperty(name)) { //no data
return oldPlugin && oldPlugin.call(this, opts); return oldPlugin && oldPlugin.call(this, opts);
} }
var template = Handlebars.compile('{{>' + name + '}}'); var template = Handlebars.compile(opts.tpl ? opts.tpl : '{{>' + name + '}}');
var html = ''; var html = '';
this.each(function() { this.each(function() {
var id = this.id; var id = this.id;
html = template($.extend({ html = template($.extend({
id: id id: id
}, opts)); }, opts));
if (opts.echo === false) { if (opts.output === false) {
return false; return false;
} else { } else {
div.innerHTML = html; div.innerHTML = html;
var element = div.firstElementChild; var element = null;
this.parentNode.replaceChild(element, this); while (!!(element = div.firstElementChild)) {
this.parentNode.insertBefore(element, this);
}
this.parentNode.removeChild(this);
if (oldPlugin) { if (oldPlugin) {
$.ready(function() { $.ready(function() {
oldPluginApi = oldPlugin.call($(element), opts); oldPluginApi = oldPlugin.call($(element), opts);
...@@ -3601,7 +3613,7 @@ Handlebars.registerPartial("tableviewcell", Handlebars.template({"1":function(de ...@@ -3601,7 +3613,7 @@ Handlebars.registerPartial("tableviewcell", Handlebars.template({"1":function(de
} }
} }
}); });
if (opts.echo === false) { if (opts.output === false) {
return html; return html;
} else if (oldPluginApi) { } else if (oldPluginApi) {
return 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 @@ ...@@ -54,7 +54,7 @@
ws.endPullToRefresh(); ws.endPullToRefresh();
wo.evalJS("pullReset()"); wo.evalJS("pullReset()");
}, 2000); }, 2000);
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');
...@@ -67,8 +67,33 @@ ...@@ -67,8 +67,33 @@
ws.endPullToRefresh(); ws.endPullToRefresh();
wo.evalJS("pullReset()"); wo.evalJS("pullReset()");
}, 1000); }, 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> </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 @@ ...@@ -34,7 +34,8 @@
id : 'pullrefresh-content', id : 'pullrefresh-content',
url : 'pullrefresh-content.html', url : 'pullrefresh-content.html',
styles : { styles : {
top : '48px' top : '48px',
bottom: "0px"
} }
}] }]
}); });
......
examples/hello-mui/examples/pullup.html
View file @ 695328ee
...@@ -45,66 +45,7 @@ ...@@ -45,66 +45,7 @@
Item 3 Item 3
</a> </a>
</li> </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> </ul>
</div> </div>
</div> </div>
......
examples/hello-mui/examples/test.html
View file @ 695328ee
...@@ -30,9 +30,17 @@ ...@@ -30,9 +30,17 @@
</header> </header>
<div class="mui-content"> <div class="mui-content">
<div id="tableview"></div> <div id="tableview"></div>
<div id="tableview_tpl"></div>
<div id="slider"></div> <div id="slider"></div>
<div id="slider-table-pagination"></div> <div id="slider-table-pagination"></div>
<div id="grid"></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> </div>
<script> <script>
var tableview = []; var tableview = [];
...@@ -106,31 +114,36 @@ ...@@ -106,31 +114,36 @@
(function($) { (function($) {
$(function() { $(function() {
$('#tableview').tableview({ $('#tableview').tableview({
tpl: '', //可自己指定自定义模板
striped: true, striped: true,
chevron: false, chevron: false,
inverted: false, inverted: false,
tableview: tableview, 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({ var sliderApi = $('#slider').slider({
loop: true, loop: true,
slideshowDelay: 0, slideshowDelay: 0,
slider: slider, slider: slider,
}); });
function testApi(index, callback) { function testApi(index, callback) {
setTimeout(function() { setTimeout(function() {
sliderApi.gotoItem(index); sliderApi.gotoItem(index);
callback(); callback();
}, 2000); }, 2000);
} }
testApi(1, function() { testApi(1, function() {
testApi(2, function() { testApi(2, function() {
testApi(3, function() { testApi(3, function() {
testApi(0, function() { testApi(0, function() {
console.log('finish'); console.log('finish');
}); });
}); });
}); });
}); });
$('#slider-table-pagination').slider({ $('#slider-table-pagination').slider({
loop: true, 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