Heim > Artikel > Web-Frontend > Ionenschalter

Ionenschalter

黄舟Original: 2017-02-16 13:57:521500Durchsuche

1. Instanzhintergrund

Ionenschalter umschalten, Stil mit Toggle-Calm, Toggle-Light usw. festlegen.

2. Implementierungsquellcode

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
		<title>ionic之切换开关</title>
		<link rel="stylesheet" href="../css/ionic.css" />
		<script type="text/javascript" src="../js/angular/angular.js" ></script>
		<script type="text/javascript" src="../js/ionic.js"></script>
		<script type="text/javascript" src="../js/ionic-angular.js" ></script>
		<script type="text/javascript" src="../js/ionic.bundle.js" ></script>
	</head>
	<body>
		<p class="content has-header">
			<ul class="list">
				<li class="item item-toggle">Java
					<label class="toggle toggle-assertive">
						<input type="checkbox" checked="">
			            <p class="track">
			               <p class="handle"></p>
			            </p>
					</label>
				</li>
				<li class="item item-toggle">VB
					<label class="toggle toggle-balanced">
						<input type="checkbox" checked="">
			            <p class="track">
			               <p class="handle"></p>
			            </p>
					</label>
				</li>
				<li class="item item-toggle">C#
					<label class="toggle toggle-calm">
						<input type="checkbox" checked="">
			            <p class="track">
			               <p class="handle"></p>
			            </p>
					</label>
				</li>
				<li class="item item-toggle">C
					<label class="toggle toggle-dark">
						<input type="checkbox" checked="">
			            <p class="track">
			               <p class="handle"></p>
			            </p>
					</label>
				</li>
				<li class="item item-toggle">C++
					<label class="toggle toggle-energized">
						<input type="checkbox" checked="">
			            <p class="track">
			               <p class="handle"></p>
			            </p>
					</label>
				</li>
				<li class="item item-toggle">JavaScript
					<label class="toggle toggle-light">
						<input type="checkbox" checked="">
			            <p class="track">
			               <p class="handle"></p>
			            </p>
					</label>
				</li>
				<li class="item item-toggle">HTML5
					<label class="toggle toggle-positive">
						<input type="checkbox" checked="">
			            <p class="track">
			               <p class="handle"></p>
			            </p>
					</label>
				</li>
				<li class="item item-toggle">CSS3
					<label class="toggle toggle-royal">
						<input type="checkbox" checked="">
			            <p class="track">
			               <p class="handle"></p>
			            </p>
					</label>
				</li>
				<li class="item item-toggle">Flex
					<label class="toggle toggle-small">
						<input type="checkbox" checked="">
			            <p class="track">
			               <p class="handle"></p>
			            </p>
					</label>
				</li>
				<li class="item item-toggle">Dojo
					<label class="toggle toggle-stable">
						<input type="checkbox" checked="">
			            <p class="track">
			               <p class="handle"></p>
			            </p>
					</label>
				</li>
				<li class="item item-toggle">AngularJS
					<label class="toggle ion-ios-toggle-outline">
						<input type="checkbox" checked="">
			            <p class="track">
			               <p class="handle"></p>
			            </p>
					</label>
				</li>
				<li class="item item-toggle">ionic
					<label class="toggle ion-toggle-filled">
						<input type="checkbox" checked="">
			            <p class="track">
			               <p class="handle"></p>
			            </p>
					</label>
				</li>
				<li class="item item-toggle">ionic
					<label class="toggle ion-toggle-filled">
						<input type="checkbox" checked="">
			            <p class="track">
			               <p class="handle"></p>
			            </p>
					</label>
				</li>
			</ul>
		</p>
	</body>
</html>

3 . Implementierungsergebnisse

Ionenschalter

Das Obige ist der Inhalt des ionic-Schalters, bitte beachten Sie mehr Verwandte Inhalte PHP chinesische Website (www.php.cn)!

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：Amap – Mehrere Punktmarkierungen löschenNächster Artikel：Amap – Mehrere Punktmarkierungen löschen

In Verbindung stehende Artikel

Mehr sehen