`
javapolo
  • 浏览: 131705 次
  • 性别: 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
分享到:
评论

相关推荐

    自己动手编写的jquery插件,模仿搜狐汽车图片库展示效果

    总的来说,这个项目涉及的知识点包括jQuery插件开发、图片轮播与切换的实现、CSS样式控制、ASP.NET页面生命周期以及前端和后端的交互。通过学习和理解这个项目,开发者可以提升自己在网页动态效果实现和前后端协同...

    OBA开发系列课程(2):OBA开发入门

    - 插件系统:了解OBA的插件开发,实现自定义功能 - 微服务架构:探讨如何将OBA应用于微服务场景 - 社区资源与持续学习:了解OBA社区,获取更多教程和帮助 通过这个课程,你将掌握OBA的基本开发技能,能够独立...

    ASP.NET 开发上网导航设计(论文+源码)

    通过这个ASP.NET上网导航设计项目,学习者不仅能掌握ASP.NET的基本技术和实践,还能了解到软件开发的整体流程,对于理解和应用Web开发知识有着极大的帮助。同时,这样的实践项目也是提升动手能力和解决问题能力的...

    锋利的jquery(web开发精品书)

    - 书中提供的实例源代码涵盖了各种实际应用场景,如导航菜单、轮播图、表单验证、模态对话框等,这些都是Web开发中的常见需求。 6. **学习路径**: - 从基础语法到高级用法,逐步进阶,适合不同层次的读者。 - ...

    Hands-On-Full-Stack-Web-Development-with-Aurelia:Packt发行的《使用Aurelia进行动手全栈Web开发》

    本书涵盖以下激动人心的功能: 从头开始使用Aurelia JS创建前端应用程序了解现代CSS预处理器创建具有自定义行为和逻辑的可导航Web应用程序使用微服务架构创建可理解的Restful API 了解NoSQL范例并从DB获得最佳性能...

    Java EE Web编程(Eclipse 平台)

    1. **Eclipse IDE的使用**:Eclipse作为开源的Java开发工具,拥有丰富的插件支持,对于Java EE开发,它可以提供诸如Java服务器视图、项目导航器、服务器配置、部署向导等功能,简化了开发流程。 2. **Web项目创建**...

    web实现简单分页

    本教程将探讨如何在Web中实现简单的分页功能。 首先,我们需要了解分页的基本概念。分页通常由两部分组成:当前页码和总页数。用户可以通过点击页码或使用导航按钮(如“上一页”、“下一页”)在页面间切换。此外...

    js实现web的翻页功能

    在Web开发中,用户界面的交互性至关重要,其中翻页功能是常见的数据展示方式,尤其在数据量较大的情况下。本文将深入探讨如何使用纯JavaScript(JS)实现Web前端的翻页功能,包括“首页”、“尾页”、“上一页”和...

    Delphi下IntraWeb应用开发详解源代码

    《Delphi下IntraWeb应用开发详解源代码》是一本专为Delphi开发者设计的书籍,深入探讨了如何使用IntraWeb框架进行Web应用程序的构建。IntraWeb是一款强大的、完全基于Delphi的Web应用程序开发工具,允许开发者利用...

    HTML+CSS+JS宠物商城网页设计期末课程大作业 web前端开发技术 web课程设计 网页规划与设计

    该作业旨在通过实际动手实践帮助学生掌握前端开发的基础技能,并理解网页布局、样式美化以及交互功能实现的具体方法。接下来将详细解析在该项目中涉及到的关键知识点及其应用。 ### 二、HTML5基础结构与语义化 ###...

    Jquery插件之mmenu

    **jQuery 插件 mmenu 深度解析与实践** jQuery mmenu 是一款强大的、可定制的导航菜单插件,适用于网页应用中的侧滑菜单。它提供了丰富的功能,...实践是检验真理的唯一标准,动手尝试创建属于自己的 mmenu 菜单吧!

    qq flash导航条

    QQ Flash导航条是一种基于Adobe Flash技术的网页元素,主要用于个人QQ空间或网站的导航设计。在早期的网页设计中,Flash...对于那些怀念Flash效果的用户,可以寻找类似的Web组件或自己动手使用现代技术来重现经典效果。

    Eclipse开发视频2

    在Java开发领域,Eclipse因其强大的插件支持、代码自动完成、调试工具、项目管理等功能而备受青睐。本教程可能涵盖以下几个重要知识点: 1. **Eclipse安装与配置**:讲解如何下载Eclipse IDE,选择适合的版本(如...

    Csharp开发的很好的地理信息系统完整源代码

    8. **扩展性和可定制性**:这套源代码可能包含了插件架构或模块化设计,使得开发者可以根据需求添加新的功能或修改现有功能。 学习这套C#开发的GIS源代码,不仅可以提升C#编程技能,还能深入了解GIS的核心原理和...

    Javaweb学生管理系统(前端源码)

    - **导航结构**:合理的导航结构使得用户能轻松地在不同功能之间切换,例如顶部菜单、面包屑导航等。 3. **后端技术栈** - **Servlet**:JavaWeb后端的核心技术,处理前端发送的HTTP请求,执行业务逻辑并返回响应...

    Static-Web-Development-Learning-Platform.zip

    在本项目"Static-Web-Development-Learning-Platform.zip"中,您将获得一个静态网页开发的学习资源,特别关注于Bootstrap框架的应用。这个平台包含了多种前端页面的源代码,使用了HTML、CSS以及Bootstrap框架来构建...

    jQuery权威指南-源代码

    但在阅读本书的示例时,请尽量不要照抄书中的所有示例,而是重在理解代码的实现思路,自己动手开发相似功能的应用,并逐步完善其功能,这样才能真正领会示例所反映出的jQuery技术的理论本质。 联系作者 希望这部...

    wish_php.zip_WEB开发_PHP_

    【标题】"wish_php.zip" 是一个专门针对WEB开发领域,使用PHP语言编写的许愿墙程序。... ...用户可以在此平台上发布自己的愿望,进行互动...通过深入研究并动手实践,开发者可以更好地理解和运用PHP在实际Web开发中的能力。

    eclipse教程超强整合版

    此外,它可能还会涵盖PDE(Plug-in Development Environment)的相关知识,让开发者能够开发自己的Eclipse插件,增强IDE的功能。同时,学习如何进行有效的项目管理和团队协作,如使用Mylyn任务管理工具和Git版本控制...

    MyEclipse教程

    学习MyEclipse的性能优化技巧,如调整内存设置、减少启动时加载的插件、使用增量编译等,可以帮助开发者提升开发环境的响应速度和稳定性。 9. **代码重构** MyEclipse提供强大的代码重构功能,如重命名、提取方法...

Global site tag (gtag.js) - Google Analytics