当前位置: 首页 > article >正文

.NET_WebForm_layui控件使用及与webform联合使用

使用layui控件填充布局

操作流程: 

  1. 创建项目。
  2. 引入css以及js样式。
  3. 使用栅格样式进行布局。
  4. 官网查找控件元素(此处以图标和按钮为例)。
  5. 将对应的元素从官网复制下来。
  6. 在布局中填充。
  7. 很简单的操作,其他控件也同理,不再赘述。
流程图例

4.

5.

5.

6.

步骤1-3:https://blog.csdn.net/weixin_63243357/article/details/141497406?spm=1001.2014.3001.5501


 使用layui内置jauery实现动态跳转

操作流程: 

  1. 创建项目。
  2. 引入css以及js样式。
  3. 加载elementjs模块,渲染表单效果。
  4. 编写layui的js代码(此处先不与webform联用,会引起服务器刷新异常)。
  5. 编写控件代码及其id。
  6. 完成实现。
流程图例

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样式

操作流程: 

  1. 创建项目。
  2. 引入css以及js样式。
  3. 加载elementjs模块,渲染表单效果。
  4. 直接在form表单渲染的控件中引用样式。
  5. 可实现使用C#编写后端代码代替JS实现功能逻辑。
  6. 同样很简单的操作,但只要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>


http://www.kler.cn/a/279810.html

相关文章:

  • 实时计算Flink:推动行业变革的新时代引擎(附金融/汽车/物流/零售案例)
  • 【线程安全】ReentrantLock和synchronized的使用示例——言简意赅
  • 【Go语言基础】调度器模型GPM与垃圾回收器GC
  • 使用在AMD GPU上运行的ROCm进行大语言模型的自然语言处理任务
  • 每天一个数据分析题(五百零三)- 关联分析算法
  • Vue:快捷文本
  • 云计算day33
  • <数据集>脑肿瘤识别数据集<目标检测>
  • linux下一切皆文件,如何理解?
  • 【Python机器学习】NLP概述——自然语言智商
  • 未来网络安全展望:量子计算对传统加密的挑战与机遇
  • Django 后端架构开发:存储层调优策略解析
  • Android Radio实战——有效电台列表(十六)
  • ​经​纬​恒​润​一​面​
  • SQL Server 查询语句中,对索引列做CONVERT的影响
  • 华为Cloud连接配置
  • D - Pairs 二分+二分
  • SAP主数据删除
  • vue3编程 -动态多开模态框实现方案
  • mac/windows 软件推荐