最近公司需要开发个可配置的系统功能介绍插件,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();
});
![点击查看原始大小图片](http://dl2.iteye.com/upload/attachment/0107/3858/eac8bde5-f994-3a82-88aa-cc0be1a4f6f5-thumb.png)
- 大小: 6.2 KB
分享到:
相关推荐
总的来说,这个项目涉及的知识点包括jQuery插件开发、图片轮播与切换的实现、CSS样式控制、ASP.NET页面生命周期以及前端和后端的交互。通过学习和理解这个项目,开发者可以提升自己在网页动态效果实现和前后端协同...
- 插件系统:了解OBA的插件开发,实现自定义功能 - 微服务架构:探讨如何将OBA应用于微服务场景 - 社区资源与持续学习:了解OBA社区,获取更多教程和帮助 通过这个课程,你将掌握OBA的基本开发技能,能够独立...
通过这个ASP.NET上网导航设计项目,学习者不仅能掌握ASP.NET的基本技术和实践,还能了解到软件开发的整体流程,对于理解和应用Web开发知识有着极大的帮助。同时,这样的实践项目也是提升动手能力和解决问题能力的...
- 书中提供的实例源代码涵盖了各种实际应用场景,如导航菜单、轮播图、表单验证、模态对话框等,这些都是Web开发中的常见需求。 6. **学习路径**: - 从基础语法到高级用法,逐步进阶,适合不同层次的读者。 - ...
本书涵盖以下激动人心的功能: 从头开始使用Aurelia JS创建前端应用程序了解现代CSS预处理器创建具有自定义行为和逻辑的可导航Web应用程序使用微服务架构创建可理解的Restful API 了解NoSQL范例并从DB获得最佳性能...
1. **Eclipse IDE的使用**:Eclipse作为开源的Java开发工具,拥有丰富的插件支持,对于Java EE开发,它可以提供诸如Java服务器视图、项目导航器、服务器配置、部署向导等功能,简化了开发流程。 2. **Web项目创建**...
本教程将探讨如何在Web中实现简单的分页功能。 首先,我们需要了解分页的基本概念。分页通常由两部分组成:当前页码和总页数。用户可以通过点击页码或使用导航按钮(如“上一页”、“下一页”)在页面间切换。此外...
在Web开发中,用户界面的交互性至关重要,其中翻页功能是常见的数据展示方式,尤其在数据量较大的情况下。本文将深入探讨如何使用纯JavaScript(JS)实现Web前端的翻页功能,包括“首页”、“尾页”、“上一页”和...
《Delphi下IntraWeb应用开发详解源代码》是一本专为Delphi开发者设计的书籍,深入探讨了如何使用IntraWeb框架进行Web应用程序的构建。IntraWeb是一款强大的、完全基于Delphi的Web应用程序开发工具,允许开发者利用...
该作业旨在通过实际动手实践帮助学生掌握前端开发的基础技能,并理解网页布局、样式美化以及交互功能实现的具体方法。接下来将详细解析在该项目中涉及到的关键知识点及其应用。 ### 二、HTML5基础结构与语义化 ###...
**jQuery 插件 mmenu 深度解析与实践** jQuery mmenu 是一款强大的、可定制的导航菜单插件,适用于网页应用中的侧滑菜单。它提供了丰富的功能,...实践是检验真理的唯一标准,动手尝试创建属于自己的 mmenu 菜单吧!
QQ Flash导航条是一种基于Adobe Flash技术的网页元素,主要用于个人QQ空间或网站的导航设计。在早期的网页设计中,Flash...对于那些怀念Flash效果的用户,可以寻找类似的Web组件或自己动手使用现代技术来重现经典效果。
在Java开发领域,Eclipse因其强大的插件支持、代码自动完成、调试工具、项目管理等功能而备受青睐。本教程可能涵盖以下几个重要知识点: 1. **Eclipse安装与配置**:讲解如何下载Eclipse IDE,选择适合的版本(如...
8. **扩展性和可定制性**:这套源代码可能包含了插件架构或模块化设计,使得开发者可以根据需求添加新的功能或修改现有功能。 学习这套C#开发的GIS源代码,不仅可以提升C#编程技能,还能深入了解GIS的核心原理和...
- **导航结构**:合理的导航结构使得用户能轻松地在不同功能之间切换,例如顶部菜单、面包屑导航等。 3. **后端技术栈** - **Servlet**:JavaWeb后端的核心技术,处理前端发送的HTTP请求,执行业务逻辑并返回响应...
在本项目"Static-Web-Development-Learning-Platform.zip"中,您将获得一个静态网页开发的学习资源,特别关注于Bootstrap框架的应用。这个平台包含了多种前端页面的源代码,使用了HTML、CSS以及Bootstrap框架来构建...
但在阅读本书的示例时,请尽量不要照抄书中的所有示例,而是重在理解代码的实现思路,自己动手开发相似功能的应用,并逐步完善其功能,这样才能真正领会示例所反映出的jQuery技术的理论本质。 联系作者 希望这部...
【标题】"wish_php.zip" 是一个专门针对WEB开发领域,使用PHP语言编写的许愿墙程序。... ...用户可以在此平台上发布自己的愿望,进行互动...通过深入研究并动手实践,开发者可以更好地理解和运用PHP在实际Web开发中的能力。
此外,它可能还会涵盖PDE(Plug-in Development Environment)的相关知识,让开发者能够开发自己的Eclipse插件,增强IDE的功能。同时,学习如何进行有效的项目管理和团队协作,如使用Mylyn任务管理工具和Git版本控制...
学习MyEclipse的性能优化技巧,如调整内存设置、减少启动时加载的插件、使用增量编译等,可以帮助开发者提升开发环境的响应速度和稳定性。 9. **代码重构** MyEclipse提供强大的代码重构功能,如重命名、提取方法...