生成代码
This commit is contained in:
zhujj
parent
fe45772be0
commit
4516c36b1d
Binary file not shown.
|
After Width: | Height: | Size: 17 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 2.7 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 15 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 15 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 15 KiB |
|
|
@ -0,0 +1,82 @@
|
|||
.step-body{
|
||||
position: relative;
|
||||
}
|
||||
.step-header{
|
||||
width: 100%;
|
||||
margin: 0 auto;
|
||||
}
|
||||
.step-header ul{
|
||||
padding: 0;
|
||||
}
|
||||
.step-header li{
|
||||
list-style-type:none;
|
||||
float: left;
|
||||
position: relative;
|
||||
}
|
||||
.step-header li p{
|
||||
margin-top: 30px;
|
||||
margin-bottom: 5px;
|
||||
font-size: 14px;
|
||||
color: #555555;
|
||||
}
|
||||
.step-header li .step-name{
|
||||
position: relative;
|
||||
left: 35px;
|
||||
font-size: 12px;
|
||||
top: 0;
|
||||
line-height: 25px;
|
||||
background-color: #fff;
|
||||
padding: 0 10px;
|
||||
}
|
||||
.step-header li a{
|
||||
position: absolute;
|
||||
margin: 0 auto;
|
||||
font-size: 12px;
|
||||
color: #777;
|
||||
height: 25px;
|
||||
line-height: 25px;
|
||||
background: url(./images/cell.png) center top no-repeat;
|
||||
display: block;
|
||||
background-color: #FFFFFF;
|
||||
width: 45px;
|
||||
left: 0;
|
||||
top: 0;
|
||||
text-decoration:none;
|
||||
text-align: center;
|
||||
}
|
||||
.step-header li.step-active a{
|
||||
background: url(./images/cell-active.png) center top no-repeat ;
|
||||
color: white;
|
||||
background-color: #FFFFFF;
|
||||
}
|
||||
.step-header li.step-current a{
|
||||
background: url(./images/cell-current.png) center top no-repeat ;
|
||||
color: white;
|
||||
background-color: #FFFFFF;
|
||||
}
|
||||
.step-header li.step-active p{
|
||||
color: #58B7FF;
|
||||
}
|
||||
.step-bar,.step-bar-active{
|
||||
height: 13px;
|
||||
border-radius: 12px;
|
||||
}
|
||||
.step-bar{
|
||||
background: url(./images/bar-bg.png) ;
|
||||
position: relative;
|
||||
border-radius: 12px;
|
||||
z-index: -1;
|
||||
height: 1px;
|
||||
top: 12.5px;
|
||||
}
|
||||
.step-bar-active{
|
||||
width: 0;
|
||||
background: url(./images/bar-bg-active.png) ;
|
||||
height: 1px;
|
||||
|
||||
}
|
||||
.step-list{
|
||||
display: none;
|
||||
clear: both;
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
|
|
@ -0,0 +1,106 @@
|
|||
layui.define(['jquery'], function (exports) {
|
||||
"use strict";
|
||||
var $ = layui.$;
|
||||
$.fn.step = function(options) {
|
||||
var opts = $.extend({}, $.fn.step.defaults, options);
|
||||
var size=this.find(".step-header li").length;
|
||||
var barWidth=opts.initStep<size?100/(1*size)+100*(opts.initStep-1)/size : 100;
|
||||
var curPage=opts.initStep;
|
||||
var steps = this;
|
||||
var bar_w = (100 - (100/size)) + '%';
|
||||
this.find(".step-header").prepend("<div class=\"step-bar\" style='width:"+bar_w+"'><div class=\"step-bar-active\"></div></div>");
|
||||
this.find(".step-list").eq(opts.initStep).show();
|
||||
if (size<opts.initStep) {
|
||||
opts.initStep=size;
|
||||
}
|
||||
if (opts.animate==false) {
|
||||
opts.speed=0;
|
||||
}
|
||||
this.find(".step-header li").each(function (i, li) {
|
||||
if(i == 0){
|
||||
$(li).addClass("step-current")
|
||||
.append('<a href="javascript:;" class="jump-steps" data-step="'+(i+1)+'">'+(i+1)+'</a>');
|
||||
} else if (i<opts.initStep){
|
||||
$(li).addClass("step-active")
|
||||
.append('<a href="javascript:;" class="jump-steps" data-step="'+(i+1)+'"></a>');
|
||||
}else{
|
||||
$(li).append('<a href="javascript:;" class="jump-steps" data-step="'+(i+1)+'">'+(i+1)+'</a>');
|
||||
}
|
||||
});
|
||||
this.find(".step-header li").css({
|
||||
"width": 100/size+"%"
|
||||
});
|
||||
this.find(".step-header").show();
|
||||
this.find(".step-bar-active").animate({
|
||||
"width": barWidth+"%"},
|
||||
opts.speed, function() {
|
||||
|
||||
});
|
||||
|
||||
this.find(".jump-steps").on('click',function () {
|
||||
var step_id = $(this).attr("data-step");
|
||||
steps.goStep(step_id);
|
||||
});
|
||||
|
||||
this.nextStep=function() {
|
||||
if (curPage>=size) {
|
||||
return false;
|
||||
}
|
||||
var next_step_num = curPage == 0? 2: curPage+1 == size ? size+1 : curPage+1;
|
||||
return this.goStep(next_step_num);
|
||||
};
|
||||
|
||||
this.preStep=function() {
|
||||
if (curPage<=1) {
|
||||
return false;
|
||||
}
|
||||
var pre_step_num = curPage == 1? 1: curPage-1;
|
||||
return this.goStep(pre_step_num);
|
||||
};
|
||||
|
||||
this.goStep=function(page) {
|
||||
if (page ==undefined || isNaN(page) || page<0) {
|
||||
if(window.console&&window.console.error){
|
||||
console.error('the method goStep has a error,page:'+page);
|
||||
}
|
||||
return false;
|
||||
}
|
||||
curPage=parseInt(page);
|
||||
this.find(".step-list").hide();
|
||||
this.find(".step-list").eq(curPage-1).show();
|
||||
this.find(".step-header li").each(function (i, li) {
|
||||
var $li=$(li);
|
||||
$li.removeClass('step-current')
|
||||
.removeClass('step-active');
|
||||
$li.find("a").html(i+1);
|
||||
if ((i+1)<page){
|
||||
$li.addClass('step-active');
|
||||
$li.find("a").empty();
|
||||
if(opts.scrollTop){
|
||||
$('html,body').animate({scrollTop:0}, 'slow');
|
||||
}
|
||||
}else if((i+1) == page){
|
||||
$li.addClass('step-current');
|
||||
}
|
||||
});
|
||||
var bar_rate = 100/(100-(100/size));
|
||||
|
||||
barWidth= page<size? (100/(2*size)+100*(page-1)/size)*bar_rate : 100;
|
||||
this.find(".step-bar-active").animate({
|
||||
"width": barWidth+"%"},
|
||||
opts.speed, function() {
|
||||
|
||||
});
|
||||
return true;
|
||||
};
|
||||
return this;
|
||||
};
|
||||
$.fn.step.defaults = {
|
||||
animate:true,
|
||||
speed:200,
|
||||
initStep:0,
|
||||
scrollTop:true
|
||||
};
|
||||
|
||||
exports('steps', $);
|
||||
});
|
||||
|
|
@ -140,7 +140,6 @@
|
|||
<script th:src="@{/js/plugins/metisMenu/jquery.metisMenu.js}"></script>
|
||||
<script th:src="@{/js/plugins/slimscroll/jquery.slimscroll.min.js}"></script>
|
||||
<script th:src="@{/ajax/libs/blockUI/jquery.blockUI.js}"></script>
|
||||
<script src="http://tajs.qq.com/stats?sId=62048022"></script>
|
||||
<script th:src="@{/ruoyi/js/ry-ui.js?v=3.0.0}"></script>
|
||||
<script th:src="@{/ruoyi/index.js}"></script>
|
||||
<script th:src="@{/ajax/libs/fullscreen/jquery.fullscreen.js}"></script>
|
||||
|
|
|
|||
|
|
@ -2,9 +2,46 @@
|
|||
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
|
||||
<meta charset="utf-8">
|
||||
<head th:include="include :: header"></head>
|
||||
<link th:href="@{/ajax/libs/layui/extend/steps/steps.css}" rel="stylesheet"/>
|
||||
<body class="white-bg">
|
||||
<div class="wrapper wrapper-content animated fadeInRight ibox-content">
|
||||
<form class="form-horizontal m" id="form-genTable-add">
|
||||
<div id="step_demo" class="step-body">
|
||||
<div class="step-header" style="width:80%;overflow: hidden;">
|
||||
<ul>
|
||||
<li>
|
||||
<span class="step-name">选择表</span>
|
||||
</li>
|
||||
<li>
|
||||
<span class="step-name">基本信息</span>
|
||||
</li>
|
||||
<li>
|
||||
<span class="step-name">字段信息</span>
|
||||
</li>
|
||||
<li>
|
||||
<span class="step-name">生成信息</span>
|
||||
</li>
|
||||
<li>
|
||||
<span class="step-name">完成</span>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="step-content">
|
||||
<div class="step-list">
|
||||
<div class="form-group">
|
||||
<label class="col-sm-3 control-label">数据源名称：</label>
|
||||
<div class="col-sm-8">
|
||||
<input id="dataSourceName" name="dataSourceName" class="form-control" type="text">
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label class="col-sm-3 control-label">选择表：</label>
|
||||
<div class="col-sm-8">
|
||||
<input id="tableName" name="tableName" class="form-control" type="text">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="step-list">
|
||||
<div class="form-group">
|
||||
<label class="col-sm-3 control-label">实体类名称：</label>
|
||||
<div class="col-sm-8">
|
||||
|
|
@ -30,11 +67,14 @@
|
|||
</div>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label class="col-sm-3 control-label">数据源名称：</label>
|
||||
<label class="col-sm-3 control-label">备注信息：</label>
|
||||
<div class="col-sm-8">
|
||||
<input id="dataSourceName" name="dataSourceName" class="form-control" type="text">
|
||||
<input id="remarks" name="remarks" class="form-control" type="text">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="step-list">待确认</div>
|
||||
<div class="step-list">
|
||||
<div class="form-group">
|
||||
<label class="col-sm-3 control-label">使用的模板：</label>
|
||||
<div class="col-sm-8">
|
||||
|
|
@ -89,38 +129,14 @@
|
|||
<input id="options" name="options" class="form-control" type="text">
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label class="col-sm-3 control-label">创建者：</label>
|
||||
<div class="col-sm-8">
|
||||
<input id="createBy" name="createBy" class="form-control" type="text">
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label class="col-sm-3 control-label">创建时间：</label>
|
||||
<div class="col-sm-8">
|
||||
<input id="createDate" name="createDate" class="form-control" type="text">
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label class="col-sm-3 control-label">更新者：</label>
|
||||
<div class="col-sm-8">
|
||||
<input id="updateBy" name="updateBy" class="form-control" type="text">
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label class="col-sm-3 control-label">更新时间：</label>
|
||||
<div class="col-sm-8">
|
||||
<input id="updateDate" name="updateDate" class="form-control" type="text">
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label class="col-sm-3 control-label">备注信息：</label>
|
||||
<div class="col-sm-8">
|
||||
<input id="remarks" name="remarks" class="form-control" type="text">
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
<button id="preBtn">上一步</button>
|
||||
<button id="nextBtn">下一步</button>
|
||||
</div>
|
||||
|
||||
<div th:include="include::footer"></div>
|
||||
<script type="text/javascript">
|
||||
var prefix = ctx + "agile/genTable"
|
||||
|
|
@ -137,6 +153,33 @@
|
|||
$.operate.save(prefix + "/add", $('#form-genTable-add').serialize());
|
||||
}
|
||||
}
|
||||
layui.config({
|
||||
debug: true
|
||||
,base: '/ajax/libs/layui/extend/'
|
||||
}).extend({
|
||||
steps:"steps/steps"
|
||||
});
|
||||
|
||||
|
||||
|
||||
layui.use(['jquery', 'steps'],function(){
|
||||
|
||||
var $ = layui.$;
|
||||
|
||||
var $step= $("#step_demo").step();
|
||||
|
||||
$("#preBtn").click(function(event) {
|
||||
console.log("上一步");
|
||||
$step.preStep();//上一步
|
||||
});
|
||||
$("#nextBtn").click(function(event) {
|
||||
console.log("下一步");
|
||||
$step.nextStep();//下一步
|
||||
});
|
||||
$("#goBtn").click(function(event) {
|
||||
$step.goStep(3);//到指定步
|
||||
});
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
|||
Loading…
Reference in New Issue