成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

純CSS實(shí)現(xiàn)扁平化風(fēng)格開(kāi)關(guān)按鈕

chuyao / 1563人閱讀

摘要：開(kāi)關(guān)樣式預(yù)覽圖前言最近在基于框架開(kāi)發(fā)一個(gè)網(wǎng)站，在填寫(xiě)表單一項(xiàng)需要用戶填寫(xiě)是否選擇某一選項(xiàng)，本來(lái)想引用框架自帶的一個(gè)按鈕插件，結(jié)果在引用的時(shí)候總是出錯(cuò)，就找了找資源，用純實(shí)現(xiàn)這個(gè)按鈕開(kāi)關(guān)的功能。

開(kāi)關(guān)樣式預(yù)覽圖 前言

最近在基于bootstrap框架開(kāi)發(fā)一個(gè)網(wǎng)站，在填寫(xiě)表單一項(xiàng)需要用戶填寫(xiě)是否選擇某一選項(xiàng)，本來(lái)想引用bootstrap框架自帶的一個(gè)按鈕插件，結(jié)果在引用js的時(shí)候總是出錯(cuò)，就找了找資源，用純css實(shí)現(xiàn)這個(gè)按鈕開(kāi)關(guān)的功能。

具體代碼過(guò)程

話不多說(shuō)，直接上代碼實(shí)現(xiàn)！

html代碼部分
css代碼部分 
input[type=checkbox] {
    visibility: hidden;
}
.checkbox {
    width: 120px;
    height: 30px;
    background: #FFF;
    margin: 1px 1px;
 
    border-radius: 10px;
    position: relative;
}

.checkbox:before {
    content: "是";
    position: absolute;
    top: 12px;
    left: 16px;
    height: 2px;
    /*color: #26ca28;*/
    color: #4baa34;
    font-size: 16px;
    /*font-weight:bold;*/
}
.checkbox:after {
    content: "否";
    position: absolute;
    top: 12px;
    left: 80px;
    height: 2px;
    color: #ffffd;
    font-size: 16px;
    /*font-weight:bold;*/
}
.checkbox label {
    display: block;
    width: 40px;
    height: 22px;
    border-radius: 50px;
 
    -webkit-transition: all .5s ease;
    -moz-transition: all .5s ease;
    -o-transition: all .5s ease;
    -ms-transition: all .5s ease;
    transition: all .5s ease;
    cursor: pointer;
    position: absolute;
    top: 9px;
    z-index: 1;
    left: 12px;
    background: #ffffd;
}
 
.checkbox input[type=checkbox]:checked + label {
    left: 62px;
    /*background: #26ca28;*/
    background: #4baa34;
}
js代碼部分 
 if ($("#isnot").attr("checked")) {var isnot=1}else{var isnot=0};

通過(guò)jq獲取按鈕是否被選中的值，ajax傳給后臺(tái)php進(jìn)行數(shù)據(jù)的處理，完成數(shù)據(jù)庫(kù)的操作
jq獲取按鈕是否被選中的值

小結(jié)

一點(diǎn)小心得，自己開(kāi)發(fā)時(shí)間不長(zhǎng)，感覺(jué)在開(kāi)發(fā)過(guò)程中最怕遇到一時(shí)半會(huì)解決不了的問(wèn)題，尤其還有新的知識(shí)點(diǎn)需要掌握的時(shí)候，比如這個(gè)問(wèn)題，在js代碼和關(guān)于bootstrap框架js引入的，和bootstrap摸態(tài)框的處理機(jī)制上費(fèi)了很多功夫，最后也不是很明白，導(dǎo)致這個(gè)功能一直沒(méi)有實(shí)現(xiàn)，最后在網(wǎng)上查了相關(guān)信息和代碼，決定直接繞過(guò)js,用純的css來(lái)實(shí)現(xiàn)，最后只是引入了css，少引入了框架里的幾個(gè)js,既解決了問(wèn)題，也提高了代碼的執(zhí)行效率。

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/21766.html

相關(guān)文章

  • 純CSS實(shí)現(xiàn)扁平化風(fēng)格開(kāi)關(guān)按鈕

    摘要：開(kāi)關(guān)樣式預(yù)覽圖前言最近在基于框架開(kāi)發(fā)一個(gè)網(wǎng)站，在填寫(xiě)表單一項(xiàng)需要用戶填寫(xiě)是否選擇某一選項(xiàng)，本來(lái)想引用框架自帶的一個(gè)按鈕插件，結(jié)果在引用的時(shí)候總是出錯(cuò)，就找了找資源，用純實(shí)現(xiàn)這個(gè)按鈕開(kāi)關(guān)的功能。 開(kāi)關(guān)樣式預(yù)覽圖 showImg(https://segmentfault.com/img/bVyYer); 前言 最近在基于bootstrap框架開(kāi)發(fā)一個(gè)網(wǎng)站，在填寫(xiě)表單一項(xiàng)需要用戶填寫(xiě)是否選擇...

    nanfeiyan 評(píng)論0 收藏0

  • 純CSS實(shí)現(xiàn)扁平化風(fēng)格開(kāi)關(guān)按鈕

    摘要：開(kāi)關(guān)樣式預(yù)覽圖前言最近在基于框架開(kāi)發(fā)一個(gè)網(wǎng)站，在填寫(xiě)表單一項(xiàng)需要用戶填寫(xiě)是否選擇某一選項(xiàng)，本來(lái)想引用框架自帶的一個(gè)按鈕插件，結(jié)果在引用的時(shí)候總是出錯(cuò)，就找了找資源，用純實(shí)現(xiàn)這個(gè)按鈕開(kāi)關(guān)的功能。 開(kāi)關(guān)樣式預(yù)覽圖 showImg(https://segmentfault.com/img/bVyYer); 前言 最近在基于bootstrap框架開(kāi)發(fā)一個(gè)網(wǎng)站，在填寫(xiě)表單一項(xiàng)需要用戶填寫(xiě)是否選擇...

    lewinlee 評(píng)論0 收藏0

  • 純CSS實(shí)現(xiàn)扁平化風(fēng)格開(kāi)關(guān)按鈕

    摘要：開(kāi)關(guān)樣式預(yù)覽圖前言最近在基于框架開(kāi)發(fā)一個(gè)網(wǎng)站，在填寫(xiě)表單一項(xiàng)需要用戶填寫(xiě)是否選擇某一選項(xiàng)，本來(lái)想引用框架自帶的一個(gè)按鈕插件，結(jié)果在引用的時(shí)候總是出錯(cuò)，就找了找資源，用純實(shí)現(xiàn)這個(gè)按鈕開(kāi)關(guān)的功能。 開(kāi)關(guān)樣式預(yù)覽圖 showImg(https://segmentfault.com/img/bVyYer); 前言 最近在基于bootstrap框架開(kāi)發(fā)一個(gè)網(wǎng)站，在填寫(xiě)表單一項(xiàng)需要用戶填寫(xiě)是否選擇...

    lidashuang 評(píng)論0 收藏0

  • CSS開(kāi)關(guān)按鈕三例

    摘要：我們將使用純打造一些切換開(kāi)關(guān)并使其擁有類似于的用戶體驗(yàn)?？偨Y(jié)這是一個(gè)關(guān)于一些很好的切換開(kāi)關(guān)示例這種技術(shù)使得一切完全復(fù)合語(yǔ)義，不會(huì)增加任何瘋狂的標(biāo)記，并且用純就可以完成。獲取開(kāi)關(guān)按鈕代碼可以 我們將使用純CSS打造一些切換開(kāi)關(guān)并使其擁有類似于checkbox的用戶體驗(yàn)。 很多時(shí)候我們都需要用戶通過(guò)勾選/取消checkbox來(lái)表明他們對(duì)一些問(wèn)題的答案。我們?cè)O(shè)置了一個(gè)標(biāo)簽，一個(gè)checkbo...

    ivan_qhz 評(píng)論0 收藏0

  • CSS開(kāi)關(guān)按鈕三例

    摘要：我們將使用純打造一些切換開(kāi)關(guān)并使其擁有類似于的用戶體驗(yàn)?？偨Y(jié)這是一個(gè)關(guān)于一些很好的切換開(kāi)關(guān)示例這種技術(shù)使得一切完全復(fù)合語(yǔ)義，不會(huì)增加任何瘋狂的標(biāo)記，并且用純就可以完成。獲取開(kāi)關(guān)按鈕代碼可以 我們將使用純CSS打造一些切換開(kāi)關(guān)并使其擁有類似于checkbox的用戶體驗(yàn)。 很多時(shí)候我們都需要用戶通過(guò)勾選/取消checkbox來(lái)表明他們對(duì)一些問(wèn)題的答案。我們?cè)O(shè)置了一個(gè)標(biāo)簽，一個(gè)checkbo...

    longmon 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<