`
liu_bia
  • 浏览: 108746 次
  • 性别: Icon_minigender_1
  • 来自: 西安
文章分类
社区版块
存档分类
最新评论
  • ztbzg: 学习了,今天用上了,多谢lz 以前动态增加div 是直接拼字符 ...
    动态生成层

50多个强大的jQuery插件应用实例

阅读更多

jQuery是近段时间里比较流行的一个JavaScript框架,不断有使用者开发出新的 jQuery插件。下面收集了50个开发者最喜欢使用的jQuery插件。这仅仅是第一个系列,你先品尝,第二道大餐即将到来。
Sliding Panels -滑动门控制
1) Sliding Panels For jQuery -元素可以展开或关闭,创建出手风琴的滑动效果。

(2) jQuery Collapse -这个jQuery插件同样点击后滑动展开或关闭DIV层。
Menu - 菜单
3) LavaLamp

menu

(4) A Navigation Menu- 锚链接的无序列表嵌套, 可以添加2级菜单

menu

(5) SuckerFish Style

menu

Tabs - 选项卡
6) jQuery UI Tabs / Tabs 3 - 基于 jQuery 的一个Tab选项卡导航

(7) TabContainer Theme - 当用户在选项卡之间进行切换时,产生JQuery风格的淡出动效果。


Accordion- 手风琴效果
8 ) jQuery Accordion

Demo
accordion

(9) Simple JQuery Accordion menu

accordion
SlideShows - 幻灯片
10) jQZoom-让你在你的网页上很简单的实现图片的缩放功能。

rating

(11) Image/Photo Gallery Viewer- 一个图像/相片的画廊展示插件。可以让你对图片进行分组、并产生像Flash一样的多种浏览特效。

rating
Transition Effects - 过渡特效
12) InnerFade - 可以让网页中的任何元素产生淡化效果

(13) Easing Plugin-另外一个简单的过渡效果插件

(14) Highlight Fade

(15) jQuery Cycle Plugin- 拥有多种过渡效果的一个Gallery插件。

accordion

奇幻的jQuery
16) Riding carousels with jQuery - 这个jQuery插件可以生成一个水平或垂直的列表,并且允许你控制DIV层的滑动显示。

Demo :

Color Picker -拾色器
17) Farbtastic -这个 jQuery 插件可以让你通过Javascript添加一个或多个拾色器widgets到一个页面中。

Demo :

(18) jQuery Color Picker
LightBox -灯箱效果
19) jQuery ThickBox - is a webpage user interface dialog widget written in JavaScript.

Demo :

(20) SimpleModal Demos - its goal is providing developers with a cross-browser overlay and container that will be populated with content provided to SimpleModal.

Demo :

(21) jQuery lightBox Plugin - simple, elegant, unobtrusive, no need extra markup and is used to overlay images on the current page through the power and flexibility of jQuery′s selector.

Demo :

(
iframe
22) JQuery iFrame Plugin


Form Validation -表单验证器
23) Validation - 有一套完整相当的形式验证规则。该插件还动态地创建ID和联系信息。

Demo :

(24) Ajax Form Validation - 在客户端使用jquery验证的一种形式,它可以验证用户名是否有效等。

Demo :

(25) jQuery AlphaNumeric -欢迎对对表单域中的某些字符进行限制


Form Elements - 表单事件

(26) jquery.Combobox - 从现在的选择元素中创建一个个性的HTML组合 Demo is here.

(27) jQuery Checkbox -样式化选择框,从而提高交互能力。

(28) File Style Plugin for jQuery -File Style插件让你可以使用图像做为文件浏览按钮,你还可以样式化文件名称区域。
Star Rating - 星形评级系统
rating

(29) Simple Star Rating System

30)Half-Star Rating Plugin
ToolTips -提示工具
31) Tooltip Plugin Examples - 一个花俏的提示应用。 可以对提示信息进行自定义位置, 设置阴影效果和添加更多内容等.你可以点击demo 演示.

(32) The jQuery Tooltip

tool tip
Tables Plugins -表格插件
33) Zebra Tables Demo -使用jQuery来创建出斑马线风格的数据表格,鼠标悬浮时能改变背景色。

Demo :

zebra tables

(34) Table Sorter Plugin - 把一个标准的HTML表格分解成Thead和Tbody标签构成的分类表格,不需要刷新。它能够成功地解析和整理多种类型的数据,包括联系资料。

table sorter

(35) AutoScroll for jQuery -可以生成网页表格的热点自动滚动效果

auto scroll

(36) Scrollable HTML table plugin- 用来转换表格为普通的滚动HTML。不需要额外的编码。

Demo :

Scrollable table
Draggable Droppables And Selectables 拖拽
37) Sortables - 一个简单强大的拖拽插件。

sort

(38) Draggables and droppables- 这是一个很好的演示。用来实现拖拽树形菜单项目的操作

drag drop
Style Switcher - 切换风络
39) Switch stylesheets with jQuery允许访客选择他们喜欢的网站样式,使用了Cookie记录,也就是同一个用户下次再访问时,除非他不切换,否则会保留他选择的样式。

Demo演示.
Rounded Corners 圆角效果
40) jQuery Corner Demo

rounded corners

(41) JQuery Curvy Corners- 这个插件可以让你生成光滑、无锯齿的圆角效果。

rounded corners
Must See jQuery Examples 应该了解的一些jQuery应用实例
42) jQuery Air - 一个非常非常特别的客户管理界面应用插件,太特别了,太太太特别了。

Demo :

(43) HeatColor

Demo :

(44) Simple jQuery Examples

(45) Date Picker -一个灵活个性的jQuery日历组件。

Demo :

(46) ScrollTo -这个jQuery插件可以让你实现当点击链接时中滚动到页面中的某一对象

(47) 3-Column Splitter Layout 一个3栏布局分配插件。

(48) Pager jQuery -一个小巧的 jQuery插件,用来增加分页的页码效果

(49) Select box manipulation

(50) Cookie Plugin for jQuery

51) JQuery BlockUI Plugin

分享到:
评论

相关推荐

    50多个强大的jQuery插件应用实例.doc

    【jQuery插件应用实例】 jQuery,作为一款广受欢迎的JavaScript框架,因其简洁的API和丰富的功能,被开发者广泛应用于各种Web项目中。本文将介绍50个开发者最常使用的jQuery插件,涵盖从滑动门控制到表单验证等多个...

    用户注册验证JQuery插件及实例

    在这个“用户注册验证JQuery插件及实例”中,我们将探讨如何使用JQuery这一强大的JavaScript库来实现高效、友好的前端验证。 JQuery是一个轻量级、高性能的JavaScript库,它简化了HTML文档遍历、事件处理、动画设计...

    jQuery插件开发学习

    通过这样的结构,我们可以创建一个易于使用且功能强大的jQuery插件,用户只需一行代码就能在页面上添加一个数字时钟: ```javascript $('.clock').digitclock(); ``` 总的来说,学习jQuery插件开发有助于提升...

    jquery基础学习插件实例大全

    “jQ学习第二季”可能进一步深入到更复杂的DOM操作和插件使用,例如如何使用jQuery进行AJAX请求,实现异步数据交互,以及如何集成和自定义jQuery插件,提升网站的功能性和用户体验。 “jQ学习第三季”则可能涵盖更...

    50个Jquery经典实例

    本文将深入探讨50个jQuery经典实例,这些实例覆盖了jQuery的多种核心功能,包括DOM操作、事件处理、动画效果、Ajax请求以及插件应用等。** 1. **DOM操作**:jQuery提供了方便的DOM选择器,如`$("#id")`选择ID为`id`...

    好用清除html的jquery插件

    总结来说,这个“好用清除html的jquery插件”提供了一种高效的方法来处理和展示HTML内容,它可以帮助开发者确保内容的安全性和一致性,同时也为学习jQuery插件开发提供了实践案例。通过对插件源代码的研究,你可以...

    jquery 50个案例

    这个文档详细介绍了50种不同的jQuery插件,涵盖了各种功能,如表单验证、轮播图、图表、滑块、下拉菜单等,展示了jQuery的强大扩展性。 3. **图片过渡效果 (JQuery Cycle Plugin)** JQuery Cycle Plugin 提供了...

    jquery插件库-jquery抽奖插件.zip

    在网页设计中,jQuery抽奖插件广泛应用于营销活动、在线游戏、积分兑换等多个场景: 1. 营销推广:商家通过举办线上抽奖活动吸引用户参与,提高品牌知名度和产品销量。 2. 用户激励:鼓励用户完成特定任务(如注册...

    jquery插件编写指南

    - **注意事项**:如果使用的选择器选取了多个元素,则需要使用 `each()` 方法迭代每个元素。 #### 六、方法连缀 为了实现方法之间的连缀,插件方法需要返回一个 jQuery 实例对象。 #### 七、为插件方法定义默认值 ...

    通用 JQuery 插件 开发

    总结,通用JQuery插件开发涉及到命名空间设定、参数处理、DOM操作、事件处理、动画效果等多个方面。理解并掌握这些基础知识,能够帮助我们创建出高效、可维护的jQuery插件,提升Web应用的用户体验。

    50个Jquery经典实例 50个Jquery经典实例

    《50个jQuery经典实例》是一份集合了众多实用且高效jQuery代码的资源,它旨在帮助开发者提升在网页开发中的动态效果实现能力。jQuery作为一款强大的JavaScript库,简化了HTML文档遍历、事件处理、动画设计和Ajax交互...

    时间轴jquery插件

    首先,要使用时间轴jQuery插件,你需要确保你的项目已经包含了jQuery库。这通常通过在HTML文件的`<head>`部分添加jQuery的CDN链接或者下载jQuery库并将其放在本地项目中来实现。 接下来,选择一个合适的时间轴插件...

    教你如何做一个自己的jQuery插件,jQuery扩展笔记

    这篇文章将指导你如何构建一个自己的jQuery插件,理解jQuery扩展的核心原理。 首先,我们要明白jQuery插件的本质是一个包装在jQuery对象上的函数。在jQuery中,我们经常看到这样的匿名函数结构: ```javascript ...

    jQuery插件集之(页面模板)多个+Demo

    总之,“jQuery插件集之(页面模板)多个+Demo”提供了一个实践和学习jQuery插件应用的良好平台,无论你是初学者还是经验丰富的开发者,都可以从中受益。通过研究和实践,你可以掌握更多关于jQuery和页面模板的知识,...

    jquery图表插件大全收集

    在IT行业中,jQuery是一个非常流行...在实际项目中,可以根据具体需求选择合适的插件,或者将多个插件组合使用以达到最佳效果。同时,了解和掌握这些插件的使用方法,对于提升Web开发技能和解决实际问题具有重要意义。

    人脸识别jquery插件demo

    总结来说,"人脸识别jquery插件demo"是一个用于在Web应用中集成人脸识别功能的实例,它依赖于jQuery库并提供了压缩和未压缩的JavaScript文件供不同需求使用。通过理解和应用这个插件,开发者能够将复杂的人脸识别...

    jquery插件 tabs有实例

    在这个"jquery插件 tabs有实例"中,我们将会看到如何使用jQuery来实现这一功能。基本步骤包括: 1. **HTML结构**:创建HTML元素,包括包含各个标签页的容器和每个标签对应的内容区。每个标签页是一个链接,内容区...

    jQuery插件集之(按钮特效)+Demo

    在本文中,我们将深入探讨jQuery插件在创建按钮特效方面的应用。jQuery库因其简洁的语法和强大的功能而受到广大Web开发者的青睐,特别是在处理DOM操作、事件处理和动画效果时。"jQuery插件集之(按钮特效)+Demo"提供...

    jQuery插件集之(可输入下拉框)N多例子+Demo

    本主题聚焦于一个特定的jQuery插件,即“可输入下拉框”插件,它提供了丰富的功能,如自动完成和模糊查询,极大地提升了用户在网页上的交互体验。 首先,我们要理解什么是“可输入下拉框”。传统的HTML下拉框(`...

    京东下雪jquery插件

    2. **自定义jQuery插件开发**:京东下雪插件是jQuery插件的一个实例,展示了如何扩展jQuery功能,实现特定的视觉效果。开发者通过封装JavaScript代码,提供了一系列的初始化选项、方法和事件,使得其他开发者可以...

Global site tag (gtag.js) - Google Analytics