可拖动选项卡

MUI HTML5

MUI

可拖动选项卡

<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>