jQuery插件的使用 --- 手风琴的效果


jQuery插件的使用 --- 手风琴的效果  
在使用jQuery插件之前要导入需要的js文件和css文件，代码如下： 

  1. <%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>  
  2. <%  
  3. String path = request.getContextPath();  
  4. String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";  
  5. %>  
  6.   
  7. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">  
  8. <html>  
  9.   <head>  
  10.     <base href="<%=basePath%>">  
  11.       
  12.     <title>My JSP 'acc.jsp' starting page</title>  
  13.       
  14.     <meta http-equiv="pragma" content="no-cache">  
  15.     <meta http-equiv="cache-control" content="no-cache">  
  16.     <meta http-equiv="expires" content="0">      
  17.     <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">  
  18.     <meta http-equiv="description" content="This is my page">  
  19.     <!--   
  20.     <link rel="stylesheet" type="text/css" href="styles.css">  
  21.     -->   
  22.     <!-- 引入类库文件 -->   
  23.     <script type="text/javascript" src="${pageContext.request.contextPath}/js/jquery-1.7.1.min.js"></script>  
  24.     <script type="text/javascript" src="${pageContext.request.contextPath}/js/jquery-ui-1.8.18.custom.min.js"></script>  
  25.     <link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/css/ui-lightness/jquery-ui-1.8.18.custom.css">  
  26.   <script type="text/javascript">  
  27.   //页面加载完毕触发匿名函数  
  28.     $(document).ready(function(){  
  29.         //手风琴的效果   
  30.         $("#accordion").accordion(  
  31.             {  
  32.                 header:"h3",//header设置的是头标题，必须是h3，如果更改 ，没有效果   
  33.                 animated:"slide", //代表是否有动画效果,默认值为slide，没有默认的效果   
  34.                 event:"mouseover",//event事件处理方式   click点击事件滑过的效果  
  35.                 autoHeigth:true,//自动设置高度   
  36.                 //设置小图标   
  37.                 icon:{  
  38.                     header:"ui-accordion-header",  
  39.                     headerSelected:"ui-accordion-header"  
  40.                 },     
  41.                 active:1//设置默认展开的主题   
  42.             });  
  43.         //获取手风琴中的options的值  
  44.         var activeVal=$("#accordion").accordion("option","active");  
  45.         //varactiveVal=$("#accordion").accordion("option","active",1);  
  46.         alert(activeVal);  
  47.     });  
  48.   </script>  
  49.   </head>  
  50.     
  51.   <body>  
  52.     <div>  
  53.         <div>  
  54.             <h1>模仿手风琴的效果</h1>  
  55.             <div id="accordion">  
  56.                 <div>  
  57.                     <h3><a href="#">first</a></h3>  
  58.                     <div>欢迎进入第一个内容</div>  
  59.                 </div>  
  60.                 <div>  
  61.                     <h3><a href="#">second</a></h3>  
  62.                     <div>欢迎进入第二个内容</div>  
  63.                 </div>  
  64.                 <div>  
  65.                     <h3><a href="#">thrid</a></h3>  
  66.                     <div>欢迎进入第三个内容</div>  
  67.                 </div>  
  68.                   
  69.             </div>  
  70.         </div>  
  71.     </div>  
  72.   </body>  
  73. </html>  

相关内容