Skip to content

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

增加图片轮播插件使用说明

parent fa8d9c80
Expand all Show whitespace changes
Inline Side-by-side
Showing with 185 additions and 115 deletions
about/index.html
View file @ d2bd5e7c
...@@ -10,8 +10,8 @@ ...@@ -10,8 +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">
<link rel="stylesheet" href="http://dcloudio.github.io/mui/dist/css/mui.min.css?v=2014-09-18 05:41:39 +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-18 05:41:39 +0800"> <link rel="stylesheet" href="http://dcloudio.github.io/mui/assets/css/docs.css?v=2014-09-19 18:04:16 +0800">
<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">
...@@ -133,7 +133,7 @@ ...@@ -133,7 +133,7 @@
</p> </p>
<ul class="docs-footer-links"> <ul class="docs-footer-links">
<li>最新版本 v0.5.6</li> <li>最新版本 v0.5.7</li>
<li>&middot;</li> <li>&middot;</li>
<li><a href="https://github.com/dcloudio/mui/issues">Issues</a> <li><a href="https://github.com/dcloudio/mui/issues">Issues</a>
</li> </li>
...@@ -144,8 +144,8 @@ ...@@ -144,8 +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>
<script src="http://dcloudio.github.io/mui/dist/js/mui.min.js?v=2014-09-18 05:41:39 +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-18 05:41:39 +0800"></script> <script src="http://dcloudio.github.io/mui/assets/js/docs.min.js?v=2014-09-19 18:04:16 +0800"></script>
</div> </div>
</div> </div>
......
components/index.html
View file @ d2bd5e7c
...@@ -10,8 +10,8 @@ ...@@ -10,8 +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">
<link rel="stylesheet" href="http://dcloudio.github.io/mui/dist/css/mui.min.css?v=2014-09-18 05:41:39 +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-18 05:41:39 +0800"> <link rel="stylesheet" href="http://dcloudio.github.io/mui/assets/css/docs.css?v=2014-09-19 18:04:16 +0800">
<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">
...@@ -3630,7 +3630,7 @@ ...@@ -3630,7 +3630,7 @@
</p> </p>
<ul class="docs-footer-links"> <ul class="docs-footer-links">
<li>最新版本 v0.5.6</li> <li>最新版本 v0.5.7</li>
<li>&middot;</li> <li>&middot;</li>
<li><a href="https://github.com/dcloudio/mui/issues">Issues</a> <li><a href="https://github.com/dcloudio/mui/issues">Issues</a>
</li> </li>
...@@ -3641,8 +3641,8 @@ ...@@ -3641,8 +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>
<script src="http://dcloudio.github.io/mui/dist/js/mui.min.js?v=2014-09-18 05:41:39 +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-18 05:41:39 +0800"></script> <script src="http://dcloudio.github.io/mui/assets/js/docs.min.js?v=2014-09-19 18:04:16 +0800"></script>
</div> </div>
</div> </div>
......
dist/js/mui.js
View file @ d2bd5e7c
...@@ -1236,6 +1236,17 @@ var mui = (function(document, undefined) { ...@@ -1236,6 +1236,17 @@ var mui = (function(document, undefined) {
return webview; return webview;
}; };
/**
* 预加载
*/
$.preload = function(options){
//调用预加载函数，不管是否传递preload参数，强制变为true
if(!options.preload){
options.preload = true;
}
$.createWindow(options);
}
/** /**
*关闭当前webview打开的所有webview； *关闭当前webview打开的所有webview；
*/ */
...@@ -2039,8 +2050,6 @@ var mui = (function(document, undefined) { ...@@ -2039,8 +2050,6 @@ var mui = (function(document, undefined) {
if ($.os.android) { if ($.os.android) {
return; return;
} }
var CLASS_SWITCH = 'mui-switch';
var CLASS_TABLE_VIEW_CELL = 'mui-table-view-cell';
var CLASS_SLIDER_HANDLE = 'mui-slider-handle'; var CLASS_SLIDER_HANDLE = 'mui-slider-handle';
var CLASS_OFF_CANVAS_LEFT = 'mui-off-canvas-left'; var CLASS_OFF_CANVAS_LEFT = 'mui-off-canvas-left';
var CLASS_OFF_CANVAS_RIGHT = 'mui-off-canvas-right'; var CLASS_OFF_CANVAS_RIGHT = 'mui-off-canvas-right';
...@@ -2133,17 +2142,6 @@ var mui = (function(document, undefined) { ...@@ -2133,17 +2142,6 @@ var mui = (function(document, undefined) {
for (; target && target !== document; target = target.parentNode) { for (; target && target !== document; target = target.parentNode) {
var classList = target.classList; var classList = target.classList;
if (classList) { if (classList) {
if (classList.contains(CLASS_SWITCH)) { //switch
break;
}
if (classList.contains(CLASS_TABLE_VIEW_CELL)) { //swipe table view cell
if (target.querySelector('.' + CLASS_SLIDER_HANDLE)) {
break;
}
}
// if (classList.contains(CLASS_SLIDER)) { //slider
// break;
// }
if (classList.contains(CLASS_OFF_CANVAS_WRAP) && classList.contains(CLASS_DRAGGABLE)) { if (classList.contains(CLASS_OFF_CANVAS_WRAP) && classList.contains(CLASS_DRAGGABLE)) {
container = target; container = target;
innerContainer = container.querySelector(SELECTOR_INNER_WRAP); innerContainer = container.querySelector(SELECTOR_INNER_WRAP);
...@@ -2933,7 +2931,7 @@ var mui = (function(document, undefined) { ...@@ -2933,7 +2931,7 @@ var mui = (function(document, undefined) {
$.trigger(toggle, 'toggle', { $.trigger(toggle, 'toggle', {
isActive: slideOn isActive: slideOn
}); });
toggle.removeEventListener('dragstart', $.stopPropagation);
}; };
var dragToggle = function(event) { var dragToggle = function(event) {
if (!toggle) { if (!toggle) {
...@@ -2954,6 +2952,7 @@ var mui = (function(document, undefined) { ...@@ -2954,6 +2952,7 @@ var mui = (function(document, undefined) {
window.addEventListener($.EVENT_START, function(e) { window.addEventListener($.EVENT_START, function(e) {
toggle = $.targets.toggle; toggle = $.targets.toggle;
if (toggle) { if (toggle) {
toggle.addEventListener('dragstart', $.stopPropagation);
handle = toggle.querySelector(SELECTOR_SWITCH_HANDLE); handle = toggle.querySelector(SELECTOR_SWITCH_HANDLE);
toggleWidth = toggle.clientWidth; toggleWidth = toggle.clientWidth;
handleWidth = handle.clientWidth; handleWidth = handle.clientWidth;
...@@ -3237,6 +3236,7 @@ var mui = (function(document, undefined) { ...@@ -3237,6 +3236,7 @@ var mui = (function(document, undefined) {
if (sliderCell && sliderCell.parentNode === cell) { if (sliderCell && sliderCell.parentNode === cell) {
var handle = sliderCell.querySelector(SELECTOR_SLIDER_HANDLE); var handle = sliderCell.querySelector(SELECTOR_SLIDER_HANDLE);
if (handle) { //slider if (handle) { //slider
toggleEvents(cell);
sliderHandle = handle; sliderHandle = handle;
sliderHandleWidth = sliderHandle.offsetWidth; sliderHandleWidth = sliderHandle.offsetWidth;
sliderHandleLeft = $.getStyles(sliderHandle, 'margin-left'); sliderHandleLeft = $.getStyles(sliderHandle, 'margin-left');
...@@ -3273,10 +3273,28 @@ var mui = (function(document, undefined) { ...@@ -3273,10 +3273,28 @@ var mui = (function(document, undefined) {
window.addEventListener('touchmove', function(event) { window.addEventListener('touchmove', function(event) {
toggleActive(false); toggleActive(false);
}); });
window.addEventListener('dragstart', function(event) {
if (!sliderHandle) { var handleEvent = {
return; handleEvent: function(event) {
switch (event.type) {
case 'dragstart':
this.dragstart(event);
break;
case 'drag':
this.drag(event);
break;
case 'dragend':
this.dragend(event);
break;
case 'swiperight':
this.swiperight(event);
break;
case 'swipeleft':
this.swipeleft(event);
break;
} }
},
dragstart: function(event) {
var detail = event.detail; var detail = event.detail;
var direction = detail.direction; var direction = detail.direction;
var angle = detail.angle; var angle = detail.angle;
...@@ -3301,8 +3319,11 @@ var mui = (function(document, undefined) { ...@@ -3301,8 +3319,11 @@ var mui = (function(document, undefined) {
isDraging = true; isDraging = true;
} }
} }
}); if(isDraging){
window.addEventListener('drag', function(event) { event.stopPropagation();
}
},
drag: function(event) {
if (isDraging) { if (isDraging) {
if (!sliderRequestAnimationFrame) { if (!sliderRequestAnimationFrame) {
updateTranslate(); updateTranslate();
...@@ -3310,15 +3331,13 @@ var mui = (function(document, undefined) { ...@@ -3310,15 +3331,13 @@ var mui = (function(document, undefined) {
translateX = event.detail.deltaX * factor; translateX = event.detail.deltaX * factor;
event.detail.gesture.preventDefault(); event.detail.gesture.preventDefault();
} }
}); },
dragend: function(event) {
window.addEventListener('dragend', function(event) {
if (isDraging) { if (isDraging) {
endDraging(false, event.detail); endDraging(false, event.detail);
} }
}); },
window.addEventListener('swiperight', function(event) { swiperight: function(event) {
if (sliderHandle) {
var isSwipeable = false; var isSwipeable = false;
if (sliderLeft && !sliderLeft.classList.contains(CLASS_BOUNCE) && sliderTranslateX === 0) { if (sliderLeft && !sliderLeft.classList.contains(CLASS_BOUNCE) && sliderTranslateX === 0) {
//left show //left show
...@@ -3336,10 +3355,8 @@ var mui = (function(document, undefined) { ...@@ -3336,10 +3355,8 @@ var mui = (function(document, undefined) {
event.stopImmediatePropagation(); event.stopImmediatePropagation();
endDraging(true, event.detail); endDraging(true, event.detail);
} }
} },
}); swipeleft: function(event) {
window.addEventListener('swipeleft', function(event) {
if (sliderHandle) {
var isSwipeable = false; var isSwipeable = false;
if (sliderRight && !sliderRight.classList.contains(CLASS_BOUNCE) && sliderTranslateX === 0) { if (sliderRight && !sliderRight.classList.contains(CLASS_BOUNCE) && sliderTranslateX === 0) {
//right show //right show
...@@ -3358,18 +3375,32 @@ var mui = (function(document, undefined) { ...@@ -3358,18 +3375,32 @@ var mui = (function(document, undefined) {
endDraging(true, event.detail); endDraging(true, event.detail);
} }
} }
}); }
function toggleEvents(element, isRemove) {
var method = !!isRemove ? 'removeEventListener' : 'addEventListener';
element[method]('dragstart', handleEvent);
element[method]('drag', handleEvent);
element[method]('dragend', handleEvent);
element[method]('swiperight', handleEvent);
element[method]('swipeleft', handleEvent);
}
window.addEventListener('touchend', function(event) { //使用touchend来取消高亮，避免一次点击既不触发tap，doubletap，longtap的事件 window.addEventListener('touchend', function(event) { //使用touchend来取消高亮，避免一次点击既不触发tap，doubletap，longtap的事件
if (!cell) { if (!cell) {
return; return;
} }
toggleActive(false); toggleActive(false);
sliderHandle && toggleEvents(cell, true);
}); });
window.addEventListener('touchcancel', function(event) { //使用touchcancel来取消高亮，避免一次点击既不触发tap，doubletap，longtap的事件 window.addEventListener('touchcancel', function(event) { //使用touchcancel来取消高亮，避免一次点击既不触发tap，doubletap，longtap的事件
if (!cell) { if (!cell) {
return; return;
} }
toggleActive(false); toggleActive(false);
sliderHandle && toggleEvents(cell, true);
}); });
var radioOrCheckboxClick = function() { var radioOrCheckboxClick = function() {
var classList = cell.classList; var classList = cell.classList;
......
dist/js/mui.min.js
View file @ d2bd5e7c
This diff is collapsed.
getting-started/index.html
View file @ d2bd5e7c
...@@ -10,8 +10,8 @@ ...@@ -10,8 +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">
<link rel="stylesheet" href="http://dcloudio.github.io/mui/dist/css/mui.min.css?v=2014-09-18 05:41:39 +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-18 05:41:39 +0800"> <link rel="stylesheet" href="http://dcloudio.github.io/mui/assets/css/docs.css?v=2014-09-19 18:04:16 +0800">
<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">
...@@ -127,7 +127,7 @@ ...@@ -127,7 +127,7 @@
</p> </p>
<ul class="docs-footer-links"> <ul class="docs-footer-links">
<li>最新版本 v0.5.6</li> <li>最新版本 v0.5.7</li>
<li>&middot;</li> <li>&middot;</li>
<li><a href="https://github.com/dcloudio/mui/issues">Issues</a> <li><a href="https://github.com/dcloudio/mui/issues">Issues</a>
</li> </li>
...@@ -138,8 +138,8 @@ ...@@ -138,8 +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>
<script src="http://dcloudio.github.io/mui/dist/js/mui.min.js?v=2014-09-18 05:41:39 +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-18 05:41:39 +0800"></script> <script src="http://dcloudio.github.io/mui/assets/js/docs.min.js?v=2014-09-19 18:04:16 +0800"></script>
</div> </div>
</div> </div>
......
index.html
View file @ d2bd5e7c
...@@ -10,8 +10,8 @@ ...@@ -10,8 +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">
<link rel="stylesheet" href="http://dcloudio.github.io/mui/dist/css/mui.min.css?v=2014-09-18 05:41:39 +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-18 05:41:39 +0800"> <link rel="stylesheet" href="http://dcloudio.github.io/mui/assets/css/docs.css?v=2014-09-19 18:04:16 +0800">
<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">
...@@ -61,7 +61,7 @@ ...@@ -61,7 +61,7 @@
</p> </p>
<ul class="docs-footer-links"> <ul class="docs-footer-links">
<li>最新版本 v0.5.6</li> <li>最新版本 v0.5.7</li>
<li>&middot;</li> <li>&middot;</li>
<li><a href="https://github.com/dcloudio/mui/issues">Issues</a> <li><a href="https://github.com/dcloudio/mui/issues">Issues</a>
</li> </li>
...@@ -72,8 +72,8 @@ ...@@ -72,8 +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>
<script src="http://dcloudio.github.io/mui/dist/js/mui.min.js?v=2014-09-18 05:41:39 +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-18 05:41:39 +0800"></script> <script src="http://dcloudio.github.io/mui/assets/js/docs.min.js?v=2014-09-19 18:04:16 +0800"></script>
</div> </div>
</div> </div>
......
javascript/index.html
View file @ d2bd5e7c
This diff is collapsed.
sitemap.xml
View file @ d2bd5e7c
...@@ -2,7 +2,7 @@ ...@@ -2,7 +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>
<lastmod>2014-09-18T05:41:39+08:00</lastmod> <lastmod>2014-09-19T18:04:16+08:00</lastmod>
<changefreq>daily</changefreq> <changefreq>daily</changefreq>
<priority>1.0</priority> <priority>1.0</priority>
</url> </url>
...@@ -10,7 +10,7 @@ ...@@ -10,7 +10,7 @@
<url> <url>
<loc>http://dcloudio.github.io/mui/about/</loc> <loc>http://dcloudio.github.io/mui/about/</loc>
<lastmod>2014-09-18T05:41:39+08:00</lastmod> <lastmod>2014-09-19T18:04:16+08:00</lastmod>
<changefreq>weekly</changefreq> <changefreq>weekly</changefreq>
<priority>0.7</priority> <priority>0.7</priority>
</url> </url>
...@@ -19,7 +19,7 @@ ...@@ -19,7 +19,7 @@
<url> <url>
<loc>http://dcloudio.github.io/mui/components/</loc> <loc>http://dcloudio.github.io/mui/components/</loc>
<lastmod>2014-09-18T05:41:39+08:00</lastmod> <lastmod>2014-09-19T18:04:16+08:00</lastmod>
<changefreq>weekly</changefreq> <changefreq>weekly</changefreq>
<priority>0.7</priority> <priority>0.7</priority>
</url> </url>
...@@ -28,7 +28,7 @@ ...@@ -28,7 +28,7 @@
<url> <url>
<loc>http://dcloudio.github.io/mui/getting-started-old/</loc> <loc>http://dcloudio.github.io/mui/getting-started-old/</loc>
<lastmod>2014-09-18T05:41:39+08:00</lastmod> <lastmod>2014-09-19T18:04:16+08:00</lastmod>
<changefreq>weekly</changefreq> <changefreq>weekly</changefreq>
<priority>0.7</priority> <priority>0.7</priority>
</url> </url>
...@@ -37,7 +37,7 @@ ...@@ -37,7 +37,7 @@
<url> <url>
<loc>http://dcloudio.github.io/mui/getting-started/</loc> <loc>http://dcloudio.github.io/mui/getting-started/</loc>
<lastmod>2014-09-18T05:41:39+08:00</lastmod> <lastmod>2014-09-19T18:04:16+08:00</lastmod>
<changefreq>weekly</changefreq> <changefreq>weekly</changefreq>
<priority>0.7</priority> <priority>0.7</priority>
</url> </url>
...@@ -48,7 +48,7 @@ ...@@ -48,7 +48,7 @@
<url> <url>
<loc>http://dcloudio.github.io/mui/javascript-old/</loc> <loc>http://dcloudio.github.io/mui/javascript-old/</loc>
<lastmod>2014-09-18T05:41:39+08:00</lastmod> <lastmod>2014-09-19T18:04:16+08:00</lastmod>
<changefreq>weekly</changefreq> <changefreq>weekly</changefreq>
<priority>0.7</priority> <priority>0.7</priority>
</url> </url>
...@@ -57,7 +57,7 @@ ...@@ -57,7 +57,7 @@
<url> <url>
<loc>http://dcloudio.github.io/mui/javascript/</loc> <loc>http://dcloudio.github.io/mui/javascript/</loc>
<lastmod>2014-09-18T05:41:39+08:00</lastmod> <lastmod>2014-09-19T18:04:16+08:00</lastmod>
<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