Linux教程網 >> Linux編程 >> Linux編程 >> jQuery插件滑動器的使用

jQuery插件滑動器的使用

日期：2017/3/1 10:25:39 编辑：Linux編程

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>