一步步介绍网页之--> intro.js的使用

<a href="javascript:void(0);" onclick="createClass();">　　<button class="set_class" style="cursor:pointer;">创建课程</button></a><button class="btn" style="margin:0px;cursor:pointer;" onclick="authorize();" id="Auth">授权</button>

function Project_intro(){ ???//这个变量可以用来存取版本号， 系统更新时候改变相应值 ???var cur_val = 1; ??????//判断函数所接收变量的长度 ??????if (arguments.length ==0) ??????{ ???????//每个页面设置不同的cookie变量名称，不可以重复，有新版本时，更新cur_val ???????//这里模拟很多网站有新版本更新时才出现一次引导页， 第二次进入进不再出现， 这里有COOKIE来判断 ???????if ($.cookie(‘intro_cookie_index‘) == cur_val) ????????{ ???????????return; ????????} ??????} ??????introJs().setOptions({prevLabel:"上一步",nextLabel:"下一步",skipLabel:"关闭",doneLabel:"结束", ???exitOnOverlayClick: false,// 是否允许点击空白处退出，默认true：允许showStepNumbers: true,// 是否显示说明的数据步骤 ?默认true:显示 ???????//对应的数组，顺序出现每一步引导提示 ???????steps: [{ ???????????????//第一步引导 ???????????????//这个属性类似于jquery的选择器， 可以通过jquery选择器的方式来选择你需要选中的对象进行指引 ???????????????element: ‘#indexLogo‘, ???????????????//这里是每个引导框具体的文字内容，中间可以编写HTML代码 ???????????????intro: ‘<div class="intro_top_style">这里创建课程</div>‘, ???????????????//这里可以规定引导框相对于选中对象出现的位置 top,bottom,left,right ???????????????position: ‘right‘ ???????????}, ???????????{ ???????????????//第二步引导 ???????????????element: ‘#Auth‘, ???????????????intro: ‘<div class="intro_top_style">授权</div>‘, ???????????????position: ‘button‘ ???????????} ???????] ???}).oncomplete(function(){ ???????//点击跳过按钮后执行的事件(这里保存对应的版本号到cookie,并且设置有效期为30天） ???????$.cookie(‘intro_cookie_index‘,cur_val,{expires:30}); ???}).onexit(function(){ ???????//点击结束按钮后， 执行的事件 ??????$.cookie(‘intro_cookie_index‘,cur_val,{expires:30}); ???}) .start(); ???????}