Customization

HTML In Button Label

Do you want to put HTML in your button label? You can! Just remember that this opens you up to XSS vulnerabilities.

If you simply set the htmlText option for the button, e.g. htmlText: ['button'], then the internal _setButtonValue() function will treat any text it is provided as being HTML rather than plain text.

A good example use case of why you may want to do this is illustrated by setting the following settings options:

selectedList: 5,
selectedListSeparator: ',<br>',
htmlText: ['button']

The above options would list the first 5 selections on individual lines in the button.

Images in the Drop down

You can have images in the menu next to the checkbox for each option by adding the attribute data-image-src to any options that you would like to contain an image. The image will appear to the right of the checkbox for that option.

Custom Link Icons, Link Text, or Link Title Text

The linkInfo option is intended to allow for a high degree of customization of the icons and text used for links in the header and button.

Refer to the linkDefaults object in the widget code for the overall object structure. However, keep in mind that you do not need to provide a complete object for the linkInfo option. You only need to provide the object properties that should be replaced in the linkDefaults object, since an $.extend() is used to merge what you provide with the linkDefaults object. Additionally, you can specify link customizations to be used by all widget instances by using $.ech.multiselect.prototype.options.linkInfo = (your customizations)

In general terms, both linkDefaults and the linkInfo option are nested objects of objects, where the top level keys are used to identify which link the associated information is specified for. The top level keys used to specify links to customize are: open, close, checkAll, uncheckAll, flipAll, collapse(a button), expand(a button), collapseAll, and expandAll. For each of these top level keys, an associated nested object can be provided to specify the link icon, the link text, and the link title text. Not every link uses every one of these. For example, the open & close links and the collapse & expand buttons do not show any visible text.

Note: The linkDefaults object also specifies a class name for each of the above top level keys/links. The class names are used internally in the widget and should not be overridden.

Example linkInfo option usage with custom link text and titles:

var linkText = {
    checkAll: {text: 'All', title: 'Check All foos'},
    uncheckAll: {text: 'None', title: 'Un-check All foos'}
};

$( "#foo" ).multiselect({linkInfo: linkText});

Example linkInfo option usage with alternative collapse/expand icons (used in the buttons):

var myIcons = {
    collapse: {icon: '<span class="ui-icon ui-icon-minus"></span>'},
    expand: {icon: '<span class="ui-icon ui-icon-plus"></span>'}
};

$( "#foo" ).multiselect({linkInfo: myIcons});

Example linkInfo option usage with Font Awesome icons:
(Assuming you have Font Awesome loaded.)

var faIcons = {
    open: {icon: '<i class="fa fa-caret-down" aria-hidden="true"></i>'},
    close: {icon: '<i class="fa fa-close" aria-hidden="true"></i>'},
    checkAll: {icon: '<i class="fa fa-check-square-o" aria-hidden="true"></i>'},
    uncheckAll: {icon: '<i class="fa fa-square-o" aria-hidden="true"></i>'},
    flipAll: {icon: '<i class="fa fa-undo" aria-hidden="true"></i>'},
    collapseAll: {icon: '<i class="fa fa-double-angle-down" aria-hidden="true"></i>'},
    expandAll: {icon: '<i class="fa fa-double-angle-right" aria-hidden="true"></i>'},
    collapse: {icon: '<i class="fa fa-chevron-down" aria-hidden="true"></i>'},
    expand: {icon: '<i class="fa fa-chevron-right" aria-hidden="true"></i>'}
};

$( "#foo" ).multiselect({linkInfo: faIcons});

Example linkInfo option usage with HTML entities used as icons:

var htmlIcons = {
    open: {icon: '<span class="html-entity">&#9660;</span>'},
    close: {icon: '<span class="html-entity">&times;</span>'},
    checkAll: {icon: '<span class="html-entity">&#9745;</span>'},
    uncheckAll: {icon: '<span class="html-entity">&#9744;</span>'},
    flipAll: {icon: '<span class="html-entity">&#10226;</span>'},
    collapseAll: {icon: '<span class="html-entity">&#709;</span>'},
    expandAll: {icon: '<span class="html-entity">&#707;</span>'},
    collapse: {icon: '<span class="html-entity">&#709;</span>'},
    expand: {icon: '<span class="html-entity">&#707;</span>'},
};

$( "#foo" ).multiselect({linkInfo: htmlIcons});