mirror of https://github.com/layui/layui
更新 form 示例
贤心
parent
a3154b6623
commit
366968e2b1
|
|
@ -17,17 +17,19 @@
|
|||
</head>
|
||||
<body>
|
||||
<form class="layui-form" method="get" lay-filter="top">
|
||||
<div class="layui-form-item">
|
||||
<div class="layui-inline layui-input-group">
|
||||
<div class="layui-input-split layui-input-prefix">
|
||||
前置信息
|
||||
</div>
|
||||
<input type="text" name="arr[]" required lay-verify="required" placeholder="请输入" autocomplete="off" class="layui-input">
|
||||
<div class="layui-input-split layui-input-suffix">
|
||||
后置信息
|
||||
<div class="layui-row layui-col-space16">
|
||||
<div class="layui-col-md3">
|
||||
<div class="layui-input-group">
|
||||
<div class="layui-input-split layui-input-prefix">
|
||||
前置信息
|
||||
</div>
|
||||
<input type="text" name="arr[]" required lay-verify="required" placeholder="请输入" autocomplete="off" class="layui-input">
|
||||
<div class="layui-input-split layui-input-suffix">
|
||||
后置信息
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-inline">
|
||||
<div class="layui-col-md3">
|
||||
<div class="layui-input-wrap">
|
||||
<input type="text" name="arr[]" required placeholder="请输入" autocomplete="off" class="layui-input">
|
||||
<div class="layui-input-split">
|
||||
|
|
@ -35,75 +37,87 @@
|
|||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="layui-form-item">
|
||||
<div class="layui-inline layui-input-wrap layui-input-wrap-prefix">
|
||||
<div class="layui-input-prefix">
|
||||
<i class="layui-icon layui-icon-username"></i>
|
||||
<div class="layui-col-md3">
|
||||
<div class="layui-input-wrap">
|
||||
<div class="layui-input-prefix">
|
||||
<i class="layui-icon layui-icon-username"></i>
|
||||
</div>
|
||||
<input type="text" name="arr[]" value="" required placeholder="请输入" autocomplete="off" class="layui-input" lay-affix="clear">
|
||||
</div>
|
||||
<input type="text" name="arr[]" value="" required placeholder="请输入" autocomplete="off" class="layui-input" lay-affix="clear">
|
||||
</div>
|
||||
<div class="layui-inline layui-input-wrap layui-input-wrap-prefix">
|
||||
<div class="layui-input-prefix">
|
||||
<i class="layui-icon layui-icon-password"></i>
|
||||
<div class="layui-col-md3">
|
||||
<div class="layui-input-wrap">
|
||||
<div class="layui-input-prefix">
|
||||
<i class="layui-icon layui-icon-password"></i>
|
||||
</div>
|
||||
<input type="password" name="arr[]" value="" required placeholder="请输入" autocomplete="off" class="layui-input" lay-affix="eye">
|
||||
</div>
|
||||
<input type="password" name="arr[]" value="" required placeholder="请输入" autocomplete="off" class="layui-input" lay-affix="eye">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="layui-form-item">
|
||||
<div class="layui-inline layui-input-wrap layui-input-wrap-prefix">
|
||||
<div class="layui-input-prefix layui-input-split">
|
||||
<i class="layui-icon layui-icon-username"></i>
|
||||
<div class="layui-col-md3">
|
||||
<div class="layui-input-wrap">
|
||||
<input type="text" name="arr[]" value="" required placeholder="自定义动态点缀图标" autocomplete="off" class="layui-input" lay-affix="set" lay-filter="set">
|
||||
</div>
|
||||
<input type="text" name="arr[]" value="" required placeholder="请输入" autocomplete="off" class="layui-input" lay-affix="clear" style="padding-left: 45px;">
|
||||
</div>
|
||||
<div class="layui-inline layui-input-wrap">
|
||||
<input type="text" name="arr[]" value="" required placeholder="请输入" autocomplete="off" class="layui-input" lay-affix="clear">
|
||||
<div class="layui-col-md3">
|
||||
<div class="layui-input-wrap">
|
||||
<div class="layui-input-prefix layui-input-split">
|
||||
<i class="layui-icon layui-icon-username"></i>
|
||||
</div>
|
||||
<input type="text" name="arr[]" value="" required placeholder="请输入" autocomplete="off" class="layui-input" lay-affix="clear">
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-inline layui-input-wrap">
|
||||
<input type="text" name="arr[]" value="禁用或只读状态" disabled placeholder="请输入" autocomplete="off" class="layui-input" lay-affix="clear">
|
||||
<div class="layui-col-md3">
|
||||
<div class="layui-input-wrap">
|
||||
<input type="text" name="arr[]" value="" required placeholder="请输入" autocomplete="off" class="layui-input" lay-affix="clear">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="layui-form-item">
|
||||
<div class="layui-inline">
|
||||
<div class="layui-input-wrap layui-input-wrap-prefix">
|
||||
<div class="layui-col-md3">
|
||||
<div class="layui-input-wrap">
|
||||
<input type="text" name="arr[]" value="禁用或只读状态" disabled placeholder="请输入" autocomplete="off" class="layui-input" lay-affix="clear">
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-col-md3">
|
||||
<div class="layui-input-wrap">
|
||||
<div class="layui-input-prefix">
|
||||
<i class="layui-icon layui-icon-date"></i>
|
||||
</div>
|
||||
<input type="text" name="arr[]" required placeholder="请输入" autocomplete="off" class="layui-input">
|
||||
<input type="text" name="arr[]" required placeholder="前缀和后缀" autocomplete="off" class="layui-input">
|
||||
<div class="layui-input-suffix">
|
||||
<i class="layui-icon layui-icon-down"></i>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-inline">
|
||||
<div class="layui-col-md3">
|
||||
<div class="layui-input-wrap">
|
||||
<input type="text" name="arr[]" required placeholder="请输入" autocomplete="off" class="layui-input">
|
||||
<input type="text" name="arr[]" required placeholder="后缀+clear" lay-affix="clear" autocomplete="off" class="layui-input">
|
||||
<div class="layui-input-suffix">
|
||||
<i class="layui-icon layui-icon-more-vertical"></i>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-inline layui-input-wrap layui-input-wrap-prefix">
|
||||
<div class="layui-input-prefix">
|
||||
<i class="layui-icon layui-icon-username"></i>
|
||||
<div class="layui-col-md3">
|
||||
<div class="layui-input-wrap">
|
||||
<div class="layui-input-prefix">
|
||||
<i class="layui-icon layui-icon-username"></i>
|
||||
</div>
|
||||
<select name="selectdemo">
|
||||
<option value="">在 select 中使用</option>
|
||||
<option value="北京">北京</option>
|
||||
<option value="上海">上海</option>
|
||||
<option value="广州">广州</option>
|
||||
<option value="深圳">深圳</option>
|
||||
</select>
|
||||
</div>
|
||||
<select name="selectdemo">
|
||||
<option value="">请选择</option>
|
||||
<option value="北京">北京</option>
|
||||
<option value="上海">上海</option>
|
||||
<option value="广州">广州</option>
|
||||
<option value="深圳">深圳</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="layui-form-item">
|
||||
<button class="layui-btn" id="testSubmit">立即提交</button>
|
||||
</div>
|
||||
<div class="layui-col-md12">
|
||||
<div class="layui-input-wrap">
|
||||
<textarea class="layui-textarea" lay-affix="clear"></textarea>
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-col-md12">
|
||||
<button class="layui-btn" id="testSubmit">立即提交</button>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
|
||||
<hr>
|
||||
|
|
@ -406,6 +420,11 @@
|
|||
,xxxxxxxxx: 123
|
||||
});
|
||||
|
||||
// 自定义动态点缀事件
|
||||
form.on('input-affix(set)', function(data){
|
||||
var elem = data.elem;
|
||||
elem.value = '通过自定义事件设置的值';
|
||||
});
|
||||
|
||||
//事件
|
||||
form.on('select(quiz111)', function(data){
|
||||
|
|
|
|||
Loading…
Reference in New Issue