Skip to content

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

编译为mui v1.2.0

parent 9316e55c
Hide whitespace changes
Inline Side-by-side
Showing with 201 additions and 138 deletions
dist/css/mui.css
View file @ e46bc670
/*!
* =====================================================
* Mui v1.1.1 (https://github.com/dcloudio/mui)
* Mui v1.2.0 (https://github.com/dcloudio/mui)
* =====================================================
*/
......@@ -863,6 +863,10 @@ button,
background-clip: padding-box;
border: 1px solid #ccc;
border-radius: 3px;
border-top-left-radius: 3px;
border-top-right-radius: 3px;
border-bottom-right-radius: 3px;
border-bottom-left-radius: 3px;
-webkit-transition: all;
transition: all;
-webkit-transition-timing-function: linear;
......@@ -1276,6 +1280,19 @@ input[type="submit"]:active, input[type="submit"].mui-active,
margin: 6px 0;
}
.mui-bar .mui-input-row .mui-btn {
padding: 12px 10px;
}
.mui-bar .mui-search:before {
margin-top: -10px;
}
.mui-bar .mui-input-row .mui-input-clear ~ .mui-icon-clear, .mui-input-row .mui-input-speech ~ .mui-icon-speech {
top: 0;
right: 17%;
}
.mui-bar .mui-segmented-control {
top: 7px;
width: auto;
......@@ -1483,7 +1500,10 @@ input[type="submit"]:active, input[type="submit"].mui-active,
position: relative;
padding: 11px 15px;
overflow: hidden;
background-color: inherit;
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
-webkit-touch-callout: none;
}
.mui-table-view-cell:after {
......@@ -1530,12 +1550,18 @@ input[type="submit"]:active, input[type="submit"].mui-active,
}
.mui-table-view-cell.mui-transitioning > .mui-slider-handle, .mui-table-view-cell.mui-transitioning > .mui-slider-left .mui-btn, .mui-table-view-cell.mui-transitioning > .mui-slider-right .mui-btn {
-webkit-transition: 300ms;
transition: 300ms;
-webkit-transition: -webkit-transform 300ms ease;
transition: transform 300ms ease;
}
.mui-table-view-cell > .mui-slider-handle {
background-color: #fff;
}
.mui-table-view-cell > .mui-slider-handle, .mui-table-view-cell > .mui-slider-left .mui-btn, .mui-table-view-cell > .mui-slider-right .mui-btn {
-webkit-transition: 0ms;
transition: 0ms;
-webkit-transition: -webkit-transform 0ms ease;
transition: transform 0ms ease;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
}
.mui-table-view-cell > .mui-slider-left, .mui-table-view-cell > .mui-slider-right {
position: absolute;
......@@ -1544,6 +1570,9 @@ input[type="submit"]:active, input[type="submit"].mui-active,
display: -webkit-flex;
display: flex;
height: 100%;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
}
.mui-table-view-cell > .mui-slider-left > .mui-btn, .mui-table-view-cell > .mui-slider-right > .mui-btn {
position: relative;
......@@ -1574,11 +1603,15 @@ input[type="submit"]:active, input[type="submit"].mui-active,
}
.mui-table-view-cell > .mui-slider-right {
right: 0;
-webkit-transition: -webkit-transform 0ms ease;
transition: transform 0ms ease;
-webkit-transform: translateX(100%);
transform: translateX(100%);
}
.mui-table-view-cell > .mui-slider-left {
left: 0;
-webkit-transition: -webkit-transform 0ms ease;
transition: transform 0ms ease;
-webkit-transform: translateX(-100%);
transform: translateX(-100%);
}
......@@ -1919,6 +1952,10 @@ input[type="color"] {
outline: none;
}
input[type=number]::-webkit-outer-spin-button {
margin: 0;
}
input[type="search"] {
height: 34px;
-webkit-box-sizing: border-box;
......@@ -2020,7 +2057,7 @@ select:focus {
}
.mui-input-row:last-child,
.mui-input-row label + input {
.mui-input-row label + input, .mui-input-row .mui-btn + input {
background-image: none;
}
......@@ -2055,6 +2092,22 @@ select:focus {
border: 0;
}
.mui-input-row .mui-btn {
float: right;
width: 15%;
padding: 10px 15px;
font-family: "Helvetica Neue", Helvetica, sans-serif;
line-height: 1.1;
}
.mui-input-row .mui-btn ~ input, .mui-input-row .mui-btn ~ select, .mui-input-row .mui-btn ~ textarea {
float: left;
width: 85%;
padding-left: 0;
margin-bottom: 0;
border: 0;
}
.mui-button-row {
position: relative;
padding-top: 5px;
......
dist/css/mui.min.css
View file @ e46bc670
This source diff could not be displayed because it is too large. You can view the blob instead.
dist/js/mui.js
View file @ e46bc670
/*!
* =====================================================
* Mui v1.1.1 (https://github.com/dcloudio/mui)
* Mui v1.2.0 (https://github.com/dcloudio/mui)
* =====================================================
*/
/**
......@@ -177,7 +177,8 @@ var mui = (function(document, undefined) {
* map
*/
$.map = function(elements, callback) {
var value, values = [],i, key;
var value, values = [],
i, key;
if (typeof elements.length === 'number') {
for (i = 0, len = elements.length; i < len; i++) {
value = callback(elements[i], i);
......@@ -948,10 +949,21 @@ var mui = (function(document, undefined) {
});
};
var preventDefault = function(e) {
if (e.target && e.target.tagName !== 'INPUT') {
var tagName = e.target && e.target.tagName;
if (tagName !== 'INPUT' && tagName !== 'TEXTAREA' && tagName !== 'SELECT') {
e.preventDefault();
}
};
//增加原生滚动识别
$.isScrolling = false;
var scrollingTimeout = null;
window.addEventListener('scroll', function() {
$.isScrolling = true;
scrollingTimeout && clearTimeout(scrollingTimeout);
scrollingTimeout = setTimeout(function() {
$.isScrolling = false;
}, 250);
});
})(mui, window);
/**
* mui gesture flick[left|right|up|down]
......@@ -1784,10 +1796,10 @@ var mui = (function(document, undefined) {
if (!window.plus) {
return false;
}
var wobj = $.currentWebview;
var wobj = plus.webview.currentWebview();
var parent = wobj.parent();
if (parent) {
parent.evalJS('mui.back();');
parent.evalJS('mui&&mui.back();');
}else{
wobj.canBack(function(e) {
//by chb 暂时注释，在碰到类似popover之类的锚点的时候，需多次点击才能返回；
......@@ -1890,7 +1902,7 @@ var mui = (function(document, undefined) {
downOptions.down = $.extend({}, pullRefreshOptions.down);
downOptions.down.callback = '_CALLBACK';
//父页面初始化pulldown
parent.evalJS("mui(document.querySelector('.mui-content')).pullRefresh('" + JSON.stringify(downOptions) + "')");
parent.evalJS("mui&&mui(document.querySelector('.mui-content')).pullRefresh('" + JSON.stringify(downOptions) + "')");
}
}
});
......@@ -2676,8 +2688,9 @@ var mui = (function(document, undefined) {
if (this.options.scrollX) {
this.wrapper.addEventListener('swiperight', this);
}
if (this.wrapper.classList.contains('mui-segmented-control')) { //靠，这个bug排查了一下午
mui(this.wrapper).on('click', 'a', $.preventDefault);
var segmentedControl = this.wrapper.querySelector('.mui-segmented-control');
if (segmentedControl) { //靠，这个bug排查了一下午，阻止hash跳转，一旦hash跳转会导致可拖拽选项卡的tab不见
mui(segmentedControl).on('click', 'a', $.preventDefault);
}
},
handleEvent: function(e) {
......@@ -3059,6 +3072,12 @@ var mui = (function(document, undefined) {
duration: duration
};
},
_getTranslateStr: function(x, y) {
if (this.options.hardwareAccelerated) {
return 'translate3d(' + x + 'px,' + y + 'px,0px) ' + this.translateZ;
}
return 'translate(' + x + 'px,' + y + 'px) ';
},
//API
setStopped: function(stopped) {
this.stopped = !!stopped;
......@@ -3066,16 +3085,16 @@ var mui = (function(document, undefined) {
setTranslate: function(x, y) {
this.x = x;
this.y = y;
this.scrollerStyle['webkitTransform'] = 'translate3d(' + x + 'px,' + y + 'px,0px)' + this.translateZ;
this.scrollerStyle['webkitTransform'] = this._getTranslateStr(x, y);
if (this.parallaxElement && this.options.scrollY) { //目前仅支持竖向视差效果
var parallaxY = y * this.options.parallaxRatio;
var scale = 1 + parallaxY / ((this.parallaxHeight - parallaxY) / 2);
if (scale > 1) {
this.parallaxImgStyle['opacity'] = 1 - parallaxY / 100 * this.options.parallaxRatio;
this.parallaxStyle['webkitTransform'] = 'translate3d(0px,' + -parallaxY + 'px,0px) scale(' + scale + ',' + scale + ') ' + this.translateZ;
this.parallaxStyle['webkitTransform'] = this._getTranslateStr(0, -parallaxY) + ' scale(' + scale + ',' + scale + ')';
} else {
this.parallaxImgStyle['opacity'] = 1;
this.parallaxStyle['webkitTransform'] = 'translate3d(0px,-10px,0px) scale(1,1) ' + this.translateZ;
this.parallaxStyle['webkitTransform'] = this._getTranslateStr(0, -10) + ' scale(1,1)';
}
}
if (this.indicators) {
......@@ -3276,7 +3295,7 @@ var mui = (function(document, undefined) {
this.x = x;
this.y = y;
this.indicatorStyle['webkitTransform'] = 'translate3d(' + x + 'px,' + y + 'px,0px)' + this.scroller.translateZ;
this.indicatorStyle['webkitTransform'] = this.scroller._getTranslateStr(x, y);
},
fade: function(val, hold) {
......@@ -3761,7 +3780,7 @@ var mui = (function(document, undefined) {
this._super(x, y);
var progressBar = this.progressBar;
if (progressBar) {
this.progressBarStyle.webkitTransform = 'translate3d(' + (-x * (this.progressBarWidth / this.wrapperWidth)) + 'px,0,0)';
this.progressBarStyle.webkitTransform = this._getTranslateStr((-x * (this.progressBarWidth / this.wrapperWidth)), 0);
}
},
resetPosition: function(time) {
......@@ -3885,7 +3904,7 @@ var mui = (function(document, undefined) {
break;
case "dragEndAfterChangeOffset": //正在刷新状态
//执行下拉刷新所在webview的回调函数
webview.evalJS("mui.options.pullRefresh.down.callback()");
webview.evalJS("mui&&mui.options.pullRefresh.down.callback()");
self._setCaption(downOptions.contentrefresh);
break;
default:
......@@ -3964,7 +3983,7 @@ var mui = (function(document, undefined) {
},
endPulldownToRefresh: function() { //该方法是子页面调用的
var webview = plus.webview.currentWebview();
webview.parent().evalJS("mui(document.querySelector('.mui-content')).pullRefresh('" + JSON.stringify({
webview.parent().evalJS("mui&&mui(document.querySelector('.mui-content')).pullRefresh('" + JSON.stringify({
webviewId: webview.id
}) + "')._endPulldownToRefresh()");
},
......@@ -4132,7 +4151,10 @@ var mui = (function(document, undefined) {
handleEvent: function(e) {
switch (e.type) {
case 'touchstart':
e.preventDefault();
var tagName = e.target && e.target.tagName;
if (tagName !== 'INPUT' && tagName !== 'TEXTAREA' && tagName !== 'SELECT') {
e.preventDefault();
}
break;
case 'webkitTransitionEnd': //有个bug需要处理，需要考虑假设没有触发webkitTransitionEnd的情况
if (e.target === this.scroller) {
......@@ -4164,10 +4186,10 @@ var mui = (function(document, undefined) {
if (this.scroller) {
this.startX = this.lastX;
this.isDragging = true;
$.gestures.touch.lockDirection = true; //锁定方向
$.gestures.touch.startDirection = detail.direction;
this.scroller.classList.remove(CLASS_TRANSITIONING);
this.offsetX = this.getTranslateX();
this._initOffCanvasVisible();
......@@ -5932,4 +5954,4 @@ var mui = (function(document, undefined) {
$.ready(function() {
$('.mui-input-row input').input();
});
})(mui, window, document);
})(mui, window, document);
\ No newline at end of file
dist/js/mui.min.js
View file @ e46bc670
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 @ e46bc670
This source diff could not be displayed because it is too large. You can view the blob instead.
examples/hello-mui/examples/slider-table-pagination.html
View file @ e46bc670
......@@ -9,8 +9,6 @@
<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;
......@@ -22,70 +20,66 @@
padding: 0;
}
</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-slider">
<div class="mui-slider-group mui-slider-loop">
<!-- 额外增加的一个节点(循环轮播：第一个节点是最后一个图文表格) -->
<div class="mui-slider-item mui-slider-item-duplicate">
<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">
<div class="mui-media-body">Color of SIP CBD</div></a></li>
<li class="mui-table-view-cell mui-media mui-col-xs-6"><a href="#"><img class="mui-media-object" src="../images/yuantiao.jpg">
<div class="mui-media-body">静静看这世界</div></a></li>
</ul>
</div>
<div class="mui-slider-item">
<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">
<div class="mui-media-body">幸福就是可以一起睡觉</div></a></li>
<li class="mui-table-view-cell mui-media mui-col-xs-6"><a href="#"><img class="mui-media-object" src="../images/muwu.jpg">
<div class="mui-media-body">想要一间这样的木屋，静静的喝咖啡</div></a></li>
</ul>
</div>
<div class="mui-slider-item">
<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">
<div class="mui-media-body">Color of SIP CBD</div></a></li>
<li class="mui-table-view-cell mui-media mui-col-xs-6"><a href="#"><img class="mui-media-object" src="../images/yuantiao.jpg">
<div class="mui-media-body">静静看这世界</div></a></li>
</ul>
</div>
<!-- 额外增加的一个节点(循环轮播：最后一个节点是第一个图文表格) -->
<div class="mui-slider-item mui-slider-item-duplicate">
<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">
<div class="mui-media-body">幸福就是可以一起睡觉</div></a></li>
<li class="mui-table-view-cell mui-media mui-col-xs-6"><a href="#"><img class="mui-media-object" src="../images/muwu.jpg">
<div class="mui-media-body">想要一间这样的木屋，静静的喝咖啡</div></a></li>
</ul>
</div>
</div>
<div class="mui-slider-indicator" style="position: static;background-color: #fff;">
<span class="mui-action mui-action-previous mui-icon mui-icon-back"></span>
<div class="mui-number">
<span>1</span> / 2
</div>
<span class="mui-action mui-action-next mui-icon mui-icon-forward"></span>
</div>
</div>
</div>
<script>
mui.init({
swipeBack : false
});
</script>
</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-slider">
<div class="mui-slider-group mui-slider-loop">
<!-- 额外增加的一个节点(循环轮播：第一个节点是最后一个图文表格) -->
<div class="mui-slider-item mui-slider-item-duplicate">
<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">
<div class="mui-media-body">Color of SIP CBD</div></a></li>
<li class="mui-table-view-cell mui-media mui-col-xs-6"><a href="#"><img class="mui-media-object" src="../images/yuantiao.jpg">
<div class="mui-media-body">静静看这世界</div></a></li>
</ul>
</div>
<div class="mui-slider-item">
<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">
<div class="mui-media-body">幸福就是可以一起睡觉</div></a></li>
<li class="mui-table-view-cell mui-media mui-col-xs-6"><a href="#"><img class="mui-media-object" src="../images/muwu.jpg">
<div class="mui-media-body">想要一间这样的木屋，静静的喝咖啡</div></a></li>
</ul>
</div>
<div class="mui-slider-item">
<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">
<div class="mui-media-body">Color of SIP CBD</div></a></li>
<li class="mui-table-view-cell mui-media mui-col-xs-6"><a href="#"><img class="mui-media-object" src="../images/yuantiao.jpg">
<div class="mui-media-body">静静看这世界</div></a></li>
</ul>
</div>
<!-- 额外增加的一个节点(循环轮播：最后一个节点是第一个图文表格) -->
<div class="mui-slider-item mui-slider-item-duplicate">
<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">
<div class="mui-media-body">幸福就是可以一起睡觉</div></a></li>
<li class="mui-table-view-cell mui-media mui-col-xs-6"><a href="#"><img class="mui-media-object" src="../images/muwu.jpg">
<div class="mui-media-body">想要一间这样的木屋，静静的喝咖啡</div></a></li>
</ul>
</div>
</div>
<div class="mui-slider-indicator" style="position: static;background-color: #fff;">
<span class="mui-action mui-action-previous mui-icon mui-icon-back"></span>
<div class="mui-number">
<span>1</span> / 2
</div>
<span class="mui-action mui-action-next mui-icon mui-icon-forward"></span>
</div>
</div>
</div>
</body>
<script src="../js/mui.min.js"></script>
<script src="../js/app.js"></script>
<script>
mui.init({
swipeBack : false
});
</script>
</html>
\ No newline at end of file
examples/hello-mui/index-menu.html
View file @ e46bc670
......@@ -43,11 +43,7 @@
</div>
<div class="title" style="margin-bottom: 25px;">mui典型控件</div>
<ul class="mui-table-view mui-table-view-chevron mui-table-view-inverted" style="color: #ddd;">
<li class="mui-table-view-cell">
<a class="mui-navigate-right" href="examples/tableviews-with-swipe.html">
滑动删除
</a>
</li>
<!--<li class="mui-table-view-cell">
<a class="mui-navigate-right" href="examples/list-long.html">
千行列表
......@@ -69,8 +65,13 @@
</a>
</li>
<li class="mui-table-view-cell">
<a class="mui-navigate-right" href="examples/range.html">
滑块控件
<a class="mui-navigate-right" href="examples/tableviews-with-swipe.html">
列表左滑菜单
</a>
</li>
<li class="mui-table-view-cell">
<a class="mui-navigate-right" href="examples/tab-with-viewpagerindicator.html">
可拖动式选项卡
</a>
</li>
</ul>
......@@ -88,8 +89,7 @@
mui.plusReady(function () {
//获得主页面webview引用；
index = plus.webview.currentWebview().opener();
});
var firstClick = true;
})
mui('.mui-table-view').on('tap', 'a', function() {
var id = this.getAttribute("href");
var type = this.getAttribute("open-type");
......@@ -111,12 +111,6 @@
subWebview.show();
template.show('slide-in-right', 150);
}else{
if(firstClick){
firstClick = false;
//通知列表界面，已经开始点击；
var list = index.children()[0];
mui.fire(list,'firstClick',{});
}
template = plus.webview.getWebviewById("default-main");
//获得共用子webview
subWebview = template.children()[0];
......@@ -143,8 +137,14 @@
//点击“关闭侧滑菜单”按钮处理逻辑
document.getElementById("close-btn").addEventListener("tap",close);
//在android4.4.2中的swipe事件，需要preventDefault一下，否则触发不正常
window.addEventListener('dragstart',function(e){
mui.gestures.touch.lockDirection = true; //锁定方向
mui.gestures.touch.startDirection = e.detail.direction;
});
window.addEventListener('dragleft', function(e) {
e.detail.gesture.preventDefault();
if(!mui.isScrolling){
e.detail.gesture.preventDefault();
}
});
//监听左滑事件，若菜单已展开，左滑要关闭菜单；
window.addEventListener("swipeleft",function (e) {
......
examples/hello-mui/js/mui.min.js
View file @ e46bc670
This source diff could not be displayed because it is too large. You can view the blob instead.
examples/hello-mui/list.html
View file @ e46bc670
......@@ -187,13 +187,11 @@
三行列表
</a>
</li>
<li class="mui-table-view-cell">
<a class="mui-navigate-right" href="examples/tableviews-with-collapses.html">
二级列表
</a>
</li>
<li class="mui-table-view-cell">
<a class="mui-navigate-right" href="examples/tableviews-with-swipe.html">
滑动触发列表项菜单
......@@ -313,6 +311,7 @@
</li>
</ul>
</li>
<li class="mui-table-view-cell">
<a class="mui-navigate-right" href="examples/typography.html">
typography（文字）
......@@ -340,13 +339,6 @@
}
});
var templates = {};
var firstClick = true;
window.addEventListener('firstClick',function () {
firstClick = false;
});
var getTemplate = function(name, header, content, loading) {
var template = templates[name];
if (!template) {
......@@ -374,11 +366,9 @@
}
});
subWebview.addEventListener('loaded', function() {
if(!firstClick){
setTimeout(function() {
subWebview.show();
}, 50);
}
setTimeout(function() {
subWebview.show();
}, 50);
});
subWebview.hide();
headerWebview.append(subWebview);
......@@ -402,7 +392,7 @@
var initTemplates = function() {
getTemplate('pullrefresh', 'examples/template_pullrefresh.html', 'examples/pullrefresh.html', true);
getTemplate('default', 'examples/template.html','examples/accordion.html');
getTemplate('default', 'examples/template.html');
};
mui.plusReady(function() {
......@@ -450,7 +440,7 @@
var headerWebview = template.header;
//获得共用子webview
var contentWebview = template.content;
var title = this.innerText;
var title = this.innerText.trim();
//通知模板修改标题，并显示隐藏右上角图标；
mui.fire(headerWebview,'updateHeader',{title:title,showMenu:showMenu});
var reload = true;
......@@ -466,9 +456,6 @@
(!reload) && contentWebview.show();
headerWebview.show('slide-in-right', 150);
if(firstClick){
firstClick = false;
}
}
}
});
......@@ -480,8 +467,15 @@
}
//在android4.4.2中的swipe事件，需要preventDefault一下，否则触发不正常
window.addEventListener('dragstart',function(e){
mui.gestures.touch.lockDirection = true; //锁定方向
mui.gestures.touch.startDirection = e.detail.direction;
});
window.addEventListener('dragright', function(e) {
e.detail.gesture.preventDefault();
if(!mui.isScrolling){
e.detail.gesture.preventDefault();
}
});
......
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