自己改的水平滑块
<%@ page language="java" contentType="text/html; charset=utf-8"
pageEncoding="utf-8"%>
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery UI 滑块（Slider） - 对齐增量</title>
<link rel="stylesheet" href="slide.css">
<script src="slide1.js"></script>
<script src="slide2.js"></script>
<style type="text/css">
.slider{
width:50px;
height:15px;
}
</style>
<script>
$(function() {
$( ".slider" ).slider({
min: 0,
max: 1,
step: 1,
slide: function( event, ui ) {
$( ".amount" ).val(ui.value );
}
});
$(".slider").mouseup(function(){
if($( ".amount" ).val()==0) {
$( ".amount" ).val("已发布");
}if($( ".amount" ).val()==1){
$( ".amount" ).val("未发布");
}
});
$(".slider").mouseout(function(){
if($( ".amount" ).val()==0) {
$( ".amount" ).val("已发布");
}
if($( ".amount" ).val()==1){
$( ".amount" ).val("未发布");
}
})
});
</script>
</head>
<body>
<input type="text" disabled="true" class="amount" style="border:0; width:40px;color:black; " value="已发布">
<div class="slider"></div>
</body>
</html>
pageEncoding="utf-8"%>
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery UI 滑块（Slider） - 对齐增量</title>
<link rel="stylesheet" href="slide.css">
<script src="slide1.js"></script>
<script src="slide2.js"></script>
<style type="text/css">
.slider{
width:50px;
height:15px;
}
</style>
<script>
$(function() {
$( ".slider" ).slider({
min: 0,
max: 1,
step: 1,
slide: function( event, ui ) {
$( ".amount" ).val(ui.value );
}
});
$(".slider").mouseup(function(){
if($( ".amount" ).val()==0) {
$( ".amount" ).val("已发布");
}if($( ".amount" ).val()==1){
$( ".amount" ).val("未发布");
}
});
$(".slider").mouseout(function(){
if($( ".amount" ).val()==0) {
$( ".amount" ).val("已发布");
}
if($( ".amount" ).val()==1){
$( ".amount" ).val("未发布");
}
})
});
</script>
</head>
<body>
<input type="text" disabled="true" class="amount" style="border:0; width:40px;color:black; " value="已发布">
<div class="slider"></div>
</body>
</html>