Commit 458e7404 authored by fxy060608's avatar fxy060608

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

parent fb3dea46
...@@ -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-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:32:27 +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"> <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 @@ ...@@ -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-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:32:27 +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>
</div> </div>
......
...@@ -669,6 +669,13 @@ code { ...@@ -669,6 +669,13 @@ code {
border-radius: 3px; 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, #muiicons .mui-icon,
#muiiconsInDevice .mui-icon { #muiiconsInDevice .mui-icon {
width: 50px; width: 50px;
...@@ -805,7 +812,7 @@ code { ...@@ -805,7 +812,7 @@ code {
overflow: hidden; overflow: hidden;
font-size: 17px; font-size: 17px;
line-height: 21px; line-height: 21px;
background-color: #fff; background-color: #efeff4;
} }
.device .mui-content, .device .mui-content,
.device .mui-bar, .device .mui-bar,
...@@ -818,10 +825,11 @@ code { ...@@ -818,10 +825,11 @@ code {
bottom: 0; bottom: 0;
left: 0; left: 0;
} }
#offCanvasWithLeftInDevice .mui-inner-wrap,#offCanvasWithRightInDevice .mui-inner-wrap { #offCanvasWithLeftInDevice .mui-inner-wrap,
#offCanvasWithRightInDevice .mui-inner-wrap {
min-height: 569px; min-height: 569px;
} }
.mui-inner-wrap .mui-content{ .mui-inner-wrap .mui-content {
top: 0; top: 0;
} }
} }
......
...@@ -30,9 +30,10 @@ $(function() { ...@@ -30,9 +30,10 @@ $(function() {
}, },
u = function() { u = function() {
function a(a) { function a(a) {
$("#iwindow").html(a); var iwindow = document.getElementById("iwindow");
$(iwindow).html(a);
//slider //slider
var slider = mui(mui.classSelector('#iwindow .slider-group')); var slider = mui(mui.classSelector('.slider-group'), iwindow);
if (slider.length === 1) { if (slider.length === 1) {
slider.slider(); slider.slider();
//slider-switch //slider-switch
...@@ -52,10 +53,10 @@ $(function() { ...@@ -52,10 +53,10 @@ $(function() {
} }
} }
//offcanvas //offcanvas
var offCanvasContainer = document.querySelector('#iwindow .mui-off-canvas-wrap'); var offCanvasContainer = iwindow.querySelector('.mui-off-canvas-wrap');
if (offCanvasContainer) { if (offCanvasContainer) {
var offCanvasInnerContainer = offCanvasContainer.querySelector('.mui-inner-wrap'); var offCanvasInnerContainer = offCanvasContainer.querySelector('.mui-inner-wrap');
var offCanvas = mui('#offCanvas'); var offCanvas = mui('#offCanvas', iwindow);
document.getElementById('offCanvas_switch').addEventListener('toggle', function(event) { document.getElementById('offCanvas_switch').addEventListener('toggle', function(event) {
if (event.detail.isActive) { //整体滑动时,侧滑菜单在inner-wrap内 if (event.detail.isActive) { //整体滑动时,侧滑菜单在inner-wrap内
offCanvasInnerContainer.insertBefore(offCanvas[0], offCanvasInnerContainer.firstElementChild); offCanvasInnerContainer.insertBefore(offCanvas[0], offCanvasInnerContainer.firstElementChild);
...@@ -66,12 +67,9 @@ $(function() { ...@@ -66,12 +67,9 @@ $(function() {
} }
//input //input
mui(mui.classSelector('#iwindow .input-row input')).input(); mui(mui.classSelector('.input-row input'), iwindow).input();
jQuery('input[type="checkbox"]').change(function() {
console.log('change', $(this)[0].checked);
});
//简单处理label点击触发radio或checkbox //简单处理label点击触发radio或checkbox
document.getElementById('iwindow').addEventListener('tap', function(event) { iwindow.addEventListener('tap', function(event) {
var target = event.target; var target = event.target;
for (; target && target !== document; target = target.parentNode) { for (; target && target !== document; target = target.parentNode) {
if (target.tagName && target.tagName === 'LABEL') { if (target.tagName && target.tagName === 'LABEL') {
...@@ -79,13 +77,54 @@ $(function() { ...@@ -79,13 +77,54 @@ $(function() {
if (parent.classList && (parent.classList.contains('mui-radio') || parent.classList.contains('mui-checkbox'))) { if (parent.classList && (parent.classList.contains('mui-radio') || parent.classList.contains('mui-checkbox'))) {
var input = parent.querySelector('input'); var input = parent.querySelector('input');
if (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)) { if (!(768 >= c)) {
var e, f = n.scrollTop(); var e, f = n.scrollTop();
......
This diff is collapsed.
...@@ -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-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:32:27 +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"> <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. --> ...@@ -252,8 +252,8 @@ Copy any changes made here over to the README too. -->
</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-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:32:27 +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>
</div> </div>
......
...@@ -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-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:32:27 +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"> <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 @@ ...@@ -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-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:32:27 +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>
</div> </div>
......
...@@ -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-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:32:27 +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"> <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 @@ ...@@ -73,8 +73,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-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:32:27 +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>
</div> </div>
......
...@@ -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-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:32:27 +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"> <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 @@ ...@@ -127,8 +127,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-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:32:27 +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>
</div> </div>
......
...@@ -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-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:32:27 +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"> <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层级 ...@@ -498,8 +498,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>
<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/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:32:27 +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>
</div> </div>
......
...@@ -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-02T20:32:27+08:00</lastmod> <lastmod>2014-09-02T20:59:57+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-02T20:32:27+08:00</lastmod> <lastmod>2014-09-02T20:59:57+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-02T20:32:27+08:00</lastmod> <lastmod>2014-09-02T20:59:57+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-02T20:32:27+08:00</lastmod> <lastmod>2014-09-02T20:59:57+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-02T20:32:27+08:00</lastmod> <lastmod>2014-09-02T20:59:57+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-02T20:32:27+08:00</lastmod> <lastmod>2014-09-02T20:59:57+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-02T20:32:27+08:00</lastmod> <lastmod>2014-09-02T20:59:57+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