Chinesisches Grundlagenhandbuch / Foundation 開關(guān)

Foundation 開關(guān)

開關(guān)是在鼠標點擊(手指敲擊)下在 "On" 和 "Off" 狀態(tài)下切換：

切換開關(guān)使用 <div class="switch"> 創(chuàng)建。<div> 內(nèi)添加帶有唯一 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>開關(guān)</h2>
  <p>可以在 div 中添加 class="switch" 類，并添加 input checkbox 和 label 元素來創(chuàng)建開關(guān):</p>
  <form>
    <div class="switch">
      <input id="mySwitch" type="checkbox">
      <label for="mySwitch"></label>
    </div>
  </form>
</div>

</body>
</html>

運行實例 ?

點擊 "運行實例" 按鈕查看在線實例

開關(guān)大小

使用 .large, .small 或 .tiny 類來設(shè)置開關(guān)大小：

實例

<!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>開關(guān)大小</h2>
  <p>使用 <code>.large</code>, <code>.small</code> 或 <code>.tiny</code> 類來設(shè)置開關(guān)的大小:</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>

運行實例 ?

點擊 "運行實例" 按鈕查看在線實例

圓角切換開關(guān)

使用 .radius 和 .round 類來設(shè)置圓角切換開關(guān)：

實例

<!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>圓角開關(guān)</h2>
  <p>使用 <code>.radius</code> 和 <code>.round</code> 類來設(shè)置圓角開關(guān):</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>

運行實例 ?

點擊 "運行實例" 按鈕查看在線實例

開關(guān)組

可以通過設(shè)置單選按鈕(radio)來設(shè)置單個選項。注意: 注意各個選項的 name 屬性必須一致 (實例中為 "myGroup" )。

實例

<!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>開關(guān)組</h2>
  <p>可以通過設(shè)置單選按鈕(radio)來設(shè)置單個選項。<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>

運行實例 ?

點擊 "運行實例" 按鈕查看在線實例

← Foundation 輸入框尺寸

Foundation 滑塊 →