Zurb基金會5個開關我使用的演示代碼不工作

，我發現here與基金會5.2.3版本的CSSZurb基金會5個開關我使用的演示代碼不工作

<div class="switch"> 
    <input id="exampleCheckboxSwitch" type="checkbox"> 
    <label for="exampleCheckboxSwitch"></label> 
</div>

這是結果：

enter image description here

注意第二個是我從Foundation 4使用的代碼，它仍然或多或少的作品（雖然「On」文本不顯示）

<div class="switch small round"> 
    <input id="test" name="test" type="radio" value="False" checked=""> 
    <label for="test" onclick="">Non</label> 
    <input id="test2" name="test" type="radio" value="True"> 
    <label for="test2" onclick="">Oui</label> 
    <span></span> 
</div>

不知道發生了什麼，在文檔中說沒有javascript是必需的，交換機的css存在於foundation.css文件中

來源

2014-07-15 ThunderDev

嘗試了快速的jsfiddle和相同的結果，但是我看到這個頁面上的文檔網站底部：「？薩斯錯誤如果默認的‘基礎’進口被註釋掉，然後確保你導入此文件：@import「基礎/組件/開關」;「 – Oliver

我也看到了這個，默認的「基礎」導入默認使用每個組件。您可以將其註釋掉並單獨導入組件。然而，這隻涉及Sass版本，因此與我無關。乾杯 – ThunderDev

基礎5中的示例不正確，因爲不顯示標籤。我搜索這個例子並找到這個例子。

<div class="onoffswitch"> 
<input type="checkbox" name="onoffswitch" class="onoffswitch-checkbox" id="myonoffswitch" checked> 
<label class="onoffswitch-label" for="myonoffswitch"> 
    <span class="onoffswitch-inner"></span> 
    <span class="onoffswitch-switch"></span> 
</label>

而且需要CSS：

.onoffswitch { 
position: relative; width: 90px; 
-webkit-user-select:none; -moz-user-select:none; -ms-user-select: none; 
} 
.onoffswitch-checkbox { 
display: none; 
} 
.onoffswitch-label { 
display: block; overflow: hidden; cursor: pointer; 
border: 2px solid #999999; border-radius: 20px; 
} 
.onoffswitch-inner { 
display: block; width: 200%; margin-left: -100%; 
-moz-transition: margin 0.3s ease-in 0s; -webkit-transition: margin 0.3s ease-in 0s; 
-o-transition: margin 0.3s ease-in 0s; transition: margin 0.3s ease-in 0s; 
} 
.onoffswitch-inner:before, .onoffswitch-inner:after { 
display: block; float: left; width: 50%; height: 30px; padding: 0; line-height: 30px; 
font-size: 14px; color: white; font-family: Trebuchet, Arial, sans-serif; font-weight: bold; 
-moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; 
} 
.onoffswitch-inner:before { 
content: "ON"; 
padding-left: 10px; 
background-color: #34A7C1; color: #FFFFFF; 
} 
.onoffswitch-inner:after { 
content: "OFF"; 
padding-right: 10px; 
background-color: #EEEEEE; color: #999999; 
text-align: right; 
} 
.onoffswitch-checkbox:checked + .onoffswitch-label .onoffswitch-inner { 
margin-left: 0; 
} 
.onoffswitch-checkbox:checked + .onoffswitch-label .onoffswitch-switch { 
right: 0px; 
}

這個例子是https://proto.io/freebies/onoff/

對不起，我的英文:)，但這個想法。

來源

2014-11-19 19:37:05

試用最新版本的Foundation。這是我的JSFiddle example，其中開關工作正常。

<body> 
    <div class="row"> 
     <div class="small-12 columns"> 
      <div class="switch"> 
       <input id="exampleCheckboxSwitch" type="checkbox"> 
       <label for="exampleCheckboxSwitch"></label> 
      </div>    
     </div> 
    </div> 
</body>

請注意，我使用的是最新的bower-foundation css。

來源

2014-11-20 08:44:09 neciu

你的小提琴沒有工作 – Piero

現在檢查它。我已經更新了小提琴。 – neciu

謝謝:)我希望他們是一個簡單的方法來顯示旁邊的開關標籤...現在這是一個痛苦... ... – Piero

Zurb基金會5個開關我使用的演示代碼不工作

回答

相關問題