layui组件步骤条step

最新推荐文章于 2024-02-07 11:26:04 发布

li_future_

最新推荐文章于 2024-02-07 11:26:04 发布

阅读量1.8k

点赞数

文章标签： javascript html 前端

本文链接：https://blog.csdn.net/for__future_/article/details/125214851

版权

stepTest.html


<!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;
}