layui框架常用输入框介绍


本文摘自PHP中文网,作者尚,侵删。

一、普通输入框 input

1.jpg

1

2

3

4

5

6

7

<div class="layui-form-item">

    <label class="layui-form-label"><span class="f_orange">*</span>字段编号</label>

    <div class="layui-input-block width_250 pos-r">

        <input type="text" class="layui-input" name="ColumnCode" lay-verify="required|inputLength_100" placeholder="" autocomplete="off">

        <i class="icon_ca_layui"></i>

    </div>

</div>

二、自动完成式输入框

1、确保 layui 引入了 autoComplete 插件。

2、确保初始化代码运行于 layui.use 的回调函数里。

3、引入 baseUtility.js。

2.jpg

HTML

1

2

3

4

5

6

7

8

9

@* 备案网点 *@

<div class="layui-input-block" style="margin-top:5px; margin-left:320px;">

    <label class="layui-form-label">备案网点</label>

    <div class="layui-input-inline">

        <input type="text" id="txtRegisterCompanyId_searchForm" lay-verify="required" style="width:200px;"

               placeholder="请输入" data-provide="typeahead" class="layui-input" autocomplete="off">

        <input type="hidden" name="RegisterCompanyId" id="hiddenRegisterCompanyId_searchForm" />

    </div>

</div>

js 数据源初始化
需定义在 layui.use 的回调函数中。

1

2

// 备案网点

siteUtility.GetAllSiteByKey("#txtRegisterCompanyId_searchForm", "#hiddenRegisterCompanyId_searchForm");

一个是输入框的 id, 一个是隐藏域的 id。
该 GetAllSiteByKey 公共函数已定义在 baseUtility.js 中。

获取其值

1

2

// 收集 查询表单数据

var serializeForm = $("#searchForm").formSerialize(true);

该序列化方法可以获取隐藏域的 id 值。

阅读剩余部分

相关阅读 >>

浅谈layui前端遇到的难点(集合)

layui的本地存储方法介绍

layui后端怎么搭建

layui-inline的作用是什么

layui支持wangeditor编辑器的方法

一些layui底层方法介绍

layui.js 如何声明全局变量

layui列表怎么取input框的值

jquery的easyui和layui区别是什么

layui的tips层怎么用

更多相关阅读请进入《layui》频道 >>




打赏

取消

感谢您的支持,我会继续努力的!

扫码支持
扫码打赏,您说多少就多少

打开支付宝扫一扫,即可进行扫码打赏哦

分享从这里开始,精彩与您同在

评论

管理员已关闭评论功能...

    暂无评论...