html - jQuery 卷 UI 与我推出的不同？

Question

我最近完成了音量 slider 的 UI，然后将代码发布到了我的网站上。但是，网站上显示的 slider 设计与我设计的不同。

为什么会这样，我该如何解决？

原文:

最终(显示在网站上):

---

<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 ui 文件我在控制台中收到此错误:

file://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css net::ERR_FILE_NOT_FOUND

(我是否必须在终端中做一些事情？安装它？)

Answer 1

我认为这是您的开发环境中的问题。我认为您的计算机无法获取 jquery-ui css (使用 href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css"rel= “样式表”)。

在下面的例子中，我评论了这个 css 链接， slider 看起来像你原来的样子。

要解决您的问题，我认为您必须将 href 链接更改为 https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css .然后在 .ui-slider-handle 类的所有 css 属性旁边添加标志 !important 以过度收取 jquery-ui 的基本 css。

$(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>