使用HTML 5、CSS3和jQuery增强网站用户体验

开发 前端
使用现在最流行的Web技术HTML5,CSS3和jQuery,同样也可以实现类似的用户体验。而且使用这些特性将会比使用flash更加有效。

记得几年前如果你需要添加一些互动元素到你的网站中用来改善用户体验?是不是立刻就想到了flash实现?这彷佛年代久远的事了。使用现在最流行的Web技术HTML5,CSS3和jQuery,同样也可以实现类似的用户体验。而且使用这些特性将会比使用flash更加有效。也许你可能刚知道Adobe停止开发移动版flash的消息,虽然在桌面中我们还拥有大量的flash的应用,但是随着HTML标准的完善,可能flash也要退出历史舞台了。在今天这篇文章中,我们将介绍一些非常实用的教程,技巧和资源来帮助大家构建一个更加丰富的用户界面。请大家给积极我们留言!您的支持是我们的最好的动力!

 

使用HTML5,CSS3和jQuery来增强网站的用户体验和使用乐趣

 

表单类

jQuery的美化Checkbox

这个教程将帮助你构建一个非常动感的checkbox,用来替换缺省的checkbox,相信大家会喜欢更富有活力的UI界面

 

使用HTML5,CSS3和jQuery来增强网站的用户体验和使用乐趣

 

Rethinking forms in HTML5

这是来自Nettus+的超棒教程,将教你如何使用HTML5特性来构建表单

 

使用HTML5,CSS3和jQuery来增强网站的用户体验和使用乐趣

 

jQuery impromtu

一个alert,对话框等组件的替代品,用户将会更喜欢这种UI元素

 

使用HTML5,CSS3和jQuery来增强网站的用户体验和使用乐趣

 

jQuery Simple Modal

一个非常灵活的对话框框架,提供了非常好的用户界面设计,能够帮助你生成非常酷的表单

 

使用HTML5,CSS3和jQuery来增强网站的用户体验和使用乐趣

 

mcDropdown

多层选择下拉框,非常适合树状结构的展现

 

使用HTML5,CSS3和jQuery来增强网站的用户体验和使用乐趣

 

jQ transform

个人非常喜欢使用的表单美化插件,能够帮助你构建漂亮的UI界面。

 

使用HTML5,CSS3和jQuery来增强网站的用户体验和使用乐趣

 

Emblematiq niceforms

非常不错的一款jQUery框架,允许你使用设计的主题将表单转化成非常酷UI。当然你也可以自己自定义一个主题

 

使用HTML5,CSS3和jQuery来增强网站的用户体验和使用乐趣

 

Uniform

Uniform将使用自定义的皮肤遮盖缺省的表单,并且可以和你实际的表单元素同步,保证了访问和兼容

 

使用HTML5,CSS3和jQuery来增强网站的用户体验和使用乐趣

 

image buttons a part of input fields

教你如何生成输入框中的按钮

 

使用HTML5,CSS3和jQuery来增强网站的用户体验和使用乐趣

 

DynamicWP contact form

非常不错的WP插件,能够生成一个停靠页边的联系人表单,不使用的时候自动隐藏

 

使用HTML5,CSS3和jQuery来增强网站的用户体验和使用乐趣

 

jQuery highlight

jQuery高亮显示功能,能够让输入高亮,提示用户输入内容

 

使用HTML5,CSS3和jQuery来增强网站的用户体验和使用乐趣

 

jQuery inline form validation

个人非常喜欢使用的表单输入验证插件,具体使用参考这篇文章:

使用jQuery插件jquery.validationEngine实现表单验证功能

 

使用HTML5,CSS3和jQuery来增强网站的用户体验和使用乐趣

 

#p#

导航类

White smoke menu style

这个jQuery开发的导航菜单让人想起了flash开发的菜单效果,整个移动如此的顺畅,让你感觉它就是flash开发的。 兼容所有的浏览器,即使javascript被关闭也可以正常工作。

 

使用HTML5,CSS3和jQuery来增强网站的用户体验和使用乐趣

 

jQuery mb.Menu

如果你想开发一个多层的属性菜单,那么这个插件就是你要找的解决方法之一。

 

 

Coda Slider

一个非常不错的滑动面板,非常适合滑动类型面板的应用。 并且可以使用高级特性增强功能

 

使用HTML5,CSS3和jQuery来增强网站的用户体验和使用乐趣

 

ID Tabs

如果考虑扩展性,这个插件恐怕是你能找到的最好的面板导航标签页插件了。

 

使用HTML5,CSS3和jQuery来增强网站的用户体验和使用乐趣

 

Smooth horizontal sliding menu

这个教程教你如何使用jQuery来创建一个垂直滑动显示的子菜单

 

使用HTML5,CSS3和jQuery来增强网站的用户体验和使用乐趣

 

jBreadCrumb Menu

这个可以缩放的当前位置可以自动根据当前位置长度来缩放,非常不错的创意

 

使用HTML5,CSS3和jQuery来增强网站的用户体验和使用乐趣

 

jQuery FLOWERNAV

非常动感的一个导航实现, 能够给你的链接添加一个花朵的效果

 

使用HTML5,CSS3和jQuery来增强网站的用户体验和使用乐趣

 

jQuery Accordion

一个使用非常简单的手风琴显示效果

 

使用HTML5,CSS3和jQuery来增强网站的用户体验和使用乐趣

 

#p#

用户界面类

jQuery Slide Note

Slide node是一个可以帮助你提供一些有效提示或者信息从而方便你访问用户使用网站的插件。

 

使用HTML5,CSS3和jQuery来增强网站的用户体验和使用乐趣

 

jQuery page peel

一个非常酷的显示广告的插件。

 

使用HTML5,CSS3和jQuery来增强网站的用户体验和使用乐趣

 

jQuery infiniScroll

jQuery的无限滚动效果插件,用来帮助你现实大幅的内容

 

使用HTML5,CSS3和jQuery来增强网站的用户体验和使用乐趣

 

jQuery SliderNav

一个动态垂直滑动显示导航菜单的插件

 

使用HTML5,CSS3和jQuery来增强网站的用户体验和使用乐趣

 

jQuery tipped

一个非常酷的插件允许你添加提示到你的网站。当然提供了可选的皮肤。

 

 

Supersized

一个能够让你的网站背景幻灯显示的插件

 

使用HTML5,CSS3和jQuery来增强网站的用户体验和使用乐趣

 

Imagin8

不是一个简单的图片幻灯插件,它能够让你指定一个目录,这个目录下的所有图片都能够显示,不需要你在HTML代码中指定,非常实用!

jQuery Lettering

一个可以帮助你控制每个单独字母的插件。 帮助你有效的创建一些独特的文字效果

 

 

jQuery stylesheet Switcher

这个插件允许你添加链接来修改页面的样式表

 

使用HTML5,CSS3和jQuery来增强网站的用户体验和使用乐趣

 

Flip

Flip是一个帮助你实现翻动元素效果的jQuery插件。

 

 

文章出自:gbin1.com

【编辑推荐】

  1. 10个超赞便利的HTML 5/CSS3框架推荐
  2. 如何使用HTML 5创建在线精美简历
  3. HTML 5新特性Canvas入门秘籍
  4. 最好的HTML 5编码教程和参考手册分享
  5. 10个让你忘记Flash的HTML 5应用演示
责任编辑:陈贻新 来源: gbin1.com
相关推荐

2012-11-15 09:41:43

jQuery

2011-03-22 08:54:02

HTML 5CSS3JavaScript

2012-05-11 09:37:34

HTML5

2014-07-14 12:37:36

jQueryCSS3

2012-05-24 11:03:55

HTML5

2011-01-25 09:16:33

HTML 5CSS3Web

2011-07-15 09:10:44

HTML 5CSS3

2011-11-25 13:18:40

HTML 5

2012-05-27 18:28:46

jQuery Mobi

2010-07-23 10:08:44

Dojo 1.5

2012-05-30 09:22:56

Hybrid App助HTML5JavaScript

2011-08-30 16:39:34

HTML 5

2013-07-09 09:24:29

响应式HTML5CSS3

2010-03-22 08:56:12

2011-11-18 13:25:48

HTML 5

2011-12-16 11:11:36

HTML 5

2015-05-27 07:44:34

日历控件 jQueryCSS3

2012-04-10 10:31:07

2012-02-29 09:27:36

ibmdw

2013-08-21 13:19:33

HTML5CSS3表单设计
点赞
收藏

51CTO技术栈公众号