Icon Picker
Presentation
The Icon Picker is a jQuery plugin written by XWiki to help user selecting an icon. See IconPickerMacro for using this picker easily. If you want to use it manually, read the following.
Example
With Velocity and HTML:
// Enable the CSS of the picker:
#set(\$discard = $xwiki.ssx.use('IconThemesCode.IconPicker'))
// JavaScript code:
<script>
// Configure requirejs to load the picker code
require.config({
paths: {
'xwiki-icon-picker': '$xwiki.getURL($services.model.createDocumentReference('', 'IconThemesCode', 'IconPicker'), 'jsx', "minify=$!request.minify")'
}
});
// Require jquery and the icon picker
require(['jquery', 'xwiki-icon-picker'], function($) {
// Here you can bind the picker to some elements.
// Examples:
$('#someElement').xwikiIconPicker(); // apply the picker to the field #someElement
$('#someElement').xwikiIconPicker({prefix: 'image:icon:'}); // change the prefix inserted before the icon name
});
</script>
#set(\$discard = $xwiki.ssx.use('IconThemesCode.IconPicker'))
// JavaScript code:
<script>
// Configure requirejs to load the picker code
require.config({
paths: {
'xwiki-icon-picker': '$xwiki.getURL($services.model.createDocumentReference('', 'IconThemesCode', 'IconPicker'), 'jsx', "minify=$!request.minify")'
}
});
// Require jquery and the icon picker
require(['jquery', 'xwiki-icon-picker'], function($) {
// Here you can bind the picker to some elements.
// Examples:
$('#someElement').xwikiIconPicker(); // apply the picker to the field #someElement
$('#someElement').xwikiIconPicker({prefix: 'image:icon:'}); // change the prefix inserted before the icon name
});
</script>
