解決layui的使用以及針對select、radio等表單組件不顯示的問題
layui是國內(nèi)一款界面比較整潔大方的ui框架,里面封裝了很多前端開發(fā)常用的組件,通常我們直接復制代碼過去就可以實現(xiàn)效果,可以提高我們的開發(fā)效率。
使用步驟:
1、下載layui:https://www.layui.com
2、將layui文件夾復制到自己的項目里:
3、在html頁面引入相關的css和js:
<link rel="stylesheet" type="text/css" href="/layui/css/layui.css" rel="external nofollow" media="all"> //路徑僅供參考 <script type="text/javascript" src="/layui/layui.js"></script> //路徑僅供參考
4、我們除了直接復制組件代碼過來使用外,也可以參考他們的開發(fā)文檔,了解更多更詳細的使用方法:
相關開發(fā)文檔:https://www.layui.com/doc
form表單select、radio組件不顯示的解決方法:
這里簡單的復制了一段框架的form表單代碼:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>layui</title> <meta name="renderer" content="webkit"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"> <link rel="stylesheet" href="layui/css/layui.css" rel="external nofollow" media="all"> </head> <body > <form class="layui-form" style="margin:100px auto;width: 400px"> <div class="layui-form-item"> <label class="layui-form-label">輸入框</label> <div class="layui-input-block"> <input type="text" name="" placeholder="請輸入" autocomplete="off" class="layui-input"> </div> </div> <div class="layui-form-item"> <label class="layui-form-label">下拉選擇框</label> <div class="layui-input-block"> <select name="interest" lay-filter="aihao"> <option value="0">寫作</option> <option value="1">閱讀</option> </select> </div> </div> <div class="layui-form-item"> <div class="layui-input-block"> <button class="layui-btn" lay-submit lay-filter="*">立即提交</button> <button type="reset" class="layui-btn layui-btn-primary">重置</button> </div> </div> </form> <script src="layui/layui.js" charset="utf-8"></script> </body> </html>
但是運行的時候,select下拉框不能正常顯示:
這里寫出正確的解決方法,大家自行檢查自己的代碼:
1、在select等組件上記得要加上 lay-filter="***",用于在js中做渲染;
<select name="interest" lay-filter="aihao">
2、對form表單的組件進行渲染:
<script> layui.use('form', function(){ var form = layui.form; form.render('select','aihao'); //各種基于事件的操作,下面會有進一步介紹 //form.render('組件名','lay-filter名') }); </script>
這樣,就沒有什么問題了:
以上這篇解決layui的使用以及針對select、radio等表單組件不顯示的問題就是小編分享給大家的全部內(nèi)容了,希望能給大家一個參考,也希望大家多多支持腳本之家。
png
- layui監(jiān)聽select變化,以及設置radio選中的方法
- 淺談監(jiān)聽單選框radio改變事件(和layui中單選按鈕改變事件)
- layui中select,radio設置不生效的解決方法
- 解決layui 表單元素radio不顯示渲染的問題
- layui radio單選限制下一個radio單選的實例
- layui 實現(xiàn)自動選擇radio單選框(checked)的方法
- Layui之table中的radio在切換分頁時無法記住選中狀態(tài)的解決方法
- layui radio點擊事件實現(xiàn)input顯示和隱藏的例子
- layui中使用jquery控制radio選中事件的示例代碼
- layui radio性別單選框賦值方法
- 解決layui的radio屬性或別的屬性沒顯示出來的問題
相關文章
微信小程序使用uni-app開發(fā)小程序及部分功能實現(xiàn)詳解
uni-app是一個使用Vue.js 開發(fā)所有前端應用的框架,下面這篇文章主要給大家介紹了關于微信小程序使用uni-app開發(fā)小程序及部分功能實現(xiàn)的相關資料,文中通過實例代碼介紹的非常詳細,需要的朋友可以參考下2022-08-08JavaScript常用的3種彈出框(提示框?alert/確認框?confirm/輸入框?prompt)
三種彈框在系統(tǒng)中都是同步執(zhí)行的,也就是說,三種彈框中的任一彈框彈出,代碼都不在執(zhí)行,直到點擊確認或取消,關閉彈窗后,代碼繼續(xù)執(zhí)行,本文通過實例代碼給大家分享JS常用的3種彈出框,感興趣的朋友一起看看吧2022-07-07JavaScript實現(xiàn)基于十進制的四舍五入實例
這篇文章主要介紹了JavaScript實現(xiàn)基于十進制的四舍五入的方法,實例分析了javascript針對數(shù)值判斷與相關運算技巧,具有一定參考借鑒價值,需要的朋友可以參考下2015-07-07JS實現(xiàn)頁面中所有img對象添加onclick事件及新窗口查看圖片的方法
這篇文章主要介紹了JS實現(xiàn)頁面中所有img對象添加onclick事件及新窗口查看圖片的方法,涉及JS頁面元素遍歷及屬性動態(tài)操作相關技巧,需要的朋友可以參考下2016-12-12用javascript將數(shù)據(jù)導入Excel示例代碼
將數(shù)據(jù)導入Excel的方法有很多,本例介紹的這個是使用js來實現(xiàn)數(shù)據(jù)的導入,感興趣的朋友可以了解下2014-09-09JavaScript高級程序設計 閱讀筆記(十七) js事件
IE中是冒泡型事件,即從最特定的事件目標到最不特定的事件目標2012-08-08