Amaze UI Switch 使用演示 | Amaze UI 插件

相关文章推荐

淡定的盒饭 · ASP.NET 核心 Blazor ...· 3 月前 ·

失望的鸡蛋面 · 循环吧，代码 - 学习 Web 开发 | MDN· 3 月前 ·

粗眉毛的创口贴 · 群晖docker compose ...· 2 年前 ·

坚强的紫菜汤 · java - Could not ...· 2 年前 ·

近视的充电器 · 20 行 Python ...· 2 年前 ·

痴情的啄木鸟 · 在 Excel ...· 2 年前 ·

逃课的风衣 · 使用kafka时Java与Avro之间的转换 ...· 2 年前 ·

< div class = "am-btn-group" > < button type = "button" data-switch-toggle = "state" class = "am-btn am-btn-default" > 切换 </ button > < button type = "button" data-switch-set = "state" data-switch-value = "true" class = "am-btn am-btn-default" > 设为 true </ button > < button type = "button" data-switch-set = "state" data-switch-value = "false" class = "am-btn am-btn-default" > 设为 false </ button > < button type = "button" data-switch-get = "state" class = "am-btn am-btn-default" > 获取状态 </ button > </ div >

$('[data-switch-set]').on('click', function() {
  var type = $(this).data('switch-set');
  return $('#switch-' + type).bootstrapSwitch(type, $(this).data('switch-value'));
});

按钮大小

< input id = "switch-size" type = "checkbox" checked data-size = "xs" > < div class = "am-btn-group" > < button type = "button" data-switch-set = "size" data-switch-value = "xs" class = "am-btn am-btn-default" > XS </ button > < button type = "button" data-switch-set = "size" data-switch-value = "sm" class = "am-btn am-btn-default" > Small </ button > < button type = "button" data-switch-set = "size" data-switch-value = "normal" class = "am-btn am-btn-default" > Normal </ button > < button type = "button" data-switch-set = "size" data-switch-value = "lg" class = "am-btn am-btn-default" > Large </ button > < button type = "button" data-switch-get = "size" class = "am-btn am-btn-default" > 获取尺寸 </ button > </ div >

动画设置

< input id = "switch-animate" type = "checkbox" checked > < button type = "button" data-switch-toggle = "animate" class = "am-btn am-btn-default" > 切换 </ button > < button type = "button" data-switch-get = "animate" class = "am-btn am-btn-default" > 获取 </ button > </ p >

禁用

< input id = "switch-indeterminate" type = "checkbox" checked data-indeterminate = "true" > </ p >

反向

颜色选项

【打开】颜色设置

< input id = "switch-offText" type = "checkbox" data-off-text = "关" data-on-text = "开" > </ p >

标签文字

< input type = "radio" name = "radio1" checked class = "switch-radio1" > < input type = "radio" name = "radio1" class = "switch-radio1" > < input type = "radio" name = "radio1" class = "switch-radio1" > </ div >

允许关闭所有

< input type = "radio" name = "radio2" checked data-radio-all-off = "true" class = "switch-radio2" > < input type = "radio" name = "radio2" data-radio-all-off = "true" class = "switch-radio2" > < input type = "radio" name = "radio2" data-radio-all-off = "true" class = "switch-radio2" > </ div >