Changement de fondation


Le commutateur bascule entre les états « On » et « Off » en un clic de souris (appui du doigt) :

Les commutateurs à bascule sont créés à l'aide de <div class="switch">. Ajoutez <div> avec un identifiant unique à l'intérieur de <input type="checkbox">. L'attribut for de l'élément <label> doit correspondre à l'identifiant de <input type="checkbox"> :

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

Exécuter l'instance»Cliquez sur le bouton « Exécuter l'instance » pour afficher l'instance en ligne

Taille du commutateur

Utiliser Classe

, .large ou .small pour définir la taille du commutateur : .tiny

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>

Exécuter l'instance »Cliquez sur le bouton « Exécuter l'instance » pour afficher l'instance en ligne

Interrupteur à bascule de coin rond

Utilisez les classes

et .radius pour définir le coin arrondi interrupteur à bascule : .round

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>

Exécuter l'instance»Cliquez sur le bouton « Exécuter l'instance » pour afficher l'instance en ligne

Le groupe de commutation

peut définir des options individuelles en définissant des boutons radio.

Remarque : Notez que les attributs de chaque option doivent être cohérents ("myGroup" dans l'exemple). 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>

Exécuter l'instance »Cliquez sur le bouton « Exécuter l'instance » pour afficher l'instance en ligne

←
→