`
javapolo
  • 浏览: 130238 次
  • 性别: Icon_minigender_1
  • 来自: 上海
社区版块
存档分类
最新评论

自己动手开发web功能导航插件

    博客分类:
  • js
阅读更多
最近公司需要开发个可配置的系统功能介绍插件,github上有很多类似的的插件,本想下个用就ok了,但是发现我们产品用的竟然是jq1.4,版本太低,跟不上节奏,github上找的插件基本上都是jq1.7以上的,寻思着上网查找,还不如动手自己来一个,于是乎便花了几个小时开发了个,其实开发这种插件的思路都大同小异(把变化的留给用户配置,不变的留给插件处理)
现在的功能比较简洁,有兴趣的同学可以下载源码看看,本项目的源码地址
https://github.com/javapolo/SimpleSiteTour

以下是该插件效果的部分截图


使用起来也很简单,两步就可以
首先引入依赖的文件:
    <script src="weavertour/jquery_wev8.js"></script>
    <link rel="stylesheet" href="weavertour/weavertour.css">
    <script src="weavertour/weavertour.js"></script>
接下来就是使用了
    
 $(function(){
        
	    var config = {
	      steps:[
		     {title:"功能一",describe:"描述信息",elid:"test",position:"right"},
		     {title:"功能二",describe:"描述信息1",elid:"test1",position:"top"},
		     {title:"功能三",describe:"<div color='red'>描述信息2</div>",elid:"test2",position:"left"},
		     {title:"功能四",describe:"描述信息3",elid:"test3",position:"left"}
		     ]
	    }
	   var WeaverTour = new WeaverTour(config);
	   //开始导航
	   WeaverTour.startTour();
      
     });
     
  • 大小: 6.2 KB
分享到:
评论

相关推荐

Global site tag (gtag.js) - Google Analytics