歡迎來到Linux教程網
設為首頁 加入收藏
Linux教程網
Linux教程網
Linux教程網
您现在的位置： Linux教程網 >> UnixLinux >  >> Linux編程 >> Linux編程

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>  

Linux編程

jQuery插件placeholder的使用方法

jQuery插件應用之 --- 選項卡插件的使用

jQuery插件滑動器的使用

jQuery的插件 --- 對話框的效果 （有遮罩效果）

jQuery插件的應用之 --- 日歷

jQuery插件的實現

jQuery中Ajax使用

jQuery表單校驗jquery.validate.js的使用

相關文章
  • Linux編程
  • SHELL編程
  • PERL編程
    • Copyright © Linux教程網 All Rights Reserved