Foundation switch

The switch is switched between "On" and "Off" states by mouse click (finger tapping):

Switch switch usage<div class="switch"> Create. <div> Add <input type="checkbox"> with a unique id. The for attribute of the <label> element needs to be the same as <input type="checkbox"> matches the id of:

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>可以在 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>

Running instance»

Click the "Run Instance" button to view the online instance

Switch size

Use .large, .small or .tiny class to set the switch size:

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

Run Instance»

Click the "Run Example" button to view the online example

Round corner switch

Use .radius and .round Class to set the rounded corners toggle switch:

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

Run Instance»

Click "Run Instance" Button to view online examples

Switch group

You can set a single option by setting a radio button. Note: Note that the name attributes of each option must be consistent ("myGroup" in the example).

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 »

Click the "Run instance" button to view the online instance