diff --git a/admin/data/menu.json b/admin/data/menu.json index f8b67a6..5960898 100644 --- a/admin/data/menu.json +++ b/admin/data/menu.json @@ -73,41 +73,15 @@ "type": 1, "openType": "_iframe", "href": "view/document/notice.html" - } - ] - }, - { - "id": "chart", - "title": "统计图表", - "icon": "layui-icon layui-icon-auz", - "type": 0, - "href": "", - "children": [{ - "id": 501, - "title": "折线图", - "icon": "layui-icon layui-icon-face-smile", - "type": 1, - "openType": "_iframe", - "href": "view/chart/line.html" }, { - "id": 404, - "title": "404", + "id": 207, + "title": "分布表单", "icon": "layui-icon layui-icon-face-cry", "type": 1, "openType": "_iframe", - "href": "view/error/404.html" - }, - - { - "id": 500, - "title": "500", - "icon": "layui-icon layui-icon-face-cry", - "type": 1, - "openType": "_iframe", - "href": "view/error/500.html" + "href": "view/document/step.html" } - ] }, { diff --git a/component/pear/css/pear-module/step.css b/component/pear/css/pear-module/step.css new file mode 100644 index 0000000..b622112 --- /dev/null +++ b/component/pear/css/pear-module/step.css @@ -0,0 +1,83 @@ +.lay-step { + font-size: 0; + margin: 0 auto; + max-width: 100%; + width: 60%; + padding-left: 15%; + +} + +.step-item { + display: inline-block; + line-height: 35px; + position: relative; + font-size: 15px; +} + +.step-item-tail { + width: 100%; + padding: 0 10px; + position: absolute; + left: 0; + top: 13px; +} + +.step-item-tail i { + display: inline-block; + width: 100%; + height: 2px; + margin-top: 4px; + vertical-align: top; + background: #5FB878; + position: relative; +} + +.step-item-tail .step-item-tail-done { + background: #5FB878; + height: 3px; + margin-top: 4px; +} + +.step-item-head { + position: relative; + display: inline-block; + height: 35px; + width: 35px; + text-align: center; + vertical-align: top; + color: #5FB878; + border: 2px solid #5FB878; + border-radius: 50%; + background: #ffffff; +} + +.step-item-head.step-item-head-active { + background: #5FB878; + color: #ffffff; +} + +.step-item-main { + display: block; + position: relative; + margin-left: -50%; + margin-right: 50%; + padding-left: 26px; + text-align: center; +} + +.step-item-main-title { + font-weight: bolder; + color: #555555; +} + +.step-item-main-desc { + color: #aaaaaa; +} + +.lay-step + [carousel-item]:before { + display: none; +} + +.lay-step + [carousel-item] > * { + background-color: transparent; +} \ No newline at end of file diff --git a/component/pear/css/pear.css b/component/pear/css/pear.css index 54fe4dd..ebcd327 100644 --- a/component/pear/css/pear.css +++ b/component/pear/css/pear.css @@ -2,14 +2,15 @@ @import url("pear-module/select.css"); @import url("pear-module/layout.css"); +@import url("pear-module/notice.css"); @import url("pear-module/button.css"); +@import url("pear-module/table.css"); @import url("pear-module/frame.css"); @import url("pear-module/menu.css"); @import url("pear-module/form.css"); @import url("pear-module/link.css"); @import url("pear-module/form.css"); -@import url("pear-module/tab.css"); @import url("pear-module/code.css"); @import url("pear-module/link.css"); -@import url("pear-module/table.css"); -@import url("pear-module/notice.css"); \ No newline at end of file +@import url("pear-module/step.css"); +@import url("pear-module/tab.css"); \ No newline at end of file diff --git a/component/pear/module/step.js b/component/pear/module/step.js new file mode 100644 index 0000000..9186061 --- /dev/null +++ b/component/pear/module/step.js @@ -0,0 +1,98 @@ +layui.define(['layer', 'carousel'], function (exports) { + var $ = layui.jquery; + var layer = layui.layer; + var carousel = layui.carousel; + + // 添加步骤条dom节点 + var renderDom = function (elem, stepItems, postion) { + var stepDiv = '
'; + for (var i = 0; i < stepItems.length; i++) { + stepDiv += '
'; + // 线 + if (i < (stepItems.length - 1)) { + if (i < postion) { + stepDiv += '
'; + } else { + stepDiv += '
'; + } + } + + // 数字 + var number = stepItems[i].number; + if (!number) { + number = i + 1; + } + if (i == postion) { + stepDiv += '
' + number + '
'; + } else if (i < postion) { + stepDiv += '
'; + } else { + stepDiv += '
' + number + '
'; + } + + // 标题和描述 + var title = stepItems[i].title; + var desc = stepItems[i].desc; + if (title || desc) { + stepDiv += '
'; + if (title) { + stepDiv += '
' + title + '
'; + } + if (desc) { + stepDiv += '
' + desc + '
'; + } + stepDiv += '
'; + } + stepDiv += '
'; + } + stepDiv += '
'; + + $(elem).prepend(stepDiv); + + // 计算每一个条目的宽度 + var bfb = 100 / stepItems.length; + $('.step-item').css('width', bfb + '%'); + }; + + var pearStep = { + // 渲染步骤条 + render: function (param) { + param.indicator = 'none'; // 不显示指示器 + param.arrow = 'always'; // 始终显示箭头 + param.autoplay = false; // 关闭自动播放 + if (!param.stepWidth) { + param.stepWidth = '400px'; + } + + // 渲染轮播图 + carousel.render(param); + + // 渲染步骤条 + var stepItems = param.stepItems; + renderDom(param.elem, stepItems, 0); + $('.lay-step').css('width', param.stepWidth); + + //监听轮播切换事件 + carousel.on('change(' + param.filter + ')', function (obj) { + $(param.elem).find('.lay-step').remove(); + renderDom(param.elem, stepItems, obj.index); + $('.lay-step').css('width', param.stepWidth); + }); + + // 隐藏左右箭头按钮 + $(param.elem).find('.layui-carousel-arrow').css('display', 'none'); + + // 去掉轮播图的背景颜色 + $(param.elem).css('background-color', 'transparent'); + }, + // 下一步 + next: function (elem) { + $(elem).find('.layui-carousel-arrow[lay-type=add]').trigger('click'); + }, + // 上一步 + pre: function (elem) { + $(elem).find('.layui-carousel-arrow[lay-type=sub]').trigger('click'); + } + }; + exports('step', pearStep); +}); diff --git a/component/pear/pear.js b/component/pear/pear.js index 828acb0..4f0ee6f 100644 --- a/component/pear/pear.js +++ b/component/pear/pear.js @@ -17,5 +17,6 @@ layui.config({ document: "document", select: "select", drawer: "drawer", - notice: "notice" + notice: "notice", + step:"step" }); diff --git a/view/document/step.html b/view/document/step.html new file mode 100644 index 0000000..54f1b23 --- /dev/null +++ b/view/document/step.html @@ -0,0 +1,256 @@ + + + + + + + + +
+
+
+
开发环境
+
Step 步骤表单
+
+
+
+
+
+

显示代码

+
+ 
+								
+								 并
+								
+								 并
+								
+
+
+
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+

显示代码

+
+ 
+		                        layui.use(['form', 'step','element'], function() {
+		                            var $ = layui.$,
+		                            form = layui.form,
+		                            step = layui.step;
+		                            
+		                            step.render({
+		                                elem: '#stepForm',
+		                                filter: 'stepForm',
+		                                width: '100%',
+		                                stepWidth: '600px',
+		                                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');
+		                                return false;
+		                            });
+		                         
+		                            $('.next').click(function() {
+		                                step.next('#stepForm');
+		                                return false;
+		                            });
+		                        })
+
+
+
+
+
+
+ + + + +