Layui——分步表单

Posted 2020-12-10 coder1013

https://fly.layui.com/extend/step-lay/#

 

 

   layui.config({
            base:‘../step/step-lay/‘
        }).use([ ‘form‘, ‘step‘], function () {
            var $ = layui.$
                , form = layui.form
                , step = layui.step;

            step.render({
                elem: ‘#stepForm‘,
                filter: ‘stepForm‘,
                width: ‘100%‘, //设置容器宽度
                stepWidth: ‘750px‘,
                height: ‘500px‘,
                stepItems: [{
                    title: ‘填写入款信息‘
                }, {
                    title: ‘确认入款信息‘
                }, {
                    title: ‘完成‘
                }]
            });


            form.on(‘submit(formStep)‘, function (data) {
                step.next(‘#stepForm‘);
                return false;
            });

            form.on(‘submit(formStep2)‘, function (data) {
                step.next(‘#stepForm‘);
                return false;
            });

            $(‘.pre‘).click(function () {
                step.pre(‘#stepForm‘);
            });

            $(‘.next‘).click(function () {
                step.next(‘#stepForm‘);
            });
        })