Skip to content

M
mui
Commit 458e7404 authored by fxy060608's avatar fxy060608
Browse files
Options

增加单选框，分段选择演示

parent fb3dea46
Expand all Show whitespace changes
Inline Side-by-side
Showing with 556 additions and 77 deletions
about/index.html
View file @ 458e7404
......@@ -10,8 +10,8 @@
<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-02 20:32:27 +0800">
<link rel="stylesheet" href="http://dcloudio.github.io/mui/assets/css/docs.css?v=2014-09-02 20:32:27 +0800">
<link rel="stylesheet" href="http://dcloudio.github.io/mui/dist/css/mui.min.css?v=2014-09-02 20:59:57 +0800">
<link rel="stylesheet" href="http://dcloudio.github.io/mui/assets/css/docs.css?v=2014-09-02 20:59:57 +0800">
<link rel="apple-touch-icon-precomposed" sizes="114x114" href="http://dcloudio.github.io/mui/assets/img/apple-touch-icon-114x114.png">
......@@ -144,8 +144,8 @@
</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-02 20:32:27 +0800"></script>
<script src="http://dcloudio.github.io/mui/assets/js/docs.min.js?v=2014-09-02 20:32:27 +0800"></script>
<script src="http://dcloudio.github.io/mui/dist/js/mui.min.js?v=2014-09-02 20:59:57 +0800"></script>
<script src="http://dcloudio.github.io/mui/assets/js/docs.min.js?v=2014-09-02 20:59:57 +0800"></script>
</div>
</div>
......
assets/css/docs.css
View file @ 458e7404
......@@ -669,6 +669,13 @@ code {
border-radius: 3px;
}
}
#segmentedControlsWithPaginationInDevice .mui-control-content {
background-color: white;
min-height: 215px;
}
#segmentedControlsWithPaginationInDevice .mui-control-content .mui-loading {
margin-top: 50px;
}
#muiicons .mui-icon,
#muiiconsInDevice .mui-icon {
width: 50px;
......@@ -805,7 +812,7 @@ code {
overflow: hidden;
font-size: 17px;
line-height: 21px;
background-color: #fff;
background-color: #efeff4;
}
.device .mui-content,
.device .mui-bar,
......@@ -818,10 +825,11 @@ code {
bottom: 0;
left: 0;
}
#offCanvasWithLeftInDevice .mui-inner-wrap,#offCanvasWithRightInDevice .mui-inner-wrap {
#offCanvasWithLeftInDevice .mui-inner-wrap,
#offCanvasWithRightInDevice .mui-inner-wrap {
min-height: 569px;
}
.mui-inner-wrap .mui-content{
.mui-inner-wrap .mui-content {
top: 0;
}
}
......
assets/js/docs.min.js
View file @ 458e7404
......@@ -30,9 +30,10 @@ $(function() {
},
u = function() {
function a(a) {
$("#iwindow").html(a);
var iwindow = document.getElementById("iwindow");
$(iwindow).html(a);
//slider
var slider = mui(mui.classSelector('#iwindow .slider-group'));
var slider = mui(mui.classSelector('.slider-group'), iwindow);
if (slider.length === 1) {
slider.slider();
//slider-switch
......@@ -52,10 +53,10 @@ $(function() {
}
}
//offcanvas
var offCanvasContainer = document.querySelector('#iwindow .mui-off-canvas-wrap');
var offCanvasContainer = iwindow.querySelector('.mui-off-canvas-wrap');
if (offCanvasContainer) {
var offCanvasInnerContainer = offCanvasContainer.querySelector('.mui-inner-wrap');
var offCanvas = mui('#offCanvas');
var offCanvas = mui('#offCanvas', iwindow);
document.getElementById('offCanvas_switch').addEventListener('toggle', function(event) {
if (event.detail.isActive) { //整体滑动时，侧滑菜单在inner-wrap内
offCanvasInnerContainer.insertBefore(offCanvas[0], offCanvasInnerContainer.firstElementChild);
......@@ -66,12 +67,9 @@ $(function() {
}
//input
mui(mui.classSelector('#iwindow .input-row input')).input();
jQuery('input[type="checkbox"]').change(function() {
console.log('change', $(this)[0].checked);
});
mui(mui.classSelector('.input-row input'), iwindow).input();
//简单处理label点击触发radio或checkbox
document.getElementById('iwindow').addEventListener('tap', function(event) {
iwindow.addEventListener('tap', function(event) {
var target = event.target;
for (; target && target !== document; target = target.parentNode) {
if (target.tagName && target.tagName === 'LABEL') {
......@@ -79,13 +77,54 @@ $(function() {
if (parent.classList && (parent.classList.contains('mui-radio') || parent.classList.contains('mui-checkbox'))) {
var input = parent.querySelector('input');
if (input) {
input.checked = !input.checked;
input.click();
}
}
}
}
});
//segmented controls
var segmentedControl = document.getElementById('segmentedControl');
if (segmentedControl) {
mui('.mui-input-group', iwindow).on('change', 'input', function() {
if (this.checked) {
var styleEl = iwindow.querySelector('input[name="style"]:checked');
var colorEl = iwindow.querySelector('input[name="color"]:checked');
if (styleEl && colorEl) {
var style = styleEl.value;
var color = colorEl.value;
segmentedControl.className = 'mui-segmented-control' + (style ? (' mui-segmented-control-' + style) : '') + ' mui-segmented-control-' + color;
}
}
});
}
var sliderSegmentedControl = document.getElementById('sliderSegmentedControl');
if (sliderSegmentedControl) {
var html2 = '<ul class="mui-table-view"><li class="mui-table-view-cell">第二个选项卡子项-1</li><li class="mui-table-view-cell">第二个选项卡子项-2</li><li class="mui-table-view-cell">第二个选项卡子项-3</li><li class="mui-table-view-cell">第二个选项卡子项-4</li><li class="mui-table-view-cell">第二个选项卡子项-5</li></ul>';
var html3 = '<ul class="mui-table-view"><li class="mui-table-view-cell">第三个选项卡子项-1</li><li class="mui-table-view-cell">第三个选项卡子项-2</li><li class="mui-table-view-cell">第三个选项卡子项-3</li><li class="mui-table-view-cell">第三个选项卡子项-4</li><li class="mui-table-view-cell">第三个选项卡子项-5</li></ul>';
var item2 = document.getElementById('item2mobile');
var item3 = document.getElementById('item3mobile');
document.getElementById('slider').addEventListener('slide', function(e) {
if (e.detail.slideNumber === 1) {
if (item2.querySelector('.mui-loading')) {
setTimeout(function() {
item2.innerHTML = html2;
}, 1000);
}
} else if (e.detail.slideNumber === 2) {
if (item3.querySelector('.mui-loading')) {
setTimeout(function() {
item3.innerHTML = html3;
}, 1000);
}
}
});
mui('.mui-input-group', iwindow).on('change', 'input', function() {
if (this.checked) {
sliderSegmentedControl.className = 'mui-slider-indicator mui-segmented-control mui-segmented-control-inverted mui-segmented-control-' + this.value;
}
});
}
}
if (!(768 >= c)) {
var e, f = n.scrollTop();
......
components/index.html
View file @ 458e7404
This diff is collapsed.
getting-started-old/index.html
View file @ 458e7404
......@@ -10,8 +10,8 @@
<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-02 20:32:27 +0800">
<link rel="stylesheet" href="http://dcloudio.github.io/mui/assets/css/docs.css?v=2014-09-02 20:32:27 +0800">
<link rel="stylesheet" href="http://dcloudio.github.io/mui/dist/css/mui.min.css?v=2014-09-02 20:59:57 +0800">
<link rel="stylesheet" href="http://dcloudio.github.io/mui/assets/css/docs.css?v=2014-09-02 20:59:57 +0800">
<link rel="apple-touch-icon-precomposed" sizes="114x114" href="http://dcloudio.github.io/mui/assets/img/apple-touch-icon-114x114.png">
......@@ -252,8 +252,8 @@ Copy any changes made here over to the README too. -->
</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-02 20:32:27 +0800"></script>
<script src="http://dcloudio.github.io/mui/assets/js/docs.min.js?v=2014-09-02 20:32:27 +0800"></script>
<script src="http://dcloudio.github.io/mui/dist/js/mui.min.js?v=2014-09-02 20:59:57 +0800"></script>
<script src="http://dcloudio.github.io/mui/assets/js/docs.min.js?v=2014-09-02 20:59:57 +0800"></script>
</div>
</div>
......
getting-started/index.html
View file @ 458e7404
......@@ -10,8 +10,8 @@
<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-02 20:32:27 +0800">
<link rel="stylesheet" href="http://dcloudio.github.io/mui/assets/css/docs.css?v=2014-09-02 20:32:27 +0800">
<link rel="stylesheet" href="http://dcloudio.github.io/mui/dist/css/mui.min.css?v=2014-09-02 20:59:57 +0800">
<link rel="stylesheet" href="http://dcloudio.github.io/mui/assets/css/docs.css?v=2014-09-02 20:59:57 +0800">
<link rel="apple-touch-icon-precomposed" sizes="114x114" href="http://dcloudio.github.io/mui/assets/img/apple-touch-icon-114x114.png">
......@@ -138,8 +138,8 @@
</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-02 20:32:27 +0800"></script>
<script src="http://dcloudio.github.io/mui/assets/js/docs.min.js?v=2014-09-02 20:32:27 +0800"></script>
<script src="http://dcloudio.github.io/mui/dist/js/mui.min.js?v=2014-09-02 20:59:57 +0800"></script>
<script src="http://dcloudio.github.io/mui/assets/js/docs.min.js?v=2014-09-02 20:59:57 +0800"></script>
</div>
</div>
......
index.html
View file @ 458e7404
......@@ -10,8 +10,8 @@
<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-02 20:32:27 +0800">
<link rel="stylesheet" href="http://dcloudio.github.io/mui/assets/css/docs.css?v=2014-09-02 20:32:27 +0800">
<link rel="stylesheet" href="http://dcloudio.github.io/mui/dist/css/mui.min.css?v=2014-09-02 20:59:57 +0800">
<link rel="stylesheet" href="http://dcloudio.github.io/mui/assets/css/docs.css?v=2014-09-02 20:59:57 +0800">
<link rel="apple-touch-icon-precomposed" sizes="114x114" href="http://dcloudio.github.io/mui/assets/img/apple-touch-icon-114x114.png">
......@@ -73,8 +73,8 @@
</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-02 20:32:27 +0800"></script>
<script src="http://dcloudio.github.io/mui/assets/js/docs.min.js?v=2014-09-02 20:32:27 +0800"></script>
<script src="http://dcloudio.github.io/mui/dist/js/mui.min.js?v=2014-09-02 20:59:57 +0800"></script>
<script src="http://dcloudio.github.io/mui/assets/js/docs.min.js?v=2014-09-02 20:59:57 +0800"></script>
</div>
</div>
......
javascript-old/index.html
View file @ 458e7404
......@@ -10,8 +10,8 @@
<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-02 20:32:27 +0800">
<link rel="stylesheet" href="http://dcloudio.github.io/mui/assets/css/docs.css?v=2014-09-02 20:32:27 +0800">
<link rel="stylesheet" href="http://dcloudio.github.io/mui/dist/css/mui.min.css?v=2014-09-02 20:59:57 +0800">
<link rel="stylesheet" href="http://dcloudio.github.io/mui/assets/css/docs.css?v=2014-09-02 20:59:57 +0800">
<link rel="apple-touch-icon-precomposed" sizes="114x114" href="http://dcloudio.github.io/mui/assets/img/apple-touch-icon-114x114.png">
......@@ -127,8 +127,8 @@
</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-02 20:32:27 +0800"></script>
<script src="http://dcloudio.github.io/mui/assets/js/docs.min.js?v=2014-09-02 20:32:27 +0800"></script>
<script src="http://dcloudio.github.io/mui/dist/js/mui.min.js?v=2014-09-02 20:59:57 +0800"></script>
<script src="http://dcloudio.github.io/mui/assets/js/docs.min.js?v=2014-09-02 20:59:57 +0800"></script>
</div>
</div>
......
javascript/index.html
View file @ 458e7404
......@@ -10,8 +10,8 @@
<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-02 20:32:27 +0800">
<link rel="stylesheet" href="http://dcloudio.github.io/mui/assets/css/docs.css?v=2014-09-02 20:32:27 +0800">
<link rel="stylesheet" href="http://dcloudio.github.io/mui/dist/css/mui.min.css?v=2014-09-02 20:59:57 +0800">
<link rel="stylesheet" href="http://dcloudio.github.io/mui/assets/css/docs.css?v=2014-09-02 20:59:57 +0800">
<link rel="apple-touch-icon-precomposed" sizes="114x114" href="http://dcloudio.github.io/mui/assets/img/apple-touch-icon-114x114.png">
......@@ -498,8 +498,8 @@ mui的解决思路是：单webview只承载单个页面的dom，减少dom层级
</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-02 20:32:27 +0800"></script>
<script src="http://dcloudio.github.io/mui/assets/js/docs.min.js?v=2014-09-02 20:32:27 +0800"></script>
<script src="http://dcloudio.github.io/mui/dist/js/mui.min.js?v=2014-09-02 20:59:57 +0800"></script>
<script src="http://dcloudio.github.io/mui/assets/js/docs.min.js?v=2014-09-02 20:59:57 +0800"></script>
</div>
</div>
......
sitemap.xml
View file @ 458e7404
......@@ -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">
<url>
<loc>http://dcloudio.github.io/mui/</loc>
<lastmod>2014-09-02T20:32:27+08:00</lastmod>
<lastmod>2014-09-02T20:59:57+08:00</lastmod>
<changefreq>daily</changefreq>
<priority>1.0</priority>
</url>
......@@ -10,7 +10,7 @@
<url>
<loc>http://dcloudio.github.io/mui/about/</loc>
<lastmod>2014-09-02T20:32:27+08:00</lastmod>
<lastmod>2014-09-02T20:59:57+08:00</lastmod>
<changefreq>weekly</changefreq>
<priority>0.7</priority>
</url>
......@@ -19,7 +19,7 @@
<url>
<loc>http://dcloudio.github.io/mui/components/</loc>
<lastmod>2014-09-02T20:32:27+08:00</lastmod>
<lastmod>2014-09-02T20:59:57+08:00</lastmod>
<changefreq>weekly</changefreq>
<priority>0.7</priority>
</url>
......@@ -28,7 +28,7 @@
<url>
<loc>http://dcloudio.github.io/mui/getting-started-old/</loc>
<lastmod>2014-09-02T20:32:27+08:00</lastmod>
<lastmod>2014-09-02T20:59:57+08:00</lastmod>
<changefreq>weekly</changefreq>
<priority>0.7</priority>
</url>
......@@ -37,7 +37,7 @@
<url>
<loc>http://dcloudio.github.io/mui/getting-started/</loc>
<lastmod>2014-09-02T20:32:27+08:00</lastmod>
<lastmod>2014-09-02T20:59:57+08:00</lastmod>
<changefreq>weekly</changefreq>
<priority>0.7</priority>
</url>
......@@ -48,7 +48,7 @@
<url>
<loc>http://dcloudio.github.io/mui/javascript-old/</loc>
<lastmod>2014-09-02T20:32:27+08:00</lastmod>
<lastmod>2014-09-02T20:59:57+08:00</lastmod>
<changefreq>weekly</changefreq>
<priority>0.7</priority>
</url>
......@@ -57,7 +57,7 @@
<url>
<loc>http://dcloudio.github.io/mui/javascript/</loc>
<lastmod>2014-09-02T20:32:27+08:00</lastmod>
<lastmod>2014-09-02T20:59:57+08:00</lastmod>
<changefreq>weekly</changefreq>
<priority>0.7</priority>
</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