我正在自学jQuery并使用滑块控件从jquery-ui开始.我把它连接起来并在功能上运行良好,当我滑动手柄时设置一些全局页面变量.但是,它看起来不像jquery-ui演示页面上的滑块.
它是一个水平滑块,我可以通过设置jquery-ui转换为滑块的CSS width属性来控制条的长度.但是条形图比演示页面上的条纹厚两到三倍,并且滑块手柄比例更大.它看起来不错,但不如演示页面上的那个好.
将宽度设置作为提示,我尝试设置底层的CSS高度属性.这改变了杆部分的高度,但不是现在看起来特别大的把手.
这是标题:
<head>
<title>The Memory Game</title>
<link href="css/smoothness/jquery-ui-1.7.2.custom.css" rel="stylesheet" type="text/css" />
<link href="css/memoryGame.css" rel="stylesheet" type="text/css" />
<script src="js/jquery-1.3.2.min.js" type="text/javascript"></script>
<script src="js/jquery-ui-1.7.2.custom.min.js" type="text/javascript"></script>
<script src="js/memoryGame.js" type="text/javascript"></script>
</head>
这是HTML标记:
<div id="control-panel" class="ui-state-default">
<div id="slider" style="width: 150px"></div>
</div>
这是我的控制面板CSS:
div#control-panel {
padding: 10px;
float: right;
}
以下是我应用滑块的jQuery:
$('#slider').slider({
max: 10000,
value: waitTime,
change: function(event, ui) {
waitTime = ui.value;
fadeTime = waitTime / 3;
}
});
任何人都可以建议我如何缩放滑块的厚度或至少获得jquery-ui演示页面上显示的相同厚度？
所有jQuery UI小部件都有与之关联的主题指令.滑块小部件的说明提到了分配给滑块手柄的某些CSS类.
查看jquery-ui.css(或ui.slider.css,如果您使用的是开发包),您可以看到默认的CSS类似于:
.ui-slider .ui-slider-handle {
width: 1.2em;
height: 1.2em;
}
.ui-slider-horizontal .ui-slider-handle {
top: -0.3em;
margin-left: -0.6em;
}
您可以覆盖这些CSS规则以创建任何大小的句柄.
我在这里制作了基本的滑块功能:http://jsbin.com/otika3(可通过http://jsbin.com/otika3编辑).请尝试在http://jsbin.com上重现您的问题,并与我们分享公共链接.
完整来源:
<!doctype html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/themes/base/jquery-ui.css" type="text/css" />
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.min.js"></script>
<title>http://stackoverflow.com/questions/1616675</title>
<style type="text/css" media="screen">
html, body, #content { height: 100%; }
body { background-color: #000; font-size: 62.5%; color: #fff; }
#content { width: 700px; margin: 0 auto; border: 1px solid white; padding: 1em;}
#slider { width: 200px; }
</style>
</head>
<body>
<div id="content">
<div id="slider"></div>
</div>
<script>
$('#slider').slider();
</script>
</body>