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

jQuery插件滑動器的使用

jQuery插件滑動器的使用
  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 'slider.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.         <script type="text/javascript"  
  23.             src="${pageContext.request.contextPath}/js/jquery-1.7.1.min.js">  
  24. </script>  
  25.         <script type="text/javascript"  
  26.             src="${pageContext.request.contextPath}/js/jquery-ui-1.8.18.custom.min.js">  
  27. </script>  
  28.         <link rel="stylesheet" type="text/css"  
  29.             href="${pageContext.request.contextPath}/css/ui-lightness/jquery-ui-1.8.18.custom.css">  
  30.   
  31.         <script type="text/javascript">  
  32. $(document).ready(function() {  
  33.     // Slider 滑動器的效果   
  34.         $('#slider').slider( {  
  35.             range : true, //   false則分為兩個滑塊，如果為false，則沒有連著      表示可分的 ,默認為true   表示是否是一個整體   
  36.             values : [ 17, 67 ],//兩個滑塊的長度   
  37.             step:10,//每次增長的步 長   
  38.             value:20,//為初始化值 ，為0居中，為默認的   
  39.             disable:false,//是否可用  默認是false，可用的   
  40.             animate:true, //點擊滑塊後面的任意位置，看滑塊的效果   
  41.             max:100,//滑動效果的最大值和最小值    
  42.             min:-10,//打開的時候位置變了,初始值為0，如果-7是最小值,在左邊+7的位置上，如果是居中的位置  最大值和最小值的絕對值相等    
  43.             orientation:"horizontal",//水平或垂直   如果是水平(horizontal)  ,垂直為 vertical  
  44.             change:function(event,ui){  
  45.                 //alert($("#slider").slider("option","value"));  
  46.                 alert(ui.value);  
  47.             }  
  48.         });  
  49.         /*$("#slider").bind("slidechange",function(event,ui){  
  50.             alert(ui.value);  
  51.         });*/  
  52.     });  
  53. </script>  
  54.     </head>  
  55.   
  56.     <body>  
  57.         <h2>  
  58.             滑動器的操作  
  59.         </h2>  
  60.         <h2 class="demoHeaders">  
  61.             Slider  
  62.         </h2>  
  63.         <div id="slider"></div>  
  64.     </body>  
  65. </html>  

Linux編程

Ubuntu 8.04下firefox3插件使用

jQuery插件placeholder的使用方法

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

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

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

jQuery插件的實現

jQuery中Ajax使用

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

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