自定义表单——jQuery制作个性化Checkbox

要让表单中的元素具有个性化风格,仅仅通过样式来实现是相当困难的,大家都很清楚,每种内核的浏览器、每种系统平台下对form元素解析的风格都是不一致的。如果你想让form元素在各种平台或者说各种浏览器具有统一的样式风格,仅仅通过CSS来制作是很难达到统一的标准,但实现他也并不是一件很难的事情,你只要借助jQuery就能轻松的实现。那么今天开始一起来学习使用jQuery制作表单元素的系列,让你不在为此感到头痛。

CSS3 制作Drop Shadow效果

在介绍CSS3系列时,我花了一篇很长的篇幅专门介绍了CSS3box-shadow属性以及其具体的使用等。

CSS3 Tips

今天主要和大家一起学习Red写的《CSS3 tooltips》。从里面我们一起来学习如何使用CSS3来制作tips。

如何使用jQuery制作手风琴效果

上回在《如何使用jQuery制作展开和折叠切换面板》中介绍了如何使用jQuery的“.slideToggle”或“toggle(function)”来制作展开和折叠面板效果。今天主要在上文的基础上来使用jQuery来制作一个手风琴效果。手风琴的效果就是在我们上文中的展开与折叠效果上的基础上增加了一点特效。就是当你点击一个窗格展开,而同时其他的窗格折叠,具体效果可以点下面DEMO所示效果:

纯CSS3制作Tabs选项卡

Tabs选项卡对于Web前端攻城师来说并不陌生,也制作了不少,我们在《CSS3+jQuery制作切角的Tabs》也介绍了一个使用CSS3配合jQuery制作Tabs的实例。我想大家在制作Tabs选项卡大多数都是使用jQuery或者javaScript来实现的。而单独使用纯CSS来制作Tabs来说还是比较少见。

CSS3+jQuery制作切角的Tabs

今天在Red阅读了一篇《CSS3 tabs with beveled corners》博文,介绍了使用CSS3制作切角的Tabs,觉得特有意思。其中含量最高的并不是其如何实现的Tabs,而是其中如何使用CSS3来制作切角效果,如:

如何使用jQuery制作展开和折叠切换面板

在这节中,我们主要来学习如何使用jQuery.slideToggle()方法来制作显示和折叠的切换面板。当你点击标题时,与其相对应的相邻的主内容将会显示,当你在次点击此标题时,其对应的主内容又将会折叠起来。如下图所示:

实现上面的效果,对于jQuery来说是一件非常容易的事情,下面我们就一起看如何实现上图所展示的效果。

HTML Code

我们先来看看HTML Code

jQuery制作多级导航菜单

前面在《jQuery+Superfish制作下拉菜单》中介绍了使用jQueryJoel Birch写的Superfish插件制作下拉导航菜单。使用起来是方便,而且还可以制作出不同的导航,功能强大,但有时我们只是需要做一个多级导航菜单,没有必要使用插件来制作。假使我们不需要兼容IE6这个浏览器的话,我们完全可以使用纯CSS来制作一个多级导航。比如说

jQuery制作随机变色

大家都知道,我们可以通过:hover来改变元素悬停状态下的相关参数,特别是元素的色彩,但:hover在现代浏览器上实现是没有问题,可在IE6下就只能适用在<a>元素上,其他元素就无法正常显示(具体可以看《浏览器兼容之旅的第四站:IE常见Bug——part2》)。但是我们可以通过jQuery来实现各个元素的相关属性改变。今天主要和大家一起来学习用jQuery随机改变元素的相关颜色,比如说:背景色,前景色,边框颜色等。

目标

我们今天主要来看一个实例——随机改变链接元素的前景色和背景色

jQuery制作平滑动画菜单

最近在学习jQuery的相关知识点,今天在buildinternet.com看到一篇由Zach Dunn执笔介绍的《How to Make a Smooth Animated Menu with jQuery》,此文主要介绍如何用jQuery制作平滑的动画菜单。觉得效果蛮好的,而且代码也简单。特意整理一下,贴上来与大家一起分享。

页面

返回顶部