时间戳

首页 > 解决方案 > 用拨动开关替换 Select 标签

php - 用拨动开关替换 Select 标签

问题描述

我在项目中使用选择标签来更改网站的主题。这在我的项目中就像一个魅力，但我想用带有 jquery 集成的切换开关替换选择标签。就像，youtube 切换黑暗主题。我怎样才能做到这一点

这是我的代码。

HTML、JS 和 JQuery

$(function() {
  $('.style-change').change(function() {

    var style = $(this).val();
    $('body').fadeOut("slow", function() {
      $('link[rel="stylesheet"]').attr("href", style + ".css");
      $('body').fadeIn("slow");

      $.cookie("css", style, {
        expires: 365,
        path: '/'
      });
    });
  });
});

$(document).ready(function() {
  $("#style").val('<?php echo $style; ?>');
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-cookie/1.4.1/jquery.cookie.js"></script>
<select name="" class="style-change form-control" id="style">
  <option value="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min">Default Style</option>
  <option value="https://bootswatch.com/3/darkly/bootstrap.min">Night Mode</option>
</select>

PHP

<?php
if (isset($_COOKIE['css'])) {
    $style = $_COOKIE['css'];
} else {
    $style = 'default';
}
?>

我正在使用 jQuery cookie 库将用户设置保存在 cookie 中。

任何建议都将是可观的。

演示页面

标签： phpjqueryhtmlcss

解决方案

请参阅this，这可能会对您有所帮助 - https://www.jqueryscript.net/form/jQuery-Plugin-To-Convert-Select-Box-Into-A-Switch-Control-Switch-Button.html

基本用法：

  1. 在文档中加载 jQuery 库和 jQuery 切换按钮插件。

  2. 创建一个常规选择框。

      <option value="1">Item One</option>

  <option value="2">Item Two</option>

  <option value="3">Item Three</option>

  <option value="4" selected>Item Four</option>


</select>

  3. 调用插件将其转换为可切换的开关按钮。

    $('.btn-switch').switchButton();

  4. 将您的自定义样式添加到此开关按钮。

    .switch-选择{

      overflow: hidden;

  border-radius: 3px;

}



.switch-select-button {

  text-align: center;

  font-size: 80%;

  padding: 5px;

  cursor: pointer;

  background: rgb(224, 224, 224);

}


.switch-select-button:hover {

  background: rgb(207, 55, 55);

  color: white;

}

  5. 可用选项。

    template: "", // 自定义模板

    class: "switch-select", // element class

innerclass: "switch-select-button", // inner element class

width: "", // default to its parent width

marker: "#3577EE, // marker color

markerback: "#B9B9B9", // marker background color

markerh: "4px", // marker size

onchange: "function(value){}" // callback function

推荐阅读