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

Question

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

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

Answer 1

您可以使用jQuery.

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

如果您想搜索其他内容，请在Google上搜索“jQuery 切换按钮” 。我建议有一个源代码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:意味着您可以设置打开和关闭切换的文本。这正是你所需要的。

最后：

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