.NET_WebForm_layui控件使用及与webform联合使用
使用layui控件填充布局
操作流程：
- 创建项目。
- 引入css以及js样式。
- 使用栅格样式进行布局。
- 官网查找控件元素（此处以图标和按钮为例）。
- 将对应的元素从官网复制下来。
- 在布局中填充。
- 很简单的操作，其他控件也同理，不再赘述。
4. | 5.
|
5. | 6. |
步骤1-3：https://blog.csdn.net/weixin_63243357/article/details/141497406?spm=1001.2014.3001.5501
使用layui内置jauery实现动态跳转
操作流程：
- 创建项目。
- 引入css以及js样式。
- 加载elementjs模块，渲染表单效果。
- 编写layui的js代码（此处先不与webform联用，会引起服务器刷新异常）。
- 编写控件代码及其id。
- 完成实现。
| 6. | 6. |
| 6. | |
步骤3代码：
<%-- 加载elementjs模块，渲染表单效果 --%> <script type="text/javascript"> layui.use('form', function () {var form = layui.form;});</script>步骤4代码：
<script>layui.use(['jquery', 'layer'], function () {var $ = layui.jquery, // 引入jQuery模块layer = layui.layer; // 引入layer模块，用于弹出提示（可选）// 给按钮绑定点击事件$('#jumpBtn').on('click', function () {// 弹出确认框layer.confirm('确定要跳转到新页面吗？', { icon: 3, title: '提示' }, function (index) {// 用户点击了确定按钮后的操作layer.close(index); // 关闭确认框window.location.href = 'https://layui.dev/'; // 动态设置跳转的URL});});});
</script>步骤5代码：
<div class="layui-container"><div class="layui-row"><div class="layui-col-md6 layui-col-md-offset3"><button id="jumpBtn" class="layui-btn layui-btn-normal">点击我进行跳转</button></div></div>
</div>webform控件使用layui样式
操作流程：
- 创建项目。
- 引入css以及js样式。
- 加载elementjs模块，渲染表单效果。
- 直接在form表单渲染的控件中引用样式。
- 可实现使用C#编写后端代码代替JS实现功能逻辑。
- 同样很简单的操作，但只要layui-ui支持的控件，可对代码编写复杂度有很大简化。
|
|
|
步骤1-2：https://blog.csdn.net/weixin_63243357/article/details/141497406?spm=1001.2014.3001.5501
步骤3代码：
<%-- 加载elementjs模块，渲染表单效果 --%> <script type="text/javascript"> layui.use('form', function () {var form = layui.form;});</script>步骤4代码：
<form id="form1" runat="server" class="layui-form"><asp:Button class="layui-btn" ID="Button1" runat="server" Text="Button" /></form>