Color Picker（拾色器） 官网
基本模式
添加
data-plugin="colorpicker"
组件模式
在
.input-group 添加
data-plugin="colorpicker" 来调用拾色器
自定义选项
如通过
data-format="rgb" 将当前颜色值格式化为RGB模式
事件
下面示例演示改变后显示提示信息
颜色透明
添加
data-color="transparent" 及
data-format="hex" 实现
水平模式
添加
data-color="transparent" 实现
内联模式
添加
data-container="true" 及
data-inline="true" 实现
常用颜色
添加
data-container="true" 及
data-inline="true" 实现
Font Icon Picker（图标选择器） 官网
默认
添加
data-plugin="iconpicker" 即可调用图标选择器
在输入组中使用
添加
data-placement="bottomRight"
在搜索框中使用
添加
data-input-search="true"
下拉模式
添加
data-toggle="dropdown"
内联模式
添加
data-placement="inline"
自定义配置
{
title: '自定义配置',
icons: ['fa-github', 'fa-heart', 'fa-html5', 'fa-css3'],
selectedCustomClass: 'badge badge-success',
mustAccept:true,
placement:'bottomRight',
showFooter:true,
}
使用 glypghicons
{
title: '使用 glypghicons',
icons: $.merge([
'glyphicon-home',
'glyphicon-repeat',
'glyphicon-search',
'glyphicon-arrow-left',
'glyphicon-arrow-right',
'glyphicon-star'],
$.iconpicker.defaultOptions.icons),
fullClassFormatter: function(val){
if(val.match(/^fa-/)){
return 'fa '+val;
}else{
return 'glyphicon '+val;
}
}
}