学习jQuery之旅--使用炫酷的jQuery插件

前两篇文章中,介绍了jQuery中强大的Selectors (选择器)以及开发中比较常用的方法的使用。今天和大家一起体验一下jQuery另一个吸引人的地方--强大炫酷实用的jQuery插件。

做网站的都知道,网站的美工很重要,如果一个BS的软件美工做的不好,技术含量很高,算法再高深,也不会很受到用户的青睐。(其实CS的也是如此)

然而jQuery强大的插件,可以很容易的给我们的网站带来炫酷的效果,以及更人性化得用户体验。下面和大家分享一些开发中可能常用的jQuery插件。

Menu

效果:

实现起来非常简单:

Html代码:

Code

css和jQuery代码:

Code

其中的jquery-latest.pack.jsjquery.lavalamp.jsjquery.easing.js

当然,这是比较简单的Menu,但是比较实用,还有其他很酷的Menu,比如下拉式的Menu,大家可以到我最后给的网站上查找,这里就不多介绍了。

 Tabs

Tabs也是我们经常使用插件,它可以使我们的网站更佳的整洁和规范,是个很人性化的设计。

效果: 点击这里查看效果(这里可能有点问题,我不知道为什么css的@media应用不上,本地测试是没有问题的,写在博客园的html模板中就有了问题,看了半天无语了)

实现起来也不是很难,关键的地方就是对css的操作上

Html代码:

Code

css和jQuery代码:

Code

其中的ui.tabs.pack.js

Accordion

 手风琴效果,大家应该很熟悉。

效果: 点击这里查看效果

Html代码

Code

css和jQuery代码

Code

其中的jquery.accordion.js当然,大家可以制作更炫酷漂亮的效果。

Round

有的时候我们希望页面中的Div实现圆角的效果,Jquery可以很好的满足我们。

效果:点击这里查看效果

Html代码

<DIV id=main>
<DIV class=demo id="corner1">
<H1>Round</H1>
<P>Hello World!!</P></DIV>


<DIV class=demo id="corner2">
<H1>Round</H1>
<P>Hello World!!</P></DIV>
</DIV>

css和jQuery代码

Code

其中的jquery.corner.js。这样就能够实现Div的圆角效果。

Dialog

简单的实现在网页中弹出对话框。

效果:点击这里查看效果

Html代码:

Code

css和jQuery代码:

Code

其中的jquery.simplemodal.js,在Dialog中我们能做很多事情,类似的场景很多:百度的登录....

ok,就先写到这。

小结:就先简单的介绍这些。jQuery的插件深受大家的喜爱和好评,的确给我们的开发带来了不少便捷和绚丽的效果,这里就不多介绍了,大家可以到下面的地址中去继续体验。

 

更多Jquery插件:

http://www.cnblogs.com/Terrylee/archive/2007/12/09/the-ultimate-jquery-plugin-list.html

http://parandroid.com/more-than-50-powerful-plug-in-application-examples-jquery/

http://www.cnblogs.com/andylaufzf/archive/2009/03/26/1422255.html

 

 

posted @ 2009-06-10 08:53  GWPBrian  阅读(12760)  评论(16编辑  收藏