分段选择

MUI HTML5

MUI

分段选择

<div id="segmentedControl" class="mui-segmented-control">
	<a class="mui-control-item mui-active" href="#item1mobile">
			待办公文(8)
		</a>
	<a class="mui-control-item" href="#item2mobile">
			已办公文
		</a>
	<a class="mui-control-item" href="#item3mobile">
			全部公文
		</a>
</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">
	<form class="mui-input-group">
		<div class="mui-input-row mui-radio">
			<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>