JQuery插件实现网页首次登录提示/页面功能介绍引导/教程式引导/下一步介绍功能

最新推荐文章于 2024-07-22 11:19:47 发布

chenkai6529

最新推荐文章于 2024-07-22 11:19:47 发布

阅读量4.8k

点赞数

文章标签：前端 jquery插件页面引导

本文链接：https://blog.csdn.net/chenkai6529/article/details/38873181

版权

本文介绍如何利用JQuery插件创建一个网页首次登录的提示功能，提供页面功能介绍和教程式引导。文章提供了调用示例，包括引入相关文件和实例化对象的方法，帮助用户更好地理解和使用页面各项功能。

摘要由CSDN通过智能技术生成

因某个单独网页中的功能较多，或者按钮提示较多，为方便用户更了解页面功能，在网上找了一个类似安装教程下一步下一步的代码。对所找到的代码进行了封装，更方便调用和扩展。目前可以配置的选项只有showCloseButton，值为布尔类型。

先看效果图：

调用时，需引入jquery文件，WebPageGuide.js，WebPageGuide.css。调用时先实例化一个WebPageGuide对象，然后使用其newGuidStep进行调用，方法中第一个参数为提示框针对的页面标签，即指向页面中想要介绍功能的标签。第二个参数是标题，第三个参数是内容。
，网页代码以及调用的方式：

<!DOCTYPE HTML>
<html>
<head>
	<meta charset="utf-8">
	<title>无标题文档</title>
    <link href="WebPageGuide.css" rel="stylesheet" />

	<script type="text/javascript" src="jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="WebPageGuide.js"></script>
<script type="text/javascript">
$(function(){
	var steplist = $.WebPageGuide({showCloseButton:true});
	steplist.newGuidStep("#target","这是标题1啊这是标题1啊这是标题1啊这是标题1啊","更嫩诶诶额更嫩诶诶额更嫩诶诶额更嫩诶诶额嫩诶诶额更嫩诶诶额更嫩诶诶额嫩诶诶额更嫩诶诶额更嫩诶诶额嫩诶诶额更嫩诶诶额更嫩诶诶额更嫩诶诶额");
	steplist.newGuidStep("#target2","这是标题2啊","更嫩诶诶额");
	steplist.newGuidStep("#target3","这是标题3啊","更嫩诶诶额");
    steplist.newGuidStep("#target4","这是标题4啊","更嫩诶诶额");
    steplist.newGuidStep("#target5","这是标题5啊","更嫩诶诶额");
    steplist.newGuidStep("#target6","这是标题6啊","更嫩诶诶额");
	steplist.startGuide();
});
</script>
</head>

<body style="height:2500px;">
		<div style="width:200px;height:200px;background-color:blue;margin:0px 0px 0px 200px;" id="target"></div>
	   <div style="width:200px;height:200px;background-color:red;position:absolute;left:20px;top:500px" id="target2"></div>
       <div style="width:200px;height:200px;background-color:yellow;position:absolute;left:20px;top:1700px" id="target3"></div>
       <div style="width:200px;height:200px;background-color:green;position:absolute;right:20px;top:700px" id="target4"></div>
       <div style="width:20