小菜在前端世界游荡有些时间了,常见的插件多少有些了解,但却很少看到用户引导插件. 所谓用户引导插件,就是在第一次使用某个网站时,会弹出一些小动画,告诉你网站的基本使用方法,帮你快速入门. 这应该是个常见的功能,做成插件也不是什么难事,既然现在还比较少,那小菜就写一个吧! 于是BlueDream.js诞生了...因为此插件的设计色调为蓝色,因此起名“蓝梦”. 简介: BlueDream.js是一款用户引导插件,可以让您的网站更容易入门. BlueDream.js依赖jQuery,因此自身体积小巧,

当用户浏览到一个网站,它可能从不知道如何浏览,如何操作网站或 Web 应用程序的内容和流程.在这篇文章中,我们编制了一些最好的 jQuery 引导插件列表.你会发现这些插件对于提高你的网站的整体用户体验真正有用,将引导您轻松创建网站的指引功能,并帮助您自定义并实现令人惊叹的外观. 您可能感兴趣的相关文章 网站开发中很有用的 jQuery 效果[附源码] 分享35个让人惊讶的 CSS3 动画效果演示 十分惊艳的8个 HTML5 & JavaScript 特效 Web 开发中很实用的10个效果[源码

转自:http://blog.libnav.com/js/57.html 很多时候一个网站或者一个Web应用出品,为了让你的用户知道你的站点(或应用)有些什么?如何操作?为了让你的用户有更好的体验.往往这个时候都 会给你的站点(应用)添加一个分步指引的效果.然而这样的效果,对于不懂原生js的同学来说,是件蛮头痛的事情.不过大家不要慌,根据 Webresourcesdepot.com提供,整理了一些jQuery插件.这些jQuery插件就是用来增强用户和站点沟通.而且这些插件都是轻量 级插件,你可

1.demo直接贴上来了,有什么不懂的,直接去官网上看,地址:https://introjs.com/. 2.这个intro插件的版本是v2.7.0,复制下来代码,引入库应该直接可以运行. 3.点评一下: a.插件不会自己记录引导的信息,需要手动控制引导是不是执行过 b.不在step里提供钩子,而是提供全局的钩子 c.在全局钩子里用this._introItems[this._currentStep]找到当前的 d.可以在step里定义自己的函数,然后在全局钩子里调用 e.不能动态生成节点 f.

1.demo直接贴上来了,有什么不懂的,直接去官网上看,地址:http://bootstraptour.com/. 2.这个bootstrap-tour插件的版本是v0.12.0,复制下来代码,引入库应该直接可以运行. 3.点评一下: a.插件会自己在localStorage里记录引导的信息,一般需求下,不用手动写这方面代码了 b.在每个step里提供onNext钩子,这个还是很方便的 c.可以像demo里这样动态产生一个节点(my-other-element),提前在它上面定义step也是可以

http://jwarby.github.io/jquery-pagewalkthrough/ 源码 https://github.com/jwarby/jquery-pagewalkthrough

网页表单是一个老生常谈的话题.出于这样或那样的目的,一些示例中都会包括用户注册,电子商务结算,用户设置甚至联系人表格.而输入栏是非常容易用现代的CSS3技术来应用样式.但是到底什么决定整体用户体验? 在这篇文章中,我想展示一些免费的开源jQuery插件来帮助开发者创建更简易的web表单.访问者不用太多的犹豫就能完成表单的填写.你也许不想太过华丽页面元素,它会干扰手头的任务.考虑这些附加的特性,它就像一个用户指南,能帮助用户填写表单,而它们又涉及到唯一的或者不熟悉的内容. jQuery Autot

网页表单是一个老生常谈的话题.出于这样或那样的目的,一些示例中都会包括用户注册,电子商务结算,用户设置甚至联系人表格.而输入栏是非常容易用现代的CSS3技术来应用样式.但是到底什么决定整体用户体验? 在这篇文章中,我想展示一些免费的开源jQuery插件来帮助开发者创建更简易的web表单.访问者不用太多的犹豫就能完成表单的填写.你也许不想太 过华丽页面元素,它会干扰手头的任务.考虑这些附加的特性,它就像一个用户指南,能帮助用户填写表单,而它们又涉及到唯一的或者不熟悉的内容. jQuery Auto

最近由于项目进行了较大的改版,为了让用户能够适应这次新的改版,因此在系统中引入了“用户引导”功能,对于初次进入系统的用户一些简单的使用培训training.对于大多数网站来说,这是一个很常见的功能.所以在开发这个任务之前,博主尝试将其抽象化,独立于现有系统的业务逻辑,将其封装为一个通用的插件,使得代码更容易扩展和维护. 无图无真相,先上图: 关于这款trainning插件的使用很简单,它采用了类似Angular路由一样的配置,只需要简单的配置其每一步training信息. title:step的

浮动标签模式(Float Label Pattern)是最新流行的一种表单输入域的内容提示方式,当用户在输入框输入内容的时候,原先占位符的内容向上移动,显示在输入的内容的上面.这里推荐的这款 jQuery 插件就是帮助你实现浮动标签效果. 关于浮动标签模式更详细的内容可以参考这篇文章:<Float Label Pattern>. 您可能感兴趣的相关文章 特别推荐:10套精美的免费网站后台管理系统模板 Parallax.js – 自适应智能设备方向的视差效果插件 Chance – 功能强大的 J

分享一款贴近用户体验的jQuery日期选择插件.这是一款双日历jQuery日期选择时间插件pickerDateRange.效果图如下: 在线预览   源码下载 var dateRange = new pickerDateRange('date_demo3', { aRecent7Days: 'aRecent7DaysDemo3', //最近7天 isTodayValid: false, //startDate : '2013-04-14', //endDate : '2013-04-21', /

当一个网站或者一个Web应用推出新功能时,为了让用户了解你的站点(或应用)如何操作,往往都会在站点(应用)中添加一个分步指引的效果.然而这样的效果,对于不懂原生JS的同学来说,是件很头痛的事情. 下面为大家介绍一些可帮助你实现分步指引效果的jQuery插件,你可以根据自己需求定制,它们都具有一个时尚的外观,而且简单易用. 1.  Intro.js Intro.js 使用一种引导式的方式来一步步介绍你网站和项目新特性.支持键盘+鼠标的导航方式. 2.  aSimpleTour aSimpleTou

当一个网站或者一个Web应用推出新功能时,为了让用户了解你的站点(或应用)如何操作,往往都会在站点(应用)中添加一个分步指引的效果.然而这样的效果,对于不懂原生JS的同学来说,是件很头痛的事情. 下面为大家介绍一些可帮助你实现分步指引效果的jQuery插件,你可以根据自己需求定制,它们都具有一个时尚的外观,而且简单易用. 1.  Intro.js Intro.js 使用一种引导式的方式来一步步介绍你网站和项目新特性.支持键盘+鼠标的导航方式. 2.  aSimpleTour aSimpleTou

在用户第一次使用网站的时候,一般会提供新手引导的提示,提示用户重要的功能使用,实现方法比较多,但是有一点,屏幕的自适应问题,大多数自己写的实现方法无非就是一个div遮罩层,然后再需要指引的位置放置一张图片等,但是如果屏幕并非一般的常用尺寸,那么就会出现图片位置不对应的问题,原因就是在css里边固定了图片的位置,并没有自适应. IntroJs这个插件是一个开源的分布引导插件,采用绑定div的方式,动态生成提示文字,屏幕缩放以后,相应的提示内容的位置也会随div变化而变化,唯一的缺点就是对于自定义的

过去几年中社交媒体越来越流行了,能够分享音乐.视频.图像甚至是其他的 docs 文档到互联网上去,这样子还能够提高页面的点击量.通常,一些社交媒体插件都能允许你的用户分享你网站上的内容到其他的社交平台,比如说这些社交平台 上:Facebook, Google, Twitter, Pinterest等等. 这里我们选择了 15 款最好的 jQuery 社交分享插件.只需要少量的代码,即可将它们轻松的集成到你的网站上,并且能够帮助你的访问者分享网站上的内容.好好享受它们来带的便利吧!! 点击图片查看

最近花了不少时间在重构和进一步提炼我的Web开发框架上,力求在用户体验和界面设计方面,和Winform开发框架保持一致,而在Web上,我主要采用EasyUI的前端界面处理技术,走MVC的技术路线,在重构完善过程中,很多细节花费不少时间进行研究和提炼,一步步走过来,也积累了不少经验,本系列将主要介绍我在进一步完善我的Web框架基础上积累的经验进行分享,本随笔主要介绍利用jQuery Tags Input 插件显示选择记录. 我在利用jQuery Tags Input 插件之前,一直想找一个合适的J

响应式(Responsive)设计的目标是要让产品界面能够响应用户的行为,根据不同终端设备自动调整尺寸,带给用户良好的使用体验.这篇文章收集了22款优秀的响应式 jQuery 幻灯片插件,它们能够帮助你在 Web 项目中实现有吸引力的图片滑块效果. 您可能感兴趣的相关文章 12款经典的白富美型 jQuery 图片轮播插件 让网站动起来!12款优秀的 jQuery 动画插件 精心挑选的美轮美奂的 jQuery 图片特效插件 精心挑选的优秀jQuery Ajax分页插件和教程 精心挑选的优秀 jQu

jQuery Lightbox 灯箱插件可以让你为您的网站和应用程序展示优雅的图像,视频 和其它内容(使用模式窗口).如果你是一个开发人员,你必须拥有 jQuery 灯箱插件集合,因为有一部分的客户会要求他们的网站看起来更有吸引力和视觉冲击力. 因此在这个集合中,我们编译了20款最好的 jQuery 灯箱插件清单,这将有助于开发人员创建和设计精美的网站.您可以将这些插件很容易地集成到您的网站,可以下载他们瞬间充实你的插件库. 您可能感兴趣的相关文章 Web 开发中很实用的10个效果[源码下载]

这二天开始用jquery.autocomplete这个自动完成插件.功能基本比较强大,但自己在实际需求中发现还是有一处不足!问题是这样:当我定义了一个本地数据JS文件时,格式为JSON式的数组.如下: var stockInfoJson = [ { name: ",spell:"sfza" }, { name: ",spell:"wka"}, { name: ",spell:"stgn" }, { name: &qu

  插件描述:jQuery图片延迟加载插件jQuery.lazyload,使用延迟加载在可提高网页下载速度.在某些情况下,它也能帮助减轻服务器负载. 使用方法 引用jquery和jquery.lazyload.js到你的页面 <script src="jquery-1.11.0.min.js"></script> <script src="jquery.lazyload.js?v=1.9.1"></script> ht