9大MooTools Plugins来改善网站的用户体验

使用不唐突的JavaScript,只需要一些简短的代码片段就可以极大地改善你的网站,给用户带来良好的用户体验。

自从2009年12月10日,MooTools社区的 MooTools Forge 上线以来,为我们已经提供了很多的MooTools Plugins 。我想你已经从中受益了吧!

David WalshCSS-Tricks 一直是我最爱的技术网站,他们有关MooTools ,jQuery ,CSS的教程是那么的实用和经典,不论你处于什么样的技术水平都能在他们的技术博客上找到你需要的东西。

接下来,我们就认识一下改善网站用户体验的8 大MooTools Plugins 吧。

1. ScrollSpy

ScrollSpy是一个非常强大的工具,贡献者是David Walsh,ScrollSpy可以监听页面中任何元素的滚动事件,并允许您创建”virtual zones” 去监听。我网站的头部工具条就是用的ScrollSpy插件。

ScrollSpy

下载
演示
教程

 

2. LazyLoad

Lazy Load ,主要是指的图片的延迟加载。延迟加载可以推迟资源(通常是图像),减少流量,在包含很多大图片长页面中延迟加载图片可以加快页面加载速度。 浏览器将会在加载可见图片之后(第一屏就跳转)即进入就绪状态。 在某些情况下还可以帮助降低服务器负担。延迟加载技术,是眼下比较流行的一个技术,在淘宝(Taobao),腾讯和必应(Bing)等网站上已经应用了。MooTools 版的LazyLoad的贡献者是David Walsh

下载
演示
教程

 

3. SlideShow

SlideShow,幻灯片插件,对于我们并不陌生,图片轮换的需求就是我们经常遇到的。

我今天说的 SlideShow 是基于MooTools开发的强大幻灯片插件,SlideShow 的贡献者是Ryan Florence

此插件是可以轻松扩展的,易于实现的,灵活的。不仅仅局限在图片上,可以使用任何元素,并添加到SlideShow中,还有许多的内置动画效果等待着你的使用和扩展。

你可以使用这个SlideShow 基础类来创建 幻灯片,画廊,新闻滚动等等。。。。

SlideShow

下载
演示
教程

 

4. MooTools More class, Asset

提供在页面中动态加载和管理JavaScript, CSS和图片文件的功能。允许您动态加载样式表,图片和异步JavaScript文件。

下载
文档说明

5. TextboxList

TextboxList的灵感来自Facebook。这个Mootools插件能够美化以逗号分隔值的普通文本输入框,转换成拥有Autocomplete功能风格类似于Facebook的文本输入框。支持任意类型的数据源(XHR、JSON)。

下载
演示 1
演示 2
教程

 

6. Zoomer

Zoomer 是令人耳目一新的图像放大插件。它已经改变了以往的lightbox 模式, Zoomer放大的图像和原图像的大小是一样的。你可以通过鼠标移动来专注图像的不同部分。

下载
演示
教程

 

7. Milkbox

Milkbox基于Mootools1.2框架开发的Lightbox控件。Use Milkbox for flash video, photos, and XML galleries.

下载 ,演示,教程

8. FormCheck

FormCheck是一个功能强大的MooTools 表单验证,允许您执行不同的形式测试,以验证表单上他们之前提交数据的有效性。它现在版本已经是1.6了。支持通过 CSS自定义外观,将校验提示信息以Tips的方式显示。FormCheck除了支持一些常用的校验包括:必填校验,数字校验,长度校验等。还支持表达式校验包括:电话号码、Email、URL等。国际化的支持,现在支持10种不同的语言,最重要的是他们提供了完整的API使用说明和不同类型的验证实例。

FormCheck

演示
文档说明
下载

9. Mobile

Christoph Pojer 是MooTools Core 的 开发者 , 他为我们的Mobile 开发也提供了MooTools Mobile, 如触摸事件处理程序 ,给我们的移动设备上的开发迈出了一大步!

下载

 

站点统计