Skip to content

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

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

parent fb3dea46
Show whitespace changes
Inline Side-by-side
Showing with 556 additions and 77 deletions
about/index.html
View file @ 458e7404
...@@ -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>
......
assets/css/docs.css
View file @ 458e7404
...@@ -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;
} }
} }
......
assets/js/docs.min.js
View file @ 458e7404
...@@ -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();
......
components/index.html
View file @ 458e7404
...@@ -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">
...@@ -2974,6 +2974,69 @@ ...@@ -2974,6 +2974,69 @@
<span class="nt">&lt;/a&gt;</span> <span class="nt">&lt;/a&gt;</span>
<span class="nt">&lt;/header&gt;</span></code></pre></div> <span class="nt">&lt;/header&gt;</span></code></pre></div>
</article>
<!-- radios -->
<article class="component mui-active" id="radios">
<h3 class="component-title">单选框</h3>
<p class="component-description"></p>
<div class="component-example">
<h5 class="mui-content-padded">图标左对齐</h5>
<div class="mui-card">
<form class="mui-input-group">
<div class="mui-input-row mui-radio mui-left">
<label>Radio</label>
<input name="radio1" type="radio">
</div>
<div class="mui-input-row mui-radio mui-left">
<label>Radio</label>
<input name="radio1" type="radio" checked>
</div>
</form>
</div>
<h5 class="mui-content-padded">图标右对齐</h5>
<div class="mui-card">
<form class="mui-input-group">
<div class="mui-input-row mui-radio">
<label>Radio</label>
<input name="radio1" type="radio">
</div>
<div class="mui-input-row mui-radio">
<label>Radio</label>
<input name="radio1" type="radio" checked>
</div>
</form>
</div>
</div>
<div class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt">&lt;h5</span> <span class="na">class=</span><span class="s">&quot;mui-content-padded&quot;</span><span class="nt">&gt;</span>图标左对齐<span class="nt">&lt;/h5&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;mui-card&quot;</span><span class="nt">&gt;</span>
<span class="nt">&lt;form</span> <span class="na">class=</span><span class="s">&quot;mui-input-group&quot;</span><span class="nt">&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;mui-input-row mui-radio mui-left&quot;</span><span class="nt">&gt;</span>
<span class="nt">&lt;label&gt;</span>Radio<span class="nt">&lt;/label&gt;</span>
<span class="nt">&lt;input</span> <span class="na">name=</span><span class="s">&quot;radio1&quot;</span> <span class="na">type=</span><span class="s">&quot;radio&quot;</span><span class="nt">&gt;</span>
<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;mui-input-row mui-radio mui-left&quot;</span><span class="nt">&gt;</span>
<span class="nt">&lt;label&gt;</span>Radio<span class="nt">&lt;/label&gt;</span>
<span class="nt">&lt;input</span> <span class="na">name=</span><span class="s">&quot;radio1&quot;</span> <span class="na">type=</span><span class="s">&quot;radio&quot;</span> <span class="na">checked</span><span class="nt">&gt;</span>
<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;/form&gt;</span>
<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;h5</span> <span class="na">class=</span><span class="s">&quot;mui-content-padded&quot;</span><span class="nt">&gt;</span>图标右对齐<span class="nt">&lt;/h5&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;mui-card&quot;</span><span class="nt">&gt;</span>
<span class="nt">&lt;form</span> <span class="na">class=</span><span class="s">&quot;mui-input-group&quot;</span><span class="nt">&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;mui-input-row mui-radio&quot;</span><span class="nt">&gt;</span>
<span class="nt">&lt;label&gt;</span>Radio<span class="nt">&lt;/label&gt;</span>
<span class="nt">&lt;input</span> <span class="na">name=</span><span class="s">&quot;radio1&quot;</span> <span class="na">type=</span><span class="s">&quot;radio&quot;</span><span class="nt">&gt;</span>
<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;mui-input-row mui-radio&quot;</span><span class="nt">&gt;</span>
<span class="nt">&lt;label&gt;</span>Radio<span class="nt">&lt;/label&gt;</span>
<span class="nt">&lt;input</span> <span class="na">name=</span><span class="s">&quot;radio1&quot;</span> <span class="na">type=</span><span class="s">&quot;radio&quot;</span> <span class="na">checked</span><span class="nt">&gt;</span>
<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;/form&gt;</span>
<span class="nt">&lt;/div&gt;</span></code></pre></div>
</article> </article>
<!-- segmentedControls --> <!-- segmentedControls -->
...@@ -2982,39 +3045,408 @@ ...@@ -2982,39 +3045,408 @@
<p class="component-description">Content sections that are to be swapped in and out by the controller should all be siblings and have the class <code>.mui-control-content</code>. Then, just give each content section an id and point the link in the segmented control to that id.</p> <p class="component-description">Content sections that are to be swapped in and out by the controller should all be siblings and have the class <code>.mui-control-content</code>. Then, just give each content section an id and point the link in the segmented control to that id.</p>
<div class="component-example"> <div class="component-example">
<div class="mui-segmented-control"> <div id="segmentedControl" class="mui-segmented-control">
<a class="mui-control-item mui-active" href="#item1mobile"> <a class="mui-control-item mui-active" href="#item1mobile">
Thing one 待办公文（8）
</a> </a>
<a class="mui-control-item" href="#item2mobile"> <a class="mui-control-item" href="#item2mobile">
Thing two 已办公文
</a> </a>
<a class="mui-control-item" href="#item3mobile"> <a class="mui-control-item" href="#item3mobile">
Thing three 全部公文
</a> </a>
</div> </div>
<div class="mui-content-padded">
<div id="item1mobile" class="mui-control-content mui-active">
<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>
</div>
<div id="item2mobile" class="mui-control-content">
<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>
</div>
<div id="item3mobile" class="mui-control-content">
<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>
</div>
</div>
<h5 class="mui-content-padded">Style</h5>
<div class="mui-card"> <div class="mui-card">
<span id="item1mobile" class="mui-control-content mui-active">Item 1</span> <form class="mui-input-group">
<span id="item2mobile" class="mui-control-content">Item 2</span> <div class="mui-input-row mui-radio">
<span id="item3mobile" class="mui-control-content">Item 3</span> <label>按钮</label>
<input name="style" type="radio" checked value="">
</div>
<div class="mui-input-row mui-radio">
<label>文字</label>
<input name="style" type="radio" value="inverted">
</div>
</form>
</div>
<h5 class="mui-content-padded">Color</h5>
<div class="mui-card">
<form class="mui-input-group">
<div class="mui-input-row mui-radio">
<label><span class="mui-bg-primary" style="display:block;width:25px;height:25px;"></span>
</label>
<input name="color" type="radio" checked value="primary">
</div>
<div class="mui-input-row mui-radio">
<label><span class="mui-bg-positive" style="display:block;width:25px;height:25px;"></span>
</label>
<input name="color" type="radio" value="positive">
</div>
<div class="mui-input-row mui-radio">
<label><span class="mui-bg-negative" style="display:block;width:25px;height:25px;"></span>
</label>
<input name="color" type="radio" value="negative">
</div>
</form>
</div> </div>
</div> </div>
<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-segmented-control&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">id=</span><span class="s">&quot;segmentedControl&quot;</span> <span class="na">class=</span><span class="s">&quot;mui-segmented-control&quot;</span><span class="nt">&gt;</span>
<span class="nt">&lt;a</span> <span class="na">class=</span><span class="s">&quot;mui-control-item mui-active&quot;</span> <span class="na">href=</span><span class="s">&quot;#item1mobile&quot;</span><span class="nt">&gt;</span> <span class="nt">&lt;a</span> <span class="na">class=</span><span class="s">&quot;mui-control-item mui-active&quot;</span> <span class="na">href=</span><span class="s">&quot;#item1mobile&quot;</span><span class="nt">&gt;</span>
Thing one 待办公文（8）
<span class="nt">&lt;/a&gt;</span>
<span class="nt">&lt;a</span> <span class="na">class=</span><span class="s">&quot;mui-control-item&quot;</span> <span class="na">href=</span><span class="s">&quot;#item2mobile&quot;</span><span class="nt">&gt;</span>
已办公文
<span class="nt">&lt;/a&gt;</span>
<span class="nt">&lt;a</span> <span class="na">class=</span><span class="s">&quot;mui-control-item&quot;</span> <span class="na">href=</span><span class="s">&quot;#item3mobile&quot;</span><span class="nt">&gt;</span>
全部公文
<span class="nt">&lt;/a&gt;</span>
<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;mui-content-padded&quot;</span><span class="nt">&gt;</span>
<span class="nt">&lt;div</span> <span class="na">id=</span><span class="s">&quot;item1mobile&quot;</span> <span class="na">class=</span><span class="s">&quot;mui-control-content mui-active&quot;</span><span class="nt">&gt;</span>
<span class="nt">&lt;ul</span> <span class="na">class=</span><span class="s">&quot;mui-table-view&quot;</span><span class="nt">&gt;</span>
<span class="nt">&lt;li</span> <span class="na">class=</span><span class="s">&quot;mui-table-view-cell&quot;</span><span class="nt">&gt;</span>
第一个选项卡子项-1
<span class="nt">&lt;/li&gt;</span>
<span class="nt">&lt;li</span> <span class="na">class=</span><span class="s">&quot;mui-table-view-cell&quot;</span><span class="nt">&gt;</span>
第一个选项卡子项-2
<span class="nt">&lt;/li&gt;</span>
<span class="nt">&lt;li</span> <span class="na">class=</span><span class="s">&quot;mui-table-view-cell&quot;</span><span class="nt">&gt;</span>
第一个选项卡子项-3
<span class="nt">&lt;/li&gt;</span>
<span class="nt">&lt;li</span> <span class="na">class=</span><span class="s">&quot;mui-table-view-cell&quot;</span><span class="nt">&gt;</span>
第一个选项卡子项-4
<span class="nt">&lt;/li&gt;</span>
<span class="nt">&lt;li</span> <span class="na">class=</span><span class="s">&quot;mui-table-view-cell&quot;</span><span class="nt">&gt;</span>
第一个选项卡子项-5
<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</span> <span class="na">id=</span><span class="s">&quot;item2mobile&quot;</span> <span class="na">class=</span><span class="s">&quot;mui-control-content&quot;</span><span class="nt">&gt;</span>
<span class="nt">&lt;ul</span> <span class="na">class=</span><span class="s">&quot;mui-table-view&quot;</span><span class="nt">&gt;</span>
<span class="nt">&lt;li</span> <span class="na">class=</span><span class="s">&quot;mui-table-view-cell&quot;</span><span class="nt">&gt;</span>
第二个选项卡子项-1
<span class="nt">&lt;/li&gt;</span>
<span class="nt">&lt;li</span> <span class="na">class=</span><span class="s">&quot;mui-table-view-cell&quot;</span><span class="nt">&gt;</span>
第二个选项卡子项-2
<span class="nt">&lt;/li&gt;</span>
<span class="nt">&lt;li</span> <span class="na">class=</span><span class="s">&quot;mui-table-view-cell&quot;</span><span class="nt">&gt;</span>
第二个选项卡子项-3
<span class="nt">&lt;/li&gt;</span>
<span class="nt">&lt;li</span> <span class="na">class=</span><span class="s">&quot;mui-table-view-cell&quot;</span><span class="nt">&gt;</span>
第二个选项卡子项-4
<span class="nt">&lt;/li&gt;</span>
<span class="nt">&lt;li</span> <span class="na">class=</span><span class="s">&quot;mui-table-view-cell&quot;</span><span class="nt">&gt;</span>
第二个选项卡子项-5
<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</span> <span class="na">id=</span><span class="s">&quot;item3mobile&quot;</span> <span class="na">class=</span><span class="s">&quot;mui-control-content&quot;</span><span class="nt">&gt;</span>
<span class="nt">&lt;ul</span> <span class="na">class=</span><span class="s">&quot;mui-table-view&quot;</span><span class="nt">&gt;</span>
<span class="nt">&lt;li</span> <span class="na">class=</span><span class="s">&quot;mui-table-view-cell&quot;</span><span class="nt">&gt;</span>
第三个选项卡子项-1
<span class="nt">&lt;/li&gt;</span>
<span class="nt">&lt;li</span> <span class="na">class=</span><span class="s">&quot;mui-table-view-cell&quot;</span><span class="nt">&gt;</span>
第三个选项卡子项-2
<span class="nt">&lt;/li&gt;</span>
<span class="nt">&lt;li</span> <span class="na">class=</span><span class="s">&quot;mui-table-view-cell&quot;</span><span class="nt">&gt;</span>
第三个选项卡子项-3
<span class="nt">&lt;/li&gt;</span>
<span class="nt">&lt;li</span> <span class="na">class=</span><span class="s">&quot;mui-table-view-cell&quot;</span><span class="nt">&gt;</span>
第三个选项卡子项-4
<span class="nt">&lt;/li&gt;</span>
<span class="nt">&lt;li</span> <span class="na">class=</span><span class="s">&quot;mui-table-view-cell&quot;</span><span class="nt">&gt;</span>
第三个选项卡子项-5
<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;h5</span> <span class="na">class=</span><span class="s">&quot;mui-content-padded&quot;</span><span class="nt">&gt;</span>Style<span class="nt">&lt;/h5&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;mui-card&quot;</span><span class="nt">&gt;</span>
<span class="nt">&lt;form</span> <span class="na">class=</span><span class="s">&quot;mui-input-group&quot;</span><span class="nt">&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;mui-input-row mui-radio&quot;</span><span class="nt">&gt;</span>
<span class="nt">&lt;label&gt;</span>按钮<span class="nt">&lt;/label&gt;</span>
<span class="nt">&lt;input</span> <span class="na">name=</span><span class="s">&quot;style&quot;</span> <span class="na">type=</span><span class="s">&quot;radio&quot;</span> <span class="na">checked</span> <span class="na">value=</span><span class="s">&quot;&quot;</span><span class="nt">&gt;</span>
<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;mui-input-row mui-radio&quot;</span><span class="nt">&gt;</span>
<span class="nt">&lt;label&gt;</span>文字<span class="nt">&lt;/label&gt;</span>
<span class="nt">&lt;input</span> <span class="na">name=</span><span class="s">&quot;style&quot;</span> <span class="na">type=</span><span class="s">&quot;radio&quot;</span> <span class="na">value=</span><span class="s">&quot;inverted&quot;</span><span class="nt">&gt;</span>
<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;/form&gt;</span>
<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;h5</span> <span class="na">class=</span><span class="s">&quot;mui-content-padded&quot;</span><span class="nt">&gt;</span>Color<span class="nt">&lt;/h5&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;mui-card&quot;</span><span class="nt">&gt;</span>
<span class="nt">&lt;form</span> <span class="na">class=</span><span class="s">&quot;mui-input-group&quot;</span><span class="nt">&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;mui-input-row mui-radio&quot;</span><span class="nt">&gt;</span>
<span class="nt">&lt;label&gt;&lt;span</span> <span class="na">class=</span><span class="s">&quot;mui-bg-primary&quot;</span> <span class="na">style=</span><span class="s">&quot;display:block;width:25px;height:25px;&quot;</span><span class="nt">&gt;&lt;/span&gt;</span>
<span class="nt">&lt;/label&gt;</span>
<span class="nt">&lt;input</span> <span class="na">name=</span><span class="s">&quot;color&quot;</span> <span class="na">type=</span><span class="s">&quot;radio&quot;</span> <span class="na">checked</span> <span class="na">value=</span><span class="s">&quot;primary&quot;</span><span class="nt">&gt;</span>
<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;mui-input-row mui-radio&quot;</span><span class="nt">&gt;</span>
<span class="nt">&lt;label&gt;&lt;span</span> <span class="na">class=</span><span class="s">&quot;mui-bg-positive&quot;</span> <span class="na">style=</span><span class="s">&quot;display:block;width:25px;height:25px;&quot;</span><span class="nt">&gt;&lt;/span&gt;</span>
<span class="nt">&lt;/label&gt;</span>
<span class="nt">&lt;input</span> <span class="na">name=</span><span class="s">&quot;color&quot;</span> <span class="na">type=</span><span class="s">&quot;radio&quot;</span> <span class="na">value=</span><span class="s">&quot;positive&quot;</span><span class="nt">&gt;</span>
<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;mui-input-row mui-radio&quot;</span><span class="nt">&gt;</span>
<span class="nt">&lt;label&gt;&lt;span</span> <span class="na">class=</span><span class="s">&quot;mui-bg-negative&quot;</span> <span class="na">style=</span><span class="s">&quot;display:block;width:25px;height:25px;&quot;</span><span class="nt">&gt;&lt;/span&gt;</span>
<span class="nt">&lt;/label&gt;</span>
<span class="nt">&lt;input</span> <span class="na">name=</span><span class="s">&quot;color&quot;</span> <span class="na">type=</span><span class="s">&quot;radio&quot;</span> <span class="na">value=</span><span class="s">&quot;negative&quot;</span><span class="nt">&gt;</span>
<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;/form&gt;</span>
<span class="nt">&lt;/div&gt;</span></code></pre></div>
</article>
<!-- segmentedControlsWithPagination -->
<article class="component mui-active" id="segmentedControlsWithPagination">
<h3 class="component-title">可拖动选项卡</h3>
<p class="component-description"></p>
<div class="component-example">
<div id="slider" class="mui-slider">
<div id="sliderSegmentedControl" class="mui-slider-indicator mui-segmented-control mui-segmented-control-inverted">
<a class="mui-control-item" href="#item1mobile">
待办公文
</a>
<a class="mui-control-item" href="#item2mobile">
已办公文
</a>
<a class="mui-control-item" href="#item3mobile">
全部公文
</a>
</div>
<div id="sliderProgressBar" class="mui-slider-progress-bar mui-col-xs-4"></div>
<div class="mui-slider-group">
<div id="item1mobile" class="mui-slider-item mui-control-content mui-active">
<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>
</div>
<div id="item2mobile" class="mui-slider-item mui-control-content">
<div class="mui-loading">
<div class="mui-spinner">
<div class="mui-spinner-indicator mui-spinner-indicator12"></div>
<div class="mui-spinner-indicator mui-spinner-indicator11"></div>
<div class="mui-spinner-indicator mui-spinner-indicator10"></div>
<div class="mui-spinner-indicator mui-spinner-indicator9"></div>
<div class="mui-spinner-indicator mui-spinner-indicator8"></div>
<div class="mui-spinner-indicator mui-spinner-indicator7"></div>
<div class="mui-spinner-indicator mui-spinner-indicator6"></div>
<div class="mui-spinner-indicator mui-spinner-indicator5"></div>
<div class="mui-spinner-indicator mui-spinner-indicator4"></div>
<div class="mui-spinner-indicator mui-spinner-indicator3"></div>
<div class="mui-spinner-indicator mui-spinner-indicator2"></div>
<div class="mui-spinner-indicator mui-spinner-indicator1"></div>
</div>
</div>
</div>
<div id="item3mobile" class="mui-slider-item mui-control-content">
<div class="mui-loading">
<div class="mui-spinner">
<div class="mui-spinner-indicator mui-spinner-indicator12"></div>
<div class="mui-spinner-indicator mui-spinner-indicator11"></div>
<div class="mui-spinner-indicator mui-spinner-indicator10"></div>
<div class="mui-spinner-indicator mui-spinner-indicator9"></div>
<div class="mui-spinner-indicator mui-spinner-indicator8"></div>
<div class="mui-spinner-indicator mui-spinner-indicator7"></div>
<div class="mui-spinner-indicator mui-spinner-indicator6"></div>
<div class="mui-spinner-indicator mui-spinner-indicator5"></div>
<div class="mui-spinner-indicator mui-spinner-indicator4"></div>
<div class="mui-spinner-indicator mui-spinner-indicator3"></div>
<div class="mui-spinner-indicator mui-spinner-indicator2"></div>
<div class="mui-spinner-indicator mui-spinner-indicator1"></div>
</div>
</div>
</div>
</div>
</div>
<h5 class="mui-content-padded">Color</h5>
<div class="mui-card">
<form class="mui-input-group">
<div class="mui-input-row mui-radio">
<label><span class="mui-bg-primary" style="display:block;width:25px;height:25px;"></span>
</label>
<input name="radio1" type="radio" checked value="primary">
</div>
<div class="mui-input-row mui-radio">
<label><span class="mui-bg-positive" style="display:block;width:25px;height:25px;"></span>
</label>
<input name="radio1" type="radio" value="positive">
</div>
<div class="mui-input-row mui-radio">
<label><span class="mui-bg-negative" style="display:block;width:25px;height:25px;"></span>
</label>
<input name="radio1" type="radio" value="negative">
</div>
</form>
</div>
</div>
<div class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt">&lt;div</span> <span class="na">id=</span><span class="s">&quot;slider&quot;</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">id=</span><span class="s">&quot;sliderSegmentedControl&quot;</span> <span class="na">class=</span><span class="s">&quot;mui-slider-indicator mui-segmented-control mui-segmented-control-inverted&quot;</span><span class="nt">&gt;</span>
<span class="nt">&lt;a</span> <span class="na">class=</span><span class="s">&quot;mui-control-item&quot;</span> <span class="na">href=</span><span class="s">&quot;#item1mobile&quot;</span><span class="nt">&gt;</span>
待办公文
<span class="nt">&lt;/a&gt;</span> <span class="nt">&lt;/a&gt;</span>
<span class="nt">&lt;a</span> <span class="na">class=</span><span class="s">&quot;mui-control-item&quot;</span> <span class="na">href=</span><span class="s">&quot;#item2mobile&quot;</span><span class="nt">&gt;</span> <span class="nt">&lt;a</span> <span class="na">class=</span><span class="s">&quot;mui-control-item&quot;</span> <span class="na">href=</span><span class="s">&quot;#item2mobile&quot;</span><span class="nt">&gt;</span>
Thing two 已办公文
<span class="nt">&lt;/a&gt;</span> <span class="nt">&lt;/a&gt;</span>
<span class="nt">&lt;a</span> <span class="na">class=</span><span class="s">&quot;mui-control-item&quot;</span> <span class="na">href=</span><span class="s">&quot;#item3mobile&quot;</span><span class="nt">&gt;</span> <span class="nt">&lt;a</span> <span class="na">class=</span><span class="s">&quot;mui-control-item&quot;</span> <span class="na">href=</span><span class="s">&quot;#item3mobile&quot;</span><span class="nt">&gt;</span>
Thing three 全部公文
<span class="nt">&lt;/a&gt;</span> <span class="nt">&lt;/a&gt;</span>
<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;div</span> <span class="na">id=</span><span class="s">&quot;sliderProgressBar&quot;</span> <span class="na">class=</span><span class="s">&quot;mui-slider-progress-bar mui-col-xs-4&quot;</span><span class="nt">&gt;&lt;/div&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;mui-slider-group&quot;</span><span class="nt">&gt;</span>
<span class="nt">&lt;div</span> <span class="na">id=</span><span class="s">&quot;item1mobile&quot;</span> <span class="na">class=</span><span class="s">&quot;mui-slider-item mui-control-content mui-active&quot;</span><span class="nt">&gt;</span>
<span class="nt">&lt;ul</span> <span class="na">class=</span><span class="s">&quot;mui-table-view&quot;</span><span class="nt">&gt;</span>
<span class="nt">&lt;li</span> <span class="na">class=</span><span class="s">&quot;mui-table-view-cell&quot;</span><span class="nt">&gt;</span>
第一个选项卡子项-1
<span class="nt">&lt;/li&gt;</span>
<span class="nt">&lt;li</span> <span class="na">class=</span><span class="s">&quot;mui-table-view-cell&quot;</span><span class="nt">&gt;</span>
第一个选项卡子项-2
<span class="nt">&lt;/li&gt;</span>
<span class="nt">&lt;li</span> <span class="na">class=</span><span class="s">&quot;mui-table-view-cell&quot;</span><span class="nt">&gt;</span>
第一个选项卡子项-3
<span class="nt">&lt;/li&gt;</span>
<span class="nt">&lt;li</span> <span class="na">class=</span><span class="s">&quot;mui-table-view-cell&quot;</span><span class="nt">&gt;</span>
第一个选项卡子项-4
<span class="nt">&lt;/li&gt;</span>
<span class="nt">&lt;li</span> <span class="na">class=</span><span class="s">&quot;mui-table-view-cell&quot;</span><span class="nt">&gt;</span>
第一个选项卡子项-5
<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</span> <span class="na">id=</span><span class="s">&quot;item2mobile&quot;</span> <span class="na">class=</span><span class="s">&quot;mui-slider-item mui-control-content&quot;</span><span class="nt">&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;mui-loading&quot;</span><span class="nt">&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;mui-spinner&quot;</span><span class="nt">&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;mui-spinner-indicator mui-spinner-indicator12&quot;</span><span class="nt">&gt;&lt;/div&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;mui-spinner-indicator mui-spinner-indicator11&quot;</span><span class="nt">&gt;&lt;/div&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;mui-spinner-indicator mui-spinner-indicator10&quot;</span><span class="nt">&gt;&lt;/div&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;mui-spinner-indicator mui-spinner-indicator9&quot;</span><span class="nt">&gt;&lt;/div&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;mui-spinner-indicator mui-spinner-indicator8&quot;</span><span class="nt">&gt;&lt;/div&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;mui-spinner-indicator mui-spinner-indicator7&quot;</span><span class="nt">&gt;&lt;/div&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;mui-spinner-indicator mui-spinner-indicator6&quot;</span><span class="nt">&gt;&lt;/div&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;mui-spinner-indicator mui-spinner-indicator5&quot;</span><span class="nt">&gt;&lt;/div&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;mui-spinner-indicator mui-spinner-indicator4&quot;</span><span class="nt">&gt;&lt;/div&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;mui-spinner-indicator mui-spinner-indicator3&quot;</span><span class="nt">&gt;&lt;/div&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;mui-spinner-indicator mui-spinner-indicator2&quot;</span><span class="nt">&gt;&lt;/div&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;mui-spinner-indicator mui-spinner-indicator1&quot;</span><span class="nt">&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>
<span class="nt">&lt;div</span> <span class="na">id=</span><span class="s">&quot;item3mobile&quot;</span> <span class="na">class=</span><span class="s">&quot;mui-slider-item mui-control-content&quot;</span><span class="nt">&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;mui-loading&quot;</span><span class="nt">&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;mui-spinner&quot;</span><span class="nt">&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;mui-spinner-indicator mui-spinner-indicator12&quot;</span><span class="nt">&gt;&lt;/div&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;mui-spinner-indicator mui-spinner-indicator11&quot;</span><span class="nt">&gt;&lt;/div&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;mui-spinner-indicator mui-spinner-indicator10&quot;</span><span class="nt">&gt;&lt;/div&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;mui-spinner-indicator mui-spinner-indicator9&quot;</span><span class="nt">&gt;&lt;/div&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;mui-spinner-indicator mui-spinner-indicator8&quot;</span><span class="nt">&gt;&lt;/div&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;mui-spinner-indicator mui-spinner-indicator7&quot;</span><span class="nt">&gt;&lt;/div&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;mui-spinner-indicator mui-spinner-indicator6&quot;</span><span class="nt">&gt;&lt;/div&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;mui-spinner-indicator mui-spinner-indicator5&quot;</span><span class="nt">&gt;&lt;/div&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;mui-spinner-indicator mui-spinner-indicator4&quot;</span><span class="nt">&gt;&lt;/div&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;mui-spinner-indicator mui-spinner-indicator3&quot;</span><span class="nt">&gt;&lt;/div&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;mui-spinner-indicator mui-spinner-indicator2&quot;</span><span class="nt">&gt;&lt;/div&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;mui-spinner-indicator mui-spinner-indicator1&quot;</span><span class="nt">&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>
<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;/div&gt;</span> <span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;h5</span> <span class="na">class=</span><span class="s">&quot;mui-content-padded&quot;</span><span class="nt">&gt;</span>Color<span class="nt">&lt;/h5&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;mui-card&quot;</span><span class="nt">&gt;</span> <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;mui-card&quot;</span><span class="nt">&gt;</span>
<span class="nt">&lt;span</span> <span class="na">id=</span><span class="s">&quot;item1mobile&quot;</span> <span class="na">class=</span><span class="s">&quot;mui-control-content mui-active&quot;</span><span class="nt">&gt;</span>Item 1<span class="nt">&lt;/span&gt;</span> <span class="nt">&lt;form</span> <span class="na">class=</span><span class="s">&quot;mui-input-group&quot;</span><span class="nt">&gt;</span>
<span class="nt">&lt;span</span> <span class="na">id=</span><span class="s">&quot;item2mobile&quot;</span> <span class="na">class=</span><span class="s">&quot;mui-control-content&quot;</span><span class="nt">&gt;</span>Item 2<span class="nt">&lt;/span&gt;</span> <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;mui-input-row mui-radio&quot;</span><span class="nt">&gt;</span>
<span class="nt">&lt;span</span> <span class="na">id=</span><span class="s">&quot;item3mobile&quot;</span> <span class="na">class=</span><span class="s">&quot;mui-control-content&quot;</span><span class="nt">&gt;</span>Item 3<span class="nt">&lt;/span&gt;</span> <span class="nt">&lt;label&gt;&lt;span</span> <span class="na">class=</span><span class="s">&quot;mui-bg-primary&quot;</span> <span class="na">style=</span><span class="s">&quot;display:block;width:25px;height:25px;&quot;</span><span class="nt">&gt;&lt;/span&gt;</span>
<span class="nt">&lt;/label&gt;</span>
<span class="nt">&lt;input</span> <span class="na">name=</span><span class="s">&quot;radio1&quot;</span> <span class="na">type=</span><span class="s">&quot;radio&quot;</span> <span class="na">checked</span> <span class="na">value=</span><span class="s">&quot;primary&quot;</span><span class="nt">&gt;</span>
<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;mui-input-row mui-radio&quot;</span><span class="nt">&gt;</span>
<span class="nt">&lt;label&gt;&lt;span</span> <span class="na">class=</span><span class="s">&quot;mui-bg-positive&quot;</span> <span class="na">style=</span><span class="s">&quot;display:block;width:25px;height:25px;&quot;</span><span class="nt">&gt;&lt;/span&gt;</span>
<span class="nt">&lt;/label&gt;</span>
<span class="nt">&lt;input</span> <span class="na">name=</span><span class="s">&quot;radio1&quot;</span> <span class="na">type=</span><span class="s">&quot;radio&quot;</span> <span class="na">value=</span><span class="s">&quot;positive&quot;</span><span class="nt">&gt;</span>
<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;mui-input-row mui-radio&quot;</span><span class="nt">&gt;</span>
<span class="nt">&lt;label&gt;&lt;span</span> <span class="na">class=</span><span class="s">&quot;mui-bg-negative&quot;</span> <span class="na">style=</span><span class="s">&quot;display:block;width:25px;height:25px;&quot;</span><span class="nt">&gt;&lt;/span&gt;</span>
<span class="nt">&lt;/label&gt;</span>
<span class="nt">&lt;input</span> <span class="na">name=</span><span class="s">&quot;radio1&quot;</span> <span class="na">type=</span><span class="s">&quot;radio&quot;</span> <span class="na">value=</span><span class="s">&quot;negative&quot;</span><span class="nt">&gt;</span>
<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;/form&gt;</span>
<span class="nt">&lt;/div&gt;</span></code></pre></div> <span class="nt">&lt;/div&gt;</span></code></pre></div>
</article> </article>
...@@ -3175,8 +3607,8 @@ ...@@ -3175,8 +3607,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>
......
getting-started-old/index.html
View file @ 458e7404
...@@ -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>
......
getting-started/index.html
View file @ 458e7404
...@@ -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>
......
index.html
View file @ 458e7404
...@@ -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>
......
javascript-old/index.html
View file @ 458e7404
...@@ -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>
......
javascript/index.html
View file @ 458e7404
...@@ -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>
......
sitemap.xml
View file @ 458e7404
...@@ -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