最新资源
简介
用于创建自定义web界面的流行Bootstrap 5框架有很多不错的好处；然而，有一点需要注意，那就是可以从庞大的Bootstrap图标目录中轻松选择图标，但现在你可以通过这个新插件获得这个选项。
这是一个完全可定制的jQuery，它使用Bootstrap 5 popover组件来创建一个可过滤的图标选择器界面，它提供了一种从1600多个Bootstrap SVG图标中选择图标的简单方法。
请参阅实际操作：
如何使用它:
1.在文档中加载必要的jQuery库、Bootstrap 5框架和Bootstrap Icons。
<!-- jQuery --> <script src="/path/to/cdn/jquery.min.js"></script> <!-- Bootstrap 5 --> <link rel="stylesheet" href="/path/to/cdn/bootstrap.min.css" /> <script src="/path/to/cdn/bootstrap.bundle.min.js"></script> <!-- Bootstrap Icons --> <link rel="stylesheet" href="/path/to/cdn/bootstrap-icons.min.css" />
2.下载插件并加载以下JavaScript和CSS文件。
<link href="/dist/css/bootstrapicons-iconpicker.css" rel="stylesheet" /> <script src="/dist/js/bootstrapicon-iconpicker.js"></script>
3.将引导图标选取器连接到您指定的输入字段。
<input type="text" class="form-control iconpicker" placeholder="Icon Picker" aria-label="Icone Picker" aria-describedby="basic-addon1" />
$(function(){
$('.iconpicker').iconpicker();
});
4.在初始化图标选择器时，您可以提供更改其外观的选项。所有可能的选项：
$('.iconpicker').iconpicker({
// Icon picker title
title: false,
// Selected icon on init
selected: false,
// Default icon
defaultValue: false,
// inline
// topLeftCorner
// topLeft
// top (center)
// topRight
// topRightCorner
// rightTop
// right (center)
// rightBottom
// bottomRightCorner
// bottomRight
// bottom (center)
// bottomLeft
// bottomLeftCorner
// leftBottom
// left (center)
// leftTop
placement: "bottom",
// Determine whether to re-position the icon picker
collision: "none",
// Enable animation
animation: true,
// Hide the icon picker on select
hideOnSelect: false,
// Show popover footer
showFooter: false,
// Place the search filed in the footer
searchInFooter: false,
// Pick the icon when click the accept button in the footer
mustAccept: false,
// CSS class for the selected icon
selectedCustomClass: "bg-primary",
// List of icon objects
icons: [],
// Custom class formatter
fullClassFormatter: function (e) {
return e;
},
// Input selector
input: "input,.iconpicker-input",
// Determine whether to use this the input as a search box
inputSearch: false,
// Append the icon picker to a specific element
container: false,
// Default selector
component: ".input-group-addon,.iconpicker-component",
// Customize the template here
templates: {
popover: '<div class="iconpicker-popover popover" role="tooltip"><div class="arrow"></div>' + '<div class="popover-title"></div><div class="popover-content"></div></div>',
footer: '<div class="popover-footer"></div>',
buttons: '<button class="iconpicker-btn iconpicker-btn-cancel btn btn-default btn-sm">Cancel</button>' + ' <button class="iconpicker-btn iconpicker-btn-accept btn btn-primary btn-sm">Accept</button>',
search: '<input type="search" class="form-control iconpicker-search" placeholder="Type to filter" />',
iconpicker: '<div class="iconpicker"><div class="iconpicker-items"></div></div>',
iconpickerItem: '<a role="button" href="javascript:;" class="iconpicker-item"><i></i></a>'
}
});
预览截图
jQuery和Bootstrap 5 可自定义Bootstrap图标选择器