jquery 插件收录

插件一、jQuery Modal Dialog

 

jQuery Modal Dialog 是一个用来显示错误提示、警告信息、操作成功提示等等对话框的 jQuery 插件。

示例代码:

$.modaldialog.error('The operation failed.');

对话框选项包括有:

  • AutoClose Timeout
  • Show/Hide Close Button
  • Dialog Title
  • Dialog Width

演示地址:http://tautologistics.com/projects/jquery.modaldialog/doc/1.0.0/

 

开发语言: JavaScript 项目主页: http://plugins.jquery.com/project/modaldialog 文档地址: 下载地址: http://tautologistics.com/projects/jquery.modaldialog/src/jquery.modaldialog.1.0.0.zip

插件二、jQuery UI

jQuery UI 是一套 jQuery 的页面 UI 插件,包含很多种常用的页面空间,例如 Tabs(如本站首页右上角部分) 、拉帘效果(本站首页左上角)、对话框、拖放效果、日期选择、颜色选择、数据排序、窗体大小调整等等非常多的内容。

开发语言: JavaScript 项目主页: http://ui.jquery.com/ 文档地址: http://docs.jquery.com/UI 下载地址: http://ui.jquery.com/download

 

插件三、jQuery对话框插件 ThickBox

ThickBox是一个基于JQuery类库的扩展,它能在浏览器界面上显示非常棒的UI框, 它可以显示单图片,多图片,ajax请求内容或链接内容.

ThickBox 是用超轻量级的 jQuery 库 编写的. 压缩过 jQuery 库只15k, 未压缩过的有39k. ThickBox 的 JavaScript 代码CSS 文件只占12k. 所以压缩过的 jQuery 代码和 ThickBox 总共只有27k. ThickBox 能重新调整大于 浏览器窗口的图片. ThickBox 的多 功能性包括(图片,iframed 的内容,内嵌的内容,AJAX 的内容).
  • 展示单一图片(single image)
  • 展示图片集(multiple images)
  • 展示内嵌内容(inline content)
  • 展示被iFrame的内容(iframed content)
  • 展示AJAX内容(AJAX content)
  • 其他:教程本身还自带了一个很酷的JS跳转脚本
ThickBox 能隐藏 Windows IE 6 里的元素. ThickBox 能在使用者滚动 页面或改变浏览器窗口大小的同时始终保持居中. 点击图片, 覆盖层, 或关闭链接能移除 ThickBox. 开发语言: JavaScript 项目主页: http://jquery.com/demo/thickbox/ 文档地址: 下载地址: http://jquery.com/demo/thickbox/thickbox-code/thickbox.js

 

插件四、jQuery 弹出窗口插件 Facebox

facebox是一个jquery为基础的lightbox,可显示图像, divs ,或者远程页面。 它的使用简单,容易。

首先我们用Facebox观看图片 :
<a href="cssrain.jpg" rel="facebox">text</a>
仅仅这样就OK。

然后我们在来看 用Facebox观看div  :
<a href="#info" rel="facebox">text</a>
ok,就这样就能简单的实现facebox了。

当然在ajax横行的时代,ajax远程加载页面也是必不可少的。
我们用Facebox加载远程的页面内容:
<a href="cssrain.html" rel="facebox">text</a>
OK,这样就能远程加载 cssrain.html 的内容,以facebox的方式显示了。

用法:
facebox应该导入
<script src="jquery.js" type="text/javascript"></script>
<link href="/facebox/facebox.css" _fcksavedurl=""/facebox/facebox.css"" media="screen" rel="stylesheet" type="text/css"/>
<script src="/facebox/facebox.js" type="text/javascript"></script>
jQuery(document).ready(function($) {
//超链接的rel属性是否具有facebox
  $('a[rel*=facebox]').facebox()
})

开发语言: JavaScript 项目主页: http://famspam.com/facebox/ 文档地址: 下载地址: http://famspam.com/facebox/releases/facebox-1.2.tar.gz

 

插件五、jQuery的弹出窗口插件 FancyBox

FancyBox是一款基于jquery开发的类Lightbox插件。支持对放大的图片添加阴影效果,对于一组相关的图片添加导航操作按纽,该lightbox除了能够展示图片之外,还可以展示iframed内容, 通过css自定义外观。

相对与Lightbox而言,阴影效果更好。但是比Lightbox绚丽。

使用很是简单,可以参照Lightbox,修改添加代码。

示例代码:

$(document).ready(function() { /* This is basic - uses default settings */ $("a#single_image").fancybox(); /* Using custom settings */ $("a#inline").fancybox({ 'hideOnContentClick': true }); $("a.group").fancybox({ 'zoomSpeedIn': 300, 'zoomSpeedOut': 300, 'overlayShow': false }); });

开发语言: JavaScript 项目主页: http://fancybox.net/ 文档地址: 下载地址: http://code.google.com/p/fancybox/downloads/detail?name=jquery.fancybox-1.2.1.zip 演示地址: http://www.stentorwebdesign.com/downloads/rapidalbum/fancyboxdemo/

 

插件六、jQuery对话框插件 SimpleModal

演示地址: http://www.ericmmartin.com/simplemodal/

 

插件七、jQuery 对话框插件 Dialog jQuery Plugin

Dialog jQuery Plugin 是一个 jQuery 的对话框插件,生成的对话框窗口可以移动、改变大小和关闭等。

开发语言: JavaScript 项目主页: http://www.etmvc.cn/project/show/61 文档地址: 下载地址: http://www.etmvc.cn/project/show/61
How to use 1. Setup Include nessesary JS files (FancyBox uses pngFix to fix IE png transparency). --------------------------- /* required */ <script type="text/javascript" src="js/jquery.js"></script> <script type="text/javascript" src="js/jquery.fancybox.js"></script> /* optional */ <script type="text/javascript" src="js/jquery.pngFix.js"></script> <script type="text/javascript" src="js/jquery.metadata.js"></script> -------------------------------------------- Include FancyBox CSS file. Dont forget to change image paths. -------------------------------------------- <link rel="stylesheet" href="css/fancybox.css" type="text/css" media="screen"> -------------------------------------------- 2. Add your images Add images and wrap them with a link to the zoomed version -------------------------------------------- <a href="image_big.jpg"><img src="image_small.jpg" alt=""/></a> -------------------------------------------- Optional: Use the title attribute if you want to show a caption Optional: Use the rel attribute to group images 3. Use the plugin Sample examples: -------------------------------------------- $(document).ready(function() { $("p#test1 a").fancybox(); $("p#test2 a").fancybox({ 'hideOnContentClick': true }); $("p#test3 a").fancybox({ 'zoomSpeedIn': 0, 'zoomSpeedOut': 0, 'overlayShow': true }); }); ------------------------------------------- Available options hideOnContentClick Hides FancyBox when cliked on zoomed item (false by default) zoomSpeedIn Speed in miliseconds of the zooming-in animation (no animation if 0) zoomSpeedOut Speed in miliseconds of the zooming-out animation (no animation if 0) frameWidth Default width for iframed and inline content frameHeight Default height for iframed and inline content overlayShow If true, shows the overlay (false by default) overlayOpacity Opacity of overlay (from 0 to 1) itemLoadCallback Custom function to get group items (see example on this page source) Comments
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值