intro.js 页面引导简单用法 分享
2013-08-06 00:00
435 查看
intro.js demo http://usablica.github.io/intro.js/
第一步:在页面中引入 intro.js 和 introjs.css
第二步:选择你需要添加指引的区块,对区块添加唯一的id或者样式
第三步:写一个具体的js函数,完成引导功能
第一步:在页面中引入 intro.js 和 introjs.css
第二步:选择你需要添加指引的区块,对区块添加唯一的id或者样式
第三步:写一个具体的js函数,完成引导功能
<html> <head> <script src="@url.content("~/content/intro.js")" type="text/javascript"></script> <link href="@url.content("~/content/introjs.css")" rel="stylesheet" type="text/css" /> <script type="text/javascript"> $(function(){ intro(); }); //每次页面加载时调用即可 function intro(){ //这个变量可以用来存取版本号, 系统更新时候改变相应值 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:"结束", //对应的数组,顺序出现每一步引导提示 steps: [ { //第一步引导 //这个属性类似于jquery的选择器, 可以通过jquery选择器的方式来选择你需要选中的对象进行指引 element: "#div1", //这里是每个引导框具体的文字内容,中间可以编写html代码 intro: "这是第一个div~~", //这里可以规定引导框相对于选中对象出现的位置 top,bottom,left,right position: "right" }, { //第二步引导 element: "#div2", intro: "这是第二个div~~", position: "left" }, { //第三步引导 element: ".div3", intro: "<a href="www.cnblogs.com">这是第三个div</a>~~", position: "bottom" } ] }).oncomplete(function(){ //点击跳过按钮后执行的事件(这里保存对应的版本号到cookie,并且设置有效期为30天) $.cookie("intro_cookie_index",cur_val,{expires:30}); }).onexit(function(){ //点击结束按钮后, 执行的事件 $.cookie("intro_cookie_index",cur_val,{expires:30}); }) .start(); } </script> </head> <body> <div id="div1">这里出现第一步引导</div> <div id="div2">这里出现第二步引导</div> <div class="div3">这里出现第三步引导</div> </body> </html>
相关文章推荐
- intro.js 页面引导简单用法 分享
- intro.js 页面引导简单用法
- intro.js 页面引导简单用法
- 学习笔记之Intro.js轻松搞定页面引导流程
- 网站引导页插件intro.js 的用法
- Intro.js轻松搞定页面引导流程
- 网站引导页插件intro.js 的用法
- js中escape的用法----前端页面简单加密
- 网站页面引导操作 - intro.js
- JS 实现简单的页面局部打印例子
- JS实现微信里判断页面是否被分享成功的方法
- 用c#开发微信 (10) JS-SDK 基本用法- 分享接口“发送到朋友”
- 利用JS跨域做一个简单的页面访问统计系统
- require.js与bootstrap结合实现简单的页面登录和页面跳转功能
- 从一个html页面传值到另一个页面,两个html之间的值传递(js location.search用法)
- 分享27款后台管理页面设计 DIV+CSS+JS
- 微信分享JS-SDK示例页面
- 三款简单的JS返回页面顶部代码
- 一个简单的注册登录页面(包括阿里大于的手机验证)html+JS+AJAX+PHP
- 分享js中的 sort 另一种用法