Implementation code of jquery step progress axis plug-in

Implementation code of jquery step progress axis plug-in

A jQuery plugin every day - step progress axis step progress axis

Many tool-type websites have this structure when they are in the introductory tutorials or when they are registering an account, so I made one to try it out. I think the callback action can also be used.

The effect is as follows

insert image description here

Code section

*{
	margin: 0;
	padding: 0;
}
#div{
	width: 90%;
	height: 50px;
	margin: 10px auto;
	display: flex;
	justify-content: center;
	align-items: center;
}
#box{
	width: 90%;
	height: 100px;
	border: 1px solid lightgray;
	margin: 10px auto;
	display: flex;
	justify-content: center;
	align-items: center;
	position: relative;
}
.box{
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	display: flex;
	justify-content: center;
	align-items: center;
	background-color: black;
	color: white;
}
.tbar{
	width: 90%;
	height: 6px;
	border-radius: 5px;
	background-color: lightgray;
	display: flex;
	align-items: center;
	position: absolute;
}
.bar{
	width: 100%;
	height: 50%;
	border-radius: 5px;
	background-color: #1abc9c;
	transition: all 0.2s linear;
}
.dot{
	position: absolute;
	width: 12px;
	height: 12px;
	border-radius: 50%;
	background-color: lightgray;
	cursor: pointer;
	display: flex;
	justify-content: center;
	align-items: center;
}
.dot:hover{
	transition: all 0.5s linear;
	background-color: #1abc9c;
}
.dot.check{
	background-color: #1abc9c;
}
.dot .txt{
	top: 100%;
	font-size: 12px;
	position: absolute;
	width: 100px;
	text-align: center;
}
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Step Progress Axis</title>
		<script src="js/jquery-3.4.1.min.js"></script>
		<script src="js/bzjdz.js"></script>
		<link href="css/bzjdz.css" rel="external nofollow" rel="stylesheet" type="text/css" />
	</head>
	<body>
		<div id="div">
			
		</div>
		<div id="box">
			<div class="box" id="box1" style="background-color: #1abc9c;">Step 1</div>
			<div class="box" id="box2" style="background-color: #3498db;">Step 2</div>
			<div class="box" id="box3" style="background-color: #f1c40f;">Step 3</div>
			<div class="box" id="box4" style="background-color: #e74c3c;">Step 4</div>
			<div class="box" id="box5" style="background-color: #9b59b6;">Step 5</div>
		</div>
	</body>
</html>
<script>
	$(function(){
		$("#div").timeline({
			data:[
				{name:'Step 1',id:'#box1',click:hide},
				{name:'Step 2',id:'#box2',click:hide},
				{name:'Step 3',id:'#box3',click:hide},
				{name:'Step 4',id:'#box4',click:hide},
				{name:'Step 5',id:'#box4',click:hide},
			]
		})
	})
	function hide(item){
		$(".box").hide();
		$(item.id).show();
	}
</script>
$.prototype.timeline = function(op){
	console.log(op.data);
	var $that = $(this);
	var $tbar =$("<div class='tbar'></div>");
	var $bar =$("<div class='bar'></div>");
	$bar.appendTo($tbar)
	$tbar.appendTo($that);
	var length = op.data.length; //element length var index = 0; //current step op.data.forEach((item,index)=>{
		var per = getper(index,length)
		var $dot = $("<div class='dot' data-index='"+index+"'><div class='txt'>"+item.name+"</div></div>");
		$dot.appendTo($tbar);
		$dot.css('left',"calc("+per+"% - 6px)")
	})
	//Click event $that.find('.dot').click(function(){
		index = parseInt($(this).attr('data-index'));
		//Execute the corresponding method click();
	})
	click();
	function click(){
		//Callback var item = op.data[index];
		item.click(item);
		//Animation style var per = getper(index,length)
		$bar.css('width',per+'%')
		//Button selected control op.data.forEach((item,i)=>{
			if(i<=index){
				$tbar.find(".dot[data-index='"+i+"']").addClass('check');
			}else{
				$tbar.find(".dot[data-index='"+i+"']").removeClass('check');
			}
		})
	}
	function getper(i,l){
		var temp = 0;
		if(i!=0&&i!=l-1){
			temp = i/(l-1)*100//Calculate the approximate distance }else if(i==l-1){
			temp = 100
		}
		return temp;
	}
}

Explanation of ideas

What you need to do is very simple. Draw a timeline, mark the corresponding points, and then call the callback correctly when the corresponding event is triggered. The timeline is drawn just like that. Once the percentage is filled, there is nothing else. Then separate the points that will change the progress from the campus points. When the small dots are clicked, the current structure mark is changed, and then an event is triggered to execute the animation effect and the callback together.
Finished, rest

The above is the detailed content of the implementation code of the jQuery step progress axis plug-in. For more information about the jQuery step progress axis, please pay attention to other related articles on 123WORDPRESS.COM!

You may also be interested in:
  • Based on jquery step progress bar source code sharing
  • jQuery+ajax to upload pictures and display the upload progress function [with php background reception]
  • jQuery's manual drag control progress bar effect example [test available]
  • Simple usage of jQuery NProgress.js loading progress plug-in
  • jquery-file-upload file upload with progress bar effect
  • jQuery implements draggable progress bar example code
  • Implementation of jquery web page loading progress bar

<<:  MySQL 8.0.12 decompression version installation tutorial

>>:  MySQL 8.0.12 winx64 detailed installation tutorial

Recommend

Uninstalling MySQL database under Linux

How to uninstall MySQL database under Linux? The ...

Common HTML tag writing errors

We better start paying attention, because HTML Po...

How to set static IP for Ubuntu 18.04 Server

1. Background Netplan is a new command-line netwo...

Detailed explanation of the 14 common HTTP status codes returned by the server

HTTP Status Codes The status code is composed of ...

React+axios implements github search user function (sample code)

load Request Success Request failed Click cmd and...

Web page printing thin line table + page printing ultimate strategy

When I was printing for a client recently, he aske...

Vue.js front-end web page pop-up asynchronous behavior example analysis

Table of contents 1. Preface 2. Find two pop-up c...

Detailed explanation of several clever applications of position:sticky sticky positioning

Background: position: sticky is also called stick...

Detailed tutorial on configuring local yum source in CentOS8

The centos8 distribution is released through the ...

Detailed explanation of the points that need to be paid attention to in HTML standards that comply with W3C standards

XML/HTML CodeCopy content to clipboard <!DOCTY...

How to upgrade CentOS7 to CentOS8 (detailed steps)

This article uses a specific example to introduce...

In-depth explanation of MySQL common index and unique index

Scenario 1. Maintain a citizen system with a fiel...

WeChat applet development practical skills: data transmission and storage

Combining the various problems I encountered in m...

Detailed explanation of the EXPLAIN command and its usage in MySQL

1. Scenario description: My colleague taught me h...

Add and delete table information using javascript

Getting Started with JavaScript JavaScript is a l...