jQuery网站用户引导插件

 查看演示  website  立即下载

使用方法

首先导入相关JS和CSS

<script src="http://www.jq22.com/jquery/jquery-1.10.2.js"></script>
<!-- EnjoyHint JS and CSS files -->
<script src="enjoyhint/enjoyhint.min.js"></script>
<link href="enjoyhint/enjoyhint.css" rel="stylesheet">
<link href="enjoyhint/enjoyhint.css" rel="stylesheet">
<!-- Bootstrap -->
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="css/bootstrap.min.css">
<!-- Optional theme -->
<link rel="stylesheet" href="css/bootstrap-theme.min.css">
<!-- Latest compiled and minified JavaScript -->
<script src="bootstrap.min.js"></script>
<!-- My style -->
<link rel="stylesheet" href="style.css">

然后在js文件里面创建EnjoyHint对象：

var enjoyhint_instance = new EnjoyHint({});

指定蒙层弹出的位置，及内容：

var enjoyhint_instance = new EnjoyHint({});

var enjoyhint_script_steps = [
  {
  	'next .navbar-brand' : '欢迎来到我的搜索！让我来引导你了解它的特点。',
	'skipButton' : {className: "mySkip", text: "不了!"},
  	'nextButton' : {className: "myNext", text: "可以"}
  	
  },
  {
  	'key #mySearchButton' : "请输入关键词搜索，并按“Enter”进去下一步",
  	'keyCode' : 13
  },
  {
  	'click .btn' : '点击这个按钮，切换下拉菜单，进入下一步'
  },
  {
  	'next .about' : '检查可用的所有功能的列表',
  	'shape': 'circle'
  },
  {
  	'next .contact' : '您的反馈将不胜感激。',
  	'shape': 'circle',
  	'radius': 70,
  	'showSkip' : false,
  	'nextButton' : {className: "myNext", text: "知道了!"}
  }

];

enjoyhint_instance.set(enjoyhint_script_steps);
enjoyhint_instance.run();

然后将内容set进EnjoyHint对象：

enjoyhint_instance.set(enjoyhint_script_steps);

最后不要忘了使用EnjoyHint的run()方法：

enjoyhint_instance.run();

PREVIOUS:
NEXT:
jQuery移动端日期选择插件kinerDatePicker.js
jQuery大转盘插件