ツアーを使用して Web サイトをステップバイステップでガイドします - アマチュアgrass_html/css

ホームページ

ウェブフロントエンド

htmlチュートリアル

ツアーを使用して Web サイトをステップバイステップでガイドします - アマチュアgrass_html/css_WEB-ITnose

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

Jun 21, 2016 am 08:55 AM

注意していれば、一部の Web サイトでは、アップグレードまたは登録後に段階的なガイダンスが提供されることがわかります。ウェブサイトの使い方をご案内します。最も一般的なのはおそらく Alipay です。では、Alipay はどのようにしてそのような機能を実現しているのでしょうか?今日はそれを明らかにするブートストラップツアープラグインを紹介します。実行時の効果は次のとおりです:

コードは次のとおりです:

<!DOCTYPE html><html><head>	<meta charset="UTF-8">	<title>使用tour对网站进行分步引导</title>	<link href="http://cdn.gbtags.com/bootstrap-tour/0.9.0/css/bootstrap-tour-standalone.min.css" rel="stylesheet">	<script src="http://cdn.gbtags.com/jquery/1.11.1/jquery.min.js"></script>	<script src="http://cdn.gbtags.com/bootstrap-tour/0.9.0/js/bootstrap-tour-standalone.js"></script>	<style type="text/css">		body{ 			background: #f5faff;		}		.demo_con{			width: 960px;			margin:40px auto 0;		}		.button{			width: 140px;			line-height: 38px;			text-align: center;			font-weight: bold;			color: #fff;			text-shadow:1px 1px 1px #333;			border-radius: 5px;			margin:0 20px 20px 0;			position: relative;			overflow: hidden;		}		.button:nth-child(5n){			margin-right: 0;		}		.button.gray{			color: #8c96a0;			text-shadow:1px 1px 1px #fff;			border:1px solid #dce1e6;			box-shadow: 0 1px 2px #fff inset,0 -1px 0 #a8abae inset;			background: -webkit-linear-gradient(top,#f2f3f7,#e4e8ec);			background: -moz-linear-gradient(top,#f2f3f7,#e4e8ec);			background: linear-gradient(top,#f2f3f7,#e4e8ec);		}		.button.black{			border:1px solid #333;			box-shadow: 0 1px 2px #8b8b8b inset,0 -1px 0 #3d3d3d inset,0 -2px 3px #8b8b8b inset;			background: -webkit-linear-gradient(top,#656565,#4c4c4c);			background: -moz-linear-gradient(top,#656565,#4a4a4a);			background: linear-gradient(top,#656565,#4a4a4a);		}		.button.red{			border:1px solid #b42323;			box-shadow: 0 1px 2px #e99494 inset,0 -1px 0 #954b4b inset,0 -2px 3px #e99494 inset;			background: -webkit-linear-gradient(top,#d53939,#b92929);			background: -moz-linear-gradient(top,#d53939,#b92929);			background: linear-gradient(top,#d53939,#b92929);		}		.button.yellow{			border:1px solid #d2a000;			box-shadow: 0 1px 2px #fedd71 inset,0 -1px 0 #a38b39 inset,0 -2px 3px #fedd71 inset;			background: -webkit-linear-gradient(top,#fece34,#d8a605);			background: -moz-linear-gradient(top,#fece34,#d8a605);			background: linear-gradient(top,#fece34,#d8a605);		}		.button.green{			border:1px solid #64c878;			box-shadow: 0 1px 2px #b9ecc4 inset,0 -1px 0 #6c9f76 inset,0 -2px 3px #b9ecc4 inset;			background: -webkit-linear-gradient(top,#90dfa2,#84d494);			background: -moz-linear-gradient(top,#90dfa2,#84d494);			background: linear-gradient(top,#90dfa2,#84d494);		}		.button.blue{			border:1px solid #1e7db9;			box-shadow: 0 1px 2px #8fcaee inset,0 -1px 0 #497897 inset,0 -2px 3px #8fcaee inset;			background: -webkit-linear-gradient(top,#42a4e0,#2e88c0);			background: -moz-linear-gradient(top,#42a4e0,#2e88c0);			background: linear-gradient(top,#42a4e0,#2e88c0);		}	</style></head><body>	<div class="page">		<section class="demo">			<div class="demo_con">			 				<button type="button" class="button gray" id="btn0">第1步</button>				<button type="button" class="button black" id="btn1">第2步</button>				<button type="button" class="button red" id="btn2">第3步</button>				<button type="button" class="button yellow" id="btn3">第4步</button>				<button type="button" class="button green" id="btn4">第5步</button>				<button type="button" class="button blue" id="btn5">第6步</button>			 				<button type="button" class="button gray" id="btn6">第7步</button>				<button type="button" class="button black" id="btn7">第8步</button>				<button type="button" class="button red"  id="btn8">第9步</button>				<button type="button" class="button yellow"  id="btn9">第10步</button>				<button type="button" class="button green"  id="btn10">第11步</button>				<button type="button" class="button blue"  id="btn11">第12步</button>			 				<button type="button" class="button gray"  id="btn12">第13步</button>				<button type="button" class="button black"  id="btn13">第14步</button>				<button type="button" class="button red"  id="btn14">第15步</button>				<button type="button" class="button yellow"  id="btn15">第16步</button>				<button type="button" class="button green"  id="btn16">第17步</button>				<button type="button" class="button blue"  id="btn17">第18步</button>			 				<button type="button" class="button gray">第19步</button>				<button type="button" class="button black">第20步</button>				<button type="button" class="button red">第21步</button>				<button type="button" class="button yellow">第22步</button>				<button type="button" class="button green">第23步</button>				<button type="button" class="button blue">第24步</button>				<button type="button" class="button gray">第25步</button>			</div>			</section>	</div>    <script type="text/javascript">	    $(document).ready(function(){				    	var tour = new Tour({	    		storage: false,//可选参数：window.localStorage(缺省), window.sessionStorage ，false　或者自定义obj	    		debug:false,//是否调试,默认为false				steps: [					{element: "#btn0",title: "提示0",content: "内容0"},					{element: "#btn1",title: "提示1",content: "内容1"},					{element: "#btn2",title: "提示2",content: "内容2"},					{element: "#btn3",title: "提示3",content: "内容3"},					{element: "#btn4",title: "提示4",content: "内容4"},					{element: "#btn5",title: "提示5",content: "内容5"},					{element: "#btn6",title: "提示6",content: "内容6"},					{element: "#btn7",title: "提示7",content: "内容7"},					{element: "#btn8",title: "提示8",content: "内容8"},					{element: "#btn9",title: "提示9",content: "内容9"},					{element: "#btn10",title: "提示10",content: "内容10"},					{element: "#btn11",title: "提示11",content: "内容11"},					{element: "#btn12",title: "提示12",content: "内容12"},					{element: "#btn13",title: "提示13",content: "内容13"},					{element: "#btn14",title: "提示14",content: "内容14"},					{element: "#btn15",title: "提示15",content: "内容15"},					{element: "#btn16",title: "提示16",content: "内容16"},					{element: "#btn17",title: "提示17",content: "内容17"},					{element: "#btn18",title: "提示18",content: "内容18"},					{element: "#btn19",title: "提示19",content: "内容19"},					{element: "#btn20",title: "提示20",content: "内容20"},					{element: "#btn21",title: "提示21",content: "内容21"},					{element: "#btn22",title: "提示22",content: "内容22"},					{element: "#btn23",title: "提示23",content: "内容23"},					{element: "#btn24",title: "提示24",content: "内容24"},					{element: "#btn25",title: "提示25",content: "内容25"}				],			  	//操作模板			  	template:"<div class='popover'><div class='arrow'></div><h3 class='popover-title'></h3><div class='popover-content'></div><div class='popover-navigation'>" +			  	"<div class='btn-group'><button class='btn btn-sm btn-default' data-role='prev'>&laquo; 上一步</button><button class='btn btn-sm btn-default' data-role='next'>下一步 &raquo;</button>" +			  	"<button class='btn btn-sm btn-default' data-role='pause-resume' data-pause-text='Pause' data-resume-text='Resume'>暂停</button></div><button class='btn btn-sm btn-default' data-role='end'>知道了</button></div></div>"			});	    	//打印出对象，可以设置更多属性，包括键盘控制，箭头指向等	    	console.log(tour);			tour.init();			tour.start();			//分步引导框架还有很多，如：TourTip、Intro.js、aSimpleTour、pageguide.js、Joyride、WEBSITE TOUR、Bootstro.js、Bootstrap Tour、、jQuery Site Tour、jQuery TourBus、Trip.js、Crumble等	    });    </script></body></html>

ログイン後にコピー

このウェブサイトの声明

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。