jquery向导提示操作插件js代码

版权：原创更新时间：1年以上

[该文章底部包含文件资源,可根据自己情况,决定是否下载资源使用,时间>金钱,如有需要,立即查看资源]

以下是 jquery向导提示操作插件js代码的示例演示效果:

当前平台(PC电脑)

平台:

整屏预览

部分效果截图:

HTML代码(index.html):

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jquery向导提示操作插件</title>
<!-- Attach our CSS -->
<link rel="stylesheet" href="joyride-1.0.5.css">
<link rel="stylesheet" href="demo-style.css">
<link rel="stylesheet" href="mobile.css">
<style>

a{text-decoration:none;outline:none; color:#666666;}
a:hover{text-decoration:none}
img{border:0}
ul{list-style:none;margin:0;}
h2{
color:#6CBD45;
font-size:14px;
font-weight:bold;
padding-bottom:0.5em;
margin:0;
}

h3{
font-size:13px;
font-weight:bold;


}
#meun{color:#fff; padding-left:10px;}
#meun img{ float:left;}
#submeun{ margin-left:70px; float:left;}
#submeun li{ text-align:center;  margin-right:10px; float:left;  display:inline;}
#submeun li a{ color:#fff;height:50px; line-height:50px;  font-size:14px; font-weight:bold; text-align:center;  padding-left:15px; padding-right:15px;display:block;}
#submeun li.cur{ text-align:center; background:#82ce18; margin-right:10px;float:left;  display:inline;}
#top{
background-color:#000;
margin: 0em 0 10px 0em;

border-style:solid; border-width:1px; border-color:#E5E5E5;
height:50px;
line-height:50px;
}
h2.subtitle{
font-size:13px;
float:right;
color:#6CBD45;
margin:0 10px;
text-align:right;
}

h1.title{
height:50px;    
font-size:12px;
background:url(logo.png) no-repeat;

}
h1.title a:link,h1.title a:visited,h1.title a:hover{
color:#000;
text-decoration:none;
}
</style>
</head>
<body>
<div class="container">
<div class="row">
<div class="twelve columns">
<hr>
</div>
</div>

<br><br>

<div class="row">
<div class="six columns">
<h2 id="numero1">向导：第一步!</h2>
<p>Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Curabitur blandit tempus porttitor. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Aenean lacinia bibendum nulla sed consectetur. Cras mattis consectetur purus sit amet fermentum. Cras mattis consectetur purus sit amet fermentum.</p>
</div>
<div class="six columns">

</div>
</div>

<br><br><br><br>

<div class="row">
<div class="twelve columns">
<h3 id="numero3">向导：第三步!</h3>
<p>Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
</div>
</div>

<br><br><br><br>

<div class="row">
<div class="four columns">

</div>
<div class="eight columns">
<h3 id="numero2">向导：第二步</h3>
<p>Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Curabitur blandit tempus porttitor. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Aenean lacinia bibendum nulla sed consectetur. Cras mattis consectetur purus sit amet fermentum. Cras mattis consectetur purus sit amet fermentum.</p>
</div>
</div>

<br><br><br><br>

<div class="row">
<div class="six columns">
<h4 id="numero5">结束</h4>
<p>Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Curabitur blandit tempus porttitor. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Aenean lacinia bibendum nulla sed consectetur. Cras mattis consectetur purus sit amet fermentum. Cras mattis consectetur purus sit amet fermentum.</p>
</div>
<div class="six columns">

</div>
</div>
<br><br><br><br>

<div style="float:right">It even works <span id="numero4">向导：第四步.</span></div>
</div>
<!-- Tip Content -->
<ol id="joyRideTipContent">
<li data-id="numero1" data-text="下一步" class="custom">
<h2>Stop #1</h2>
<p>You can control all the details for you tour stop. Any valid HTML will work inside of Joyride.</p>
</li>
<li data-id="numero2" data-text="下一步" data-options="tipLocation:top;tipAnimation:fade">
<h2>Stop #2</h2>
<p>Get the details right by styling Joyride with a custom stylesheet!</p>
</li>
<li data-id="numero3" data-text="下一步" data-options="tipLocation:top left;">
<h2>Stop #3</h2>
<p>It works right aligned.</p>
</li>
<li data-id="numero4" data-text="下一步">
<h2>Stop #4</h2>
<p>It works when tips run off the viewport.</p>
</li>
<li data-id="numero5" data-text="结束">
<h2>Stop #5</h2>
<p>Now what are you waiting for? Add this to your projects and get the most out of your apps!</p>
</li>
</ol>

<!-- Run the plugin -->
<script src="jquery.min.js" type="text/javascript"></script>
<script type="text/javascript" src="jquery.cookie.js"></script>
<script type="text/javascript" src="modernizr.mq.js"></script>
<script type="text/javascript" src="jquery.joyride-1.0.5.js"></script>
<script type="text/javascript">
$(window).load(function() {
$(this).joyride();
});
</script>
<br>
</body>
</html>

JS代码(modernizr.mq.js):

/* Modernizr 2.5.3 (Custom Build) | MIT & BSD * Build:http://modernizr.com/download/#-mq-teststyles */
;
	window.Modernizr=function(a,b,c){
	function v(a){
	i.cssText=a}
function w(a,b){
	return v(prefixes.join(a+";
	")+(b||""))}
function x(a,b){
	return typeof a===b}
function y(a,b){
	return!!~(""+a).indexOf(b)}
function z(a,b,d){
	for(var e in a){
	var f=b[a[e]];
	if(f!==c)return d===!1?a[e]:x(f,"function")?f.bind(d||b):f}
return!1}
var d="2.5.3",e={
}
,f=b.documentElement,g="modernizr",h=b.createElement(g),i=h.style,j,k={
}
.toString,l={
}
,m={
}
,n={
}
,o=[],p=o.slice,q,r=function(a,c,d,e){
	var h,i,j,k=b.createElement("div"),l=b.body,m=l?l:b.createElement("body");
	if(parseInt(d,10))while(d--)j=b.createElement("div"),j.id=e?e[d]:g+(d+1),k.appendChild(j);
	return h=["&#173;
	","<style>",a,"</style>"].join(""),k.id=g,(l?k:m).innerHTML+=h,m.appendChild(k),l||(m.style.background="",f.appendChild(m)),i=c(k,a),l?k.parentNode.removeChild(k):m.parentNode.removeChild(m),!!i}
,s=function(b){
	var c=a.matchMedia||a.msMatchMedia;
	if(c)return c(b).matches;
	var d;
	return r("@media "+b+"{
	#"+g+"{
	position:absolute;
}
}
",function(b){
	d=(a.getComputedStyle?getComputedStyle(b,null):b.currentStyle)["position"]=="absolute"}
),d}
,t={
}
.hasOwnProperty,u;
	!x(t,"undefined")&&!x(t.call,"undefined")?u=function(a,b){
	return t.call(a,b)}
:u=function(a,b){
	return b in a&&x(a.constructor.prototype[b],"undefined")}
,Function.prototype.bind||(Function.prototype.bind=function(b){
	var c=this;
	if(typeof c!="function")throw new TypeError;
	var d=p.call(arguments,1),e=function(){
	if(this instanceof e){
	var a=function(){
}
;
	a.prototype=c.prototype;
	var f=new a,g=c.apply(f,d.concat(p.call(arguments)));
	return Object(g)===g?g:f}
return c.apply(b,d.concat(p.call(arguments)))}
;
	return e}
);
	for(var A in l)u(l,A)&&(q=A.toLowerCase(),e[q]=l[A](),o.push((e[q]?"":"no-")+q));
	return v(""),h=j=null,e._version=d,e.mq=s,e.testStyles=r,e}
(this,this.document);

CSS代码(mobile.css):

/* --------------------------------------------------::Typography-------------------------------------------------- */
@media handheld,only screen and (max-width:767px){h1{font-size:32px;font-size:3.2rem;line-height:1.3;}
h2{font-size:28px;font-size:2.8rem;line-height:1.3;}
h3{font-size:21px;font-size:2.1rem;line-height:1.3;}
h4{font-size:18px;font-size:1.8rem;line-height:1.2;}
h5{font-size:16px;font-size:1.6rem;line-height:1.2;}
h6{font-size:15px;font-size:1.5rem;line-height:1.2;}
body,p{font-size:15px;font-size:1.5rem;line-height:1.4;}
}
/* --------------------------------------------------::Grid-------------------------------------------------- */
/* Mobile */
@media only screen and (max-width:767px){body{-webkit-text-size-adjust:none;-ms-text-size-adjust:none;width:100%;min-width:0;margin-left:0;margin-right:0;padding-left:0;padding-right:0;}
.container{min-width:0;margin-left:0;margin-right:0;}
.row{width:100%;min-width:0;margin-left:0;margin-right:0;}
.row .row .column,.row .row .columns{padding:0;}
.column,.columns{width:auto !important;float:none;margin-left:0;margin-right:0;}
.column:last-child,.columns:last-child{margin-right:0;float:none;}
[class*="column"] + [class*="column"]:last-child{float:none;}
[class*="column"]:before,[class*="column"]:after{content:"";display:table;}
[class*="column"]:after{clear:both;}
.offset-by-one,.offset-by-two,.offset-by-three,.offset-by-four,.offset-by-five,.offset-by-six,.offset-by-seven,.offset-by-eight,.offset-by-nine,.offset-by-ten,.offset-by-eleven,.centered{margin-left:0 !important;}
.push-two,.push-three,.push-four,.push-five,.push-six,.push-seven,.push-eight,.push-nine,.push-ten{left:auto;}
.pull-two,.pull-three,.pull-four,.pull-five,.pull-six,.pull-seven,.pull-eight,.pull-nine,.pull-ten{right:auto;}
/* Mobile 4-column Grid */
.row .phone-one:first-child,.row .phone-two:first-child,.row .phone-three:first-child,.row .phone-four:first-child{margin-left:0;}
.row .phone-one:last-child,.row .phone-two:last-child,.row .phone-three:last-child,.row .phone-four:last-child{float:right;}
.row .phone-one,.row .phone-two,.row .phone-three,.row .phone-four{margin-left:4.4%;float:left;min-height:1px;position:relative;padding:0;}
.row .phone-one{width:21.68% !important;}
.row .phone-two{width:47.8% !important;}
.row .phone-three{width:73.9% !important;}
.row .phone-four{width:100% !important;}
.row .push-one-phone{left:26.08%;}
.row .push-two-phone{left:52.2%}
.row .push-three-phone{left:78.3%}
.row .pull-one-phone{right:26.08%}
.row .pull-two-phone{right:52.2%}
.row .pull-three-phone{right:78.3%;}
}
/* --------------------------------------------------::Block Grids-------------------------------------------------- */
@media only screen and (max-width:767px){.block-grid.mobile{margin-left:0;}
.block-grid.mobile > li{float:none;width:100%;margin-left:0;}
}
/* --------------------------------------------------::Mobile Visibility Affordances---------------------------------------------------*/
.show-on-phones{display:none !important;}
.show-on-tablets{display:none !important;}
.show-on-desktops{display:block !important;}
.hide-on-phones{display:block !important;}
.hide-on-tablets{display:block !important;}
.hide-on-desktops{display:none !important;}
/* Modernizr-enabled tablet targeting */
@media only screen and (max-width:1280px) and (min-width:768px){.touch .hide-on-phones{display:block !important;}
.touch .hide-on-tablets{display:none !important;}
.touch .hide-on-desktops{display:block !important;}
.touch .show-on-phones{display:none !important;}
.touch .show-on-tablets{display:block !important;}
.touch .show-on-desktops{display:none !important;}
}
@media only screen and (max-width:767px){.hide-on-phones{display:none !important;}
.hide-on-tablets{display:block !important;}
.hide-on-desktops{display:block !important;}
.show-on-phones{display:block !important;}
.show-on-tablets{display:none !important;}
.show-on-desktops{display:none !important;}
}
/* Specific overrides for elements that require something other than display:block */
table.show-on-desktops{display:table !important;}
table.hide-on-phones{display:table !important;}
table.hide-on-tablets{display:table !important;}
@media only screen and (max-width:1280px) and (min-width:768px){.touch table.hide-on-phones{display:table !important;}
.touch table.hide-on-desktops{display:table !important;}
.touch table.show-on-tablets{display:table !important;}
}
@media only screen and (max-width:767px){table.hide-on-tablets{display:table !important;}
table.hide-on-desktops{display:table !important;}
table.show-on-phones{display:table !important;}
}
/* --------------------------------------------------::Forms---------------------------------------------------*/
@media only screen and (max-width:767px){div.form-field input,div.form-field input.small,div.form-field input.medium,div.form-field input.large,div.form-field input.oversize,input.input-text,input.input-text.oversize,textarea,form.nice div.form-field input,form.nice div.form-field input.oversize,form.nice input.input-text,form.nice input.input-text.oversize,form.nice textarea{display:block;width:100%;padding:6px 2% 4px;font-size:18px;}
form.nice div.form-field input,form.nice div.form-field input.oversize,form.nice input.input-text,form.nice input.input-text.oversize,form.nice textarea{-webkit-border-radius:2px;-moz-border-radius:2px;border-radius:2px;}
form.nice div.form-field.error small,form.nice small.error{padding:6px 2%;display:block;}
form.nice div.form-field.error .small + small,form.nice .small + .error{width:auto;}
form.nice div.form-field.error .medium + small,form.nice .medium + .error{width:auto;}
form.nice div.form-field.error .large + small,form.nice .large + .error{width:auto;}
form.nice div.form-field.error .expand + small,form.nice .expand + .error{width:auto;}
}
/* --------------------------------------------------::UI---------------------------------------------------*/
/* Buttons */
@media only screen and (max-width:767px){.button{display:block;}
button.button,input[type="submit"].button{width:100%;padding-left:0;padding-right:0;margin-bottom:5px;}
}
/* Tabs */
@media only screen and (max-width:767px){dl.tabs.mobile,dl.nice.tabs.mobile{width:auto;margin:20px -20px 40px;height:auto;}
dl.tabs.mobile dt,dl.tabs.mobile dd,dl.nice.tabs.mobile dt,dl.nice.tabs.mobile dd{float:none;height:auto;}
dl.tabs.mobile dd a{display:block;width:auto;height:auto;padding:18px 20px;line-height:1;border:solid 0 #ccc;border-width:1px 0 0;margin:0;color:#555;background:#eee;font-size:15px;font-size:1.5rem;}
dl.tabs.mobile dd a.active{height:auto;margin:0;border-width:1px 0 0;}
.nice.tabs.mobile{border-bottom:solid 1px #ccc;height:auto;}
.nice.tabs.mobile dd a{padding:18px 20px;border:none;border-left:none;border-right:none;border-top:1px solid #ccc;background:#fff;}
.nice.tabs.mobile dd a.active{border:none;background:#00a6fc;color:#fff;margin:0;position:static;top:0;height:auto;}
.nice.tabs.mobile dd:first-child a.active{margin:0;}
dl.contained.mobile,dl.nice.contained.mobile{margin-bottom:0;}
dl.contained.tabs.mobile dd a{padding:18px 20px;}
dl.nice.contained.tabs.mobile dd a{padding:18px 20px;}
dl.tabs.mobile + ul.contained{margin-left:-20px;margin-right:-20px;border-width:0 0 1px 0;}
}
/* Nav Bar */
@media only screen and (max-width:767px){.nav-bar{height:auto;}
.nav-bar>li{float:none;display:block;border-right:none;}
.nav-bar>li>a.main{text-align:left;border-top:1px solid #ddd;border-right:none;}
.nav-bar>li:first-child>a.main{border-top:none;}
.nav-bar>li.has-flyout>a.flyout-toggle{position:absolute;right:0;top:0;padding:22px;z-index:2;border-left:1px dashed #eee;display:block;}
.nav-bar>li.has-flyout>a.flyout-toggle span{content:"";width:0;height:0;border-left:4px solid transparent;border-right:4px solid transparent;border-top:4px solid #2a85e8;display:block;}
.nav-bar>li.has-flyout>a.flyout-toggle:hover span{border-top-color:#141414;}
.flyout{position:relative;width:auto;top:auto;margin-right:-2px;border-width:1px 1px 0 1px;}
.flyout.right{float:none;right:auto;left:-1px;}
.flyout.small,.flyout.large{width:auto;}
.flyout p:last-child{margin-bottom:18px;}
}
/* Tooltips */
@media only screen and (max-width:767px){.tooltip{font-size:14px;font-size:1.4rem;line-height:1.4;padding:7px 10px 9px 10px;}
.tooltip > .nub,.tooltip.top > .nub,.tooltip.left > .nub,.tooltip.right > .nub{border-color:transparent transparent rgb(0,0,0) transparent;border-color:transparent transparent rgba(0,0,0,0.85) transparent;top:-12px;left:10px;}
}
/* Video */
@media only screen and (max-device-width:800px),only screen and (device-width:1024px) and (device-height:600px),only screen and (width:1280px) and (orientation:landscape),only screen and (device-width:800px),only screen and (max-width:767px){.flex-video{padding-top:0;}
}

附件:下载该文件资源,减少时间成本(增值服务)