(Почему) JQuery заставляет мой слайдер выглядеть толстым? - PullRequest
Новая
       1

(Почему) JQuery заставляет мой слайдер выглядеть толстым?

4 голосов
/ 24 октября 2009

Я учу себя jQuery и начинаю на jquery-ui с помощью ползунка. Я подключил его, и функционально он работает хорошо, устанавливая некоторые глобальные переменные страницы, когда я перемещаю ручку. Однако он не похож на слайдер на демонстрационной странице jquery-ui.

Это горизонтальный слайдер, и я могу контролировать длину полосы, установив свойство CSS width, которое jquery-ui преобразует в слайдер. Но полоса примерно в два или три раза "толще", чем на демонстрационной странице, а ручка ползунка пропорционально больше. Выглядит нормально, но не так хорошо, как на демонстрационной странице.

Принимая настройку ширины в качестве подсказки, я попытался установить свойство 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?

Ответы [ 2 ]

8 голосов
/ 24 октября 2009

Размер слайдера контролируется свойством css 'font-size'. Вы хотите уменьшить размер шрифта родительского элемента.

6 голосов
/ 24 октября 2009

Все виджеты 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>

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...