jquery面板效果插件

原创 2012年03月28日 17:51:42

<!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=utf-8" />
<title>模拟面板效果</title>
<!--引入jquery类库文件-->
<script type="text/javascript" language="javascript" src="../js/jquery-1.7.1.min.js"></script>
<script type="text/javascript" language="javascript" src="../js/jquery-ui-1.8.18.custom.min.js"></script>
<!--引入css样式类库文件-->
<link rel="stylesheet" href="../css/ui-lightness/jquery-ui-1.8.18.custom.css">

<script type="text/javascript" language="javascript">
  $(function(){
      $("#tabs").tabs({
    //面板激活的事件效果
     event:"click",
    //设置不可用的面板,下标从0开始
     disabled:[1],
    //设置默认选中的面板
    selected:2,
    //设置透明度,从无到有的一个动画效果
    fx:{
    opacity:'toggle'
     }  
    });
 //移除一个面板
  $("#tabs").tabs("remove",1);
 //添加一个面板
     $("#tabs").tabs("add","tab-4.html","面板5");
 
 });
</script>
</head>

<body>
  <div id="tabs">
   <ul>
    <li><a href="#tab-1">第一个面板</a></li>
    <li><a href="#tab-2">第二个面板</a></li>
    <li><a href="#tab-3">第三个面板</a></li>
    <li><a href="./tab-4.html">面板4</a></li>
   </ul>
    <div id="tab-1">这里是面板一</div>
    <div id="tab-2">这里是面板二</div>
    <div id="tab-3">这里是面板三</div>
  </div>
</body>
</html>

 

tab-4.html中内容:

<!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=utf-8" />
<title>无标题文档</title>
</head>

<body>
 <p>我怎么跑到这里了呢?</p>
</body>
</html>


 

使用jQuery实现顺滑折叠面板

jQuery UI有折叠面板框架Accordion,但是我在使用这个框架的时候发现嵌套使用时会出现问题:最外层折叠面板从第二个开始展开时子内容无法完全显示,代码的height被置为了0 。我在CSS中...
  • u010803204
  • u010803204
  • 2017年08月02日 13:54
  • 742

jquery插件编写(以折叠面板为例)

 创建一个 jQuery 插件所推荐的方法是,先创建一个允许使用美元符号 ($) 的包装器函数。在默认情况下,美元符号可能与其他 JavaScript 框架发生冲突,如果将插件包装在一个函数中,...
  • stronglyh
  • stronglyh
  • 2015年07月27日 16:41
  • 954

jQuery 常用插件和UI插件 总结笔记

1. jQuery 常用插件 (1). 表单验证插件——validate  该插件自带包含必填、数字、URL在内容的验证规则,即时显示异常信息,此外,还允许自定义验证规则,插件调用方法如下:$(f...
  • u013147600
  • u013147600
  • 2015年07月10日 11:22
  • 1107

JQuery实现数字滚动增加的效果

转自:http://www.gbtags.com/gb/share/6207.htm 因为项目要求,要做一个数字滚动增加的效果。在网上没有找到好的插件,所以就自己做了一个,供大家参考。 先来看一下...
  • chelen_jak
  • chelen_jak
  • 2015年08月28日 08:32
  • 6648

jquery自定义插件实现分页效果

jquery自定义插件实现分页效果,简单好用
  • GISShiXiSheng
  • GISShiXiSheng
  • 2014年10月13日 18:01
  • 3424

8款效果精美的 jQuery 加载动画和进度条插件

加载动画和进度条在网站和 Web 应用中的使用非常流行。虽然网速越来越快,但是我们的网站越来越复杂,同时用户对网站的使用体验的要求也越来越高。在内容加载缓慢的时候,使用时尚的加载动画和进度条告诉用...
  • qq_27966627
  • qq_27966627
  • 2016年04月19日 13:37
  • 1665

炫酷的jQuery手风琴图片和菜单插件及源码

手风琴效果的应用非常广泛,我们常见的有手风琴图片切换和手风琴菜单,同时它也是焦点图的一种展现形式之一。今天我们就来分享一些基于jQuery的手风琴图片和菜单插件,并提供源代码下载,一起来看看吧。 ...
  • sinat_36258409
  • sinat_36258409
  • 2016年11月20日 17:42
  • 754

8 个最好的 jQuery 树形 Tree 插件

转载自http://www.admin10000.com/document/3778.html    由于其拥有庞大,实用的插件库,使得jQuery变得越来越流行。今天将介绍一些最好的jQuery...
  • apn172
  • apn172
  • 2014年01月24日 08:45
  • 1286

jQuery实现商品飞入购物车效果插件

本文原地址:http://www.daimajiayuan.com/sitejs-18635-1.html HTML 首先载入jQuery库文件和jquery.fly.min.js插件。 s...
  • elzjm
  • elzjm
  • 2015年04月28日 16:59
  • 1304

95+强悍的jQuery图形效果插件

现在的网站越来越离不开图形,好的图像效果能让你的网站增色不少。通过JQuery图形效果插件可以很容易的给你的网站添加一些很酷的效果。 使用JQuery插件其实比想象的要容易很多,效果也超乎想象。在本...
  • goodfav
  • goodfav
  • 2013年06月19日 00:06
  • 3736
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:jquery面板效果插件
举报原因:
原因补充:

(最多只允许输入30个字)