jQuery громкость интерфейса отличается от того, что я вытолкнул? - PullRequest
Новая
       7

jQuery громкость интерфейса отличается от того, что я вытолкнул?

4 голосов
/ 18 февраля 2020

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

Почему и как это можно исправить?

Оригинал:

enter image description here

Финал (показан на сайте):

enter image description here

<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>


$(function() {
  // var audioElement = $("<audio>");

  function setVolume(myVolume) {
    if (audioElement != undefined) {
      audioElement.volume = myVolume;
    }
  }

  $("#volume").slider({
    min: 0,
    max: 1,
    value: 1,
    step: 0.01,
    range: "min",
    slide: function(event, ui) {
      setVolume(ui.value);
    }
  });
});

$("#player").hover(
  function() {
    $('.ui-slider-range-min').css("background-color", "#483EF1")
    $('.ui-slider-handle').css("display", "block")
  },
  function() {
    $('.ui-slider-range-min').css("background-color", "#B3B3B3")
    $('.ui-slider-handle').css("display", "none")
  }
);
/* audioUtilities */

.audioUtilitiesDiv {
  display: inline-block;
  /* background-color: darkblue; */
  width: 350px;
  height: 100%;
  position: fixed;
  right: 0px;
}

#player {
  width: 140px;
  height: 30px;
  /* position: relative; */
  /* margin: 0 auto; */
  bottom: 40px;
  /* background: black; */
  position: fixed;
  right: 15px;
}


/* #player:hover {
  background: #483EF1;
} */

i {
  position: absolute;
  margin-top: -6px;
  color: #666;
}

i.fa-volume-down {
  margin-left: -8px;
}

i.fa-volume-up {
  margin-right: -8px;
  right: 0;
}

#volume {
  position: absolute;
  left: 24px;
  margin: 0 auto;
  height: 5px;
  width: 100px;
  background: #505050;
  border-radius: 15px;
}

.ui-slider-range-min {
  height: 5px;
  width: 300px;
  position: absolute;
  background: #B3B3B3;
  border: none;
  border-radius: 10px;
  outline: none;
}


/* .ui-slider-range-min:hover {
  background: #483EF1;
} */

.ui-slider-handle {
  width: 16px;
  height: 16px;
  border-radius: 20px;
  background: #FFF;
  position: absolute;
  margin-left: -8px;
  margin-top: -6px;
  cursor: pointer;
  outline: none;
  display: none;
}


/* Volume slider */
<div class="audioUtilitiesDiv">
  <div id="player">
    <i class="fa fa-volume-down"></i>
    <div id="volume"></div>
    <!-- <i class="fa fa-volume-up"></i> -->
  </div>
</div>

Обновление:

Похоже, jquery файл пользовательского интерфейса не найден Я получаю эту ошибку в консоли:

файл: //code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css net :: ERR_FILE_NOT_FOUND

(Должен ли я что-то делать в терминале, может быть? Установить его?)

Ответы [ 3 ]

3 голосов
/ 21 февраля 2020

Я думаю, что это проблема в вашей среде разработки. Я думаю, что ваш компьютер не может получить jquery -ui css (с href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css" rel="stylesheet") .

В примере ниже я комментирую эту ссылку css, и появляется слайдер как ваш оригинал.

Чтобы решить вашу проблему, я думаю, вы должны изменить ссылку href на https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css. А затем добавьте флаг !important рядом со всеми css свойствами .ui-slider-handle класса, чтобы переоценить базовые c css jquery -ui. 

$(function() {
  var audioElement = $("<audio>");

  function setVolume(myVolume) {
    if (audioElement != undefined) {
      audioElement.volume = myVolume;
    }
  }

  $("#volume").slider({
    min: 0,
    max: 1,
    value: 1,
    step: 0.01,
    range: "min",
    slide: function(event, ui) {
      setVolume(ui.value);
    }
  });
  
  $("#player").hover(
  function() {
    $('.ui-slider-range-min').css("background-color", "#483EF1")
    $('.ui-slider-handle').css("display", "block")
  },
  function() {
    $('.ui-slider-range-min').css("background-color", "#B3B3B3")
    $('.ui-slider-handle').css("display", "none")
  }
);
});
/* audioUtilities */

.audioUtilitiesDiv {
  display: inline-block;
  background-color: darkblue;
  width: 350px;
  height: 100%;
  position: fixed;
  right: 0px;
}

#player {
  width: 140px;
  height: 30px;
  /* position: relative; */
  /* margin: 0 auto; */
  bottom: 40px;
  /* background: black; */
  position: fixed;
  right: 15px;
}


/* #player:hover {
  background: #483EF1;
} */

i {
  position: absolute;
  margin-top: -6px;
  color: #666;
}

i.fa-volume-down {
  margin-left: -8px;
}

i.fa-volume-up {
  margin-right: -8px;
  right: 0;
}

#volume {
  position: absolute;
  left: 24px;
  margin: 0 auto;
  height: 5px;
  width: 100px;
  background: #505050;
  border-radius: 15px;
}

.ui-slider-range-min {
  height: 5px;
  width: 300px;
  position: absolute;
  background: #B3B3B3;
  border: none;
  border-radius: 10px;
  outline: none;
}


/* .ui-slider-range-min:hover {
  background: #483EF1;
} */

.ui-slider-handle {
  width: 16px ;
  height: 16px ;
  border-radius: 20px ;
  background: #FFF ;
  position: absolute ;
  margin-left: -8px ;
  margin-top: -6px ;
  cursor: pointer ;
  outline: none ;
  display: none ;
}


/* Volume slider */
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">

<!-- COMMENT THIS LINE -->
<!--<link href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css" rel="stylesheet"/>-->

<div class="audioUtilitiesDiv">
  <div id="player">
    <i class="fa fa-volume-down"></i>
    <div id="volume"></div>
    <!-- <i class="fa fa-volume-up"></i> -->
  </div>
</div>
1 голос
/ 26 февраля 2020

Существует две проблемы.

Первая проблема:

файл: //code.jquery.com/ui/1.12.1 /themes/base/jquery-ui.css net :: ERR_FILE_NOT_FOUND

Объяснение:

Если протокол установлен по умолчанию, протокол текущей страницы используемый. Таким образом, Вы запускаете страницу разработки непосредственно из файловой системы, без использования локального веб-сервера или веб-сервера разработки, а ссылка на //code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css по умолчанию равна file:. Другие файлы загружаются из Вашего локального соединения inte rnet, поскольку Вы указали полную ссылку.

Вот отличный ответ на вопрос SO: html - ссылки без протокола http

Второй выпуск:

дизайн слайдера, который отображается на веб-сайте, отличается от того, который я разработал

Объяснение:

С вашего удаленного веб-сайта протокол по умолчанию будет, конечно, https, а ссылка на тему jquery -ui CSS будет правильно определена, и поэтому стили будут применены к Вашему slider widget.

Теперь для настройки базовой темы есть две возможности:

  • Если ваш пользовательский стиль еще не указан в базовой теме jquery -ui CSS, Вы должны определить его каким-то образом, и это будет правильно применено, и больше ничего не нужно будет делать
  • Если Ваш пользовательский стиль уже определен в базовой теме jquery -ui CSS, Вы необходимо переопределить , используя * 104 2 * специфичность . Вы можете либо использовать !important (см. Здесь: Что означает! Важное значение в CSS? ), либо использовать более глубокую роль. Вот ссылка: CSS Специфичность

Вот пример того, как настроить Ваш slider путем включения базовой темы jquery и переопределения необходимых стилей: 

#volume .ui-slider-handle {
  width: 16px;
  height: 16px;
  top: -6px;
  border-radius: 16px;
  background: #FFF;
  position: absolute;
  margin-left: -8px;
  cursor: pointer;
  outline: none;
  display: none;
}

#volume.ui-widget.ui-widget-content {
  border: none;
}

Как проверить, определен ли Ваш пользовательский стиль в базовой теме jquery -ui?

Инспектор объектов инструментов разработчика в Вашем Ваш друг здесь - браузер.

Пример: серая рамка вокруг ползунка определяется внутри jquery -ui CSS в строке 1298 следующим образом: 

.ui-widget.ui-widget-content {
    border: 1px solid #c5c5c5;
}

Теперь вы знаете, что вам нужно переопределить этот стиль.

Полный пример:

https://plnkr.co/edit/Mh8yFxz7TthnkIKz370F?p=preview

0 голосов
/ 18 февраля 2020

попробуйте это: 

<link rel="stylesheet" href="http://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">

вместо этого: 

<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
...