标签:MooTools实战

MooTools FormCheck 功能完善的表单验证插件 »

FormCheck是一个MooTools类,允许您执行不同的形式测试,以验证表单上他们之前提交数据的有效性。它现在版本已经是1.6了。支持通过CSS自定义外观,将校验提示信息以Tips的方式显示。FormCheck除了支持一些常用的校验包括:必填校验,数字校验,长度校验等。还支持表达式校验包括:电话号码、Email、URL等。国际化的...

继续阅读 →

文本字段/文本区域的默认值自动显示和隐藏 »

昨天,我看到了张鑫旭同学写的文章是关于《文本框/域文字提示自动显示隐藏jQuery小插件》,我以前也写过这样的教程《表单的文本字段默认值插件,基于MooTools»》,其实说的都是同样的内容。不过张鑫旭同学加了一些可定制的小效果,使原本单调的默认值,更富有生机了,例如改变文本字段/文本区域默认值的颜色,输入值的颜色,边框的颜色及输入框...

继续阅读 →

GitHub-Style的按钮 ,基于CSS and MooTools , jQuery »

我们都知道,GitHub是一个管理开源代码库的好地方,并且提供了非常有利于用户体验的web界面,使我们使用起来是如此的简单。然而那么好的交互效果,当然离不开CSS和JavaScript。就像GitHub中的那些基本按钮,也是我喜欢的。接下来,我们可以尝试一下使用HTML,CSS和JavaScript做一个属于自己的GitHub风格的按...

继续阅读 →

网页换肤,基于MooTools or jQuery »

我们都知道WEB2.0是以人为核心线索的网,为了更好的增强用户体验,一些比较流行的SNS社会网络,非常重视用户自定义功能,例如自定义新闻内容,可以任意拖动新闻内容,还可以选择网页皮肤,例如:谷歌,雅虎,腾讯等都类似的功能。网页换肤的原理是通过调用不同的样式表文件来实现不同的皮肤切换,并且需要将换好的皮肤记入Cookie中,这样用户下次...

继续阅读 →

表单的文本字段默认值插件,基于MooTools »

在我们的留言,登录和查询模块中,我们很喜欢给表单的文本字段(input)加上默认输入值,这一微妙的改进,是非常有利于用户体验的,当我们点击进入该字段域时,默认输入值就给人一种消失的感觉,当你离开该域的时候该字段为空,再点击别的域的时候,该域又恢复了默认输入值。其实这是一件很容易的事,我们通过一个MooToolsclass来实现此效果。...

继续阅读 →

在网站外部链接旁边添加Favorite Icons的方法,基于MooTools or jQuery »

最近,我碰见了一个如何检索页面上所有的外部链接的jQuery文章,很有意思。对于我来说,我很喜欢收藏一些很酷的网站,并且分类罗列出来,以方便以后使用,如果在链接地址的旁边配有这些网站的favoriteicon,那就更美了。FromLiviuHolhoş实现了此功能,我选择了不同的方法,使用CSS的background-image属性,...

继续阅读 →

MooTools Window Object 清单 »

MooToolsWindowObject 清单你想看到网页浏览器window的property吗?也许接下来的操作,可以得到你想要的结果。演示:Demo模拟一个控制台:TheHTMLWindowProperiesTheCSS#consolepre{font-family:Courier;font-size:11px;backgroun...

继续阅读 →

类似于选项卡的搜索框, 基于MooTools »

类似于选项卡的搜索框,在大型的门户网站上都有应用,多种类型选项的搜索最先是在google,,yahoo,baidu,bing这样的高级搜索引擎上应用的,它们有一个明显的特征就是:一种类型的搜索是不够的。像这样大的搜索引擎都会提供websearch,videosearch,codesearch,blogsearch,imagesearc...

继续阅读 →

斑马纹的表格效果,基于MooTools »

说起“斑马纹表格”,我们还是追究一下,历史根源吧!自从CSS成为热门以来,表格(table)愈加少见了。可以说明确直白的网页标记和CSS代码已经取代了往日的表格作为页面布局方法。表格只有回退到它们最初的角色:用来展现以记录(行)和属性(列)结构存储的数据元素。表格元素相对于其它页面元素而言,表格的优势就在于仅占用很小的面积就清楚地展现...

继续阅读 →

学会做一个简易的 Tooltip 效果,基于 MooTools or jQuery »

为什么实用tooltip我们都知道浏览器已经自带了超链接提示,只需要我们在链接中加入title属性就可以了,不过大多数的标签都有title属性。对于图片IMG标签,我们经常关注的是它的alt和title属性。alt是替换文字的意思,它是为了给那些不能看到你文档中图像的浏览者提供文字说明,因此也是WEB标准实战的一个细节。title属性...

继续阅读 →