前端實(shí)現(xiàn)滑動按鈕AJAX與后端交互的示例代碼
html代碼
<div class="switch-box"> <input id="switchButton" type="checkbox" class="switch" /> <label for="switchButton"></label> </div>
css代碼
.switch-box { width: 48px; } .switch-box .switch { /* 隱藏checkbox默認(rèn)樣式 */ display: none; } .switch-box label { /* 通過label擴(kuò)大點(diǎn)擊熱區(qū) */ position: relative; display: block; margin: 1px; height: 28px; cursor: pointer; } .switch-box label::before { /* before設(shè)置前滾動小圓球 */ content: ''; position: absolute; top: 50%; left: 50%; margin-top: -13px; margin-left: -14px; width: 26px; height: 26px; border-radius: 100%; background-color: #fff; box-shadow: 1px 1px 1px 1px rgba(0, 0, 0, 0.06); /* 通過transform、transition屬性控制元素過渡進(jìn)而形成css3動畫 */ -webkit-transform: translateX(-9px); -moz-transform: translateX(-9px); transform: translateX(-9px); -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; transition: all 0.3s ease; } .switch-box .switch:checked~label::before { /* 語義:被選中的類名為"switch"元素后面的label元素里的偽類元素,進(jìn)行更改css樣式 */ /* 形成偽類結(jié)構(gòu)選擇器:":"冒號加布爾值"checked" */ /* " Ele1 ~ Ele2 "波浪號在css的作用:連接的元素必須有相同的父元素,選擇出現(xiàn)在Ele1后的Ele2(但不必跟在Ele1,也就是說可以并列) */ -webkit-transform: translateX(10px); -moz-transform: translateX(10px); transform: translateX(10px); } .switch-box label::after { /* after設(shè)置滾動前背景色 */ content: ""; display: block; border-radius: 30px; height: 28px; background-color: #dcdfe6; -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; transition: all 0.3s ease; } .switch-box .switch:checked~label::after { background-color: #13ce66; }
效果圖
效果如圖:
JS事件觸發(fā)
<input id="switchButton" type="checkbox" class="switch" onclick="reverseStatus('1')" />
input
添加onclick
事件,點(diǎn)擊觸發(fā)reverseStatus()
函數(shù)
<script> function reverseStatus(id){ $.get("/pocs/reverse/"+id); } </script>
flask后端接口
@poc.route('/pocs/reverse/<int:id>', methods=['GET']) def reverse(id=None): print(id) return 'success'
在后端編寫我們需要的邏輯
參考鏈接
https://article.itxueyuan.com/rx83a2
到此這篇關(guān)于前端實(shí)現(xiàn)滑動按鈕AJAX與后端交互的文章就介紹到這了,更多相關(guān)滑動按鈕AJAX與后端交互內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
添加后臺list給前臺select標(biāo)簽賦值簡單實(shí)現(xiàn)
本文為大家介紹下通過添加后臺list怎么實(shí)現(xiàn)給前臺select標(biāo)簽賦值,具體代碼如下,感興趣的朋友可以參考下哈2013-07-07ajax實(shí)現(xiàn)上傳圖片保存到后臺并讀取的實(shí)例
下面小編就為大家分享一篇ajax實(shí)現(xiàn)上傳圖片保存到后臺并讀取的實(shí)例,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧2018-01-01ThinkPHP5 通過ajax插入圖片并實(shí)時顯示(完整代碼)
這篇文章主要介紹了ThinkPHP5 通過ajax插入圖片并實(shí)時顯示功能,本文給大家分享網(wǎng)站代碼,代碼簡單易懂,非常不錯,具有一定的參考借鑒價值,需要的朋友可以參考下2019-12-12