Skip to content

Commit

Permalink
coding
Browse files Browse the repository at this point in the history
  • Loading branch information
@fxss5201
fxss5201 committed Sep 19, 2018
1 parent 31a440c commit a478a9b
Show file tree
Hide file tree
Showing 3 changed files with 340 additions and 0 deletions.
116 changes: 116 additions & 0 deletions index.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,116 @@
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>steps 步骤条、时间轴</title>
<link rel="stylesheet" href="http://www.fxss5201.cn/project/css/normalize.css">
<link rel="stylesheet" href="steps.css">
<style>
html {
-webkit-tap-highlight-color: rgba(0,0,0,0);
}
body {
font-family: "Helvetica Neue","Microsoft YaHei",Helvetica,Arial,"Hiragino Sans GB","Hiragino Sans GB W3","WenQuanYi Micro Hei",sans-serif;
font-size: 14px;
line-height: 1.42857143;
color: #333;
background-color: #fff;
}
.head {
text-align: center;
line-height: 50px;
}
.h2-title {
text-align: left;
line-height: 38px;
font-size: 1.1em;
font-weight: 700;
}
.h3-title {
line-height: 28px;
}
.margin-bottom-5 {
margin-bottom: 5px;
}
.site-title {
margin: 15px 0;
}
.paragraph {
margin-bottom: 8px;
}
.padding-left-20 {
padding-left: 20px;
}
.default-class {
color: #999;
border-color: #999;
}
.finish-class {
color: #409eff;
border-color: #409eff;
}
.finish-bg {
background-color: #409eff;
}
</style>
</head>
<body>
<!-- <h1 class="head">steps 步骤条、时间轴</h1> -->
<div id="steps1"></div>

<div class="steps steps-horizontal">
<div class="step default-class finish-class">
<div class="step-head">
<div class="step-line finish-bg"></div>
<div class="step-icon">
<div class="step-icon-inner">1</div>
</div>
</div>
<div class="step-body">
<div class="step-title">步骤 1</div>
<div class="step-description">111</div>
</div>
</div>
<div class="step default-class finish-class">
<div class="step-head">
<div class="step-line"></div>
<div class="step-icon">
<div class="step-icon-inner">2</div>
</div>
</div>
<div class="step-body">
<div class="step-title">步骤 2</div>
<div class="step-description">222</div>
</div>
</div>
<div class="step default-class">
<div class="step-head">
<div class="step-line"></div>
<div class="step-icon">
<div class="step-icon-inner">3</div>
</div>
</div>
<div class="step-body">
<div class="step-title">步骤 3</div>
<div class="step-description">333</div>
</div>
</div>
</div>

<script src="steps.js"></script>
<script>
var steps = steps({
el: "#steps1",
data: [
{ title: "步骤1", description: "111" },
{ title: "步骤2", description: "222" }
],
center: true,
defaultClass: "default-class",
finishClass: "finish-class"
});
</script>
</body>
</html>
117 changes: 117 additions & 0 deletions steps.css
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,117 @@
.steps {
padding: 10px;
display: flex;
}
.steps-horizontal {
white-space: nowrap;
}
.steps-vertical {
height: 100%;
flex-flow: column;
}
.steps-center {
text-align: center;
}
.step {
position: relative;
flex-basis: 50%;
flex-shrink: 1;
}
.steps-vertical .step {
display: flex;
}
.steps-center .step {
flex-basis: 33%;
}
.step-head {
position: relative;
width: 100%;
}
.steps-vertical .step-head {
flex-grow: 0;
width: 24px;
}
.step-line {
position: absolute;
height: 2px;
top: 11px;
left: 0;
right: 0;
border-color: inherit;
background-color: #c0c4cc;
}
.steps-vertical .step-line {
width: 2px;
top: 0;
bottom: 0;
left: 11px;
height: 100%;
}
.steps-center .step-line {
left: 50%;
right: -50%;
}
.step-icon {
position: relative;
z-index: 1;
display: inline-flex;
justify-content: center;
align-items: center;
width: 24px;
height: 24px;
font-size: 14px;
box-sizing: border-box;
background: #fff;
transition: .15s ease-out;
border-radius: 50%;
border: 2px solid;
border-color: inherit;
}
.step-icon-inner {
display: inline-block;
user-select: none;
text-align: center;
font-weight: 700;
line-height: 1;
color: inherit;
}
.step-body {
white-space: normal;
text-align: left;
}
.steps-vertical .step-body {
padding-left: 10px;
flex-grow: 1;
}
.steps-center .step-body {
box-sizing: border-box;
padding: 0 10px;
text-align: center;
}
.step-title {
font-size: 16px;
line-height: 38px;
}
.steps-vertical .step-title {
line-height: 24px;
padding-bottom: 8px;
}
.step-description {
padding-right: 10%;
margin-top: -5px;
font-size: 12px;
line-height: 24px;
font-weight: 400;
}
.steps-center:not('steps-vertical') .step-title,
.steps-center:not('steps-vertical') .step-description {

}
.steps:not('steps-center') .step:last-child {
flex-basis: auto!important;
flex-shrink: 0;
flex-grow: 0;
}
.steps .step:last-child .step-line {
display: none;
}
107 changes: 107 additions & 0 deletions steps.js
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,107 @@
;(function(undefined) {
"use strict"
var _global;

// 工具函数
var utils = {
extend: function (o,n,override) { // 对象合并
for(var key in n){
if(n.hasOwnProperty(key) && (!o.hasOwnProperty(key) || override)){
o[key]=n[key];
}
}
return o;
}
};

var steps = function(options) {
return new _steps(options);
};
// 插件构造函数 - 返回数组结构
function _steps(options){
this._initial(options);
}
_steps.prototype = {
constructor: this,
_initial: function(options) {
var _this = this;
// 默认参数
var defined = {
el: "",
data: [],
direction: "horizontal",
center: false,
active: 0,
defaultClass: "",
finishClass: "",
customClass: ""
};
_this.defined = utils.extend(defined, options, true); //配置参数
if(!_this.defined.el){
alert("请传入'el'参数");
return false;
}
if(!_this.defined.data || _this.defined.data.length == 0){
alert("请传入'data'参数");
return false;
}
_this.render();
console.log(_this.getParentNode())
},
getBoxClass: function(){
var _this = this,
boxClass = "";
if(_this.defined.direction == "horizontal"){
boxClass += "steps-horizontal";
if(_this.defined.center){
boxClass += " steps-center";
}
}else if(_this.defined.direction == "vertical"){
boxClass += "steps-vertical";
}else{
alert("参数'direction'错误");
}
return boxClass;
},
getParentNode: function(){
var _this = this;
return document.querySelector(_this.defined.el);
},
render: function(){
var _this = this,
boxHtml = "",
parentNode = _this.getParentNode();
parentNode.className = parentNode.className + _this.defined.customClass;
_this.defined.boxClass = _this.getBoxClass();
boxHtml += '<div class="steps {{boxClass}}">'.replace("{{boxClass}}", _this.defined.boxClass);
_this.defined.data.forEach(function(currentValue, index, array){
if(index <= _this.defined.active){
boxHtml += '<div class="step {{stepClass}}">'.replace("{{stepClass}}", _this.defined.defaultClass + " " + _this.defined.finishClass);
}else{
boxHtml += '<div class="step {{stepClass}}">'.replace("{{stepClass}}", _this.defined.defaultClass);
}
boxHtml += '<div class="step-head"><div class="step-line"></div><div class="step-icon"><div class="step-icon-inner">{{stepIcon}}</div></div></div>'.replace("{{stepIcon}}", index + 1);
boxHtml += '<div class="step-body"><div class="step-title">{{stepTitle}}</div><div class="step-description">{{stepDesc}}</div></div>'.replace("{{stepTitle}}", currentValue.title).replace("{{stepDesc}}", currentValue.description);
boxHtml += '</div>';
});
boxHtml += '</div>';
parentNode.innerHTML = boxHtml;
},
setActive: function(num){
var _this = this;
_this.defined.active = num;
console.log(_this.defined)
}

}

// 最后将插件对象暴露给全局对象
_global = (function(){ return this || (0, eval)('this'); }());
if (typeof module !== "undefined" && module.exports) {
module.exports = steps;
} else if (typeof define === "function" && define.amd) {
define(function(){return steps;});
} else {
!('steps' in _global) && (_global.steps = steps);
}
}());

0 comments on commit a478a9b

Please sign in to comment.