Bootstrap-multiselect: 使用Fontawesome的CSS复选框

创建于 2015-07-10 · 3评论 · 资料来源: davidstutz/bootstrap-multiselect

您好，我想使用Fontawesome（此技术在https://github.com/flatlogic/awesome-bootstrap-checkbox上演示）来自定义带有CSS图标的复选框的外观。现在的问题是，bootstrap-multiselect当前正在使用以下标记，这是不可能的：

<label class="checkbox">
    <input type="checkbox" value="9">
    My item
</label>

为了支持此“ hack”，格式需要为：

<input type="checkbox" value="9" id='mycheckbox'>
<label for='mycheckbox'>
    My item
</label>

无需侵入核心脚本就可以轻松地更改此设置？

question

资料来源

bartclaeys

最有用的评论

我想做同样的事情。据我所知，仅通过设置插件选项就无法获得Awesome Bootstrap Checkbox想要的HTML结构。

我最终使用与Awesome Bootstrap Checkbox结构匹配的自定义li模板初始化了插件。

templates: {
  li: '<li><div class="checkbox"><label></label></div></li>'
}

插件初始化后，下拉列表需要更多的jQuery工作才能将for / id属性对添加到标签/输入中，并将输入移动到标签之前。也可能需要一些自定义CSS。

这是使用香草Bootstrap，Bootstrap Multiselect插件和Awesome Bootstrap Checkbox CSS的有效提琴：
http://jsfiddle.net/natearmagost/aznvcLps/

这只是一个基本的下拉列表。带有optgroup，radio等的下拉菜单可能需要更多的工作。但是主脚本未修改。

natearmagost 于 2015-10-22

👍4

我想做同样的事情。据我所知，仅通过设置插件选项就无法获得Awesome Bootstrap Checkbox想要的HTML结构。

我最终使用与Awesome Bootstrap Checkbox结构匹配的自定义li模板初始化了插件。

templates: {
  li: '<li><div class="checkbox"><label></label></div></li>'
}

插件初始化后，下拉列表需要更多的jQuery工作才能将for / id属性对添加到标签/输入中，并将输入移动到标签之前。也可能需要一些自定义CSS。

这是使用香草Bootstrap，Bootstrap Multiselect插件和Awesome Bootstrap Checkbox CSS的有效提琴：
http://jsfiddle.net/natearmagost/aznvcLps/

这只是一个基本的下拉列表。带有optgroup，radio等的下拉菜单可能需要更多的工作。但是主脚本未修改。

natearmagost 于 2015-10-22

👍4

将此添加到FAQ中，谢谢。

davidstutz 于 2016-04-18

您好团队，

我可以这样使用吗

 data-templates-li='<li><div class="checkbox"><label></label></div></li>'

选择框？

谢谢

bhumiradixweb 于 2016-12-31

👎1

此页面是否有帮助？

0 / 5 - 0 等级