jQuery插件滑动器的使用

原创 2012年03月26日 22:26:35
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>


相关文章推荐

生成滑动拼图的jQuery插件jqPuzzle

  • 2010年02月16日 18:47
  • 20KB
  • 下载

滑动区域选择jquery插件

滑动区域选择 body { font-size: 62.5%; font-family: "Arial Unicode MS", Arial, Helvetica, ...

tabox 左右滑动选项卡封装jquery插件

/***demo******/ tabBOX左右滑动   body{margin:0;padding:0;}   ul,li{margin:0;padding:0;l...

jquery插件——滑动条(2)

以下是一个基于jquery的滑动条实例,实现了简单的滑动效果: 测试页面: jquery插件-滚动条 id...
  • xwlyun
  • xwlyun
  • 2015年04月07日 09:33
  • 284

一个模拟手机手指滑动事件的jquery插件

个小的模拟手机手指滑动事件的jquery插件。具备左滑动、右滑动、上滑动、下滑动事件的功能。 随手写的,会有很多不足,希望前端朋友们能够相互补充,完善。 一下是代码,用法:需要对div加左滑动事件,$...

jquery插件之easing使用

  • 2014年11月25日 10:02
  • 28KB
  • 下载

jQuery插件的写法以及使用

如今做web开发,jquery 几乎是必不可少的,同时jquery插件也是不断的被大家所熟知,以及运用。最近在搞这个jquery插件,发现它的牛逼之处,所以讲一讲jQuery插件的写法以及使用 (f...

jquery插件nyroModal在iframe中的使用

  • 2011年09月09日 19:12
  • 99KB
  • 下载
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:jQuery插件滑动器的使用
举报原因:
原因补充:

(最多只允许输入30个字)