用jquery写的面板

原创 2012年03月28日 20:55:08
<!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>

<script language="javascript" type="text/javascript" src="./js/jquery-1.7.1.min.js">
</script>
<script language="javascript" type="text/javascript" src="./js/jquery-ui-1.8.18.custom.min.js">
</script>

<link rel="stylesheet" href="./css/ui-lightness/jquery-ui-1.8.18.custom.css" />
<script type="text/javascript">

 //当窗体加载完毕的时候 触发该匿名函数
 //$(document) //把dom对象转换成jQuery对象
 //$(document).ready(function(){}) 
  $(function(){
	  
	  $("#tabs").tabs({
		  
		  //event:"mouseover",
		  event:"click",
		  
		  //disabled:[1],//面板不可用 从0开始
		  
		  fx:{
			  
			  opacity:"toggle"//透明度 从无到有的一个动画效果
			  
			  },
			  
			selected:1//默认选择中的面板
			  
		  });
		  
		  $("#tabs").tabs("remove",3);
		  
		  $("#tabs").tabs("add","tab4.html","面板四");
		  
		  
	  
	  });

</script>
</head>

<body>

  <h1>模拟tabs效果</h1>

  <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="./tab4.html">面板四</a></li>
    
    </ul>
    
    <div id="tab-1">fffffff</div>
    
    <div id="tab-2">eeeeeeee</div>
    
    <div id="tab-3">wwwwwwww</div>
  </div>


</body>
</html>


jQuery之折叠面板

1:折叠面板可以将不同分类的内容分别放在不同的面板中,这些面板在页面中层叠摆放,用户可以通过单击各个面板的标题来展开该面板,查看面板的内容, 与此同时,将自动折叠隐藏其他面板        $(...
  • woshisap
  • woshisap
  • 2012年05月07日 00:23
  • 8190

jQuery插件之折叠面板插件

jQuery UI插件折叠面板(accordion)可以实现展开页面中指定区域的折叠放置效果,这种效果俗语“手风琴”,既通过单击某块面板中的标题栏,就会展开相应的内容,当单击其他面板标题栏时,已展开...
  • w_l_j
  • w_l_j
  • 2012年03月26日 21:21
  • 2732

jQuery效果之滑动面板

无标题文档 $(document).ready(function(){               $('.box a').click(function(){          ...
  • xxssyyyyssxx
  • xxssyyyyssxx
  • 2015年10月28日 08:13
  • 519

jquery插件之面板

1、在学习jquery插件之前首先我们来看一下该怎样开始布置工作     jquery  ui使用前提:             第一步:引入类库文件                     包...
  • wjc19911118
  • wjc19911118
  • 2012年03月28日 21:18
  • 1984

使用jQuery实现顺滑折叠面板

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

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

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

jQuery Mobile 滑动显示面板

  • koastal
  • koastal
  • 2016年08月29日 19:27
  • 1095

Jquery实现的一个DIV层面板的折叠/展开效果

Jquery实现的一个DIV层面板的折叠/展开效果_网页代码站(www.webdm.cn) *{margin:0;padding:0;} body { font-size: 14px; li...
  • qq_32340877
  • qq_32340877
  • 2017年01月08日 15:09
  • 3597

jquery mobile 开发之panel随page滚动问题

最近做项目时,用到jquery mobile中的panel功能,代码如下: 列表 ...
  • hlj184
  • hlj184
  • 2016年03月02日 09:20
  • 1029

Jquery-UI—制作可折叠面板(accordion)

先来看一下效果: 使用jquery-ui制作如可折叠选项卡非常简单: 第一步:引入 jquery 和 jquery-ui 文件。 注 jquery-ui 要放在jquery引入之后。因为要引...
  • nongweiyilady
  • nongweiyilady
  • 2016年12月09日 23:11
  • 1184
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:用jquery写的面板
举报原因:
原因补充:

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