jQuery插件滑动器的使用
jQuery插件滑动器的使用
- <%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
- <%
- String path = request.getContextPath();
- String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
- %>
- <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
- <html>
- <head>
- <base href="<%=basePath%>">
- <title>My JSP 'slider.jsp' starting page</title>
- <meta http-equiv="pragma" content="no-cache">
- <meta http-equiv="cache-control" content="no-cache">
- <meta http-equiv="expires" content="0">
- <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
- <meta http-equiv="description" content="This is my page">
- <!--
- <link rel="stylesheet" type="text/css" href="styles.css">
- -->
- <script type="text/javascript"
- src="${pageContext.request.contextPath}/js/jquery-1.7.1.min.js">
- </script>
- <script type="text/javascript"
- src="${pageContext.request.contextPath}/js/jquery-ui-1.8.18.custom.min.js">
- </script>
- <link rel="stylesheet" type="text/css"
- href="${pageContext.request.contextPath}/css/ui-lightness/jquery-ui-1.8.18.custom.css">
- <script type="text/javascript">
- $(document).ready(function() {
- // Slider 滑动器的效果
- $('#slider').slider( {
- range : true, // false则分为两个滑块,如果为false,则没有连着 表示可分的 ,默认为true 表示是否是一个整体
- values : [ 17, 67 ],//两个滑块的长度
- step:10,//每次增长的步 长
- value:20,//为初始化值 ,为0居中,为默认的
- disable:false,//是否可用 默认是false,可用的
- animate:true, //点击滑块后面的任意位置,看滑块的效果
- max:100,//滑动效果的最大值和最小值
- min:-10,//打开的时候位置变了,初始值为0,如果-7是最小值,在左边+7的位置上,如果是居中的位置 最大值和最小值的绝对值相等
- orientation:"horizontal",//水平或垂直 如果是水平(horizontal) ,垂直为 vertical
- change:function(event,ui){
- //alert($("#slider").slider("option","value"));
- alert(ui.value);
- }
- });
- /*$("#slider").bind("slidechange",function(event,ui){
- alert(ui.value);
- });*/
- });
- </script>
- </head>
- <body>
- <h2>
- 滑动器的操作
- </h2>
- <h2 class="demoHeaders">
- Slider
- </h2>
- <div id="slider"></div>
- </body>
- </html>
相关推荐
Lzs 2020-10-23
聚合室 2020-11-16
零 2020-09-18
Justhavefun 2020-10-22
jacktangj 2020-10-14
ChaITSimpleLove 2020-10-06
Andrea0 2020-09-18
周游列国之仕子 2020-09-15
afanti 2020-09-16
88234852 2020-09-15
YClimb 2020-09-15
风雨断肠人 2020-09-04
卖口粥湛蓝的天空 2020-09-15
stulen 2020-09-15
pythonxuexi 2020-09-06
abfdada 2020-08-26
梦的天空 2020-08-25