代码之家 › 专栏 › 技术社区 › Larry Lustig

(为什么)jquery是否使我的滑块看起来很胖?

jquery-ui jquery

Larry Lustig · 技术社区 · 16 年前

我正在自学jquery,并从jquery ui开始使用一个滑块控件。我已经将它连接起来,并且在功能上运行良好,当我滑动手柄时设置一些全局页面变量。但是,它看起来不像jquery ui演示页面上的滑块。

它是一个水平滑块,我可以通过设置jquery ui转换为滑块的css width属性来控制条的长度。但是这个条比演示页面上的条厚两到三倍,滑块手柄也相应地大。看起来不错,但不如演示页面上的好。

以宽度设置为提示,我尝试设置底层的css height属性。这改变了酒吧部分的高度,但不是现在看起来超大的把手。

这是标题:

<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演示页面上显示的相同厚度吗?

2 回复 | 直到 16 年前

Jourkey 16 年前

滑块大小由“字体大小”css属性控制。要减小父元素的字体大小。

brianpeiris 16 年前

所有jquery UI小部件都有 theming instructions 与他们有关联。Slider小部件的说明提到了分配给Slider句柄的某些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>