Skip to content

M
mui
Commit 41698daa authored by fxy060608's avatar fxy060608
Browse files
Options

提交最新版mui.js

parent 1506d053
Hide whitespace changes
Inline Side-by-side
Showing with 1049 additions and 1596 deletions
about/index.html
View file @ 41698daa
...@@ -10,13 +10,8 @@ ...@@ -10,13 +10,8 @@
<meta name="apple-mobile-web-app-capable" content="yes"> <meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black"> <meta name="apple-mobile-web-app-status-bar-style" content="black">
<<<<<<< HEAD <link rel="stylesheet" href="http://dcloudio.github.io/mui/dist/css/mui.min.css?v=2014-09-25 22:17:40 +0800">
<link rel="stylesheet" href="http://dcloudio.github.io/mui/dist/css/mui.min.css?v=2014-09-19 02:54:04 +0800"> <link rel="stylesheet" href="http://dcloudio.github.io/mui/assets/css/docs.css?v=2014-09-25 22:17:40 +0800">
<link rel="stylesheet" href="http://dcloudio.github.io/mui/assets/css/docs.css?v=2014-09-19 02:54:04 +0800">
=======
<link rel="stylesheet" href="http://dcloudio.github.io/mui/dist/css/mui.min.css?v=2014-09-23 21:45:03 +0800">
<link rel="stylesheet" href="http://dcloudio.github.io/mui/assets/css/docs.css?v=2014-09-23 21:45:03 +0800">
>>>>>>> FETCH_HEAD
<link rel="apple-touch-icon-precomposed" sizes="114x114" href="http://dcloudio.github.io/mui/assets/img/apple-touch-icon-114x114.png"> <link rel="apple-touch-icon-precomposed" sizes="114x114" href="http://dcloudio.github.io/mui/assets/img/apple-touch-icon-114x114.png">
...@@ -149,13 +144,8 @@ ...@@ -149,13 +144,8 @@
</ul> </ul>
</div> </div>
<script src="http://dcloudio.github.io/mui/dist/js/jquery-2.1.1.js"></script> <script src="http://dcloudio.github.io/mui/dist/js/jquery-2.1.1.js"></script>
<<<<<<< HEAD <script src="http://dcloudio.github.io/mui/dist/js/mui.min.js?v=2014-09-25 22:17:40 +0800"></script>
<script src="http://dcloudio.github.io/mui/dist/js/mui.min.js?v=2014-09-19 02:54:04 +0800"></script> <script src="http://dcloudio.github.io/mui/assets/js/docs.min.js?v=2014-09-25 22:17:40 +0800"></script>
<script src="http://dcloudio.github.io/mui/assets/js/docs.min.js?v=2014-09-19 02:54:04 +0800"></script>
=======
<script src="http://dcloudio.github.io/mui/dist/js/mui.min.js?v=2014-09-23 21:45:03 +0800"></script>
<script src="http://dcloudio.github.io/mui/assets/js/docs.min.js?v=2014-09-23 21:45:03 +0800"></script>
>>>>>>> FETCH_HEAD
</div> </div>
</div> </div>
......
assets/js/docs.min.js
View file @ 41698daa
...@@ -33,7 +33,7 @@ $(function() { ...@@ -33,7 +33,7 @@ $(function() {
var iwindow = document.getElementById("iwindow"); var iwindow = document.getElementById("iwindow");
$(iwindow).html(a); $(iwindow).html(a);
//slider //slider
var slider = mui(mui.classSelector('.slider-group'), iwindow); var slider = mui(mui.classSelector('.slider'), iwindow);
if (slider.length === 1) { if (slider.length === 1) {
slider.slider(); slider.slider();
//slider-switch //slider-switch
...@@ -42,11 +42,11 @@ $(function() { ...@@ -42,11 +42,11 @@ $(function() {
sliderSwitch.addEventListener('toggle', function(e) { sliderSwitch.addEventListener('toggle', function(e) {
if (e.detail.isActive) { if (e.detail.isActive) {
slider.slider({ slider.slider({
slideshowDelay: 3000 interval: 3000
}); });
} else { } else {
slider.slider({ slider.slider({
slideshowDelay: 0 interval: 0
}); });
} }
}); });
......
components/index.html
View file @ 41698daa
...@@ -10,13 +10,8 @@ ...@@ -10,13 +10,8 @@
<meta name="apple-mobile-web-app-capable" content="yes"> <meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black"> <meta name="apple-mobile-web-app-status-bar-style" content="black">
<<<<<<< HEAD <link rel="stylesheet" href="http://dcloudio.github.io/mui/dist/css/mui.min.css?v=2014-09-25 22:17:40 +0800">
<link rel="stylesheet" href="http://dcloudio.github.io/mui/dist/css/mui.min.css?v=2014-09-19 02:54:04 +0800"> <link rel="stylesheet" href="http://dcloudio.github.io/mui/assets/css/docs.css?v=2014-09-25 22:17:40 +0800">
<link rel="stylesheet" href="http://dcloudio.github.io/mui/assets/css/docs.css?v=2014-09-19 02:54:04 +0800">
=======
<link rel="stylesheet" href="http://dcloudio.github.io/mui/dist/css/mui.min.css?v=2014-09-23 21:45:03 +0800">
<link rel="stylesheet" href="http://dcloudio.github.io/mui/assets/css/docs.css?v=2014-09-23 21:45:03 +0800">
>>>>>>> FETCH_HEAD
<link rel="apple-touch-icon-precomposed" sizes="114x114" href="http://dcloudio.github.io/mui/assets/img/apple-touch-icon-114x114.png"> <link rel="apple-touch-icon-precomposed" sizes="114x114" href="http://dcloudio.github.io/mui/assets/img/apple-touch-icon-114x114.png">
...@@ -3646,13 +3641,8 @@ ...@@ -3646,13 +3641,8 @@
</ul> </ul>
</div> </div>
<script src="http://dcloudio.github.io/mui/dist/js/jquery-2.1.1.js"></script> <script src="http://dcloudio.github.io/mui/dist/js/jquery-2.1.1.js"></script>
<<<<<<< HEAD <script src="http://dcloudio.github.io/mui/dist/js/mui.min.js?v=2014-09-25 22:17:40 +0800"></script>
<script src="http://dcloudio.github.io/mui/dist/js/mui.min.js?v=2014-09-19 02:54:04 +0800"></script> <script src="http://dcloudio.github.io/mui/assets/js/docs.min.js?v=2014-09-25 22:17:40 +0800"></script>
<script src="http://dcloudio.github.io/mui/assets/js/docs.min.js?v=2014-09-19 02:54:04 +0800"></script>
=======
<script src="http://dcloudio.github.io/mui/dist/js/mui.min.js?v=2014-09-23 21:45:03 +0800"></script>
<script src="http://dcloudio.github.io/mui/assets/js/docs.min.js?v=2014-09-23 21:45:03 +0800"></script>
>>>>>>> FETCH_HEAD
</div> </div>
</div> </div>
......
dist/css/mui.css
View file @ 41698daa
...@@ -253,26 +253,44 @@ a:active { ...@@ -253,26 +253,44 @@ a:active {
.mui-bar-nav ~ .mui-content { .mui-bar-nav ~ .mui-content {
padding-top: 44px; padding-top: 44px;
} }
.mui-bar-nav ~ .mui-content.mui-scroll-wrapper .mui-scrollbar-vertical {
top: 44px;
}
.mui-bar-header-secondary ~ .mui-content { .mui-bar-header-secondary ~ .mui-content {
padding-top: 88px; padding-top: 88px;
} }
.mui-bar-header-secondary ~ .mui-content.mui-scroll-wrapper .mui-scrollbar-vertical {
top: 88px;
}
.mui-bar-footer ~ .mui-content { .mui-bar-footer ~ .mui-content {
padding-bottom: 44px; padding-bottom: 44px;
} }
.mui-bar-footer ~ .mui-content.mui-scroll-wrapper .mui-scrollbar-vertical {
bottom: 44px;
}
.mui-bar-footer-secondary ~ .mui-content { .mui-bar-footer-secondary ~ .mui-content {
padding-bottom: 88px; padding-bottom: 88px;
} }
.mui-bar-footer-secondary ~ .mui-content.mui-scroll-wrapper .mui-scrollbar-vertical {
bottom: 88px;
}
.mui-bar-tab ~ .mui-content { .mui-bar-tab ~ .mui-content {
padding-bottom: 50px; padding-bottom: 50px;
} }
.mui-bar-tab ~ .mui-content.mui-scroll-wrapper .mui-scrollbar-vertical {
bottom: 50px;
}
.mui-bar-footer-secondary-tab ~ .mui-content { .mui-bar-footer-secondary-tab ~ .mui-content {
padding-bottom: 94px; padding-bottom: 94px;
} }
.mui-bar-footer-secondary-tab ~ .mui-content.mui-scroll-wrapper .mui-scrollbar-vertical {
bottom: 94px;
}
.mui-hidden { .mui-hidden {
display: none !important; display: none !important;
...@@ -2423,8 +2441,6 @@ select { ...@@ -2423,8 +2441,6 @@ select {
height: 100%; height: 100%;
font-size: 14px; font-size: 14px;
vertical-align: top; vertical-align: top;
-webkit-backface-visibility: hidden;
} }
.mui-slider .mui-slider-group .mui-slider-item a { .mui-slider .mui-slider-group .mui-slider-item a {
position: relative; position: relative;
...@@ -2434,11 +2450,9 @@ select { ...@@ -2434,11 +2450,9 @@ select {
.mui-slider .mui-slider-group .mui-slider-item img { .mui-slider .mui-slider-group .mui-slider-item img {
width: 100%; width: 100%;
} }
.mui-slider .mui-slider-group.mui-slider-loop .mui-slider-item:first-child { .mui-slider .mui-slider-group.mui-slider-loop {
margin-left: -100%; -webkit-transform: translate(-100%, 0px);
} transform: translate(-100%, 0px);
.mui-slider .mui-slider-group.mui-slider-loop .mui-slider-item:last-child {
margin-right: -100%;
} }
.mui-slider-title { .mui-slider-title {
......
dist/css/mui.min.css
View file @ 41698daa
This source diff could not be displayed because it is too large. You can view the blob instead.
dist/js/mui.js
View file @ 41698daa
...@@ -37,7 +37,7 @@ var mui = (function(document, undefined) { ...@@ -37,7 +37,7 @@ var mui = (function(document, undefined) {
var wrap = function(dom, selector) { var wrap = function(dom, selector) {
dom = dom || []; dom = dom || [];
dom['__proto__'] = $.fn; Object.setPrototypeOf(dom, $.fn);
dom.selector = selector || ''; dom.selector = selector || '';
return dom; return dom;
}; };
...@@ -204,7 +204,7 @@ var mui = (function(document, undefined) { ...@@ -204,7 +204,7 @@ var mui = (function(document, undefined) {
}; };
return $; return $;
})(document); })(document);
//window.mui = mui; //window.mui = mui;
//'$' in window || (window.$ = mui); //'$' in window || (window.$ = mui);
/** /**
* mui target(action>popover>modal>tab>toggle) * mui target(action>popover>modal>tab>toggle)
...@@ -271,29 +271,33 @@ var mui = (function(document, undefined) { ...@@ -271,29 +271,33 @@ var mui = (function(document, undefined) {
* @returns {undefined} * @returns {undefined}
*/ */
(function(undefined) { (function(undefined) {
if (String.prototype.trim === undefined) {// fix for iOS 3.2 if (String.prototype.trim === undefined) { // fix for iOS 3.2
String.prototype.trim = function() { String.prototype.trim = function() {
return this.replace(/^\s+|\s+$/g, ''); return this.replace(/^\s+|\s+$/g, '');
}; };
} }
Object.setPrototypeOf = Object.setPrototypeOf || function(obj, proto) {
obj['__proto__'] = proto;
return obj;
}
})(); })();
/** /**
* fixed CustomEvent * fixed CustomEvent
*/ */
(function() { (function() {
if ( typeof window.CustomEvent === 'undefined') { if (typeof window.CustomEvent === 'undefined') {
function CustomEvent(event, params) { function CustomEvent(event, params) {
params = params || { params = params || {
bubbles : false, bubbles: false,
cancelable : false, cancelable: false,
detail : undefined detail: undefined
}; };
var evt = document.createEvent('Events'); var evt = document.createEvent('Events');
var bubbles = true; var bubbles = true;
if (params) { if (params) {
for (var name in params) { for (var name in params) {
(name === 'bubbles') ? ( bubbles = !!params[name]) : (evt[name] = params[name]); (name === 'bubbles') ? (bubbles = !!params[name]) : (evt[name] = params[name]);
} }
} }
evt.initEvent(event, bubbles, true); evt.initEvent(event, bubbles, true);
...@@ -303,7 +307,6 @@ var mui = (function(document, undefined) { ...@@ -303,7 +307,6 @@ var mui = (function(document, undefined) {
window.CustomEvent = CustomEvent; window.CustomEvent = CustomEvent;
} }
})(); })();
/** /**
* mui fixed classList * mui fixed classList
* @param {type} document * @param {type} document
...@@ -586,7 +589,7 @@ var mui = (function(document, undefined) { ...@@ -586,7 +589,7 @@ var mui = (function(document, undefined) {
var detectTouchStart = function(event) { var detectTouchStart = function(event) {
$.gestures.stoped = false; $.gestures.stoped = false;
var now = Date.now(); var now = Date.now();
var point = event.touches[0]; var point = event.touches ? event.touches[0] : event;
touch = { touch = {
target: event.target, target: event.target,
lastTarget: (touch.lastTarget ? touch.lastTarget : null), lastTarget: (touch.lastTarget ? touch.lastTarget : null),
...@@ -627,10 +630,11 @@ var mui = (function(document, undefined) { ...@@ -627,10 +630,11 @@ var mui = (function(document, undefined) {
return; return;
} }
var now = Date.now(); var now = Date.now();
var point = event.touches ? event.touches[0] : event;
touch.touchTime = now - touch.startTime; touch.touchTime = now - touch.startTime;
touch.move = { touch.move = {
x: event.touches[0].pageX, x: point.pageX,
y: event.touches[0].pageY y: point.pageY
}; };
if (now - touch.flickStartTime > 300) { if (now - touch.flickStartTime > 300) {
touch.flickStartTime = now; touch.flickStartTime = now;
...@@ -1667,14 +1671,47 @@ var mui = (function(document, undefined) { ...@@ -1667,14 +1671,47 @@ var mui = (function(document, undefined) {
})(mui, window); })(mui, window);
/** (function($) {
* scroll var initializing = false,
* @param {type} $ fnTest = /xyz/.test(function() {
* @param {type} window xyz;
* @param {type} document }) ? /\b_super\b/ : /.*/;
* @returns {undefined}
*/ var Class = function() {};
(function($, window, document, name, undefined) { Class.extend = function(prop) {
var _super = this.prototype;
initializing = true;
var prototype = new this();
initializing = false;
for (var name in prop) {
prototype[name] = typeof prop[name] == "function" &&
typeof _super[name] == "function" && fnTest.test(prop[name]) ?
(function(name, fn) {
return function() {
var tmp = this._super;
this._super = _super[name];
var ret = fn.apply(this, arguments);
this._super = tmp;
return ret;
};
})(name, prop[name]) :
prop[name];
}
function Class() {
if (!initializing && this.init)
this.init.apply(this, arguments);
}
Class.prototype = prototype;
Class.prototype.constructor = Class;
Class.extend = arguments.callee;
return Class;
};
$.Class = Class;
})(mui);
(function($, window, document, undefined) {
var CLASS_SCROLLBAR = 'mui-scrollbar'; var CLASS_SCROLLBAR = 'mui-scrollbar';
var CLASS_INDICATOR = 'mui-scrollbar-indicator'; var CLASS_INDICATOR = 'mui-scrollbar-indicator';
var CLASS_SCROLLBAR_VERTICAL = CLASS_SCROLLBAR + '-vertical'; var CLASS_SCROLLBAR_VERTICAL = CLASS_SCROLLBAR + '-vertical';
...@@ -1694,478 +1731,616 @@ var mui = (function(document, undefined) { ...@@ -1694,478 +1731,616 @@ var mui = (function(document, undefined) {
} }
} }
} }
var Scroll = function(element, options) { var Scroll = $.Class.extend({
this.wrapper = this.element = element; init: function(element, options) {
this.scroller = this.wrapper.children[0]; this.wrapper = this.element = element;
this.scrollerStyle = this.scroller.style; this.scroller = this.wrapper.children[0];
this.scrollerStyle = this.scroller.style;
this.options = $.extend({
scrollY: true, this.options = $.extend({
scrollX: false, scrollY: true,
startX: 0, scrollX: false,
startY: 0, startX: 0,
hardwareAccelerated: true, startY: 0,
preventDefaultException: { indicators: true,
tagName: /^(INPUT|TEXTAREA|BUTTON|SELECT)$/ hardwareAccelerated: true,
}, fixedBadAndorid: false,
momentum: true, preventDefaultException: {
tagName: /^(INPUT|TEXTAREA|BUTTON|SELECT)$/
bounce: true, },
bounceTime: 600, momentum: true,
bounceEasing: ease.circular.style,
bounce: true,
directionLockThreshold: 5, bounceTime: 600,
bounceEasing: ease.circular.style,
}, options, true);
directionLockThreshold: 5,
this.x = 0;
this.y = 0; }, options, true);
this.translateZ = this.options.hardwareAccelerated ? ' translateZ(0)' : '';
this.x = 0;
this.init(); this.y = 0;
this.refresh(); this.translateZ = this.options.hardwareAccelerated ? ' translateZ(0)' : '';
this.scrollTo(this.options.startX, this.options.startY);
}; this._init();
Scroll.prototype.init = function() { this.refresh();
this._initPullRefresh(); this.scrollTo(this.options.startX, this.options.startY);
this._initIndicators(); },
_init: function() {
this.initEvent(); this._initIndicators();
}; this._initEvent();
Scroll.prototype._initIndicators = function() { },
var indicators = [], _initIndicators: function() {
indicator; var self = this;
self.indicators = [];
var self = this; if (!this.options.indicators) {
return;
self.indicators = []; }
var indicators = [],
// Vertical scrollbar indicator;
if (self.options.scrollY) {
indicator = { // Vertical scrollbar
el: this.createScrollBar(CLASS_SCROLLBAR_VERTICAL), if (self.options.scrollY) {
listenX: false indicator = {
}; el: this._createScrollBar(CLASS_SCROLLBAR_VERTICAL),
listenX: false
this.wrapper.appendChild(indicator.el); };
indicators.push(indicator);
} this.wrapper.appendChild(indicator.el);
indicators.push(indicator);
// Horizontal scrollbar }
if (this.options.scrollX) {
indicator = {
el: this.createScrollBar(CLASS_SCROLLBAR_HORIZONTAL),
listenY: false
};
this.wrapper.appendChild(indicator.el); // Horizontal scrollbar
indicators.push(indicator); if (this.options.scrollX) {
} indicator = {
el: this._createScrollBar(CLASS_SCROLLBAR_HORIZONTAL),
listenY: false
};
if (this.options.indicators) { this.wrapper.appendChild(indicator.el);
indicators = indicators.concat(this.options.indicators); indicators.push(indicator);
} }
for (var i = indicators.length; i--;) { for (var i = indicators.length; i--;) {
this.indicators.push(new Indicator(this, indicators[i])); this.indicators.push(new Indicator(this, indicators[i]));
} }
this.wrapper.addEventListener('scrollend', function() { this.wrapper.addEventListener('scrollend', function() {
self.indicators.map(function(indicator) { self.indicators.map(function(indicator) {
indicator.fade(); indicator.fade();
});
}); });
});
this.wrapper.addEventListener('scrollstart', function() { this.wrapper.addEventListener('scrollstart', function() {
self.indicators.map(function(indicator) { self.indicators.map(function(indicator) {
indicator.fade(1); indicator.fade(1);
});
}); });
});
this.wrapper.addEventListener('beforescrollstart', function() { this.wrapper.addEventListener('beforescrollstart', function() {
self.indicators.map(function(indicator) { self.indicators.map(function(indicator) {
indicator.fade(1, true); indicator.fade(1, true);
});
}); });
});
this.wrapper.addEventListener('refresh', function() { this.wrapper.addEventListener('refresh', function() {
self.indicators.map(function(indicator) { self.indicators.map(function(indicator) {
indicator.refresh(); indicator.refresh();
});
}); });
}); },
}; _initEvent: function() {
window.addEventListener('orientationchange', this);
window.addEventListener('resize', this);
this.scroller.addEventListener('webkitTransitionEnd', this);
this.wrapper.addEventListener('touchstart', this);
this.wrapper.addEventListener('touchcancel', this);
this.wrapper.addEventListener('touchend', this);
this.wrapper.addEventListener('drag', this);
this.wrapper.addEventListener('dragend', this);
this.wrapper.addEventListener('flick', this);
this.wrapper.addEventListener('scrollend', this);
},
handleEvent: function(e) {
switch (e.type) {
case 'touchstart':
this._start(e);
break;
case 'drag':
this._drag(e);
break;
case 'dragend':
case 'flick':
this._flick(e);
break;
case 'touchcancel':
case 'touchend':
this._end(e);
break;
case 'webkitTransitionEnd':
this._transitionEnd(e);
break;
case 'scrollend':
this._scrollend(e);
break;
case 'orientationchange':
case 'resize':
this._resize();
break;
Scroll.prototype.initEvent = function() {
window.addEventListener('orientationchange', this);
window.addEventListener('resize', this);
this.wrapper.addEventListener('touchstart', this);
this.wrapper.addEventListener('touchcancel', this);
this.wrapper.addEventListener('touchend', this);
this.wrapper.addEventListener('drag', this);
this.wrapper.addEventListener('dragend', this);
this.wrapper.addEventListener('flick', this);
this.scroller.addEventListener('webkitTransitionEnd', this);
var that = this;
this.wrapper.addEventListener('scrollend', function() {
if (that.y <= that.maxScrollY) {
$.trigger(that.wrapper, 'scrollbottom', that);
} }
}); },
}; _start: function(e) {
Scroll.prototype.handleEvent = function(e) { this.moved = this.needReset = false;
switch (e.type) { this._transitionTime();
case 'touchstart':
this._start(e);
break;
case 'touchcancel':
case 'touchend':
this._end(e);
break;
case 'drag':
this._drag(e);
break;
case 'dragend':
case 'flick':
this._flick(e);
break;
case 'orientationchange':
case 'resize':
this._resize();
break;
case 'webkitTransitionEnd':
this._transitionEnd(e);
break;
}
};
Scroll.prototype._transitionEnd = function(e) {
if (e.target != this.scroller || !this.isInTransition) {
return;
}
this._transitionTime(); if (this.isInTransition) {
if (!this.resetPosition(this.options.bounceTime)) { this.needReset = true;
this.isInTransition = false; this.isInTransition = false;
$.trigger(this.wrapper, 'scrollend', this); var pos = $.parseTranslateMatrix($.getStyles(this.scroller, 'webkitTransform'));
} this.setTranslate(Math.round(pos.x), Math.round(pos.y));
}; $.trigger(this.wrapper, 'scrollend', this);
Scroll.prototype.preventDefaultException = function(el, exceptions) {
for (var i in exceptions) {
if (exceptions[i].test(el[i])) {
return true;
} }
} this.reLayout();
$.trigger(this.wrapper, 'beforescrollstart', this);
return false; },
}; _drag: function(e) {
Scroll.prototype.getComputedPosition = function() { var detail = e.detail;
return $.parseTranslateMatrix($.getStyles(this.scroller, 'webkitTransform'));
};
Scroll.prototype._start = function(e) {
this.moved = this.needReset = false; detail.gesture.preventDefault();
if (!this.loading) { var deltaX = detail.deltaX - detail.lastDeltaX;
this.pulldown = this.pullPocket = this.pullCaption = this.pullLoading = false var deltaY = detail.deltaY - detail.lastDeltaY;
} var absDeltaX = Math.abs(detail.deltaX);
var absDeltaY = Math.abs(detail.deltaY);
if (absDeltaX > absDeltaY + this.options.directionLockThreshold) {
deltaY = 0;
} else if (absDeltaY >= absDeltaX + this.options.directionLockThreshold) {
deltaX = 0;
}
this._transitionTime(); deltaX = this.hasHorizontalScroll ? deltaX : 0;
deltaY = this.hasVerticalScroll ? deltaY : 0;
var newX = this.x + deltaX;
var newY = this.y + deltaY;
// Slow down if outside of the boundaries
if (newX > 0 || newX < this.maxScrollX) {
newX = this.options.bounce ? this.x + deltaX / 3 : newX > 0 ? 0 : this.maxScrollX;
}
if (newY > 0 || newY < this.maxScrollY) {
newY = this.options.bounce ? this.y + deltaY / 3 : newY > 0 ? 0 : this.maxScrollY;
}
if (!this.requestAnimationFrame) {
this._updateTranslate();
}
if (!this.moved) {
$.trigger(this.wrapper, 'scrollstart', this);
}
this.moved = true;
this.x = newX;
this.y = newY;
e.stopPropagation();
if (this.isInTransition) { },
this.needReset = true; _flick: function(e) {
this.isInTransition = false; var detail = e.detail;
var pos = this.getComputedPosition(); this._clearRequestAnimationFrame();
this._setTranslate(Math.round(pos.x), Math.round(pos.y)); if (e.type === 'dragend' && detail.flick) { //dragend
$.trigger(this.wrapper, 'scrollend', this); return;
} }
this.reset();
$.trigger(this.wrapper, 'beforescrollstart', this);
};
Scroll.prototype._end = function(e) {
if (!this.moved && this.needReset) {
this.resetPosition(this.options.bounceTime);
}
};
Scroll.prototype._drag = function(e) {
var detail = e.detail;
detail.gesture.preventDefault(); var newX = Math.round(this.x);
var deltaX = detail.deltaX - detail.lastDeltaX; var newY = Math.round(this.y);
var deltaY = detail.deltaY - detail.lastDeltaY;
var absDeltaX = Math.abs(detail.deltaX);
var absDeltaY = Math.abs(detail.deltaY);
if (absDeltaX > absDeltaY + this.options.directionLockThreshold) {
deltaY = 0;
} else if (absDeltaY >= absDeltaX + this.options.directionLockThreshold) {
deltaX = 0;
}
deltaX = this.hasHorizontalScroll ? deltaX : 0; this.isInTransition = false;
deltaY = this.hasVerticalScroll ? deltaY : 0; // reset if we are outside of the boundaries
var newX = this.x + deltaX; if (this.resetPosition(this.options.bounceTime)) {
var newY = this.y + deltaY; return;
// Slow down if outside of the boundaries }
if (newX > 0 || newX < this.maxScrollX) {
newX = this.options.bounce ? this.x + deltaX / 3 : newX > 0 ? 0 : this.maxScrollX;
}
if (newY > 0 || newY < this.maxScrollY) {
newY = this.options.bounce ? this.y + deltaY / 3 : newY > 0 ? 0 : this.maxScrollY;
}
if (!this.requestAnimationFrame) {
this._updateTranslate();
}
if (!this.moved) {
$.trigger(this.wrapper, 'scrollstart', this);
}
this.moved = true;
this.x = newX;
this.y = newY;
if (!this.pulldown && !this.loading && this.topPocket && detail.direction === 'down' && this.y >= 0) {
this.pulldown = true;
this.pullPocket = this.topPocket;
this.pullCaption = this.topCaption;
this.pullLoading = this.topLoading;
}
if (this.pulldown) {
this._setCaption(this.y > this.options.down.height ? this.options.down.contentover : this.options.down.contentdown);
}
};
Scroll.prototype._flick = function(e) {
var detail = e.detail;
this._clearRequestAnimationFrame();
if (e.type === 'dragend' && detail.flick) { //dragend
return;
}
var newX = Math.round(this.x); this.scrollTo(newX, newY); // ensures that the last position is rounded
var newY = Math.round(this.y);
this.isInTransition = false; if (e.type === 'dragend') { //dragend
// reset if we are outside of the boundaries $.trigger(this.wrapper, 'scrollend', this);
if (this.resetPosition(this.options.bounceTime)) { return;
return; }
} var time = 0;
var easing = '';
// start momentum animation if needed
if (this.options.momentum && detail.flickTime < 300) {
momentumX = this.hasHorizontalScroll ? this._momentum(this.x, detail.flickDistanceX, detail.flickTime, this.maxScrollX, this.options.bounce ? this.wrapperWidth : 0, this.options.deceleration) : {
destination: newX,
duration: 0
};
momentumY = this.hasVerticalScroll ? this._momentum(this.y, detail.flickDistanceY, detail.flickTime, this.maxScrollY, this.options.bounce ? this.wrapperHeight : 0, this.options.deceleration) : {
destination: newY,
duration: 0
};
newX = momentumX.destination;
newY = momentumY.destination;
time = Math.max(momentumX.duration, momentumY.duration);
this.isInTransition = true;
}
this.scrollTo(newX, newY); // ensures that the last position is rounded if (newX != this.x || newY != this.y) {
if (newX > 0 || newX < this.maxScrollX || newY > 0 || newY < this.maxScrollY) {
easing = ease.quadratic;
}
this.scrollTo(newX, newY, time, easing);
return;
}
if (e.type === 'dragend') { //dragend
$.trigger(this.wrapper, 'scrollend', this); $.trigger(this.wrapper, 'scrollend', this);
return; e.stopPropagation();
} },
var time = 0; _end: function(e) {
var easing = ''; if (!this.moved && this.needReset) {
// start momentum animation if needed this.resetPosition(this.options.bounceTime);
if (this.options.momentum && detail.flickTime < 300) { }
momentumX = this.hasHorizontalScroll ? this.momentum(this.x, detail.flickDistanceX, detail.flickTime, this.maxScrollX, this.options.bounce ? this.wrapperWidth : 0, this.options.deceleration) : { },
destination: newX, _transitionEnd: function(e) {
duration: 0 if (e.target != this.scroller || !this.isInTransition) {
}; return;
momentumY = this.hasVerticalScroll ? this.momentum(this.y, detail.flickDistanceY, detail.flickTime, this.maxScrollY, this.options.bounce ? this.wrapperHeight : 0, this.options.deceleration) : { }
destination: newY,
duration: 0
};
newX = momentumX.destination;
newY = momentumY.destination;
time = Math.max(momentumX.duration, momentumY.duration);
this.isInTransition = true;
}
if (newX != this.x || newY != this.y) { this._transitionTime();
if (newX > 0 || newX < this.maxScrollX || newY > 0 || newY < this.maxScrollY) { if (!this.resetPosition(this.options.bounceTime)) {
easing = ease.quadratic; this.isInTransition = false;
$.trigger(this.wrapper, 'scrollend', this);
}
},
_scrollend: function(e) {
if (this.y <= this.maxScrollY) {
$.trigger(this.wrapper, 'scrollbottom', this);
}
},
_resize: function() {
var that = this;
clearTimeout(that.resizeTimeout);
that.resizeTimeout = setTimeout(function() {
that.refresh();
}, that.options.resizePolling);
},
_transitionTime: function(time) {
time = time || 0;
this.scrollerStyle['webkitTransitionDuration'] = time + 'ms';
if (this.options.fixedBadAndorid && !time && $.os.isBadAndroid) {
this.scrollerStyle['webkitTransitionDuration'] = '0.001s';
}
if (this.indicators) {
for (var i = this.indicators.length; i--;) {
this.indicators[i].transitionTime(time);
}
}
},
_transitionTimingFunction: function(easing) {
this.scrollerStyle['webkitTransitionTimingFunction'] = easing;
if (this.indicators) {
for (var i = this.indicators.length; i--;) {
this.indicators[i].transitionTimingFunction(easing);
}
}
},
_translate: function(x, y) {
this.x = x;
this.y = y;
},
_clearRequestAnimationFrame: function() {
if (this.requestAnimationFrame) {
cancelAnimationFrame(this.requestAnimationFrame);
this.requestAnimationFrame = null;
}
},
_updateTranslate: function() {
var self = this;
if (self.x !== self.lastX || self.y !== self.lastY) {
self.setTranslate(self.x, self.y);
}
self.requestAnimationFrame = requestAnimationFrame(function() {
self._updateTranslate();
});
},
_createScrollBar: function(clazz) {
var scrollbar = document.createElement('div');
var indicator = document.createElement('div');
scrollbar.className = CLASS_SCROLLBAR + ' ' + clazz;
indicator.className = CLASS_INDICATOR;
scrollbar.appendChild(indicator);
if (clazz === CLASS_SCROLLBAR_VERTICAL) {
this.scrollbarY = scrollbar;
this.scrollbarIndicatorY = indicator;
} else if (clazz === CLASS_SCROLLBAR_HORIZONTAL) {
this.scrollbarX = scrollbar;
this.scrollbarIndicatorX = indicator;
}
this.wrapper.appendChild(scrollbar);
return scrollbar;
},
_preventDefaultException: function(el, exceptions) {
for (var i in exceptions) {
if (exceptions[i].test(el[i])) {
return true;
}
}
return false;
},
_reLayout: function() {
if (!this.hasHorizontalScroll) {
this.maxScrollX = 0;
this.scrollerWidth = this.wrapperWidth;
} }
this.scrollTo(newX, newY, time, easing);
return;
}
$.trigger(this.wrapper, 'scrollend', this); if (!this.hasVerticalScroll) {
}; this.maxScrollY = 0;
this.scrollerHeight = this.wrapperHeight;
}
Scroll.prototype._resize = function() { this.indicators.map(function(indicator) {
var that = this; indicator.refresh();
});
},
_momentum: function(current, distance, time, lowerMargin, wrapperSize, deceleration) {
var speed = parseFloat(Math.abs(distance) / time),
destination,
duration;
deceleration = deceleration === undefined ? 0.0006 : deceleration;
destination = current + (speed * speed) / (2 * deceleration) * (distance < 0 ? -1 : 1);
duration = speed / deceleration;
if (destination < lowerMargin) {
destination = wrapperSize ? lowerMargin - (wrapperSize / 2.5 * (speed / 8)) : lowerMargin;
distance = Math.abs(destination - current);
duration = distance / speed;
} else if (destination > 0) {
destination = wrapperSize ? wrapperSize / 2.5 * (speed / 8) : 0;
distance = Math.abs(current) + destination;
duration = distance / speed;
}
clearTimeout(this.resizeTimeout); return {
destination: Math.round(destination),
duration: duration
};
},
//API
setTranslate: function(x, y) {
this.x = x;
this.y = y;
this.scrollerStyle['webkitTransform'] = 'translate(' + x + 'px,' + y + 'px)' + this.translateZ;
if (this.indicators) {
for (var i = this.indicators.length; i--;) {
this.indicators[i].updatePosition();
}
}
this.lastX = this.x;
this.lastY = this.y;
},
reLayout: function() {
this.wrapper.offsetHeight;
this.resizeTimeout = setTimeout(function() { var paddingLeft = parseFloat($.getStyles(this.wrapper, 'padding-left')) || 0;
that.refresh(); var paddingRight = parseFloat($.getStyles(this.wrapper, 'padding-right')) || 0;
}, this.options.resizePolling); var paddingTop = parseFloat($.getStyles(this.wrapper, 'padding-top')) || 0;
}; var paddingBottom = parseFloat($.getStyles(this.wrapper, 'padding-bottom')) || 0;
Scroll.prototype.momentum = function(current, distance, time, lowerMargin, wrapperSize, deceleration) {
var speed = parseFloat(Math.abs(distance) / time),
destination,
duration;
deceleration = deceleration === undefined ? 0.0006 : deceleration;
destination = current + (speed * speed) / (2 * deceleration) * (distance < 0 ? -1 : 1);
duration = speed / deceleration;
if (destination < lowerMargin) {
destination = wrapperSize ? lowerMargin - (wrapperSize / 2.5 * (speed / 8)) : lowerMargin;
distance = Math.abs(destination - current);
duration = distance / speed;
} else if (destination > 0) {
destination = wrapperSize ? wrapperSize / 2.5 * (speed / 8) : 0;
distance = Math.abs(current) + destination;
duration = distance / speed;
}
return { var clientWidth = this.wrapper.clientWidth;
destination: Math.round(destination), var clientHeight = this.wrapper.clientHeight;
duration: duration
};
};
Scroll.prototype.resetPosition = function(time) {
var x = this.x,
y = this.y;
time = time || 0;
if (!this.hasHorizontalScroll || this.x > 0) {
x = 0;
} else if (this.x < this.maxScrollX) {
x = this.maxScrollX;
}
if (this.pulldown && this.y >= this.options.down.height) {
this.pulldownLoading(x, time);
return true;
}
if (!this.hasVerticalScroll || this.y > 0) {
y = 0;
} else if (this.y < this.maxScrollY) {
y = this.maxScrollY;
}
if (x == this.x && y == this.y) { this.scrollerWidth = this.scroller.offsetWidth;
return false; this.scrollerHeight = this.scroller.offsetHeight;
}
this.scrollTo(x, y, time, this.options.bounceEasing);
return true; this.wrapperWidth = clientWidth - paddingLeft - paddingRight;
}; this.wrapperHeight = clientHeight - paddingTop - paddingBottom;
Scroll.prototype.reset = function() {
this.wrapper.offsetHeight;
var paddingLeft = parseFloat($.getStyles(this.wrapper, 'padding-left')) || 0; this.maxScrollX = Math.min(this.wrapperWidth - this.scrollerWidth, 0);
var paddingRight = parseFloat($.getStyles(this.wrapper, 'padding-right')) || 0; this.maxScrollY = Math.min(this.wrapperHeight - this.scrollerHeight, 0);
var paddingTop = parseFloat($.getStyles(this.wrapper, 'padding-top')) || 0; this.hasHorizontalScroll = this.options.scrollX && this.maxScrollX < 0;
var paddingBottom = parseFloat($.getStyles(this.wrapper, 'padding-bottom')) || 0; this.hasVerticalScroll = this.options.scrollY && this.maxScrollY < 0;
var clientWidth = this.wrapper.clientWidth; this._reLayout();
var clientHeight = this.wrapper.clientHeight; },
resetPosition: function(time) {
var x = this.x,
y = this.y;
this.scrollerWidth = this.scroller.offsetWidth; time = time || 0;
this.scrollerHeight = this.scroller.offsetHeight; if (!this.hasHorizontalScroll || this.x > 0) {
x = 0;
} else if (this.x < this.maxScrollX) {
x = this.maxScrollX;
}
this.wrapperWidth = clientWidth - paddingLeft - paddingRight; if (!this.hasVerticalScroll || this.y > 0) {
this.wrapperHeight = clientHeight - paddingTop - paddingBottom; y = 0;
} else if (this.y < this.maxScrollY) {
y = this.maxScrollY;
}
this.maxScrollX = Math.min(this.wrapperWidth - this.scrollerWidth, 0); if (x == this.x && y == this.y) {
this.maxScrollY = Math.min(this.wrapperHeight - this.scrollerHeight, 0); return false;
this.hasHorizontalScroll = this.options.scrollX && this.maxScrollX < 0; }
this.hasVerticalScroll = (this.options.scrollY && this.maxScrollY < 0) || (this.topPocket ? true : false); this.scrollTo(x, y, time, this.options.bounceEasing);
if (!this.hasHorizontalScroll) { return true;
this.maxScrollX = 0; },
this.scrollerWidth = this.wrapperWidth; refresh: function() {
} this.reLayout();
$.trigger(this.wrapper, 'refresh', this);
this.resetPosition();
},
scrollTo: function(x, y, time, easing) {
var easing = easing || ease.circular;
this.isInTransition = time > 0;
if (this.isInTransition) {
this._clearRequestAnimationFrame();
this._transitionTimingFunction(easing.style);
this._transitionTime(time);
this.setTranslate(x, y);
} else {
this.setTranslate(x, y);
}
if (!this.hasVerticalScroll) {
this.maxScrollY = 0;
this.scrollerHeight = this.wrapperHeight;
} }
});
//Indicator
var Indicator = function(scroller, options) {
this.wrapper = typeof options.el == 'string' ? document.querySelector(options.el) : options.el;
this.wrapperStyle = this.wrapper.style;
this.indicator = this.wrapper.children[0];
this.indicatorStyle = this.indicator.style;
this.scroller = scroller;
this.indicators.map(function(indicator) { this.options = $.extend({
indicator.refresh(); listenX: true,
}); listenY: true,
}; fade: false,
Scroll.prototype.refresh = function() { speedRatioX: 0,
this.reset(); speedRatioY: 0
$.trigger(this.wrapper, 'refresh', this); }, options);
this.resetPosition();
};
Scroll.prototype.createScrollBar = function(clazz) {
var scrollbar = document.createElement('div');
var indicator = document.createElement('div');
scrollbar.className = CLASS_SCROLLBAR + ' ' + clazz;
indicator.className = CLASS_INDICATOR;
scrollbar.appendChild(indicator);
if (clazz === CLASS_SCROLLBAR_VERTICAL) {
this.scrollbarY = scrollbar;
this.scrollbarIndicatorY = indicator;
} else if (clazz === CLASS_SCROLLBAR_HORIZONTAL) {
this.scrollbarX = scrollbar;
this.scrollbarIndicatorX = indicator;
}
this.wrapper.appendChild(scrollbar);
return scrollbar;
};
Scroll.prototype.scrollTo = function(x, y, time, easing) {
var easing = easing || ease.circular;
this.isInTransition = time > 0;
if (this.isInTransition) {
this._clearRequestAnimationFrame();
this._transitionTimingFunction(easing.style);
this._transitionTime(time);
this._setTranslate(x, y);
} else {
this._setTranslate(x, y);
}
}; this.sizeRatioX = 1;
Scroll.prototype._transitionTime = function(time) { this.sizeRatioY = 1;
time = time || 0; this.maxPosX = 0;
this.scrollerStyle['webkitTransitionDuration'] = time + 'ms'; this.maxPosY = 0;
if (!time && $.os.isBadAndroid) {
this.scrollerStyle['webkitTransitionDuration'] = '0.001s';
}
if (this.indicators) {
for (var i = this.indicators.length; i--;) {
this.indicators[i].transitionTime(time);
}
}
};
Scroll.prototype._transitionTimingFunction = function(easing) { if (this.options.fade) {
this.scrollerStyle['webkitTransitionTimingFunction'] = easing; this.wrapperStyle['webkitTransform'] = this.scroller.translateZ;
if (this.indicators) { this.wrapperStyle['webkitTransitionDuration'] = this.options.fixedBadAndorid && $.os.isBadAndroid ? '0.001s' : '0ms';
for (var i = this.indicators.length; i--;) { this.wrapperStyle.opacity = '0';
this.indicators[i].transitionTimingFunction(easing);
}
} }
}; }
Indicator.prototype = {
handleEvent: function(e) {
Scroll.prototype._translate = function(x, y) { },
this.x = x; transitionTime: function(time) {
this.y = y; time = time || 0;
}; this.indicatorStyle['webkitTransitionDuration'] = time + 'ms';
Scroll.prototype._clearRequestAnimationFrame = function() { if (this.scroller.options.fixedBadAndorid && !time && $.os.isBadAndroid) {
if (this.requestAnimationFrame) { this.indicatorStyle['webkitTransitionDuration'] = '0.001s';
cancelAnimationFrame(this.requestAnimationFrame); }
this.requestAnimationFrame = null; },
} transitionTimingFunction: function(easing) {
}; this.indicatorStyle['webkitTransitionTimingFunction'] = easing;
Scroll.prototype._setTranslate = function(x, y) { },
this.x = x; refresh: function() {
this.y = y; this.transitionTime();
this.scrollerStyle['webkitTransform'] = 'translate(' + x + 'px,' + y + 'px)' + this.translateZ;
if (this.indicators) { if (this.options.listenX && !this.options.listenY) {
for (var i = this.indicators.length; i--;) { this.indicatorStyle.display = this.scroller.hasHorizontalScroll ? 'block' : 'none';
this.indicators[i].updatePosition(); } else if (this.options.listenY && !this.options.listenX) {
} this.indicatorStyle.display = this.scroller.hasVerticalScroll ? 'block' : 'none';
} } else {
this.lastX = this.x; this.indicatorStyle.display = this.scroller.hasHorizontalScroll || this.scroller.hasVerticalScroll ? 'block' : 'none';
this.lastY = this.y; }
};
Scroll.prototype._updateTranslate = function() { this.wrapper.offsetHeight; // force refresh
var self = this;
if (self.x !== self.lastX || self.y !== self.lastY) { if (this.options.listenX) {
self._setTranslate(self.x, self.y); this.wrapperWidth = this.wrapper.clientWidth;
this.indicatorWidth = Math.max(Math.round(this.wrapperWidth * this.wrapperWidth / (this.scroller.scrollerWidth || this.wrapperWidth || 1)), 8);
this.indicatorStyle.width = this.indicatorWidth + 'px';
this.maxPosX = this.wrapperWidth - this.indicatorWidth;
this.minBoundaryX = 0;
this.maxBoundaryX = this.maxPosX;
this.sizeRatioX = this.options.speedRatioX || (this.scroller.maxScrollX && (this.maxPosX / this.scroller.maxScrollX));
}
if (this.options.listenY) {
this.wrapperHeight = this.wrapper.clientHeight;
this.indicatorHeight = Math.max(Math.round(this.wrapperHeight * this.wrapperHeight / (this.scroller.scrollerHeight || this.wrapperHeight || 1)), 8);
this.indicatorStyle.height = this.indicatorHeight + 'px';
this.maxPosY = this.wrapperHeight - this.indicatorHeight;
this.minBoundaryY = 0;
this.maxBoundaryY = this.maxPosY;
this.sizeRatioY = this.options.speedRatioY || (this.scroller.maxScrollY && (this.maxPosY / this.scroller.maxScrollY));
}
this.updatePosition();
},
updatePosition: function() {
var x = this.options.listenX && Math.round(this.sizeRatioX * this.scroller.x) || 0,
y = this.options.listenY && Math.round(this.sizeRatioY * this.scroller.y) || 0;
if (x < this.minBoundaryX) {
this.width = Math.max(this.indicatorWidth + x, 8);
this.indicatorStyle.width = this.width + 'px';
x = this.minBoundaryX;
} else if (x > this.maxBoundaryX) {
this.width = Math.max(this.indicatorWidth - (x - this.maxPosX), 8);
this.indicatorStyle.width = this.width + 'px';
x = this.maxPosX + this.indicatorWidth - this.width;
} else if (this.width != this.indicatorWidth) {
this.width = this.indicatorWidth;
this.indicatorStyle.width = this.width + 'px';
}
if (y < this.minBoundaryY) {
this.height = Math.max(this.indicatorHeight + y * 3, 8);
this.indicatorStyle.height = this.height + 'px';
y = this.minBoundaryY;
} else if (y > this.maxBoundaryY) {
this.height = Math.max(this.indicatorHeight - (y - this.maxPosY) * 3, 8);
this.indicatorStyle.height = this.height + 'px';
y = this.maxPosY + this.indicatorHeight - this.height;
} else if (this.height != this.indicatorHeight) {
this.height = this.indicatorHeight;
this.indicatorStyle.height = this.height + 'px';
}
this.x = x;
this.y = y;
this.indicatorStyle['webkitTransform'] = 'translate(' + x + 'px,' + y + 'px)' + this.scroller.translateZ;
},
fade: function(val, hold) {
if (hold && !this.visible) {
return;
}
clearTimeout(this.fadeTimeout);
this.fadeTimeout = null;
var time = val ? 250 : 500,
delay = val ? 0 : 300;
val = val ? '1' : '0';
this.wrapperStyle['webkitTransitionDuration'] = time + 'ms';
this.fadeTimeout = setTimeout((function(val) {
this.wrapperStyle.opacity = val;
this.visible = +val;
}).bind(this, val), delay);
} }
self.requestAnimationFrame = requestAnimationFrame(function() {
self._updateTranslate();
});
}; };
//pullrefreh
$.Scroll = Scroll;
$.fn.scroll = function(options) {
this.each(function() {
var scroll = this.getAttribute('data-scroll');
if (!scroll) {
var id = ++$.uuid;
$.data[id] = new Scroll(this, options);
this.setAttribute('data-scroll', id);
}
});
};
})(mui, window, document);
(function($, window, document, undefined) {
var CLASS_PULL_TOP_POCKET = 'mui-pull-top-pocket'; var CLASS_PULL_TOP_POCKET = 'mui-pull-top-pocket';
var CLASS_PULL_BOTTOM_POCKET = 'mui-pull-bottom-pocket'; var CLASS_PULL_BOTTOM_POCKET = 'mui-pull-bottom-pocket';
var CLASS_PULL = 'mui-pull'; var CLASS_PULL = 'mui-pull';
...@@ -2186,7 +2361,10 @@ var mui = (function(document, undefined) { ...@@ -2186,7 +2361,10 @@ var mui = (function(document, undefined) {
var pocketHtml = ['<div class="' + CLASS_PULL + '">', '<div class="' + CLASS_LOADING_DOWN + '"></div>', '<div class="' + CLASS_PULL_CAPTION + '">{downCaption}</div>', '</div>'].join(''); var pocketHtml = ['<div class="' + CLASS_PULL + '">', '<div class="' + CLASS_LOADING_DOWN + '"></div>', '<div class="' + CLASS_PULL_CAPTION + '">{downCaption}</div>', '</div>'].join('');
var pullRefreshOptions = { var defaultOptions = {
scrollY: true,
scrollX: false,
indicators: true,
down: { down: {
height: 50, height: 50,
contentdown: '下拉可以刷新', contentdown: '下拉可以刷新',
...@@ -2200,282 +2378,412 @@ var mui = (function(document, undefined) { ...@@ -2200,282 +2378,412 @@ var mui = (function(document, undefined) {
duration: 300 duration: 300
} }
}; };
Scroll.prototype.pulldownLoading = function(x, time) { var PullRefresh = $.Scroll.extend({
x = x || 0; init: function(element, options) {
this.scrollTo(x, this.options.down.height, time, this.options.bounceEasing); this._super(element, $.extend(defaultOptions, options, true));
if (this.loading) { },
return; _init: function() {
} this._super();
this._setCaption(this.options.down.contentrefresh); this._initPocket();
this.loading = true; },
this.indicators.map(function(indicator) { _initPocket: function() {
indicator.fade(0); var options = this.options;
}); if (options.down && options.down.hasOwnProperty('callback')) {
var callback = this.options.down.callback; this.topPocket = this.scroller.querySelector('.' + CLASS_PULL_TOP_POCKET);
var that = this; if (!this.topPocket) {
callback && callback(function() { this.topPocket = this._createPocket(CLASS_PULL_TOP_POCKET, options.down);
that.scrollTo(x, 0, time, that.options.bounceEasing); this.scroller.insertBefore(this.topPocket, this.scroller.firstChild);
that.loading = false;
that._setCaption(that.options.down.contentdown);
});
};
Scroll.prototype.pullupLoading = function(x, time) {
x = x || 0;
this.scrollTo(x, this.maxScrollY, time, this.options.bounceEasing);
if (this.loading) {
return;
}
this._setCaption(this.options.up.contentrefresh);
this.indicators.map(function(indicator) {
indicator.fade(0);
});
this.loading = true;
var callback = this.options.up.callback;
var that = this;
callback && callback(function() {
that.loading = false;
that._setCaption(that.options.up.contentdown);
});
};
Scroll.prototype._initPullRefresh = function() {
this._initPocket();
};
Scroll.prototype._initPocket = function() {
var options = this.options;
if (options.down && options.down.hasOwnProperty('callback')) {
this.topPocket = this.scroller.querySelector('.' + CLASS_PULL_TOP_POCKET);
if (!this.topPocket) {
this.topPocket = this._createPocket(CLASS_PULL_TOP_POCKET, options.down);
this.scroller.insertBefore(this.topPocket, this.scroller.firstChild);
this.topLoading = this.topPocket.querySelector('.' + CLASS_PULL_LOADING);
this.topCaption = this.topPocket.querySelector('.' + CLASS_PULL_CAPTION);
} this.topLoading = this.topPocket.querySelector('.' + CLASS_PULL_LOADING);
} this.topCaption = this.topPocket.querySelector('.' + CLASS_PULL_CAPTION);
if (options.up && options.up.hasOwnProperty('callback')) {
this.bottomPocket = this.scroller.querySelector('.' + CLASS_PULL_BOTTOM_POCKET);
if (!this.bottomPocket) {
this.bottomPocket = this._createPocket(CLASS_PULL_BOTTOM_POCKET, options.up);
this.scroller.appendChild(this.bottomPocket);
this.bottomLoading = this.bottomPocket.querySelector('.' + CLASS_PULL_LOADING); }
this.bottomCaption = this.bottomPocket.querySelector('.' + CLASS_PULL_CAPTION);
} }
var that = this; if (options.up && options.up.hasOwnProperty('callback')) {
this.wrapper.addEventListener('scrollbottom', function() { this.bottomPocket = this.scroller.querySelector('.' + CLASS_PULL_BOTTOM_POCKET);
if (!that.pulldown && !that.loading) { if (!this.bottomPocket) {
that.pullPocket = that.bottomPocket; this.bottomPocket = this._createPocket(CLASS_PULL_BOTTOM_POCKET, options.up);
that.pullCaption = that.bottomCaption; this.scroller.appendChild(this.bottomPocket);
that.pullLoading = that.bottomLoading;
that.pullupLoading(); this.bottomLoading = this.bottomPocket.querySelector('.' + CLASS_PULL_LOADING);
this.bottomCaption = this.bottomPocket.querySelector('.' + CLASS_PULL_CAPTION);
} }
}); var that = this;
} this.wrapper.addEventListener('scrollbottom', function() {
}; if (!that.pulldown && !that.loading) {
Scroll.prototype._createPocket = function(clazz, options) { that.pullPocket = that.bottomPocket;
var pocket = document.createElement('div'); that.pullCaption = that.bottomCaption;
pocket.className = clazz; that.pullLoading = that.bottomLoading;
pocket.innerHTML = pocketHtml.replace('{downCaption}', options.contentdown); that.pullupLoading();
return pocket; }
}; });
}
Scroll.prototype._setCaption = function(title) { },
if (this.loading) { _createPocket: function(clazz, options) {
return; var pocket = document.createElement('div');
} pocket.className = clazz;
var options = this.options; pocket.innerHTML = pocketHtml.replace('{downCaption}', options.contentdown);
var pocket = this.pullPocket; return pocket;
if (pocket) { },
if (title !== this.lastTitle) { _setCaption: function(title) {
var caption = this.pullCaption; if (this.loading) {
var loading = this.pullLoading; return;
caption.innerHTML = title; }
if (this.pulldown) { var options = this.options;
// if (title === options.down.contentrefresh) { var pocket = this.pullPocket;
loading.className = CLASS_LOADING; if (pocket) {
// } else if (title === options.down.contentover) { if (title !== this.lastTitle) {
// loading.className = CLASS_LOADING_UP; var caption = this.pullCaption;
// } else if (title === options.down.contentdown) { var loading = this.pullLoading;
// loading.className = CLASS_LOADING_DOWN; caption.innerHTML = title;
// } if (this.pulldown) {
} else { // if (title === options.down.contentrefresh) {
if (title === options.up.contentrefresh) {
loading.className = CLASS_LOADING + ' ' + CLASS_IN;
} else {
loading.className = CLASS_LOADING; loading.className = CLASS_LOADING;
// } else if (title === options.down.contentover) {
// loading.className = CLASS_LOADING_UP;
// } else if (title === options.down.contentdown) {
// loading.className = CLASS_LOADING_DOWN;
// }
} else {
if (title === options.up.contentrefresh) {
loading.className = CLASS_LOADING + ' ' + CLASS_IN;
} else {
loading.className = CLASS_LOADING;
}
} }
this.lastTitle = title;
} }
this.lastTitle = title;
} }
},
_start: function(e) {
if (!this.loading) {
this.pulldown = this.pullPocket = this.pullCaption = this.pullLoading = false
}
this._super(e);
},
_drag: function(e) {
this._super(e);
if (!this.pulldown && !this.loading && this.topPocket && e.detail.direction === 'down' && this.y >= 0) {
this.pulldown = true;
this.pullPocket = this.topPocket;
this.pullCaption = this.topCaption;
this.pullLoading = this.topLoading;
}
if (this.pulldown) {
this._setCaption(this.y > this.options.down.height ? this.options.down.contentover : this.options.down.contentdown);
}
},
_reLayout: function() {
this.hasVerticalScroll = true;
this._super();
},
//API
resetPosition: function(time) {
if (this.pulldown && this.y >= this.options.down.height) {
this.pulldownLoading(0, time || 0);
return true;
}
return this._super(time);
},
pulldownLoading: function(x, time) {
x = x || 0;
this.scrollTo(x, this.options.down.height, time, this.options.bounceEasing);
if (this.loading) {
return;
}
this._setCaption(this.options.down.contentrefresh);
this.loading = true;
this.indicators.map(function(indicator) {
indicator.fade(0);
});
var callback = this.options.down.callback;
var that = this;
callback && callback(function() {
that.scrollTo(x, 0, time, that.options.bounceEasing);
that.loading = false;
that._setCaption(that.options.down.contentdown);
});
},
pullupLoading: function(x, time) {
x = x || 0;
this.scrollTo(x, this.maxScrollY, time, this.options.bounceEasing);
if (this.loading) {
return;
}
this._setCaption(this.options.up.contentrefresh);
this.indicators.map(function(indicator) {
indicator.fade(0);
});
this.loading = true;
var callback = this.options.up.callback;
var that = this;
callback && callback(function() {
that.loading = false;
that._setCaption(that.options.up.contentdown);
});
} }
});
$.fn.pullRefresh = function(options) {
this.each(function() {
var pullrefresh = this.getAttribute('data-pullrefresh');
if (!pullrefresh) {
var id = ++$.uuid;
$.data[id] = new PullRefresh(this, options);
this.setAttribute('data-pullrefresh', id);
}
});
}; };
//Indicator })(mui, window, document);
var Indicator = function(scroller, options) { (function($, window, document, undefined) {
this.wrapper = typeof options.el == 'string' ? document.querySelector(options.el) : options.el; var CLASS_SLIDER = 'mui-slider';
this.wrapperStyle = this.wrapper.style; var CLASS_SLIDER_GROUP = 'mui-slider-group';
this.indicator = this.wrapper.children[0]; var CLASS_SLIDER_LOOP = 'mui-slider-loop';
this.indicatorStyle = this.indicator.style; var CLASS_SLIDER_INDICATOR = 'mui-slider-indicator';
this.scroller = scroller; var CLASS_ACTION_PREVIOUS = 'mui-action-previous';
var CLASS_ACTION_NEXT = 'mui-action-next';
this.options = $.extend({ var CLASS_SLIDER_ITEM = 'mui-slider-item';
listenX: true, var CLASS_SLIDER_ITEM_DUPLICATE = CLASS_SLIDER_ITEM + '-duplicate';
listenY: true,
fade: false,
speedRatioX: 0,
speedRatioY: 0
}, options);
this.sizeRatioX = 1; var CLASS_DISABLED = 'mui-disabled';
this.sizeRatioY = 1;
this.maxPosX = 0;
this.maxPosY = 0;
if (this.options.fade) { var SELECTOR_SLIDER_ITEM = '.' + CLASS_SLIDER_ITEM;
this.wrapperStyle['webkitTransform'] = this.scroller.translateZ; var SELECTOR_SLIDER_ITEM_DUPLICATE = '.' + CLASS_SLIDER_ITEM_DUPLICATE;
this.wrapperStyle['webkitTransitionDuration'] = $.os.isBadAndroid ? '0.001s' : '0ms'; var SELECTOR_SLIDER_INDICATOR = '.' + CLASS_SLIDER_INDICATOR;
this.wrapperStyle.opacity = '0'; var SELECTOR_SLIDER_PROGRESS_BAR = '.mui-slider-progress-bar';
}
}
Indicator.prototype = {
handleEvent: function(e) {
var defaultOptions = {
interval: 0, //设置为0，则不定时轮播
scrollY: false,
scrollX: true,
indicators: false,
bounceTime: 200,
startX: false
};
var Slider = $.Scroll.extend({
init: function(element, options) {
this._super(element, $.extend(defaultOptions, options, true));
}, },
transitionTime: function(time) { _init: function() {
time = time || 0; this.scroller = this.wrapper.querySelector('.' + CLASS_SLIDER_GROUP);
this.indicatorStyle['webkitTransitionDuration'] = time + 'ms'; this.scrollerStyle = this.scroller.style;
if (!time && $.os.android) { this.progressBar = this.wrapper.querySelector(SELECTOR_SLIDER_PROGRESS_BAR);
this.indicatorStyle['webkitTransitionDuration'] = '0.001s'; if (this.progressBar) {
this.progressBarWidth = this.progressBar.offsetWidth;
this.progressBarStyle = this.progressBar.style;
} }
},
transitionTimingFunction: function(easing) { this.x = this._getScroll();
this.indicatorStyle['webkitTransitionTimingFunction'] = easing; if (this.options.startX === false) {
this.options.startX = this.x;
}
this._super();
this._initTimer();
}, },
_initEvent: function() {
var self = this;
self._super();
self.wrapper.addEventListener('swiperight', $.stopPropagation);
self.wrapper.addEventListener('scrollend', function() {
self.slideNumber = self._getSlideNumber();
var slideNumber = self.slideNumber;
if (self.loop) {
if (self.slideNumber === 0) {
self.slideNumber = self.itemLength - 2;
self.setTranslate(-self.wrapperWidth * (self.itemLength - 2), 0);
} else if (self.slideNumber === (self.itemLength - 1)) {
self.slideNumber = 1;
self.setTranslate(-self.wrapperWidth, 0);
}
slideNumber = self.slideNumber - 1;
}
$.trigger(self.wrapper, 'slide', {
slideNumber: slideNumber
});
});
self.wrapper.addEventListener('slide', function(e) {
var detail = e.detail;
detail.slideNumber = detail.slideNumber || 0;
var indicators = self.wrapper.querySelectorAll('.mui-slider-indicator .mui-indicator');
if (indicators.length > 0) { //图片轮播
for (var i = 0, len = indicators.length; i < len; i++) {
indicators[i].classList[i === detail.slideNumber ? 'add' : 'remove']('mui-active');
}
} else {
var number = self.wrapper.querySelector('.mui-slider-indicator .mui-number span');
if (number) { //图文表格
number.innerText = (detail.slideNumber + 1);
} else { //segmented controls
var controlItems = self.wrapper.querySelectorAll('.mui-control-item');
for (var i = 0, len = controlItems.length; i < len; i++) {
controlItems[i].classList[i === detail.slideNumber ? 'add' : 'remove']('mui-active');
}
}
}
e.stopPropagation();
});
refresh: function() { self.wrapper.addEventListener($.eventName('shown', 'tab'), function(e) { //tab
this.transitionTime(); self.gotoItem((e.detail.tabNumber || 0), self.options.bounceTime);
});
if (this.options.listenX && !this.options.listenY) { //indicator
this.indicatorStyle.display = this.scroller.hasHorizontalScroll ? 'block' : 'none'; var indicator = self.wrapper.querySelector(SELECTOR_SLIDER_INDICATOR);
} else if (this.options.listenY && !this.options.listenX) { if (indicator) {
this.indicatorStyle.display = this.scroller.hasVerticalScroll ? 'block' : 'none'; indicator.addEventListener('tap', function(event) {
} else { var target = event.target;
this.indicatorStyle.display = this.scroller.hasHorizontalScroll || this.scroller.hasVerticalScroll ? 'block' : 'none'; if (target.classList.contains(CLASS_ACTION_PREVIOUS) || target.classList.contains(CLASS_ACTION_NEXT)) {
self[target.classList.contains(CLASS_ACTION_PREVIOUS) ? 'prevItem' : 'nextItem']();
event.stopPropagation();
}
});
} }
},
this.wrapper.offsetHeight; // force refresh _initTimer: function() {
var self = this;
if (this.options.listenX) { var slider = self.wrapper;
this.wrapperWidth = this.wrapper.clientWidth; var interval = self.options.interval;
this.indicatorWidth = Math.max(Math.round(this.wrapperWidth * this.wrapperWidth / (this.scroller.scrollerWidth || this.wrapperWidth || 1)), 8); var slidershowTimer = slider.getAttribute('data-slidershowTimer');
this.indicatorStyle.width = this.indicatorWidth + 'px'; slidershowTimer && window.clearTimeout(slidershowTimer);
if (interval) {
this.maxPosX = this.wrapperWidth - this.indicatorWidth; slidershowTimer = window.setTimeout(function() {
if (!slider) {
this.minBoundaryX = 0; return;
this.maxBoundaryX = this.maxPosX; }
//仅slider显示状态进行自动轮播
this.sizeRatioX = this.options.speedRatioX || (this.scroller.maxScrollX && (this.maxPosX / this.scroller.maxScrollX)); if (!!(slider.offsetWidth || slider.offsetHeight)) {
self.nextItem();
//下一个
}
self._initTimer();
}, interval);
slider.setAttribute('data-slidershowTimer', slidershowTimer);
} }
},
if (this.options.listenY) { _reLayout: function() {
this.wrapperHeight = this.wrapper.clientHeight; this.hasHorizontalScroll = true;
this.indicatorHeight = Math.max(Math.round(this.wrapperHeight * this.wrapperHeight / (this.scroller.scrollerHeight || this.wrapperHeight || 1)), 8); this.loop = this.scroller.classList.contains(CLASS_SLIDER_LOOP);
this.indicatorStyle.height = this.indicatorHeight + 'px';
this.itemLength = this.scroller.querySelectorAll(SELECTOR_SLIDER_ITEM).length;
this.maxPosY = this.wrapperHeight - this.indicatorHeight; this.scrollerWidth = this.itemLength * this.scrollerWidth;
this.maxScrollX = Math.min(this.wrapperWidth - this.scrollerWidth, 0);
this.minBoundaryY = 0; this.slideNumber = this._getSlideNumber();
this.maxBoundaryY = this.maxPosY; this._super();
},
this.sizeRatioY = this.options.speedRatioY || (this.scroller.maxScrollY && (this.maxPosY / this.scroller.maxScrollY)); _getScroll: function() {
var result = $.parseTranslateMatrix($.getStyles(this.scroller, 'webkitTransform'));
return result ? result.x : 0;
},
_getSlideNumber: function() {
return Math.abs(Math.round(this.x / this.wrapperWidth));
},
_transitionEnd: function(e) {
if (e.target != this.scroller || !this.isInTransition) {
return;
}
this._transitionTime();
this.isInTransition = false;
$.trigger(this.wrapper, 'scrollend', this);
},
_flick: function(e) {
var detail = e.detail;
var direction = detail.direction;
this._clearRequestAnimationFrame();
this.isInTransition = true;
if (direction === 'up' || direction === 'down') {
this.resetPosition(this.options.bounceTime);
return;
} }
if (e.type === 'flick') {
this.updatePosition(); this.x = -(this.slideNumber + (direction === 'left' ? 1 : -1)) * this.wrapperWidth;
this.resetPosition(this.options.bounceTime);
} else if (e.type === 'dragend' && !detail.flick) {
this.resetPosition(this.options.bounceTime);
}
e.stopPropagation();
}, },
_gotoItem: function(slideNumber, time) {
updatePosition: function() { this.scrollTo(-slideNumber * this.wrapperWidth, 0, time, this.options.bounceEasing);
var x = this.options.listenX && Math.round(this.sizeRatioX * this.scroller.x) || 0, this._initTimer();
y = this.options.listenY && Math.round(this.sizeRatioY * this.scroller.y) || 0; },
_fixedSlideNumber: function(slideNumber) {
if (x < this.minBoundaryX) { if (!this.loop) {
this.width = Math.max(this.indicatorWidth + x, 8); if (slideNumber < 0) {
this.indicatorStyle.width = this.width + 'px'; slideNumber = 0;
x = this.minBoundaryX; } else if (slideNumber >= this.itemLength) {
} else if (x > this.maxBoundaryX) { slideNumber = this.itemLength - 1;
this.width = Math.max(this.indicatorWidth - (x - this.maxPosX), 8); }
this.indicatorStyle.width = this.width + 'px'; } else {
x = this.maxPosX + this.indicatorWidth - this.width; if (slideNumber === 0) {
} else if (this.width != this.indicatorWidth) { slideNumber = this.itemLength - 2;
this.width = this.indicatorWidth; } else if (slideNumber === this.itemLength - 1) {
this.indicatorStyle.width = this.width + 'px'; slideNumber = 1;
}
} }
return slideNumber;
if (y < this.minBoundaryY) { },
this.height = Math.max(this.indicatorHeight + y * 3, 8); //API
this.indicatorStyle.height = this.height + 'px'; setTranslate: function(x, y) {
y = this.minBoundaryY; this._super(x, y);
} else if (y > this.maxBoundaryY) { var progressBar = this.progressBar;
this.height = Math.max(this.indicatorHeight - (y - this.maxPosY) * 3, 8); if (progressBar) {
this.indicatorStyle.height = this.height + 'px'; this.progressBarStyle.webkitTransform = 'translate3d(' + (-x * (this.progressBarWidth / this.wrapperWidth)) + 'px,0,0)';
y = this.maxPosY + this.indicatorHeight - this.height;
} else if (this.height != this.indicatorHeight) {
this.height = this.indicatorHeight;
this.indicatorStyle.height = this.height + 'px';
} }
this.x = x;
this.y = y;
this.indicatorStyle['webkitTransform'] = 'translate(' + x + 'px,' + y + 'px)' + this.scroller.translateZ;
}, },
resetPosition: function(time) {
time = time || 0;
fade: function(val, hold) { if (this.x > 0) {
if (hold && !this.visible) { this.x = 0;
return; } else if (this.x < this.maxScrollX) {
this.x = this.maxScrollX;
} }
this._gotoItem(this._getSlideNumber(), time);
clearTimeout(this.fadeTimeout); return true;
this.fadeTimeout = null; },
gotoItem: function(slideNumber, time) {
var time = val ? 250 : 500, this._gotoItem(this._fixedSlideNumber(this.loop ? (slideNumber + 1) : slideNumber), time || this.options.bounceEasing);
delay = val ? 0 : 300; },
nextItem: function() {
val = val ? '1' : '0'; this._gotoItem(this._fixedSlideNumber(this.slideNumber + 1), this.options.bounceTime);
},
this.wrapperStyle['webkitTransitionDuration'] = time + 'ms'; prevItem: function() {
this._gotoItem(this._fixedSlideNumber(this.slideNumber - 1), this.options.bounceTime);
this.fadeTimeout = setTimeout((function(val) { },
this.wrapperStyle.opacity = val; refresh: function(options) {
this.visible = +val; if (options) {
}).bind(this, val), delay); $.extend(this.options, options);
} this._super();
}; this._gotoItem(this._getSlideNumber() + 1, this.options.bounceTime);
$.fn.scroll = function(options) { } else {
this.each(function() { this._super();
var scroll = this.getAttribute('data-scroll');
if (!scroll) {
var id = ++$.uuid;
$.data[id] = new Scroll(this, options);
this.setAttribute('data-scroll', id);
} }
}); },
}; });
$.fn.pullRefresh = function(options) { $.fn.slider = function(options) {
var slider = null;
this.each(function() { this.each(function() {
var pullrefresh = this.getAttribute('data-pullrefresh'); var sliderElement = this;
if (!pullrefresh) { if (!this.classList.contains(CLASS_SLIDER)) {
var id = ++$.uuid; sliderElement = this.querySelector('.' + CLASS_SLIDER);
$.data[id] = new Scroll(this, $.extend(pullRefreshOptions, options, true)); }
this.setAttribute('data-pullrefresh', id); if (sliderElement) {
var id = sliderElement.getAttribute('data-slider');
if (!id) {
id = ++$.uuid;
$.data[id] = slider = new Slider(sliderElement, options);
sliderElement.setAttribute('data-slider', id);
} else {
slider = $.data[id];
if (slider && options) {
slider.refresh(options);
}
}
} }
}); });
return slider;
}; };
})(mui, window, document, 'scroll'); $.ready(function() {
$('.mui-slider').slider();
});
})(mui, window, document);
/** /**
* pulldownRefresh 5+ * pulldownRefresh 5+
* @param {type} $ * @param {type} $
...@@ -3131,369 +3439,6 @@ var mui = (function(document, undefined) { ...@@ -3131,369 +3439,6 @@ var mui = (function(document, undefined) {
})(mui, window, document, 'tab'); })(mui, window, document, 'tab');
/**
* Slider (TODO resize)
* @param {type} $
* @param {type} window
* @returns {undefined}
*/
(function($, window) {
var CLASS_SLIDER = 'mui-slider';
var CLASS_SLIDER_GROUP = 'mui-slider-group';
var CLASS_SLIDER_LOOP = 'mui-slider-loop';
var CLASS_SLIDER_INDICATOR = 'mui-slider-indicator';
var CLASS_ACTION_PREVIOUS = 'mui-action-previous';
var CLASS_ACTION_NEXT = 'mui-action-next';
var CLASS_SLIDER_ITEM = 'mui-slider-item';
var CLASS_SLIDER_ITEM_DUPLICATE = CLASS_SLIDER_ITEM + '-duplicate';
var SELECTOR_SLIDER_ITEM = '.' + CLASS_SLIDER_ITEM;
var SELECTOR_SLIDER_ITEM_DUPLICATE = '.' + CLASS_SLIDER_ITEM_DUPLICATE;
var SELECTOR_SLIDER_INDICATOR = '.' + CLASS_SLIDER_INDICATOR;
var SELECTOR_SLIDER_PROGRESS_BAR = '.mui-slider-progress-bar';
var Slider = function(element, options) {
this.element = element;
this.options = $.extend({
slideshowDelay: 0, //设置为0，则不定时轮播
factor: 1
}, options);
this.init();
};
Slider.prototype.init = function() {
// this.initDuplicate();
this.initEvent();
this.initTimer();
};
Slider.prototype.refresh = function(options) {
var newOptions = $.extend({
slideshowDelay: 0, //设置为0，则不定时轮播
factor: 1
}, options);
if (this.options.slideshowDelay != newOptions.slideshowDelay) {
this.options.slideshowDelay = newOptions.slideshowDelay;
if (this.options.slideshowDelay) {
this.nextItem();
}
}
};
//TODO 暂时不做自动clone
// Slider.prototype.initDuplicate = function() {
// var self = this;
// var element = self.element;
// if (element.classList.contains(CLASS_SLIDER_LOOP)) {
// var duplicates = element.getElementsByClassName(CLASS_SLIDER_ITEM_DUPLICATE);
// }
// };
Slider.prototype.initEvent = function() {
var self = this;
var element = self.element;
var slider = element.parentNode;
self.translateX = 0;
self.sliderWidth = element.offsetWidth;
self.isLoop = element.classList.contains(CLASS_SLIDER_LOOP);
self.sliderLength = element.querySelectorAll(SELECTOR_SLIDER_ITEM).length;
self.progressBarWidth = 0;
self.progressBar = slider.querySelector(SELECTOR_SLIDER_PROGRESS_BAR);
if (self.progressBar) {
self.progressBarWidth = self.progressBar.offsetWidth;
}
//slider
var isDragable = false;
self.isSwipeable = false;
slider.addEventListener('dragstart', function(event) {
var detail = event.detail;
var direction = detail.direction;
if (direction === 'left' || direction === 'right') { //reset
isDragable = true;
self.translateX = self.lastTranslateX = 0;
self.scrollX = self.getScroll();
self.sliderWidth = element.offsetWidth;
self.isLoop = element.classList.contains(CLASS_SLIDER_LOOP);
self.sliderLength = element.querySelectorAll(SELECTOR_SLIDER_ITEM).length;
if (self.progressBar) {
self.progressBarWidth = self.progressBar.offsetWidth;
}
self.maxTranslateX = ((self.sliderLength - 1) * self.sliderWidth);
event.detail.gesture.preventDefault();
var isStopPropagation = true;
if (!self.isLoop) {
if (direction === 'right' && self.scrollX === 0) {
isStopPropagation = false;
} else if (direction === 'left' && self.scrollX === -self.maxTranslateX) {
isStopPropagation = false;
}
}
isStopPropagation && event.stopPropagation();
}
});
slider.addEventListener('drag', function(event) {
if (isDragable) {
self.dragItem(event);
event.stopPropagation();
}
});
slider.addEventListener('dragend', function(event) {
if (isDragable) {
self.gotoItem(self.getSlideNumber());
isDragable = self.isSwipeable = false;
event.stopPropagation();
}
});
// slider.addEventListener('flick', $.stopPropagation);
slider.addEventListener('swipeleft', function(event) {
if (self.isSwipeable) {
//stop dragend
$.gestures.stoped = true;
self.nextItem();
isDragable = self.isSwipeable = false;
}
event.stopPropagation();
});
slider.addEventListener('swiperight', function(event) {
if (self.isSwipeable) {
//stop dragend
$.gestures.stoped = true;
self.prevItem();
isDragable = self.isSwipeable = false;
}
event.stopPropagation();
});
slider.addEventListener('slide', function(e) {
var detail = e.detail;
detail.slideNumber = detail.slideNumber || 0;
var number = slider.querySelector('.mui-slider-indicator .mui-number span');
if (number) {
number.innerText = (detail.slideNumber + 1);
}
var indicators = slider.querySelectorAll('.mui-slider-indicator .mui-indicator');
for (var i = 0, len = indicators.length; i < len; i++) {
indicators[i].classList[i === detail.slideNumber ? 'add' : 'remove']('mui-active');
}
var controlItems = slider.querySelectorAll('.mui-control-item');
for (var i = 0, len = controlItems.length; i < len; i++) {
controlItems[i].classList[i === detail.slideNumber ? 'add' : 'remove']('mui-active');
}
});
slider.addEventListener($.eventName('shown', 'tab'), function(e) { //tab
self.gotoItem(-(e.detail.tabNumber || 0));
});
//indicator
var indicator = element.parentNode.querySelector(SELECTOR_SLIDER_INDICATOR);
if (indicator) {
indicator.addEventListener('tap', function(event) {
var target = event.target;
if (target.classList.contains(CLASS_ACTION_PREVIOUS) || target.classList.contains(CLASS_ACTION_NEXT)) {
self[target.classList.contains(CLASS_ACTION_PREVIOUS) ? 'prevItem' : 'nextItem']();
event.stopPropagation();
}
});
}
};
Slider.prototype.dragItem = function(event) {
var self = this;
var detail = event.detail;
if (detail.deltaX !== detail.lastDeltaX) {
var translate = (detail.deltaX * self.options.factor + self.scrollX);
self.element.style['-webkit-transition-duration'] = '0';
var min = 0;
var max = -self.maxTranslateX;
if (self.isLoop) {
min = self.sliderWidth;
max = max + min;
}
if (translate > min || translate < max) {
self.isSwipeable = false;
return;
}
if (!self.requestAnimationFrame) {
self.updateTranslate();
}
self.isSwipeable = true;
self.translateX = translate;
}
if (self.timer) {
clearTimeout(self.timer);
}
self.timer = setTimeout(function() {
self.initTimer();
}, 100);
};
Slider.prototype.updateTranslate = function() {
var self = this;
if (self.lastTranslateX !== self.translateX) {
self.setTranslate(self.translateX);
self.lastTranslateX = self.translateX;
}
self.requestAnimationFrame = requestAnimationFrame(function() {
self.updateTranslate();
});
};
Slider.prototype.setTranslate = function(x) {
this.element.style.webkitTransform = 'translate3d(' + x + 'px,0,0)';
this.updateProcess(x);
}
Slider.prototype.updateProcess = function(translate) {
var progressBarWidth = this.progressBarWidth;
if (progressBarWidth) {
translate = Math.abs(translate);
this.setProcess(translate * (progressBarWidth / this.sliderWidth));
}
};
Slider.prototype.setProcess = function(translate) {
var progressBar = this.progressBar;
if (progressBar) {
progressBar.style.webkitTransform = 'translate3d(' + translate + 'px,0,0)';
}
};
/**
* 下一个轮播
* @returns {Number}
*/
Slider.prototype.nextItem = function() {
this.gotoItem(this.getCurrentSlideNumber('next') - 1);
};
/**
* 上一个轮播
* @returns {Number}
*/
Slider.prototype.prevItem = function() {
this.gotoItem(this.getCurrentSlideNumber('prev') + 1);
};
/**
* 滑动到指定轮播
* @param {type} slideNumber
* @returns {undefined}
*/
Slider.prototype.gotoItem = function(slideNumber) {
if (!(slideNumber === 1 && this.getSlideNumber() === slideNumber)) {
slideNumber = slideNumber > 0 ? -slideNumber : slideNumber;
}
var self = this;
var slider = self.element;
var slideLength = self.sliderLength;
if (self.isLoop) { //循环轮播需减去2个过渡元素
slideLength = slideLength - 2;
} else {
slideLength = slideLength - 1;
slideNumber = Math.min(0, slideNumber);
slideNumber = Math.max(slideNumber, -slideLength);
}
if (self.requestAnimationFrame) {
cancelAnimationFrame(self.requestAnimationFrame);
self.requestAnimationFrame = null;
}
var offsetX = Math.max(slideNumber, -slideLength) * slider.offsetWidth;
slider.style['-webkit-transition-duration'] = '.2s';
self.setTranslate(offsetX);
// slider.style.webkitTransform = 'translate3d(' + offsetX + 'px,0,0)';
// self.updateProcess(offsetX);
var fixedLoop = function() {
slider.style['-webkit-transition-duration'] = '0';
slider.style.webkitTransform = 'translate3d(' + (slideNumber * slider.offsetWidth) + 'px,0,0)';
slider.removeEventListener('webkitTransitionEnd', fixedLoop);
};
slider.removeEventListener('webkitTransitionEnd', fixedLoop);
if (self.isLoop) { //循环轮播自动重新定位
if (slideNumber === 1 || slideNumber === -slideLength) {
slideNumber = slideNumber === 1 ? (-slideLength + 1) : 0;
slider.addEventListener('webkitTransitionEnd', fixedLoop);
}
}
$.trigger(slider.parentNode, 'slide', {
slideNumber: Math.abs(slideNumber)
});
this.initTimer();
};
/**
* 计算轮播应该处于的位置(四舍五入)
* @returns {Number}
*/
Slider.prototype.getSlideNumber = function() {
return (Math.round(this.getScroll() / this.sliderWidth));
};
/**
* 当前所处位置
* @param {type} type
* @returns {unresolved}
*/
Slider.prototype.getCurrentSlideNumber = function(type) {
return (Math[type === 'next' ? 'ceil' : 'floor'](this.getScroll() / this.sliderWidth));
};
/**
* 获取当前滚动位置
* @returns {Number}
*/
Slider.prototype.getScroll = function() {
var slider = this.element;
var scroll = 0;
if ('webkitTransform' in slider.style) {
var result = $.parseTranslate(slider.style.webkitTransform);
scroll = result ? result.x : 0;
}
return scroll;
};
/**
* 自动轮播
* @returns {undefined}
*/
Slider.prototype.initTimer = function() {
var self = this;
var slideshowDelay = self.options.slideshowDelay;
if (slideshowDelay) {
var slider = self.element;
var slidershowTimer = slider.getAttribute('data-slidershowTimer');
slidershowTimer && window.clearTimeout(slidershowTimer);
slidershowTimer = window.setTimeout(function() {
if (!slider) {
return;
}
//仅slider显示状态进行自动轮播
if (!!(slider.offsetWidth || slider.offsetHeight)) {
self.nextItem();
//下一个
}
self.initTimer();
}, slideshowDelay);
slider.setAttribute('data-slidershowTimer', slidershowTimer);
}
};
$.fn.slider = function(options) {
//新增定时轮播 重要：remove该轮播时，请获取data-slidershowTimer然后手动clearTimeout
var slider = null;
this.each(function() {
var sliderGroup = this;
if (this.classList.contains(CLASS_SLIDER)) {
sliderGroup = this.querySelector('.' + CLASS_SLIDER_GROUP);
}
var id = sliderGroup.getAttribute('data-slider');
if (!id) {
id = ++$.uuid;
$.data[id] = slider = new Slider(sliderGroup, options);
sliderGroup.setAttribute('data-slider', id);
} else {
slider = $.data[id];
if (slider && options) {
slider.refresh(options);
}
}
});
return slider;
};
$.ready(function() {
$('.mui-slider-group').slider();
});
})(mui, window);
/** /**
* Toggles switch * Toggles switch
* @param {type} $ * @param {type} $
...@@ -3549,11 +3494,8 @@ var mui = (function(document, undefined) { ...@@ -3549,11 +3494,8 @@ var mui = (function(document, undefined) {
isActive: slideOn isActive: slideOn
}); });
toggle.removeEventListener('dragstart', $.stopPropagation); toggle.removeEventListener('dragstart', $.stopPropagation);
<<<<<<< HEAD
=======
// toggle.removeEventListener('flick', $.stopPropagation); // toggle.removeEventListener('flick', $.stopPropagation);
event.stopPropagation(); event.stopPropagation();
>>>>>>> FETCH_HEAD
}; };
var dragToggle = function(event) { var dragToggle = function(event) {
if (!toggle) { if (!toggle) {
...@@ -3576,10 +3518,7 @@ var mui = (function(document, undefined) { ...@@ -3576,10 +3518,7 @@ var mui = (function(document, undefined) {
toggle = $.targets.toggle; toggle = $.targets.toggle;
if (toggle) { if (toggle) {
toggle.addEventListener('dragstart', $.stopPropagation); toggle.addEventListener('dragstart', $.stopPropagation);
<<<<<<< HEAD
=======
// toggle.addEventListener('flick', $.stopPropagation); // toggle.addEventListener('flick', $.stopPropagation);
>>>>>>> FETCH_HEAD
handle = toggle.querySelector(SELECTOR_SWITCH_HANDLE); handle = toggle.querySelector(SELECTOR_SWITCH_HANDLE);
toggleWidth = toggle.clientWidth; toggleWidth = toggle.clientWidth;
handleWidth = handle.clientWidth; handleWidth = handle.clientWidth;
...@@ -3950,11 +3889,7 @@ var mui = (function(document, undefined) { ...@@ -3950,11 +3889,7 @@ var mui = (function(document, undefined) {
isDraging = true; isDraging = true;
} }
} }
<<<<<<< HEAD
if(isDraging){
=======
if (isDraging) { if (isDraging) {
>>>>>>> FETCH_HEAD
event.stopPropagation(); event.stopPropagation();
} }
}, },
...@@ -3989,10 +3924,7 @@ var mui = (function(document, undefined) { ...@@ -3989,10 +3924,7 @@ var mui = (function(document, undefined) {
$.gestures.stoped = true; $.gestures.stoped = true;
endDraging(true, event.detail); endDraging(true, event.detail);
} }
<<<<<<< HEAD
=======
event.stopPropagation(); event.stopPropagation();
>>>>>>> FETCH_HEAD
}, },
swipeleft: function(event) { swipeleft: function(event) {
var isSwipeable = false; var isSwipeable = false;
...@@ -4422,4 +4354,4 @@ var mui = (function(document, undefined) { ...@@ -4422,4 +4354,4 @@ var mui = (function(document, undefined) {
$.ready(function() { $.ready(function() {
$('.mui-input-row input').input(); $('.mui-input-row input').input();
}); });
})(mui, window, document); })(mui, window, document);
\ No newline at end of file
dist/js/mui.min.js
View file @ 41698daa
This source diff could not be displayed because it is too large. You can view the blob instead.
getting-started-old/index.html deleted 100644 → 0
View file @ 1506d053
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>新手指南 &middot; MUI</title>
<meta name="description" content="MUI: 最接近原生APP体验的高性能前端框架">
<meta name="viewport" content="initial-scale=1, maximum-scale=1">
<link rel="shortcut icon" href="http://dcloudio.github.io/mui/favicon.ico">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<link rel="stylesheet" href="http://dcloudio.github.io/mui/dist/css/mui.min.css?v=2014-09-19 02:54:04 +0800">
<link rel="stylesheet" href="http://dcloudio.github.io/mui/assets/css/docs.css?v=2014-09-19 02:54:04 +0800">
<link rel="apple-touch-icon-precomposed" sizes="114x114" href="http://dcloudio.github.io/mui/assets/img/apple-touch-icon-114x114.png">
</head>
<body ontouchstart="">
<!--[if lt IE 9]>
<div class="bs-callout bs-callout-danger">
<h4>Attention!</h4>
<p>
Looks like your current browser is old and doesn't support many features used in this page.
Please take a second to <a href="http://browsehappy.com/">upgrade to a more modern browser</a>.
</p>
</div>
<![endif]-->
<div class="docs-sub-header">
<header class="docs-masthead mui-clearfix">
<div class="container">
<div class="column">
<h1 class="docs-title">
<a href="http://dcloudio.github.io/mui/" >MUI</a>
</h1>
<nav class="docs-nav mui-clearfix">
<a class="docs-nav-trigger mui-icon mui-icon-bars mui-pull-right js-docs-nav-trigger" href="#"></a>
<div class="docs-nav-group">
<a class="docs-nav-item" href="http://dcloudio.github.io/mui/" >首页</a>
<a class="docs-nav-item" href="http://dcloudio.github.io/mui/getting-started" >新手指南</a>
<a class="docs-nav-item" href="http://dcloudio.github.io/mui/components" >CSS组件</a>
<a class="docs-nav-item" href="http://dcloudio.github.io/mui/javascript" >JavaScript</a>
<!-- <a class="docs-nav-item" href="http://dcloudio.github.io/mui/about" >关于</a> -->
<a class="docs-nav-item" href="https://github.com/dcloudio/mui" >GitHub地址</a>
</div>
</nav>
</div>
</div>
</header>
<div class="container">
<div class="docs-sub-content">
<h2 class="page-title">Getting started</h2>
<p class="page-description">Once you've downloaded Ratchet, here's what to do next.</p>
</div>
</div>
</div>
<div class="container">
<div class="column-group">
<div class="column lg-units-8 docs-content">
<div class="docs-section">
<h2>Quick start</h2>
<p class="lead">Quickly get up and running with a Ratchet app.</p>
<h3>1. Create your pages</h3>
<p>Use the <a href="/components">documentation</a> as a reference for all the available components and piece together the pages of your app. Be sure to look at the <a href="#pageLayout">basic page template</a> and <a href="/examples">example applications</a>. Make sure to add <code>ratchet-theme-ios.css</code> or <code>ratchet-theme-android.css</code> to your app's <code>&lt;head&gt;</code> if you have a specific platform in mind.</p>
<h3>2. Connect pages with push.js</h3>
<p>Read about <a href="/components/#push">push.js</a> then start connecting your pages. Push.js allows you to create a app that feels like a real app when you save it to your phone. Make sure that you have a server running, and that your browser is emulating touch events. <a href="https://developers.google.com/chrome-developer-tools/docs/mobile-emulation#emulate-touch-events">Check out this tutorial on emulating touch events in Chrome</a> (<a href="https://developer.mozilla.org/en-US/docs/Tools/Responsive_Design_View">or Firefox</a>) if you're not sure how to do that.</p>
<h3>3. Save the app to your phone</h3>
<p>There are <a href="https://groups.google.com/forum/#!topic/goratchet/IboE6SCMAyw">a few ways to do this</a>, but the simplest is to run a local server on your computer, point Safari on your iPhone to your computer, then click the <span class="icon icon-share"></span> button and "Add to Home Screen". For Android, check out <a href="https://developers.google.com/chrome/mobile/docs/installtohomescreen">this guide</a>.</p>
</div>
<div class="docs-section">
<h2>What's included</h2>
<p class="lead">Ratchet is downloadable in two forms, within which you'll find the following directories and files, logically grouping common resources and providing both compiled and minified variations.</p>
<h3>Precompiled Ratchet</h3>
<p>Once downloaded, unzip the compressed folder to see the structure of (the compiled) Ratchet. You'll see something like this:</p>
<!-- NOTE: This info is intentionally duplicated in the README.
Copy any changes made here over to the README too. -->
<div class="highlight"><pre><code class="language-bash" data-lang="bash">ratchet/
├── css/
│ ├── ratchet.css
│ ├── ratchet.min.css
│ ├── ratchet-theme-android.css
│ ├── ratchet-theme-android.min.css
│ ├── ratchet-theme-ios.css
│ ├── ratchet-theme-ios.min.css
├── js/
│ ├── ratchet.js
│ └── ratchet.min.js
└── fonts/
├── ratchicons.eot
├── ratchicons.svg
├── ratchicons.ttf
└── ratchicons.woff</code></pre></div>
<p>This is the most basic form of Ratchet: precompiled files for quick drop-in usage in nearly any web project. We provide compiled CSS and JS (<code>ratchet.*</code>), as well as compiled and minified CSS and JS (<code>ratchet.min.*</code>). The Ratchicon fonts are included, as are the Android and iOS platform themes.</p>
<h3>Ratchet source code</h3>
<p>The Ratchet source code download includes the precompiled CSS, JavaScript, and font assets, along with source Sass, JavaScript, and documentation. More specifically, it includes the following and more:</p>
<div class="highlight"><pre><code class="language-bash" data-lang="bash">ratchet/
├── sass/
├── js/
├── fonts/
├── dist/
│ ├── css/
│ ├── js/
│ └── fonts/
└── docs/
└── examples/</code></pre></div>
<p>The <code>sass/</code>, <code>js/</code>, and <code>fonts/</code> are the source code for our CSS, JS, and icon fonts (respectively). The <code>dist/</code> folder includes everything listed in the precompiled download section above. The <code>docs/</code> folder includes the source code for our documentation, and <code>examples/</code> of Ratchet usage. Beyond that, any other included file provides support for packages, license information, and development.</p>
</div>
<div class="docs-section">
<h2>Page setup</h2>
<p class="lead">Three simple rules for structuring your Ratchet pages</p>
<h3>1. Fixed bars come first</h3>
<p>All fixed bars (<code>.bar</code>) should always be the first thing in the <code>&lt;body&gt;</code> of the page. This is really important!</p>
<h3>2. Everything else goes in <code>.content</code></h3>
<p>Anything that's not a <code>.bar</code> should be put in a div with the class <code>.content</code>. Put this div after the bars in the <code>&lt;body&gt;</code> tag. The <code>.content</code> div is what actually scrolls in a Ratchet prototype.</p>
<h3>3. Don't forget your meta tags</h3>
<p>They're included in the template.html page included in the download, but make sure they stay in the page. They are important for Ratchet to work just right.</p>
</div>
<div class="docs-section">
<h2 id="pageLayout">Basic template</h2>
<p class="lead">Use this basic template to get your app started.</p>
<div class="highlight"><pre><code class="language-html" data-lang="html"><span class="cp">&lt;!DOCTYPE html&gt;</span>
<span class="nt">&lt;html&gt;</span>
<span class="nt">&lt;head&gt;</span>
<span class="nt">&lt;meta</span> <span class="na">charset=</span><span class="s">&quot;utf-8&quot;</span><span class="nt">&gt;</span>
<span class="nt">&lt;title&gt;</span>Ratchet template page<span class="nt">&lt;/title&gt;</span>
<span class="c">&lt;!-- Sets initial viewport load and disables zooming --&gt;</span>
<span class="nt">&lt;meta</span> <span class="na">name=</span><span class="s">&quot;viewport&quot;</span> <span class="na">content=</span><span class="s">&quot;initial-scale=1, maximum-scale=1&quot;</span><span class="nt">&gt;</span>
<span class="c">&lt;!-- Makes your prototype chrome-less once bookmarked to your phone&#39;s home screen --&gt;</span>
<span class="nt">&lt;meta</span> <span class="na">name=</span><span class="s">&quot;apple-mobile-web-app-capable&quot;</span> <span class="na">content=</span><span class="s">&quot;yes&quot;</span><span class="nt">&gt;</span>
<span class="nt">&lt;meta</span> <span class="na">name=</span><span class="s">&quot;apple-mobile-web-app-status-bar-style&quot;</span> <span class="na">content=</span><span class="s">&quot;black&quot;</span><span class="nt">&gt;</span>
<span class="c">&lt;!-- Include the compiled Ratchet CSS --&gt;</span>
<span class="nt">&lt;link</span> <span class="na">href=</span><span class="s">&quot;ratchet.css&quot;</span> <span class="na">rel=</span><span class="s">&quot;stylesheet&quot;</span><span class="nt">&gt;</span>
<span class="c">&lt;!-- Include the compiled Ratchet JS --&gt;</span>
<span class="nt">&lt;script </span><span class="na">src=</span><span class="s">&quot;mui.js&quot;</span><span class="nt">&gt;&lt;/script&gt;</span>
<span class="nt">&lt;/head&gt;</span>
<span class="nt">&lt;body&gt;</span>
<span class="c">&lt;!-- Make sure all your bars are the first things in your &lt;body&gt; --&gt;</span>
<span class="nt">&lt;header</span> <span class="na">class=</span><span class="s">&quot;bar bar-nav&quot;</span><span class="nt">&gt;</span>
<span class="nt">&lt;h1</span> <span class="na">class=</span><span class="s">&quot;title&quot;</span><span class="nt">&gt;</span>Ratchet<span class="nt">&lt;/h1&gt;</span>
<span class="nt">&lt;/header&gt;</span>
<span class="c">&lt;!-- Wrap all non-bar HTML in the .content div (this is actually what scrolls) --&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;content&quot;</span><span class="nt">&gt;</span>
<span class="nt">&lt;p</span> <span class="na">class=</span><span class="s">&quot;content-padded&quot;</span><span class="nt">&gt;</span>Thanks for downloading Ratchet. This is an example HTML page that&#39;s linked up to compiled Ratchet CSS and JS, has the proper meta tags and the HTML structure. Need some more help before you start filling this with your own content? Check out some Ratchet resources:<span class="nt">&lt;/p&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;card&quot;</span><span class="nt">&gt;</span>
<span class="nt">&lt;ul</span> <span class="na">class=</span><span class="s">&quot;table-view&quot;</span><span class="nt">&gt;</span>
<span class="nt">&lt;li</span> <span class="na">class=</span><span class="s">&quot;table-view-cell&quot;</span><span class="nt">&gt;</span>
<span class="nt">&lt;a</span> <span class="na">class=</span><span class="s">&quot;push-right&quot;</span> <span class="na">href=</span><span class="s">&quot;http://goratchet.com&quot;</span><span class="nt">&gt;</span>
<span class="nt">&lt;strong&gt;</span>Ratchet documentation<span class="nt">&lt;/strong&gt;</span>
<span class="nt">&lt;/a&gt;</span>
<span class="nt">&lt;/li&gt;</span>
<span class="nt">&lt;li</span> <span class="na">class=</span><span class="s">&quot;table-view-cell&quot;</span><span class="nt">&gt;</span>
<span class="nt">&lt;a</span> <span class="na">class=</span><span class="s">&quot;push-right&quot;</span> <span class="na">href=</span><span class="s">&quot;https://github.com/twbs/ratchet/&quot;</span><span class="nt">&gt;</span>
<span class="nt">&lt;strong&gt;</span>Ratchet on Github<span class="nt">&lt;/strong&gt;</span>
<span class="nt">&lt;/a&gt;</span>
<span class="nt">&lt;/li&gt;</span>
<span class="nt">&lt;li</span> <span class="na">class=</span><span class="s">&quot;table-view-cell&quot;</span><span class="nt">&gt;</span>
<span class="nt">&lt;a</span> <span class="na">class=</span><span class="s">&quot;push-right&quot;</span> <span class="na">href=</span><span class="s">&quot;https://groups.google.com/forum/#!forum/goratchet&quot;</span><span class="nt">&gt;</span>
<span class="nt">&lt;strong&gt;</span>Ratchet Google group<span class="nt">&lt;/strong&gt;</span>
<span class="nt">&lt;/a&gt;</span>
<span class="nt">&lt;/li&gt;</span>
<span class="nt">&lt;li</span> <span class="na">class=</span><span class="s">&quot;table-view-cell&quot;</span><span class="nt">&gt;</span>
<span class="nt">&lt;a</span> <span class="na">class=</span><span class="s">&quot;push-right&quot;</span> <span class="na">href=</span><span class="s">&quot;https://twitter.com/goratchet&quot;</span><span class="nt">&gt;</span>
<span class="nt">&lt;strong&gt;</span>Ratchet on Twitter<span class="nt">&lt;/strong&gt;</span>
<span class="nt">&lt;/a&gt;</span>
<span class="nt">&lt;/li&gt;</span>
<span class="nt">&lt;/ul&gt;</span>
<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;/body&gt;</span>
<span class="nt">&lt;/html&gt;</span></code></pre></div>
</div>
<div class="docs-section">
<h2>Community</h2>
<p class="lead">Stay up to date on the development of Ratchet and reach out to the community with these helpful resources.</p>
<ol>
<li>
<p>Read and subscribe to <a href="http://blog.getbootstrap.com/">The Official Bootstrap Blog</a> (which includes Ratchet releases and news).</p>
</li>
<li>
<p>For help using Ratchet, ask on <a href="http://stackoverflow.com/questions/tagged/ratchet-2">StackOverflow using the tag <code>ratchet-2</code></a>.</p>
</li>
<li>
<p>Start a discussion on the <a href="https://groups.google.com/forum/#!forum/goratchet">Ratchet Google group</a>.</p>
</li>
</ol>
<p>You can also follow <a href="https://twitter.com/goratchet">@goratchet</a> on Twitter for the latest news.</p>
</div>
</div>
<div class="column lg-units-4">
<div class="docs-module">
<h4 class="docs-module-title">Ratchet</h4>
<p>Compiled and minified CSS, JavaScript, and fonts. No docs or original source files are included.</p>
<a href="https://github.com/twbs/ratchet/releases/download/v2.0.2/ratchet-2.0.2-dist.zip" class="btn btn-block btn-primary" data-ignore="push" onClick="_gaq.push(['_trackEvent', 'Downloads', 'V2.0.2-dist']);">Download Ratchet</a>
<p class="version">Currently v2.0.2</p>
</div>
<div class="docs-module">
<h4 class="docs-module-title">Source code</h4>
<p>If you haven't already, download the source code for Ratchet.</p>
<a href="https://github.com/twbs/ratchet/archive/v2.0.2.zip" class="btn btn-block btn-primary" data-ignore="push" onClick="_gaq.push(['_trackEvent', 'Downloads', 'V2.0.2']);">Download source</a>
</div>
</div>
</div>
<div class="column">
<!-- Footer -->
<div class="docs-footer">
<p class="docs-footer-text">mui遵循 <a href="https://github.com/dcloudio/mui/blob/master/LICENSE">MIT License</a>
</p>
<ul class="docs-footer-links">
<li>最新版本 v0.5.6</li>
<li>&middot;</li>
<li><a href="https://github.com/dcloudio/mui/issues">Issues</a>
</li>
<li>&middot;</li>
<li><a href="https://github.com/dcloudio/mui/releases">Releases</a>
</li>
<li>&middot;</li>
</ul>
</div>
<script src="http://dcloudio.github.io/mui/dist/js/jquery-2.1.1.js"></script>
<script src="http://dcloudio.github.io/mui/dist/js/mui.min.js?v=2014-09-19 02:54:04 +0800"></script>
<script src="http://dcloudio.github.io/mui/assets/js/docs.min.js?v=2014-09-19 02:54:04 +0800"></script>
</div>
</div>
</body>
</html>
getting-started/index.html
View file @ 41698daa
...@@ -10,13 +10,8 @@ ...@@ -10,13 +10,8 @@
<meta name="apple-mobile-web-app-capable" content="yes"> <meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black"> <meta name="apple-mobile-web-app-status-bar-style" content="black">
<<<<<<< HEAD <link rel="stylesheet" href="http://dcloudio.github.io/mui/dist/css/mui.min.css?v=2014-09-25 22:17:40 +0800">
<link rel="stylesheet" href="http://dcloudio.github.io/mui/dist/css/mui.min.css?v=2014-09-19 02:54:04 +0800"> <link rel="stylesheet" href="http://dcloudio.github.io/mui/assets/css/docs.css?v=2014-09-25 22:17:40 +0800">
<link rel="stylesheet" href="http://dcloudio.github.io/mui/assets/css/docs.css?v=2014-09-19 02:54:04 +0800">
=======
<link rel="stylesheet" href="http://dcloudio.github.io/mui/dist/css/mui.min.css?v=2014-09-19 18:04:16 +0800">
<link rel="stylesheet" href="http://dcloudio.github.io/mui/assets/css/docs.css?v=2014-09-19 18:04:16 +0800">
>>>>>>> FETCH_HEAD
<link rel="apple-touch-icon-precomposed" sizes="114x114" href="http://dcloudio.github.io/mui/assets/img/apple-touch-icon-114x114.png"> <link rel="apple-touch-icon-precomposed" sizes="114x114" href="http://dcloudio.github.io/mui/assets/img/apple-touch-icon-114x114.png">
...@@ -143,13 +138,8 @@ ...@@ -143,13 +138,8 @@
</ul> </ul>
</div> </div>
<script src="http://dcloudio.github.io/mui/dist/js/jquery-2.1.1.js"></script> <script src="http://dcloudio.github.io/mui/dist/js/jquery-2.1.1.js"></script>
<<<<<<< HEAD <script src="http://dcloudio.github.io/mui/dist/js/mui.min.js?v=2014-09-25 22:17:40 +0800"></script>
<script src="http://dcloudio.github.io/mui/dist/js/mui.min.js?v=2014-09-19 02:54:04 +0800"></script> <script src="http://dcloudio.github.io/mui/assets/js/docs.min.js?v=2014-09-25 22:17:40 +0800"></script>
<script src="http://dcloudio.github.io/mui/assets/js/docs.min.js?v=2014-09-19 02:54:04 +0800"></script>
=======
<script src="http://dcloudio.github.io/mui/dist/js/mui.min.js?v=2014-09-19 18:04:16 +0800"></script>
<script src="http://dcloudio.github.io/mui/assets/js/docs.min.js?v=2014-09-19 18:04:16 +0800"></script>
>>>>>>> FETCH_HEAD
</div> </div>
</div> </div>
......
index.html
View file @ 41698daa
...@@ -10,13 +10,8 @@ ...@@ -10,13 +10,8 @@
<meta name="apple-mobile-web-app-capable" content="yes"> <meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black"> <meta name="apple-mobile-web-app-status-bar-style" content="black">
<<<<<<< HEAD <link rel="stylesheet" href="http://dcloudio.github.io/mui/dist/css/mui.min.css?v=2014-09-25 22:17:40 +0800">
<link rel="stylesheet" href="http://dcloudio.github.io/mui/dist/css/mui.min.css?v=2014-09-19 02:54:04 +0800"> <link rel="stylesheet" href="http://dcloudio.github.io/mui/assets/css/docs.css?v=2014-09-25 22:17:40 +0800">
<link rel="stylesheet" href="http://dcloudio.github.io/mui/assets/css/docs.css?v=2014-09-19 02:54:04 +0800">
=======
<link rel="stylesheet" href="http://dcloudio.github.io/mui/dist/css/mui.min.css?v=2014-09-21 19:34:31 +0800">
<link rel="stylesheet" href="http://dcloudio.github.io/mui/assets/css/docs.css?v=2014-09-21 19:34:31 +0800">
>>>>>>> FETCH_HEAD
<link rel="apple-touch-icon-precomposed" sizes="114x114" href="http://dcloudio.github.io/mui/assets/img/apple-touch-icon-114x114.png"> <link rel="apple-touch-icon-precomposed" sizes="114x114" href="http://dcloudio.github.io/mui/assets/img/apple-touch-icon-114x114.png">
...@@ -77,13 +72,8 @@ ...@@ -77,13 +72,8 @@
</ul> </ul>
</div> </div>
<script src="http://dcloudio.github.io/mui/dist/js/jquery-2.1.1.js"></script> <script src="http://dcloudio.github.io/mui/dist/js/jquery-2.1.1.js"></script>
<<<<<<< HEAD <script src="http://dcloudio.github.io/mui/dist/js/mui.min.js?v=2014-09-25 22:17:40 +0800"></script>
<script src="http://dcloudio.github.io/mui/dist/js/mui.min.js?v=2014-09-19 02:54:04 +0800"></script> <script src="http://dcloudio.github.io/mui/assets/js/docs.min.js?v=2014-09-25 22:17:40 +0800"></script>
<script src="http://dcloudio.github.io/mui/assets/js/docs.min.js?v=2014-09-19 02:54:04 +0800"></script>
=======
<script src="http://dcloudio.github.io/mui/dist/js/mui.min.js?v=2014-09-21 19:34:31 +0800"></script>
<script src="http://dcloudio.github.io/mui/assets/js/docs.min.js?v=2014-09-21 19:34:31 +0800"></script>
>>>>>>> FETCH_HEAD
</div> </div>
</div> </div>
......
javascript-old/index.html deleted 100644 → 0
View file @ 1506d053
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Examples &middot; Ratchet</title>
<meta name="description" content="MUI: 最接近原生APP体验的高性能前端框架">
<meta name="viewport" content="initial-scale=1, maximum-scale=1">
<link rel="shortcut icon" href="http://dcloudio.github.io/mui/favicon.ico">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<link rel="stylesheet" href="http://dcloudio.github.io/mui/dist/css/mui.min.css?v=2014-09-19 02:54:04 +0800">
<link rel="stylesheet" href="http://dcloudio.github.io/mui/assets/css/docs.css?v=2014-09-19 02:54:04 +0800">
<link rel="apple-touch-icon-precomposed" sizes="114x114" href="http://dcloudio.github.io/mui/assets/img/apple-touch-icon-114x114.png">
</head>
<body ontouchstart="">
<!--[if lt IE 9]>
<div class="bs-callout bs-callout-danger">
<h4>Attention!</h4>
<p>
Looks like your current browser is old and doesn't support many features used in this page.
Please take a second to <a href="http://browsehappy.com/">upgrade to a more modern browser</a>.
</p>
</div>
<![endif]-->
<div class="docs-sub-header">
<header class="docs-masthead mui-clearfix">
<div class="container">
<div class="column">
<h1 class="docs-title">
<a href="http://dcloudio.github.io/mui/" >MUI</a>
</h1>
<nav class="docs-nav mui-clearfix">
<a class="docs-nav-trigger mui-icon mui-icon-bars mui-pull-right js-docs-nav-trigger" href="#"></a>
<div class="docs-nav-group">
<a class="docs-nav-item" href="http://dcloudio.github.io/mui/" >首页</a>
<a class="docs-nav-item" href="http://dcloudio.github.io/mui/getting-started" >新手指南</a>
<a class="docs-nav-item" href="http://dcloudio.github.io/mui/components" >CSS组件</a>
<a class="docs-nav-item" href="http://dcloudio.github.io/mui/javascript" >JavaScript</a>
<!-- <a class="docs-nav-item" href="http://dcloudio.github.io/mui/about" >关于</a> -->
<a class="docs-nav-item" href="https://github.com/dcloudio/mui" >GitHub地址</a>
</div>
</nav>
</div>
</div>
</header>
<div class="container">
<div class="docs-sub-content">
<h2 class="page-title">Examples</h2>
<p class="page-description">Take a look at some of these example apps built on Ratchet.</p>
</div>
</div>
</div>
<div class="container">
<div class="column-group">
<div class="column lg-units-8 docs-examples docs-content">
<p class="lead">Checkout out the examples on a desktop browser or visit on your mobile device see the apps as intended.</p>
<div class="column-group">
<div class="column lg-units-4">
<div class="example-wrap">
<a class="example" href="/examples/app-movies" data-ignore="push">
<img src="/assets/img/example.png" alt="Movie finder app example" width="640" height="480">
</a>
<h4 class="example-title">Movie finder</h4>
</div>
</div>
<div class="column lg-units-4">
<div class="example-wrap">
<a class="example" href="/examples/app-ios-mail" data-ignore="push">
<img src="/assets/img/example-ios.png" alt="iOS mail app example" width="640" height="480">
</a>
<h4 class="example-title">iOS mail app</h4>
</div>
</div>
<div class="column lg-units-4">
<div class="example-wrap">
<a class="example" href="/examples/app-android-notes" data-ignore="push">
<img src="/assets/img/example-android.png" alt="Android notes app example" width="640" height="480">
</a>
<h4 class="example-title">Android notes app</h4>
</div>
</div> <!-- .column-group -->
</div>
</div>
<div class="column lg-units-4">
<div class="docs-module">
<h4 class="docs-module-title">Ratchet</h4>
<p>Compiled and minified CSS, JavaScript, and fonts. No docs or original source files are included.</p>
<a href="https://github.com/twbs/ratchet/releases/download/v2.0.2/ratchet-2.0.2-dist.zip" class="btn btn-block btn-primary" data-ignore="push" onClick="_gaq.push(['_trackEvent', 'Downloads', 'V2.0.2-dist']);">Download Ratchet</a>
<p class="version">Currently v2.0.2</p>
</div>
<div class="docs-module">
<h4 class="docs-module-title">Source code</h4>
<p>If you haven't already, download the source code for Ratchet.</p>
<a href="https://github.com/twbs/ratchet/archive/v2.0.2.zip" class="btn btn-block btn-primary" data-ignore="push" onClick="_gaq.push(['_trackEvent', 'Downloads', 'V2.0.2']);">Download source</a>
</div>
</div>
</div>
<div class="column">
<!-- Footer -->
<div class="docs-footer">
<p class="docs-footer-text">mui遵循 <a href="https://github.com/dcloudio/mui/blob/master/LICENSE">MIT License</a>
</p>
<ul class="docs-footer-links">
<li>最新版本 v0.5.6</li>
<li>&middot;</li>
<li><a href="https://github.com/dcloudio/mui/issues">Issues</a>
</li>
<li>&middot;</li>
<li><a href="https://github.com/dcloudio/mui/releases">Releases</a>
</li>
<li>&middot;</li>
</ul>
</div>
<script src="http://dcloudio.github.io/mui/dist/js/jquery-2.1.1.js"></script>
<script src="http://dcloudio.github.io/mui/dist/js/mui.min.js?v=2014-09-19 02:54:04 +0800"></script>
<script src="http://dcloudio.github.io/mui/assets/js/docs.min.js?v=2014-09-19 02:54:04 +0800"></script>
</div>
</div>
</body>
</html>
javascript/index.html
View file @ 41698daa
...@@ -10,13 +10,8 @@ ...@@ -10,13 +10,8 @@
<meta name="apple-mobile-web-app-capable" content="yes"> <meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black"> <meta name="apple-mobile-web-app-status-bar-style" content="black">
<<<<<<< HEAD <link rel="stylesheet" href="http://dcloudio.github.io/mui/dist/css/mui.min.css?v=2014-09-25 22:17:40 +0800">
<link rel="stylesheet" href="http://dcloudio.github.io/mui/dist/css/mui.min.css?v=2014-09-19 02:54:04 +0800"> <link rel="stylesheet" href="http://dcloudio.github.io/mui/assets/css/docs.css?v=2014-09-25 22:17:40 +0800">
<link rel="stylesheet" href="http://dcloudio.github.io/mui/assets/css/docs.css?v=2014-09-19 02:54:04 +0800">
=======
<link rel="stylesheet" href="http://dcloudio.github.io/mui/dist/css/mui.min.css?v=2014-09-25 15:29:28 +0800">
<link rel="stylesheet" href="http://dcloudio.github.io/mui/assets/css/docs.css?v=2014-09-25 15:29:28 +0800">
>>>>>>> FETCH_HEAD
<link rel="apple-touch-icon-precomposed" sizes="114x114" href="http://dcloudio.github.io/mui/assets/img/apple-touch-icon-114x114.png"> <link rel="apple-touch-icon-precomposed" sizes="114x114" href="http://dcloudio.github.io/mui/assets/img/apple-touch-icon-114x114.png">
...@@ -686,13 +681,13 @@ mui的解决思路是：单webview只承载单个页面的dom，减少dom层级 ...@@ -686,13 +681,13 @@ mui的解决思路是：单webview只承载单个页面的dom，减少dom层级
<div class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;mui-slider&quot;</span><span class="nt">&gt;</span> <div class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;mui-slider&quot;</span><span class="nt">&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;mui-slider-group mui-slider-loop&quot;</span><span class="nt">&gt;</span> <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;mui-slider-group mui-slider-loop&quot;</span><span class="nt">&gt;</span>
<span class="c">&lt;!--支持循环，需要重复图片节点--&gt;</span> <span class="c">&lt;!--支持循环，需要重复图片节点--&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;mui-slider-item mui-slider-item-duplicate&quot;</span><span class="nt">&gt;&lt;a</span> <span class="na">href=</span><span class="s">&quot;#&quot;</span><span class="nt">&gt;&lt;img</span> <span class="na">src=</span><span class="s">&quot;4.jpg&quot;</span> <span class="nt">/&gt;&lt;/a&gt;&lt;/div&gt;</span> <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;mui-slider-item&quot;</span><span class="nt">&gt;&lt;a</span> <span class="na">href=</span><span class="s">&quot;#&quot;</span><span class="nt">&gt;&lt;img</span> <span class="na">src=</span><span class="s">&quot;4.jpg&quot;</span> <span class="nt">/&gt;&lt;/a&gt;&lt;/div&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;mui-slider-item&quot;</span><span class="nt">&gt;&lt;a</span> <span class="na">href=</span><span class="s">&quot;#&quot;</span><span class="nt">&gt;&lt;img</span> <span class="na">src=</span><span class="s">&quot;1.jpg&quot;</span> <span class="nt">/&gt;&lt;/a&gt;&lt;/div&gt;</span> <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;mui-slider-item&quot;</span><span class="nt">&gt;&lt;a</span> <span class="na">href=</span><span class="s">&quot;#&quot;</span><span class="nt">&gt;&lt;img</span> <span class="na">src=</span><span class="s">&quot;1.jpg&quot;</span> <span class="nt">/&gt;&lt;/a&gt;&lt;/div&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;mui-slider-item&quot;</span><span class="nt">&gt;&lt;a</span> <span class="na">href=</span><span class="s">&quot;#&quot;</span><span class="nt">&gt;&lt;img</span> <span class="na">src=</span><span class="s">&quot;2.jpg&quot;</span> <span class="nt">/&gt;&lt;/a&gt;&lt;/div&gt;</span> <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;mui-slider-item&quot;</span><span class="nt">&gt;&lt;a</span> <span class="na">href=</span><span class="s">&quot;#&quot;</span><span class="nt">&gt;&lt;img</span> <span class="na">src=</span><span class="s">&quot;2.jpg&quot;</span> <span class="nt">/&gt;&lt;/a&gt;&lt;/div&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;mui-slider-item&quot;</span><span class="nt">&gt;&lt;a</span> <span class="na">href=</span><span class="s">&quot;#&quot;</span><span class="nt">&gt;&lt;img</span> <span class="na">src=</span><span class="s">&quot;3.jpg&quot;</span> <span class="nt">/&gt;&lt;/a&gt;&lt;/div&gt;</span> <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;mui-slider-item&quot;</span><span class="nt">&gt;&lt;a</span> <span class="na">href=</span><span class="s">&quot;#&quot;</span><span class="nt">&gt;&lt;img</span> <span class="na">src=</span><span class="s">&quot;3.jpg&quot;</span> <span class="nt">/&gt;&lt;/a&gt;&lt;/div&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;mui-slider-item&quot;</span><span class="nt">&gt;&lt;a</span> <span class="na">href=</span><span class="s">&quot;#&quot;</span><span class="nt">&gt;&lt;img</span> <span class="na">src=</span><span class="s">&quot;4.jpg&quot;</span> <span class="nt">/&gt;&lt;/a&gt;&lt;/div&gt;</span> <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;mui-slider-item&quot;</span><span class="nt">&gt;&lt;a</span> <span class="na">href=</span><span class="s">&quot;#&quot;</span><span class="nt">&gt;&lt;img</span> <span class="na">src=</span><span class="s">&quot;4.jpg&quot;</span> <span class="nt">/&gt;&lt;/a&gt;&lt;/div&gt;</span>
<span class="c">&lt;!--支持循环，需要重复图片节点--&gt;</span> <span class="c">&lt;!--支持循环，需要重复图片节点--&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;mui-slider-item mui-slider-item-duplicate&quot;</span><span class="nt">&gt;&lt;a</span> <span class="na">href=</span><span class="s">&quot;#&quot;</span><span class="nt">&gt;&lt;img</span> <span class="na">src=</span><span class="s">&quot;1.jpg&quot;</span> <span class="nt">/&gt;&lt;/a&gt;&lt;/div&gt;</span> <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;mui-slider-item&quot;</span><span class="nt">&gt;&lt;a</span> <span class="na">href=</span><span class="s">&quot;#&quot;</span><span class="nt">&gt;&lt;img</span> <span class="na">src=</span><span class="s">&quot;1.jpg&quot;</span> <span class="nt">/&gt;&lt;/a&gt;&lt;/div&gt;</span>
<span class="nt">&lt;/div&gt;</span> <span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;/div&gt;</span></code></pre></div> <span class="nt">&lt;/div&gt;</span></code></pre></div>
</article> </article>
...@@ -735,13 +730,8 @@ mui的解决思路是：单webview只承载单个页面的dom，减少dom层级 ...@@ -735,13 +730,8 @@ mui的解决思路是：单webview只承载单个页面的dom，减少dom层级
</ul> </ul>
</div> </div>
<script src="http://dcloudio.github.io/mui/dist/js/jquery-2.1.1.js"></script> <script src="http://dcloudio.github.io/mui/dist/js/jquery-2.1.1.js"></script>
<<<<<<< HEAD <script src="http://dcloudio.github.io/mui/dist/js/mui.min.js?v=2014-09-25 22:17:40 +0800"></script>
<script src="http://dcloudio.github.io/mui/dist/js/mui.min.js?v=2014-09-19 02:54:04 +0800"></script> <script src="http://dcloudio.github.io/mui/assets/js/docs.min.js?v=2014-09-25 22:17:40 +0800"></script>
<script src="http://dcloudio.github.io/mui/assets/js/docs.min.js?v=2014-09-19 02:54:04 +0800"></script>
=======
<script src="http://dcloudio.github.io/mui/dist/js/mui.min.js?v=2014-09-25 15:29:28 +0800"></script>
<script src="http://dcloudio.github.io/mui/assets/js/docs.min.js?v=2014-09-25 15:29:28 +0800"></script>
>>>>>>> FETCH_HEAD
</div> </div>
</div> </div>
......
sitemap.xml
View file @ 41698daa
...@@ -2,11 +2,7 @@ ...@@ -2,11 +2,7 @@
<urlset xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://www.sitemaps.org/schemas/sitemap/0.9 http://www.sitemaps.org/schemas/sitemap/0.9/sitemap.xsd" xmlns="http://www.sitemaps.org/schemas/sitemap/0.9"> <urlset xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://www.sitemaps.org/schemas/sitemap/0.9 http://www.sitemaps.org/schemas/sitemap/0.9/sitemap.xsd" xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
<url> <url>
<loc>http://dcloudio.github.io/mui/</loc> <loc>http://dcloudio.github.io/mui/</loc>
<<<<<<< HEAD <lastmod>2014-09-25T22:17:40+08:00</lastmod>
<lastmod>2014-09-19T02:54:04+08:00</lastmod>
=======
<lastmod>2014-09-23T21:45:03+08:00</lastmod>
>>>>>>> FETCH_HEAD
<changefreq>daily</changefreq> <changefreq>daily</changefreq>
<priority>1.0</priority> <priority>1.0</priority>
</url> </url>
...@@ -14,11 +10,7 @@ ...@@ -14,11 +10,7 @@
<url> <url>
<loc>http://dcloudio.github.io/mui/about/</loc> <loc>http://dcloudio.github.io/mui/about/</loc>
<<<<<<< HEAD <lastmod>2014-09-25T22:17:40+08:00</lastmod>
<lastmod>2014-09-19T02:54:04+08:00</lastmod>
=======
<lastmod>2014-09-23T21:45:03+08:00</lastmod>
>>>>>>> FETCH_HEAD
<changefreq>weekly</changefreq> <changefreq>weekly</changefreq>
<priority>0.7</priority> <priority>0.7</priority>
</url> </url>
...@@ -27,20 +19,7 @@ ...@@ -27,20 +19,7 @@
<url> <url>
<loc>http://dcloudio.github.io/mui/components/</loc> <loc>http://dcloudio.github.io/mui/components/</loc>
<<<<<<< HEAD <lastmod>2014-09-25T22:17:40+08:00</lastmod>
<lastmod>2014-09-19T02:54:04+08:00</lastmod>
<changefreq>weekly</changefreq>
<priority>0.7</priority>
</url>
<url>
<loc>http://dcloudio.github.io/mui/getting-started-old/</loc>
<lastmod>2014-09-19T02:54:04+08:00</lastmod>
=======
<lastmod>2014-09-23T21:45:03+08:00</lastmod>
>>>>>>> FETCH_HEAD
<changefreq>weekly</changefreq> <changefreq>weekly</changefreq>
<priority>0.7</priority> <priority>0.7</priority>
</url> </url>
...@@ -49,11 +28,7 @@ ...@@ -49,11 +28,7 @@
<url> <url>
<loc>http://dcloudio.github.io/mui/getting-started/</loc> <loc>http://dcloudio.github.io/mui/getting-started/</loc>
<<<<<<< HEAD <lastmod>2014-09-25T22:17:40+08:00</lastmod>
<lastmod>2014-09-19T02:54:04+08:00</lastmod>
=======
<lastmod>2014-09-23T21:45:03+08:00</lastmod>
>>>>>>> FETCH_HEAD
<changefreq>weekly</changefreq> <changefreq>weekly</changefreq>
<priority>0.7</priority> <priority>0.7</priority>
</url> </url>
...@@ -63,22 +38,8 @@ ...@@ -63,22 +38,8 @@
<url> <url>
<<<<<<< HEAD
<loc>http://dcloudio.github.io/mui/javascript-old/</loc>
<lastmod>2014-09-19T02:54:04+08:00</lastmod>
<changefreq>weekly</changefreq>
<priority>0.7</priority>
</url>
<url>
<loc>http://dcloudio.github.io/mui/javascript/</loc>
<lastmod>2014-09-19T02:54:04+08:00</lastmod>
=======
<loc>http://dcloudio.github.io/mui/javascript/</loc> <loc>http://dcloudio.github.io/mui/javascript/</loc>
<lastmod>2014-09-23T21:45:03+08:00</lastmod> <lastmod>2014-09-25T22:17:40+08:00</lastmod>
>>>>>>> FETCH_HEAD
<changefreq>weekly</changefreq> <changefreq>weekly</changefreq>
<priority>0.7</priority> <priority>0.7</priority>
</url> </url>
......
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