用ystep去实现一个月份时间轴

最新推荐文章于 2024-03-30 09:33:15 发布

下午茶茶

最新推荐文章于 2024-03-30 09:33:15 发布

阅读量305

点赞数

分类专栏：前端文章标签： jquery

本文链接：https://blog.csdn.net/weixin_41698201/article/details/114483624

版权

本文介绍如何利用ystep库来实现一个月份时间轴，包括html结构、ystep.js的使用，并提供官网代码示例链接。

摘要由CSDN通过智能技术生成

需求：最近要做一个月份的时间轴，整理了一下用ystep去实现
直接上代码，包括引入的我也给贴一下吧：

一、html

效果图
在这里插入图片描述

<!DOCTYPE html>
<html>
<head>
    <title>ystep流程、步骤</title>
    <meta name="keywords" content="ystep,jQuery流程、步骤插件" />
    <meta name="description" content="ystep,jQuery流程、步骤插件" />
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- 引入ystep样式 -->
    <link href="css/ystep.css" rel="stylesheet" />
	
</head>
<body>
    <!-- 引入jquery -->
    <script src="js/jquery.min.js"></script>
    <!-- 引入ystep插件 -->
	<script src="js/ystep.js"></script>
<div class="ystep1" style="margin: 100px"></div>
 <hr />
    <input id="btnPre" type="button" value="上一步" />
    <input id="btnNext" type="button" value="下一步" />

	
    <script>
        //根据jQuery选择器找到需要加载ystep的容器
        //loadStep 方法可以初始化ystep
        $(".ystep1").loadStep({
   
            //ystep的外观大小
            //可选值：small,large
            size: "small",
            //ystep配色方案
            //可选值：green,blue
            color: "green",
            //ystep中包含的步骤
            steps: [{
   
                //步骤名称
                title: "1月",
                //步骤内容(鼠标移动到本步骤节点时，会提示该内容)
                //content: "实名用户/公益组织发起项目"
            }, {
   
                title: "2月",
                //content: "乐捐平台工作人员审核项目"
            }, {
   
                title: "3月",
                //content: "乐捐项目上线接受公众募款"
            }, {
   
                title: "4月",
                //content: "项目执行者线下开展救护行动"
            }, {
   
                title: "5月",
                //content: "项目执行者公示善款使用报告"
            }, {
   
                title: "6月",
                //content: "项目执行者公示善款使用报告"
            }, {
   
                title: "7月",
                //content: "项目执行者公示善款使用报告"
            }, {
   
                title: "8月",
                //content: "项目执行者公示善款使用报告"
            }, {
   
                title: "9月",
                //content: "项目执行者公示善款使用报告"
            }, {
   
                title: "10月",
                //content: "项目执行者公示善款使用报告"
            }, {
   
                title: "11月",
                //content: "项目执行者公示善款使用报告"
            }, {
   
                title: "12月",
                //content: "项目执行者公示善款使用报告"
            }]
        });


        $("#btnPre").click(function () {
   
            //跳转到上一个步骤
            $(".ystep1").prevStep();

        });

        $("#btnNext").click(function () {
   
            //跳转到下一个步骤
            $(".ystep1").nextStep();

        });
        $(".ystep1").setStep(5);

        //跳转到下一个步骤
        //$(".ystep1").nextStep();
        //跳转到上一个步骤
        //$(".ystep1").prevStep();
        //跳转到指定步骤
        //$(".ystep1").setStep(2);
        //获取当前在第几步
        //$(".ystep1").getStep();

 //       $.ajax({
   
 //       	url : "myBonds/ystep",
 //       	type : 'POST',
 //       	dataType : 'json',
 //       	data : {
   
 //       		'compsname' : '123'
 //       	},
 //       	success : function(data) {
   
 //       		if(data.result.code==1){
   
 //       			console.log(data.result.ystep);
 //       			var ystep=data.result.ystep;
 //       			$("#ystepDiv").setStep(ystep);//跳到指定节点
 //       		}
 //       	}
 //       })

    </script>
</body>
</html>

## 二、ystep.css

/*common css*/
.ystep-container {
   
  font-family: "Helvetica Neue",Helvetica,"Hiragino Sans GB","Wenquanyi Micro Hei","Microsoft Yahei",Arial,sans-serif;
  display: inline-block;
  position: relative;
  color: #000;
}
.ystep-container ul {
   
  list-style: none;
}
.ystep-container ul,.ystep-container li,.ystep-container p {
   
  margin: 0;
  padding: 0;
}

/*size css*/
.ystep-sm {
   
  width: 360px;
  height: 30px;
  font-size: 12px;
  line-height: 1;
}
.ystep-lg {
   
  width: 700px;
  height: 60px;
  font-size: 18px;
  /*line-height: .3;*/
}

/*small size css*/
.ystep-sm .ystep-container-steps {
   
  position: absolute;
  top: 2px;
  cursor: pointer;
  z-index: 10;
}
.ystep-sm li {
   
  float: left;
  width: 65px;
  height: 50px;
}
.ystep-sm .ystep-step-done {
   
  background-position: -119px -76px;
}
.ystep-sm .ystep-step-undone {
   
  background-position: -60px -76px;
}
.ystep-sm .ystep-step-active {
   
  background-position: -182px -76px;
}
.ystep-sm .ystep-progress {
   
  width: 260px;
  height: 3px;
  position: absolute;
  top: 30px;
  left: 8px;
  float: left;
  margin-right: 10px;
  overflow: hidden;
}
.ystep-sm .ystep-progress-bar {
   
  width: 260px;
  height: 6px;
  background: #e4e4e4;
  display: inline-block;
  float: left;
}
.ystep-sm .ystep-progress-highlight {
   
  height: 6px;
	display: block;
}

/*large size css*/
.ystep-lg .ystep-container-steps {
   
  position: absolute;
  top: 2px;
  cursor: pointer;
  z-index: 10;
}
.ystep-lg li {
   
  float: left;
  width: 100px;
  height: 85px;
}
.ystep-lg .ystep-step-done {
   
  background-position: -278px -132px;
}
.ystep-lg .ystep-step-undone {
   
  background-position: -137px -131px;
}
.ystep-lg .ystep-step-active {
   
  background-position: -414px -131px;
}
.ystep-lg .ystep-progress {
   
  width: 400px;
  height: 10px;
  position: absolute;
  top: 30px;
  left: 15px;
  float: left;
  margin-right: 10px;
  overflow: hidden;
}
.ystep-lg .ystep-progress-bar {
   
  width: 400px;
  height: 20px;
  background: #e4e4e4;
  display: inline-block;
  float: left;
}
.ystep-lg .ystep-progress-highlight {
   
  height: 20px;
	display: block;
}

/*green css*/
.ystep-green .ystep-step-done {
   
  background-image: url("./images/pointes_green.png");
  background-repeat: no-repeat;
}
.ystep-green .ystep-step-undone {
   
  background-image: url("./images/pointes_green.png");
  background-repeat: no-repeat;
  color: #9c9a9b;
}
.ystep-green .ystep-step-active {
   
  background-image: url("./images/pointes_green.png");
  background-repeat: no-repeat;
  color: #3d8e15;
}
.ystep-green .ystep-progress-highlight {
   
  background: #89bc65;
}

/*blue css*/
.ystep-blue .ystep-step-done {
   
  background-image: url("./images/pointes_blue.png");
  background-repeat: no-repeat;
}
.ystep-blue .ystep-step-undone {
   
  background-image: url("./images/pointes_blue.png");
  background-repeat: no-repeat;
  color: #9c9a9b;
}
.ystep-blue .ystep-step-active {
   
  background-image: url("./images/pointes_blue.png");
  background-repeat: no-repeat;
  color: #3276b1;
}
.ystep-blue .ystep-progress-highlight {
   
  background: #60baff;
}

/*popover css*/
.popover {
   
  font-family: "Helvetica Neue",Helvetica,"Hiragino Sans GB","Wenquanyi Micro Hei","Microsoft Yahei",Arial,sans-serif;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1010;
  display: none;
  max-width: 276px;
  padding: 1px;
  text-align: left;
  white-space: normal;
  background-color: #ffffff;
  border: 1px solid #cccccc;
  border: 1px solid rgba(0, 0, 0, 0.2);
  border-radius: 6px;
  -webkit-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
          box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
  background-clip: padding-box;
}

.popover.top {
   
  margin-top: -10px;
}

.popover.right {
   
  margin-left: 10px;
}

.popover.bottom {
   
  margin-top: 10px;
}

.popover.left {
   
  margin-left: -10px;
}

.popover-title {
   
  padding: 2px 10px;
  margin: 0;
  font-size: 12px;
  font-weight: bold;
  line-height: 18px;
  background-color: #f7f7f7;
  border-bottom: 1px solid #ebebeb;
  border-radius: 5px 5px 0 0;
}

.popover-content {
   
  padding: 4px 10px;
  font-size: 12px;
}

.popover .arrow,
.popover .arrow:after {
   
  position: absolute;
  display: block;
  width: 0;
  height: 0;
  border-color: transparent;
  border-style: solid;
}

.popover .arrow {
   
  border-width: 11px;
}

.popover .arrow:after {
   
  border-width: 10px;
  content: "";
}

.popover.top .arrow {
   
  bottom: -11px;
  left: 50%;
  margin-left: -11px;
  border-top-color: #999999;
  border-top-color: rgba(0, 0, 0, 0.25);
  border-bottom-width: 0;
}

.popover.top .arrow:after {
   
  bottom: 1px;
  margin-left: -10px;
  border-top-color: #ffffff;
  border-bottom-width: 0;
  content: " ";
}

.popover.right .arrow {
   
  top: 50%;
  left: -11px;
  margin-top: -11px;
  border-right-color: #999999;
  border-right-color: rgba(0, 0, 0, 0.25);
  border-left-width: 0;
}

.popover.right .arrow:after {
   
  bottom: -10px;
  left: 1px;
  border-right-color: #ffffff;
  border-left-width: 0;
  content: " ";
}

.popover.bottom .arrow {
   
  top: -11px;
  left: 50%;
  margin-left: -11px;
  border-bottom-color: #999999;
  border-bottom-color: rgba(0, 0, 0, 0.25);
  border-top-width: 0;
}

.popover.bottom .arrow:after {
   
  top: 1px;
  margin-left: -10px;
  border-bottom-color: #ffffff;
  border-top-width: 0;
  content: " ";
}

.popover.left .arrow {
   
  top: 50%;
  right: -11px;
  margin-top: -11px;
  border-left-color: #999999;
  border-left-color: rgba(0, 0, 0, 0.25);
  border-right-width: 0;
}

.popover.left .arrow:after {
   
  right: 1px;
  bottom: -10px;
  border-left-color: #ffffff;
  border-right-wid