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

Example steps for using AntV X6 with Vue.js

Table of contents 0x0 Introduction 0x1 Installati...

Example analysis of the page splitting principle of MySQL clustered index

This article uses an example to illustrate the pa...

Vue project configures webpack-obfuscator to implement code encryption and obfuscation

background The company code is provided to third ...

The impact of limit on query performance in MySQL

I. Introduction First, let me explain the version...

VMware15.5 installation Ubuntu20.04 graphic tutorial

1. Preparation before installation 1. Download th...

MySQL 5.0.96 for Windows x86 32-bit green simplified version installation tutorial

MySQL 5.0 has become a classic because of its few...

JavaScript to implement input box content prompt and hidden function

Sometimes the input box is small, and you want to...

Detailed explanation of the binlog log analysis tool for monitoring MySQL: Canal

Canal is an open source project under Alibaba, de...

Mini Program to implement Token generation and verification

Table of contents process Demo Mini Program Backe...

Detailed explanation of this reference and custom properties in JavaScript

Table of contents 1. this keyword 2. Custom attri...

Detailed explanation of how Node.js middleware works

Table of contents What is Express middleware? Req...

How to install setup.py program in linux

First execute the command: [root@mini61 setuptool...

A record of pitfalls in JS regular matching

I recently discovered a pitfall in regular expres...

How to create scheduled tasks using crond tool in Linux

Preface Crond is a scheduled execution tool under...

Correct way to load fonts in Vue.js

Table of contents Declare fonts with font-face co...