前端實現(xiàn)滑動按鈕AJAX與后端交互的示例代碼
更新時間:2022年02月23日 11:38:50 作者:春告鳥
這篇文章主要介紹了前端實現(xiàn)滑動按鈕AJAX與后端交互的示例代碼,前端代碼分為html代碼和css代碼,通過js事件觸發(fā),代碼簡單易懂,對大家的學習或工作具有一定的參考借鑒價值,需要的朋友參考下吧
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默認樣式 */ display: none; } .switch-box label { /* 通過label擴大點擊熱區(qū) */ position: relative; display: block; margin: 1px; height: 28px; cursor: pointer; } .switch-box label::before { /* before設置前滾動小圓球 */ 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屬性控制元素過渡進而形成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元素里的偽類元素,進行更改css樣式 */ /* 形成偽類結構選擇器:":"冒號加布爾值"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設置滾動前背景色 */ 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
事件,點擊觸發(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
到此這篇關于前端實現(xiàn)滑動按鈕AJAX與后端交互的文章就介紹到這了,更多相關滑動按鈕AJAX與后端交互內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家!
相關文章
添加后臺list給前臺select標簽賦值簡單實現(xiàn)
本文為大家介紹下通過添加后臺list怎么實現(xiàn)給前臺select標簽賦值,具體代碼如下,感興趣的朋友可以參考下哈2013-07-07ThinkPHP5 通過ajax插入圖片并實時顯示(完整代碼)
這篇文章主要介紹了ThinkPHP5 通過ajax插入圖片并實時顯示功能,本文給大家分享網(wǎng)站代碼,代碼簡單易懂,非常不錯,具有一定的參考借鑒價值,需要的朋友可以參考下2019-12-12