jquery - 带有文本的自定义复选框引导切换开关

Question

我正在尝试实现如下图所示但尚未获得任何结果。我需要一个带有不同文本的切换按钮，例如是/否、自动/自定义、选中/取消选中。我试过了，但没有得到与下图相同的结果。

查看演示代码:http://discountwicedeals.com/toggle.html

Answer 1

您可以使用 jQuery 执行此操作。

一些很棒的插件可以在这里找到(示例和下载):https://simontabor.com/labs/toggles/。

如果您想搜索其他内容，请在 Google 上搜索“jQuery toggle buttons”。我建议使用 HTML 和 jQuery 代码的源代码。否则您需要修改代码，这可能很痛苦。

和我给你的第一个链接:https://simontabor.com/labs/toggles/有关，看这个链接:https://www.npmjs.com/package/jquery-toggles。在第 3 步，您可以自定义切换按钮。

看看这个:

// With options (defaults shown below) 
$('.toggle').toggles({
  drag: true, // allow dragging the toggle between positions 
  click: true, // allow clicking on the toggle 
  text: {
    on: 'ON', // text for the ON position 
    off: 'OFF' // and off 
  },
  on: true, // is the toggle ON on init 
  animate: 250, // animation time (ms) 
  easing: 'swing', // animation transition easing function 
  checkbox: null, // the checkbox to toggle (for use in forms) 
  clicker: null, // element that can be clicked on to toggle. removes binding from the toggle itself (use nesting) 
  width: 50, // width used if not set in css 
  height: 20, // height if not set in css 
  type: 'compact' // if this is set to 'select' then the select style toggle will be used 
});

这段名为 text: 的代码意味着您可以设置用于打开和关闭的文本。这正是您所需要的。

最后:

如果您真的非常想要与您的链接具有相同的设计:您可以通过复制脚本获得相同的设计，尝试在您的主目录中制作一个完全不同的页面并通过按 F12 复制粘贴 html 和 javascript .你会看到你会得到相同的设计。从那里开始，您可以尝试使用所需的脚本来实现设计以获得相同的设计。