精华内容
下载资源
问答
  • 扩展 LayUI 步骤条组件,示例演示

    万次阅读 热门讨论 2019-04-10 09:37:48
    扩展 LayUI 步骤条组件,示例演示 操作演示: 代码简介: 优点: 使用扩展 LayUI 的方式,把共用模块方法以组件形式添加在 LayUI js 中,我们以熟悉的 layui.use(['jquery', 'steps'], function(){ 这种方式去使用...

    扩展 LayUI 步骤条组件,示例演示

    操作演示:
    在这里插入图片描述

    代码简介:

    优点:
    使用扩展 LayUI 的方式,把共用模块方法以组件形式添加在 LayUI js 中,我们以熟悉的

    layui.use(['jquery', 'steps'], function(){
    

    这种方式去使用,相当于扩展组件

    缺点:
    我们一般不会把 node_models 上传到 Git 存储库,所以团队中其他人需要使用,也得手动添加。
    不过问题不大

    源代码地址:

    https://github.com/xpwi/layui-steps

    展开全文
  • layui步骤

    2020-09-30 11:49:23
    layui.define(['jquery'], function (exports) { 'use strict'; var $ = layui.jquery; var obj = { make: function (data, ele, current) { var html = '' , data_length = data.length , percen

    1.新建文件夹

    导入代码(里面自己修改了,引用了矢量图,可结合查看)

    layui.define(['jquery'], function (exports) {
      'use strict';
    
      var $ = layui.jquery;
      var obj = {
        make: function (data, ele, current) {
          var html = ''
            , data_length = data.length
            , percentage = 100 / data_length;
    
          for (var i = 0; i < data_length; i++) {
            var icon = ''
              , tail = '';
            if (i < current) {
              icon = 'icon-right';
              tail = 'icon-shixin';
            }
    
            var temp = '<div class="step-item" style="width: 5.6rem;float: left;line-height: .8rem;">';
    
            if (parseInt(i) + 1 < data_length) {
              temp += '<div class="step-item-tail" style="float: left;margin-left: -.15rem;margin-right: .2rem;"><i class="iconfont ' + tail + '" style="color: #33a0f5"></i></div>';
            }
    
            if (icon) {
              temp += '<div class="step-item-main">' +
                        '<div class="step-item-main-title" style="float: left">' + data[i].title + '</div>' +
                        '<div class="step-item-main-desc" style="float: right;color: #51daa6">'
                          + data[i].desc +
                          '<span class="iconfont ' + icon + '" style="margin-left: .1rem"></span>' +
                        '</div>' +
                       '</div>' ;
            } else {
              temp +='<div class="step-item-head step-item-head-active" style="float: left;margin-left: -.15rem;margin-right: .2rem;"><i class="iconfont icon-shixin" style="color: #e5e5e5"></i></div>'+
                        '<div class="step-item-main">' +
                        '<div class="step-item-main-title" style="float: left">' + data[i].title + '</div>' +
                      '</div>';
    
            }
            temp += '';
            temp += '</div>';
            html += temp;
          }
    
          $(ele).append(html);
        }
      };
    
      exports('steps', obj);
    });
    

    2.使用

    <div id="steps"></div>
    
    
    
    <script>
      layui.config({
        base: '${ctx}/static/layui/extends/'
      });
    
      layui.use('steps', function () {
        var steps = layui.steps;
        var data = [
          {'title': "申请", "desc": "2020-09-28"},
          {'title': "审批", "desc": "2020-09-29"},
          {'title': "x签批", "desc": "2020-09-30"},
          {'title': "支付", "desc": "2020-10-01"},
          {'title': "到账", "desc": "2020-10-02"}
        ];
        steps.make(data, '#steps', 4);
      });
    </script>

     

     

     

     

     

    展开全文
  • Layui 步骤条Step

    千次阅读 2020-10-13 12:23:12
    layui.define(['jquery'], function (exports) { var $ = layui.$ , step = { //设置全局项 set: function (options) { var that = this; that.config = $.extend({}, that.config, options);

    效果:
    在这里插入图片描述
    静态文件存放路径图:
    在这里插入图片描述

    StepsTest.cshtml

    
    <!DOCTYPE html>
    <html>
    <head>
        <meta charset="utf-8">
        <title>@ViewBag.Title</title>
        <meta name="renderer" content="webkit">
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
        <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
        <meta name="apple-mobile-web-app-status-bar-style" content="black">
        <meta name="apple-mobile-web-app-capable" content="yes">
        <meta name="format-detection" content="telephone=no">
        <link href="/Content/layui/css/layui.css" rel="stylesheet" />
        <script type="text/javascript" src="/Content/layui/layui.js"></script>
    </head>
    <body style="background:#fff">
        <div style="line-height: 22px;font-size: 14px;margin: 15px;">
            <div class="steps" id="steps"></div>
            <button id="btnPrevious">上一步</button>
            <button id="btnNext">下一步</button>
            <button id="btnGoto">去第2步</button>
        </div>
       
    <script type="text/javascript">
    
        layui.config({
            base: '/Content/layui/lay/'
        }).extend({
            step: '/steps/step'
        }).use(['step','form'], function () {
            var $ = layui.$, form = layui.form;
            var step = layui.step.render({
                elem: '#steps',
                stepNames: ['第一步', '第二步', '第三步', '第四步', '第五步', '完成'],
                initStep: 3
            });
            $("#btnPrevious").click(function () {
                step.previous();
    
            });
            $("#btnNext").click(function () {
                step.next();
    
            });
            $("#btnGoto").click(function () {
                step.goto(2);
    
            });
        });
       
    </script>
    </body>
    </html>
    

    step.js

    layui.define(['jquery'], function (exports) {
        var $ = layui.$
            , step = {
                //设置全局项
                set: function (options) {
                    var that = this;
                    that.config = $.extend({}, that.config, options);
                    return that;
                }
            }
            // 操作当前实例
            , thisIns = function () {
                var that = this, options = that.config;
                var elem = $(options.elem);
                return {
                    next: function () {
                        var index = elem.find("li.active").length;
                        if (index == elem.find("li").length) {
                            return this;
                        }
                        elem.find("li").eq(index).addClass("active");
                        return this;
                    },
    
                    /**
                     * 上一步
                     */
                    previous: function () {
                        var index = elem.find("li.active").length;
                        if (index == 1) {
                            return this;
                        }
                        elem.find("li").eq(index - 1).removeClass("active");
                        return this;
                    },
    
                    /**
                     * 去第几步
                     * @param step
                     */
                    goto: function (s) {
                        if (s < 0 || s > elem.find("li").length) {
                            return this;
                        }
                        elem.find("li").removeClass("active");
                        var $target = elem.find("li").eq(s - 1);
                        $target.addClass("active");
                        $target.prevAll("li").addClass("active");
                        return this;
                    }
                }
            }
            //构造器
            , Class = function (options) {
                var that = this;
                that.config = $.extend({}, that.config, step.config, options);
                that.render();
                return this;
            };
        //默认配置
        Class.prototype.config = {
            stepNames: ['', '', ''],
            initStep: 1
        };
        //渲染视图
        Class.prototype.render = function () {
            var that = this, options = that.config;
            var elem = $(options.elem);
            // 初始化样式
            var html = '';
            html += '<ul class="progressbar">';
            $.each(options.stepNames, function (index, name) {
                html += '<li';
                if (index < options.initStep) {
                    html += ' class="active" ';
                }
                html += '>';
                html += name;
                html += '</li>';
            });
            html += '</ul>';
            elem.empty().append(html);
            // 计算宽度
            $(".progressbar li").css("width", 100 / options.stepNames.length + "%");
            
        };
        //核心入口
        step.render = function (options) {
            var ins = new Class(options);
            var ex = thisIns.call(ins);
            ins.config.thisIns = ex;
            return ex;
        };
    
        //加载组件所需样式
        layui.link(layui.cache.base + 'steps/step.css');
    
        exports('step', step);
    });
    
    

    step.css

    
    .progressbar {
      font-family: montserrat, arial, verdana;
      margin: 15px;
      padding: 0;
      text-align: center;
      margin-bottom: 30px;
      overflow: hidden;
      counter-reset: step;
      z-index: 99;
    }
    
    .progressbar li {
      list-style-type: none;
      font-size: 9px;
      float: left;
      position: relative;
    }
    
    .progressbar li:before {
      content: counter(step);
      counter-increment: step;
      width: 25px;
      line-height: 25px;
      display: block;
      font-size: 10px;
      color: #333;
      background: white;
      border-radius: 25px;
      margin: 0 auto 5px auto;
    }
    
    .progressbar li:after {
      content: '';
      width: calc(100% - 25px);
      height: 2px;
      background: white;
      position: absolute;
      left: calc((-100% + 25px) / 2);
      top: 11px;
    }
    
    .progressbar li:first-child:after {
      content: none;
    }
    
    .progressbar li.active:before, .progressbar li.active:after {
      background: #0094ff;
      color: white;
    }
    
    
    展开全文
  • 基于layui步骤

    2019-07-12 20:33:28
    layui竟然没有步骤条这样普通的功能。所以自己整理了一份基于layui步骤
  • layUI引入步骤

    千次阅读 2019-03-12 15:58:22
    下载网址(官网):http://layer.layui.com/ 在页面上引入jquery框架 将下载包里的layer文件夹完整的复制到项目中 引入layer目录中的layer.js 在需要的地方直接写效果代码就可以了 &lt;script src="...

    1. layer组件

    下载网址(官网):http://layer.layui.com/

    • 在页面上引入jquery框架
    • 将下载包里的layer文件夹完整的复制到项目中
    • 引入layer目录中的layer.js
    • 在需要的地方直接写效果代码就可以了
    <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
        <script src="layer/layer.js"></script>

    2. layDate组件

    下载网址(官网):https://www.layui.com/laydate/?alone

    • 将下载包中的laydate文件夹完整的复制到项目中
    • 引入laydate目录中的laydate.js
    • 在需要的地方字节写效果代码就可以了
    <script src="laydate/laydate.js"></script>

    3. layerUI框架

    下载网址(官网):https://www.layui.com/

    • 将下载包中的layUI文件夹完整的复制到项目中
    • 引入layui目录中的layui.js
    • 引入layUI目录中的layUI.js
    <link rel="stylesheet" href="layui/css/layui.css">
        <script src="layui/layui.js"></script>
    • 声明需要使用的模块和回调函数
    <script>
            layui.use(['layer','form']),function(){
                var layer=layui.laye, form=layui.form;
                //.....
            });
     </script>
    • 参考官方文档,寻找自己需要的使用效果
    展开全文
  • 总的来说打包webpack打包layui要解决几个问题:1、解决引入layui-src报错的问题2、layui插件的打包方式3、解决打包后样式不生效的问题解决上面几个问题,基本就能成功打包了首先安装layui(推荐:layui教程)npm i ...
  • layui-步骤条step.rar

    2020-12-06 20:43:12
    layui的插件效果,优化基础layui的原装组件的效果。 layui 是一款采用自身模块规范编写的前端 UI 框架,遵循原生 HTML/CSS/JS 的书写与组织形式,门槛极低,拿来即用。其外在极简,却又不失饱满的内在,体积轻盈,...
  • layui下载layui的压缩包。 将解压后的压缩包放在vue 项目的public的文件夹下(一定要放在这里,由于layui.js本身已经压缩过了,如果放在外面会报错),尝试官网的npm也会出现报错。 在public文件夹下的index.html...
  • layui步骤表单 表单可用性是Web设计中一个非常重要的主题。 作为提供给用户的主要输入界面之一,表单的可用性对于良好的用户体验至关重要。 今天,我们将构建一个包含验证和动画功能的多部分表单。 我们会覆盖很多...
  • LayUi 的基本使用步骤

    2020-06-26 23:48:59
    使用步骤 第一步:下载 https://www.layui.com/ 第二步:导入 把下载的解压缩,然后把整个文件拷贝到工程目录下。然后再 head 标签引入(这里要看是引用 js 还是 css) <link rel="stylesheet" type="text/css" ...
  • layui官方提供了npm的安装方法,我司使用的是layui正版授权的layim,今天在折腾时发现,从npm仓库获取layui,里面自带了layim,大家可以去白嫖一波,不过大家需要注意版权问题(如下图所示,layui官网进行了声明)。...
  • 基于layui封装的步骤

    千次阅读 2019-08-30 11:23:27
    HTML调用 <!DOCTYPE html> <html> <head> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <meta charset="utf-8" />...步骤条</title> <...
  • 注意:生成之前还需要修改自己domain类中注解-->因为已经改成layui 的了 接下来开始正式使用 修改需要生成的domain类,生成之后拷贝jsp和js到自己项目 之后就可以运行下项目测试下效果了,,切记只拷贝...
  • layui-steps layui-steps 是一个 LayUI 实现的步骤条模板,可以切换步骤,跳转到指定步骤 使用方式:利用 layui extend,参考 config.js、demo.js 文件
  • layui 是一款采用自身模块规范编写的前端 UI 框架,遵循原生 HTML/CSS/JS 的书写与组织形式,门槛极低,拿来即用。(学习视频分享:编程视频)平常使用中,ajax可以说使用广泛,所以这里我们添加一个自己的模块,将...
  • layui-v2.2.45-步骤条组件.zip
  • layui,用layui+ajax完成crud

    千次阅读 2019-02-26 21:12:51
    layui是前端框架,用来做前端界面,在项目中集成layui步骤: 1)解压layui-v2.2.5.zip 2).在web项目WebRoot下创建layui文件夹,把css,lay两个文件夹及layui.js文件拷贝到layui文件夹中即可。如下所示: 然后在要...
  • LayUI笔记

    2019-09-07 17:31:19
    LayUI 简介 LayUI与EasyUI类似,都封装了JQuery和一套完整的组件样式。...使用步骤 第一步:引入LayUI相关的JS、CSS <link rel="stylesheet" type="text/css" href="layui/css/layui.css"/> <...
  • layui表格

    2019-05-08 11:35:57
    首先说一下渲染 layui表格渲染的步骤 首先要导入layui插件 下面详细说明一下渲染表格的方法 首先渲染表格的目的是显示数据,让数据有序排列展示,使得看起来简单明了。 所以我们应该先到控制器中写查询方法 public...
  • 去阿里官网下载对应图标 ... 选择对应的图标放入购物狂图标下 选择完毕后,构建一个项目保存图标 编辑项目详细信息 修改前缀为layui-icon-extend,你也可以简单些不冲突就好 ...从layui官网下载框架最新版本...在layui目录...
  • 具体步骤1.需要设置绑定的容器。代码如下所示:*物料品种** 注意:最外层的可以不是标签,但是必须要加class="layui-form"样式。**2.引用后,声明form模块,重新渲染。代码如下所示:layui.use(‘form‘, function ()...
  • 一、 我们在使用layui.table前必须初始化layui模块,用到的模块一般常用的有两种 layer(弹出层)和 table(数据表格),然后用function进行模快的初始化,当然在初始化模块之前我们必须声明几个全局变量, ...
  • 部署步骤 后端应用部署大家应该都很熟悉了,maven打包过后,采用spring-boot的方式启动即可。 这里仅对前后的分离下的前端部署作一个说明: 1、修改layuicms/config/config.js,修改生产和测试环境的api请求地址和...
  • layui的引用

    2019-01-20 23:06:00
    使用步骤:在后台首页index.html下引入layui.js和layui.css <script type="text/javascript" src="layui-v2.4.5/layui/layui.all.js"></script>然后在html下写以下脚本 <script> layui.use(...
  • 本篇文章给大家介绍一下layui 表单抓取数据四步骤。有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助。注意事项:1、layui 中提交按钮是基于“监听”机制实现的。2、form.on() 的调用需置于 layui....
  • Layui_入门

    2019-09-02 18:40:02
    1:(同学的帮组下完成): 首先下载好layui,打开hbuilder,其次要找到layui的文件所在目录,复制...首先在网页上搜索layui的官网,找到layui开发使用文档—入门指南,点开后根据步骤在官网上下载layui最新版,进行文...
  • Layui框架引入

    2020-07-11 07:41:10
    使用步骤:在后台首页index.html下引入layui.js和layui.css 然后在html下写以下脚本 <script> layui.use("options",function(){}); </script> 第一个参数是一个数组,是使用哪些模块,例如,[‘form’,...

空空如也

空空如也

1 2 3 4 5 ... 18
收藏数 357
精华内容 142
关键字:

layui步骤