jQuery弹出层插件与使用方法

<!doctype html public "-//w3c//dtd xhtml 1.0 transitional//en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=gb2312" />
<title>jquery弹出层插件与使用方法</title>
</head>

<body>
jquery弹出层插件大全:
   1.thickbox

     目前用的比较多的,最新版本是thickbox3.1
下载地址:http://jquery.com/demo/thickbox/#examples

   2.colorbox
官方网站:http://colorpowered.com/colorbox/
下载地址:http://colorpowered.com/colorbox/colorbox.zip
演示实例:http://colorpowered.com/colorbox/core/example1/index.html

   3.fancybox
官方网站:http://fancybox.net
下载地址:http://fancybox.googlecode.com/files/jquery.fancybox-1.2.5.zip
演示实例:http://fancybox.net/example

   4.jqueryui dialog
官方网站:http://jqueryui.com/demos/dialog/
下载地址:http://jqueryui.com/demos/dialog/
演示实例:http://jqueryui.com/demos/dialog/

   5.dom window
官方网站:http://swip.codylindley.com/
下载地址:http://swip.codylindley.com/jquery.domwindow.网页特效
演示实例:http://swip.codylindley.com/domwindowdemo.html

   6.shadowbox
官方网站:http://www.shadowbox-js.com/
下载地址:http://www.shadowbox-js.com/download.html
演示实例:http://www.shadowbox-js.com/index.html
</body>
</html>

下面发布一些jquery插件的用法

简单配置一下就可以实现如下效果:

http://flowplayer.org/tools/demos/tabs/index.html

2、扩展css教程样式就可以定做自己的tabs

/* alternate colors: skin2 */ 
ul .skin2  a  {
    background-color: #89a ;        
    color: #fff  !important;
}
 
/* mouseo教程ver state */ 
ul .skin2  a :hover  {
    background-color: #678 ;
}
 
/* active tab */ 
ul .skin2  a .current  {
    background-color: #4f5c6a ;
    border-bottom: 2px  solid  #4f5c6a ;    
}
 
/* tab pane with background gradient */ 
div .skin2  div  {
    color: #fff ;
    background: #234  url( /img/global/gradient/h300.png)  repeat-x  scroll  0  -50px ;
    min-height: 200px ;
}

效果如下:

http://flowplayer.org/tools/demos/tabs/skins.html

3、只是浏览器的【前进】和【后退】

  code
$( function () {     $( " ul.css-tabs " ).tabs( " div.css-panes > div " , {history:  true }); });
效果如下:

http://flowplayer.org/tools/demos/tabs/history.html

4.通过ajax调用每个tab的内容,只有第一次点击tab按钮的时候 调用tab页内容

使用非常简单,效果如下:

http://flowplayer.org/tools/demos/tabs/ajax.html

5、tab向导,比如形成购物车订单过程

完善个人信息->修改购物车商品->查看订单

效果如下:http://flowplayer.org/tools/demos/tabs/wizard.html

此种功能特别有用。

6、其他的还有手风琴效果,自己发掘吧,显示地址如下:

http://flowplayer.org/tools/demos/tabs/accordion-horizontal.html

此插件的下载地址如下:

http://flowplayer.org/tools/download.html

jquery.tools.min.js是一个ui功能包,还包括其他的一个ui特效

tooltip :很不错的提示功能插件

scrollable :滚动效果插件

overlay :很好用的遮罩层插件

expose :背景变暗效果 

时间: 2024-09-10 10:37:05

jQuery弹出层插件与使用方法的相关文章

jQuery弹出层插件hwLayer使用方法详解

我们知道,jQuery为开发者提供了插件开发机制,其中一种方法是使用$.extend()来扩展jQuery,它其实就是用来在jQuery命名空间上增加新函数.而另一种也是我们常用来开发jQuery插件的方法是通过$.fn 向jQuery添加新的方法. 基本模板 我们来使用$.fn来做插件开发,这里所说的基本模板也可以说是基本格式吧,经常做jQuery插件开发的朋友会先把插件格式定下来,然后就是往格式里填业务代码. 以下代码是一个基本的jQuery插件的格式结构. ;(function($,win

jQuery弹出层插件Lightbox_me使用指南_jquery

网站开发过程中,为了增加网站交互效果,我们有时需要在当前页面弹出诸如登陆.注册.设置等窗口.而这些窗口就是层,弹出的窗口就是弹出层.jQuery中弹出层插件很多,但有些在html5+css3浏览器下,支持完美.而在例如ie8一下的浏览器下显示不出应有的效果.例如jquery.avgrund插件在ie8下就无法显示. 本文介绍的插件Lightbox_me可以完美的支持chrome,firefox和ie7,ie8,ie9等主流浏览器. 1.Lightbox_me插件功能 用于显示弹出层 2.Ligh

jQuery 弹出层插件(推荐)_jquery

最近在研究弹出层插件时发现网上很多插件功能很强大,同时插件也很庞大.在这里个人写了一个比较秀珍的弹出层插件. jquery.popdialog.js $(function () { $.fn.PopDialog = function (options) { var defaults = { Event: "click", //触发响应事件 title: "title", //弹出层的标题 type: "text", //弹出层类型(text.容器

原创jQuery弹出层插件分享_jquery

依赖jquery,兼容IE6\7\8 火狐 chrom 等主流浏览器(绝对原创), 不过请求大神帮我提升点效率. /** * jQuery弹出层插件 * * @author lanhaoooo@163.com * @since 2014-08-23 */ (function($) { var methods = { o : { isIe : !-[ 1, ] || document.documentMode >= 9,//后面的是判断IE9.IE10的 ie6 : !-[ 1, ] &&am

jQuery弹出层插件Lightbox

  在使用discuzx中有一个Message以及Dialog方法来显示信息对话框.今天写项目的时候,需要一个信息对话框,所以就着手利用lightbox_me插件来写一个做备用. 网站开发过程中,为了增加网站交互效果,我们有时需要在当前页面弹出诸如登陆.注册.设置等窗口.而这些窗口就是层,弹出的窗口就是弹出层.jQuery中弹出层插件很多,但有些在html5+css3浏览器下,支持完美.而在例如ie8一下的浏览器下显示不出应有的效果.例如jquery.avgrund插件在ie8下就无法显示. 本

Jquery弹出层插件Thickbox使用心得

前段时间在建设银行项目上用EXT完整做了个单页系统,太赶了,没有记录下任何东西, 现在都忘了,怪可惜的.这次项目用JQuery做js的东西.主要用了个弹出层控件thickbox, 自己也扩展和修改了一下.这里就记下来,也提供大家下载,希望对大家有用吧. thickbox官方网站(上面有例子和基本的使用方法): http://jquery.com/demo/thickbox/ 就我使用过程中,thickbox常见问题: 1 .跨iframe的弹出层. 症状:每次thickbox都只在frame中弹

Jquery 弹出层插件实现代码_jquery

直接看代码: 复制代码 代码如下: <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Layer.aspx.cs" Inherits="Layer" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/

jQuery弹出层插件简化版代码下载_jquery

复制代码 代码如下: String.prototype.replaceAll = function(s1,s2){  return this.replace(new RegExp(s1,"gm"),s2);  }; (function($){  /*  * $-layer 0.1 - New Wave Javascript  *  * Copyright (c) 2008 King Wong * $Date: 2008-10-09 $ */ var ___id___ = "&

Jquery弹出层插件ThickBox的使用方法_jquery

thickbox是jQuery的一个插件,其作用是弹出对话框.网页框,使用户体验度更加愉悦,下面就来简单介绍它的几种用法. 声明一下:这只是个人的总结记载而已. 准备工作:你需要三个文件:thickbox.js.thickbox.css.jquery.js,网上到处可下 具体使用: 第一步:将这三个文件引入到你要使用thickbox的页面 复制代码 代码如下: <script type="text/javascript" src="jquery.js">