기초 스위치 스위치는 마우스 클릭(손가락 탭)으로 "켜기"와 "끄기" 상태 사이를 전환합니다.
스위치는 <div class="switch">를 사용하여 생성됩니다. 내에 고유 ID가 있는
속성은 <input type="checkbox">의 ID와 일치해야 합니다: <div class="switch"> 创建。<div> 内添加带有唯一 id 的 <input type="checkbox"> ，<label> 元素的 for 属性需要与 <input type="checkbox"> 的 id 相匹配：实例 <!DOCTYPE html>
<html>
<head>
<title>Foundation 实例</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://static.php.cn/assets/foundation-5.5.3/foundation.min.css">
<script src="http://static.php.cn/assets/jquery/2.0.3/jquery.min.js"></script>
<script src="http://static.php.cn/assets/foundation-5.5.3/js/foundation.min.js"></script>
<script src="http://static.php.cn/assets/foundation-5.5.3/js/vendor/modernizr.js"></script>
</head>
<body>
<div style="padding:20px;">
<h2>开关</h2>
<p>可以在 div 中添加 class="switch" 类，并添加 input checkbox 和 label 元素来创建开关:</p>
<form>
<div class="switch">
<input id="mySwitch" type="checkbox">
<label for="mySwitch"></label>
</div>
</form>
</div>
</body>
</html> 运行实例 » 点击 "运行实例" 按钮查看在线实例
开关大小 使用 .large, .small 或 .tiny 类来设置开关大小：
实例 <!DOCTYPE html>
<html>
<head>
<title>Foundation 实例</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://static.php.cn/assets/foundation-5.5.3/foundation.min.css">
<script src="http://static.php.cn/assets/jquery/2.0.3/jquery.min.js"></script>
<script src="http://static.php.cn/assets/foundation-5.5.3/js/foundation.min.js"></script>
<script src="http://static.php.cn/assets/foundation-5.5.3/js/vendor/modernizr.js"></script>
</head>
<body>
<div style="padding:20px;">
<h2>开关大小</h2>
<p>使用 <code>.large</code>, <code>.small</code> 或 <code>.tiny</code> 类来设置开关的大小:</p>
<span>Large</span>
<div class="switch large">
<input id="mySwitch1" type="checkbox">
<label for="mySwitch1"></label>
</div>
<span>Default</span>
<div class="switch">
<input id="mySwitch2" type="checkbox">
<label for="mySwitch2"></label>
</div>
<span>Small</span>
<div class="switch small">
<input id="mySwitch3" type="checkbox">
<label for="mySwitch3"></label>
</div>
<span>Tiny</span>
<div class="switch tiny">
<input id="mySwitch4" type="checkbox">
<label for="mySwitch4"></label>
</div>
</div>
</body>
</html> 运行实例 » 点击 "运行实例" 按钮查看在线实例
圆角切换开关 使用 .radius 和 .round 类来设置圆角切换开关：
实例 <!DOCTYPE html>
<html>
<head>
<title>Foundation 实例</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://static.php.cn/assets/foundation-5.5.3/foundation.min.css">
<script src="http://static.php.cn/assets/jquery/2.0.3/jquery.min.js"></script>
<script src="http://static.php.cn/assets/foundation-5.5.3/js/foundation.min.js"></script>
<script src="http://static.php.cn/assets/foundation-5.5.3/js/vendor/modernizr.js"></script>
</head>
<body>
<div style="padding:20px;">
<h2>圆角开关</h2>
<p>使用 <code>.radius</code> 和 <code>.round</code> 类来设置圆角开关:</p>
<span>默认</span>
<div class="switch">
<input id="mySwitch1" type="checkbox">
<label for="mySwitch1"></label>
</div>
<span>圆角</span>
<div class="switch radius">
<input id="mySwitch2" type="checkbox">
<label for="mySwitch2"></label>
</div>
<span>圆形</span>
<div class="switch round">
<input id="mySwitch3" type="checkbox">
<label for="mySwitch3"></label>
</div>
</div>
</body>
</html> 运行实例 » 点击 "运行实例" 按钮查看在线实例
开关组 可以通过设置单选按钮(radio)来设置单个选项。注意: 注意各个选项的 name
Instance
<!DOCTYPE html>
<html>
<head>
<title>Foundation 实例</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://static.php.cn/assets/foundation-5.5.3/foundation.min.css">
<script src="http://static.php.cn/assets/jquery/2.0.3/jquery.min.js"></script>
<script src="http://static.php.cn/assets/foundation-5.5.3/js/foundation.min.js"></script>
<script src="http://static.php.cn/assets/foundation-5.5.3/js/vendor/modernizr.js"></script>
</head>
<body>
<div style="padding:20px;">
<h2>开关组</h2>
<p>可以通过设置单选按钮(radio)来设置单个选项。<strong>注意:</strong> 注意各个选项的 <code>name</code> 属性必须一致 (实例中为 "myGroup" )。</p>
<form>
<div class="switch">
<input id="mySwitch1" type="radio" name="myGroup">
<label for="mySwitch1"></label>
</div>
<div class="switch">
<input id="mySwitch2" type="radio" checked name="myGroup">
<label for="mySwitch2"></label>
</div>
<div class="switch">
<input id="mySwitch3" type="radio" name="myGroup">
<label for="mySwitch3"></label>
</div>
</form>
</div>
</body>
</html>
Run Instance»
"Run Instance" 버튼을 클릭하여 온라인 인스턴스 보기
크기 전환 .large, .small 또는 .tiny 클래스를 사용하여 스위치 크기 설정: 🎜🎜 🎜Example🎜🎜rrreee🎜🎜🎜예제 실행»🎜🎜온라인 예제를 보려면 "예제 실행" 버튼을 클릭하세요.🎜🎜둥근 모서리 토글 스위치🎜🎜<코드 사용 >.radius .round 클래스를 사용하여 둥근 모서리 스위치를 설정합니다. 🎜🎜🎜Instance🎜🎜rrreee🎜🎜🎜Run Instance»🎜🎜"Run Instance" 버튼을 클릭하여 온라인 예시🎜🎜그룹 전환 🎜🎜라디오 버튼을 설정하여 개별 옵션을 설정할 수 있습니다. 참고: 각 옵션의 name 속성은 일관되어야 합니다(예에서는 "myGroup"). 🎜🎜🎜Instance🎜🎜rrreee🎜🎜🎜인스턴스 실행 »🎜🎜온라인 인스턴스를 보려면 "인스턴스 실행" 버튼을 클릭하세요🎜🎜
