4003—layUI隨筆

1、【form】元素

<div class="site-title">
        	<fieldset>><legend><a name="use">小睹爲快</a></legend></fieldset>        	
        </div>	

    	<div class="site-text site-block">
        	<form class="layui-form"	action="">

            	<div class="layui-form-item">
                	<label class="layui-form-label">輸入框</label>
                    <div class="layui-input-block">
                    	<input type="text" name="title" required lay-verify="reqquired" placeholder="請輸入標題" autocomplete="off" class="layui-input">
                    </div>
                </div>
               
                
                <div class="layui-form-item">
                	<label class="layui-form-label">密碼框</label>
                    <div class="layui-input-inline">
                    	<input type="password" name="password" required lay-verify="required" lay-verType="tips" placeholder="請輸入密碼" autocomplete="off" class="layui-input">
                    </div>
                    <div class="layui-form-mid layui-word-aux">輔助文字</div>
                </div>
                
                <div class="layui-form-item">
                	<label class="layui-form-label">選擇框</label>
                	<div class="layui-input-block">
                    	<select name="city" lay-verify="required">
                    		<option value=""></option>
                            <option value="0">北京</option>
                            <option value="1">上海</option>
                            <option value="2">廣州</option>
                            <option value="3">深圳</option>
                            <option value="4">杭州</option>
                        
                        </select>
                    </div>
                </div>
                
                <div class="layui-form-item">
                	<label class="layui-form-label">複選框</label>
                	<div class="layui-input-block">
                    	<input type="checkbox" name="like[write]" title="寫作">
                        <input type="checkbox" name="like[read]" title="閱讀" checked>
                        <input type="checkbox" name="like[dai]" title="發呆">
                    </div>
                </div>
                
                <div class="layui-form-item">
                	<label class="layui-form-label">開關</label>
                	<div class="layui-input-block">
                    	<input type="checkbox" name="switch" lay-skin="switch" lay-text="ON|OFF" lay-filter="switchTest" value="1">
                    </div>
                </div>
                
                <div class="layui-form-item">
                	<label class="layui-form-label">單選框</label>
                	<div class="layui-input-block">
                    	<input type="radio" name="sex" value="男" title="男">
                    	<input type="radio" name="sex" value="女" title="女" checked>
                    </div>
                </div>
                
                <div class="layui-form-item layui-form-text" >
                	<label class="layui-form-label">文本域</label>
                	<div class="layui-input-block">
                		<textarea name="desc" placeholder="請輸入內容" class="layui-textarea"></textarea>                    
                    </div>
                </div>
                
                <div class="layui-form-item">
                	<div class="layui-input-block">
                		<button class="layui-btn" lay-submit lay-filter="formDemo">立即提交</button>
                    	<button type="reset" class="layui-btn  layui-btn-primary">重置</button>
                    </div>
                </div>

2、【form】更新渲染

頁面元素設計完成後，要使用JS刷新form，否則，select，radio等元素無法顯示。

</form>
<script src="layui.js"></script>
<script>
 	layui.use('form',function(){
					
			var form=layui.form;

			//form events;	
			form.render();					
	});
</script>

2.1—局部渲染

       可局部渲染的元素

•        單選框——radio
•        複選框——checkbox
•        下拉列表——switch   

form.render(); //更新全部
form.render('select'); //刷新select選擇框渲染

2.2—form提供的JS接口精確控制。目前我們可支持的屬性如下表所示：

3、動態新增節點

     在html、JS文件中動態新增節點，需要強制初始化才能啓用節點的效果    

var parentN=document.getElementById('user-controlbox');
parentN.insertAdjacentHTML('beforeEnd', '<li class="layui-nav-item" id="user-set-login"><a href="javascript:;">登錄'+											
					'</a><dl class="layui-nav-child">'+
					'          <dd><a href="">項目一</a></dd>'+
					'          <dd><a href="">項目二</a></dd>'+
        			'</dl></li>');
				
parentN.insertAdjacentHTML('beforeEnd','<li class="layui-nav-item"><a href="javascript:;">註冊</a></li>');				
				
layui.use('element',function(){					
		layui.element.init();
});

4、lay-verify定義
lay-verify：是表單驗證的關鍵字 
有以下值供選擇：

required (必填項)
phone（手機號）
email（郵箱）
url（網址）
number（數字）
date（日期）
identity(身份證)
自定義值
同時支持多條規則的驗證： 
格式：lay-verify=”驗證A|驗證B” 
如：lay-verify=”required|phone|number”

 

 

 

 

5、表格元素