(Почему) jQuery делает мой слайдер толстым?

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

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


jquery jquery-ui
person Larry Lustig    schedule 24.10.2009    source источник
comment
Вероятно, потому что ваш CSS несовместим. Никто не знает, как вы реализовали свой код, поэтому, пожалуйста, предоставьте его :)   -  person meder omuraliev    schedule 24.10.2009
comment
Ничего особенного, я просто копирую демо-код со страницы jquery-ui Demo & Documentation. Я добавил код к вопросу выше.   -  person Larry Lustig    schedule 24.10.2009
comment
PS @meder: Если вы думаете, что проблема связана с CSS, я думаю, я спрашиваю, какое свойство или свойства CSS контролируют толщину ползунка в jquery-ui?   -  person Larry Lustig    schedule 24.10.2009
comment
Вы должны опубликовать скриншот (или ссылку) на то, что вы видите, если можете.   -  person Nathan Taylor    schedule 24.10.2009
comment
@ Натан, я разрабатываю локально, но постараюсь разместить проект на сервере. Страница jquery-ui: jqueryui.com/demos/slider/#multiple-vertical и эффект, который я вижу, в основном такой же, но мой слайдер просто толще, чем тот, что показан здесь.   -  person Larry Lustig    schedule 24.10.2009
comment
Я согласен с комментариями Медера и Натана. Если вы сформулируете точный вопрос, любой из них сможет помочь вам быстрее, чем я. Так получилось, что я знаком с пользовательским интерфейсом jQuery, поэтому я могу сделать вывод. В общем, старайтесь задавать конкретные вопросы, доступные широкой аудитории, и вы получите быстрый ответ.   -  person brianpeiris    schedule 24.10.2009
comment
И эти джинсы делают мою шлею толстой? (извините, пришлось сделать ;). В демонстрации jQuery .ui-slider-horizontal{height:0.8em} управляет толщиной канавки, а .ui-slider-handle {height:1.2em;width:1.2em;} определяет стиль ручки.   -  person micahwittman    schedule 24.10.2009
comment
Пропущенная демо-ссылка: docs.jquery.com/UI/Slider   -  person micahwittman    schedule 24.10.2009

Ответы (2)


arrow_upward
8
arrow_downward

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

person Jourkey    schedule 24.10.2009
comment
Спасибо, это точно. Уменьшение размера шрифта до 62,5% (число, взятое из приведенного выше примера Брайана) дало эффект, соответствующий демонстрации jquery-ui. Для моего собственного образования, можете ли вы объяснить механизм CSS, с помощью которого инструкция по размеру шрифта влияет на высоту ползунка? - person Larry Lustig; 24.10.2009
comment
+1 Jourkey правильный, свойство font-size, установленное в родительском элементе, действительно влияет на размер ползунка. Это связано с тем, что правила по умолчанию в jquery-ui.css используют единицу измерения em для определения размеров ползунка. Поскольку единицы em относятся к единицам родительского элемента (элементов), изменение размера шрифта в body изменяет размеры ползунка. Однако более подходящим решением было бы явное определение новых правил CSS для ползунка, как я описал в своем ответе, а не изменение font-size в body, поскольку это повлияет на всю страницу. - person brianpeiris; 24.10.2009
comment
@Brian, @Jourkey благодарит обоих. @ Брайан, я думаю, что пройдет некоторое время (по крайней мере, еще несколько часов), прежде чем я буду чувствовать себя комфортно, переопределяя стиль, предоставленный jquery-ui. Для меня это учебный проект (как, без сомнения, вы можете сказать), и этот вопрос о Stackoverflow имел большой успех в том смысле, что я многому научился. Спасибо за вашу помощь. - person Larry Lustig; 24.10.2009

arrow_upward
6
arrow_downward

Все виджеты пользовательского интерфейса jQuery имеют связанные с ними инструкции по созданию тем. В инструкциях для виджета ползунка упоминаются определенные классы 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>
person brianpeiris    schedule 24.10.2009
comment
Ударь меня. Не было исходного кода под рукой на моем телефоне. ;) - person Nathan Taylor; 24.10.2009
comment
Лол, ты отвечаешь на ТАКИЕ вопросы с телефона!? Это охуенно :Р - person brianpeiris; 24.10.2009
comment
Спасибо, Брайан, это помощь. Однако недавно я скачал и включил на страницу css-файл jquery-ui Themebuilder для одной из их тем. Когда я смотрю на эту тему на сайте конструктора тем (это тема под названием Smoothness, URL-адрес слишком длинный для вырезания и вставки), слайдер выглядит правильно. Любая идея, почему это было бы иначе на моей машине? - person Larry Lustig; 24.10.2009
comment
Если вы загрузили пользовательский интерфейс jQuery с сайта jqueryui.com/download, в ZIP-файл должен быть включен файл index.html. Ползунок выглядит иначе (неправильно), когда вы открываете этот файл в браузере? Если это не так, в вашем коде есть что-то (которое вы нам не показали), мешающее работе CSS. - person brianpeiris; 24.10.2009
comment
Нет, ползунок на странице jquery-ui-index.html выглядит правильно. Когда я изучаю свой ползунок в firebug, оказывается, что jquery использует правильные классы, и эти классы находятся в файле jquery-ui css. - person Larry Lustig; 24.10.2009
comment
@brian: Я не сомневаюсь, что ты прав, но я не знаю, что может мешать. Я отредактировал вопрос, включив заголовок на тот случай, если проблема может заключаться в порядке включения файлов CSS или js. Кроме этого, единственное, о чем я могу думать (подчеркнув, что я только начинаю работать с jQuery и CSS), — это попытаться переопределить классы jQuery-ui в моем CSS, чего я не делаю. - person Larry Lustig; 24.10.2009
comment
В качестве быстрого теста попробуйте переключить memoryGame.css и jquery-ui-1.7.2.custom.css и посмотрите, будет ли это иметь значение. Если нет, удалите memoryGame.css и memoryGame.js по отдельности и посмотрите, что произойдет. К вашему сведению, это элементарные шаги по отладке, которые вы должны предпринять самостоятельно, чтобы изолировать проблему. - person brianpeiris; 24.10.2009
comment
@Брайан. Спасибо. Уже пробовал переключать файлы css и удалять мой файл css перед публикацией (также вырезал многие другие посторонние элементы, чтобы получить максимально простой случай). В memoryGame.js есть мой jQuery, поэтому я могу его разобрать, но не могу удалить полностью. - person Larry Lustig; 24.10.2009
comment
Кроме того, используя firebug для проверки CSS, примененного к моему слайдеру и слайдеру на странице jquery-ui-index, похоже, что они оба получают одну и ту же инструкцию высоты 0,8 em от CSS и не заменяют инструкции для высоты. Действительно, весь CSS, примененный к двум ползункам, выглядит одинаково, за исключением того, что jquery-ui-index наследует некоторые инструкции, связанные со шрифтами, и (может быть, это он) line-height: normal из ‹body›, который не происходит на моей странице. - person Larry Lustig; 24.10.2009
comment
@Larry Приятно видеть, что вы предприняли основные шаги по отладке (честно говоря, я не мог сказать по вашему вопросу). высота строки, похоже, не имеет эффекта. Конечно, если вы действительно сократили свой код до основного возможного случая, а проблема все еще существует, то, по логике, вы уже должны знать, в чем проблема! ;) В идеале вы должны иметь возможность воспроизвести проблему на общедоступном веб-сайте или на jsbin.com, чтобы мы могли получить в основе проблемы. Я отредактировал свой ответ с помощью кода, который обеспечивает базовые функции слайдера. Пожалуйста, попробуйте увеличить его, чтобы воспроизвести проблему. - person brianpeiris; 24.10.2009
comment
@Brian: я собрал простой слайдер на jsbin.com/ijehu, и он такой же толстый, как тот, что у меня есть. здесь. Однако в моем примере нет всего CSS, который есть в вашем примере, поэтому, посмотрев на то, что я остановил, я уверен, что выясню проблему. - person Larry Lustig; 24.10.2009
comment
@ Брайан, Джорки попал в свой ответ. Мне не хватало директивы о размере шрифта, которую вы включили в ‹body› CSS. Директива font-size также масштабирует толщину разделителя. Спасибо за помощь пациенту. - person Larry Lustig; 24.10.2009