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

WeChat applet implements search function and jumps to search results page

Search Page: search.wxml page: <view class=&qu...

Example code for converting html table data to Json format

The javascript function for converting <table&g...

How to get the maximum or minimum value of a row in sql

Original data and target data Implement SQL state...

Detailed basic operations on data tables in MySQL database

Table of contents 1. View the tables in the curre...

Reference SVG images in CSS to support dynamic color switching implementation code

When we add an svg image to display, react prompt...

A brief analysis of Linux to check the firewall status and the status of the ports open to the outside world

1. Check the firewall status Check the firewall s...

Compatibility issues when inserting audio files in HTML and playing them in browsers

Let's talk about some problems I have encounte...

CSS and HTML and front-end technology layer diagram

Front-end technology layer (The picture is a bit e...

How to generate mysql primary key id (self-increment, unique and irregular)

Table of contents 1. Use the uuid function to gen...

Tutorial on disabling and enabling triggers in MySQL [Recommended]

When using MYSQL, triggers are often used, but so...

Solution for Tomcat to place configuration files externally

question When we are developing normally, if we w...

Summary of MySQL lock knowledge points

The concept of lock ①. Lock, in real life, is a t...

Test and solution for MySQL's large memory usage and high CPU usage

After the changes: innodb_buffer_pool_size=576M -...

How to write object and param to play flash in firefox

Copy code The code is as follows: <object clas...

Mysql5.7.17 winx64.zip decompression version installation and configuration graphic tutorial

1. Download mysql-5.7.17-winx64.zip; Link: https:...