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

Basic usage of @Font-face and how to make it compatible with all browsers

@Font-face basic introduction: @font-face is a CSS...

How to implement communication between Docker containers

Scenario: A laradock development environment (php...

JavaScript to achieve the effect of tab bar switching

Tab bar: Click different tabs to display differen...

Solution to the problem of insufficient storage resource pool of Docker server

Table of contents 1. Problem Description 2. Probl...

The MySql 8.0.16 version installation prompts that "UTF8B4" is used instead of "UTF8B3"

When installing in MySQL 8.0.16, some errors may ...

How to implement hot deployment and hot start in Eclipse/tomcat

1. Hot deployment: It means redeploying the entir...

Solution to Linux QT Kit missing and Version empty problem

Currently encountering such a problem My situatio...

How to implement concurrency control in JavaScript

Table of contents 1. Introduction to Concurrency ...

Detailed steps to download Tomcat and put it on Linux

If you have just come into contact with Linux, th...

Vue.js Textbox with Dropdown component

A Textbox with Dropdown allows users to select an...

Vue song progress bar sample code

Note that this is not a project created by vue-cl...

Similar to HTML tags: strong and em, q, cite, blockquote

There are some tags in XHTML that have similar fu...

How to optimize MySQL group by statement

In MySQL, create a new table with three fields, i...

Example code for implementing auto-increment sequence in mysql

1. Create a sequence table CREATE TABLE `sequence...

MySQL solution for creating horizontal histogram

Preface Histogram is a basic statistical informat...