加載layui.css layui.js以後需要注意以下方面：

1、所有的radio checkbox要改變樣式的都要放到form 裡邊；

2、form 要加上 class="layui-form"

3、複選框有兩種顯示方式

圖1 複選框顯示方式1

圖2 複選框顯示方式2

第一種：<input type="checkbox" title='顯示' checked />

第二種：<input type="checkbox" title='顯示' checked lay-skin="primary"/>

比較會發現 第二種隻是多了一個選擇 lay-skin="primary"

4、在</form>以後要加上

<script>

layui.use('form', function(){

var form = layui.form;

})

</script>

我是加到了頁面底部，對form内的樣式渲染

5、鼠标監聽事件 form内的select button 等

select 觸發 通常用在調用下級分類

button 會提交信息 可以實現ajax提交數據

事實上不管哪種觸發都需要用到 lay-filter

<script>

layui.use('form', function(){

var form = layui.form;

form.on('select(myselect)', function(data){

這是select觸發的事件 <select lay-filter="myselect">

data.value 就是獲取到的option的value

})；

form.on('submit(btnsub)', function(data){

這是button觸發的事件 <button lay-submit lay-filter="btnsub">

隻是多了一個lay-submit

})；

})

如果用到ajax獲取下級分類以後，比如select ，要在完成以後加上form.render(); 重新渲染 ；

通過ajax提交數據，需要先獲取到form表單的數據，parms=$("#formact").serialize()；formact是form的ID；但是這樣獲取不到圖片上傳選擇圖片的數據，這就需要我們先上傳圖片，把圖片地址賦值到input裡邊，建議圖片上傳先通過ajax 或者iframe上傳圖片；

</script>

這些可以和jquery nude.js等等交叉使用，不必拘泥一個思路。

css calc的用法

calc是頁面布局會經常用到，比如想讓頁面兩邊空出來10個像素；通過width:calc(100% - 20px); 設置居中，就輕易實現了兩邊空白10px，需要注意的是 100% 和 - 以及後邊的20px是有空格的

更多精彩资讯请关注tft每日頭條，我们将持续为您更新最新资讯!