jQuery Menu with Images, Check Boxes and Radio Buttons

To display an image inside a Menu item, you need to put an img tag inside the menu item’s li tag.

For example:

     <img style='float: left; margin-right: 5px;' src='mail.png'/><span>Mail</span>

jquery menu images
Displaying a checkbox inside a menu item requires two steps. The first step is to put a div tag inside the menu item’s li tag.
    <div style='float: left; margin-right: 5px;' id='checkbox'>
    Enable Auto-Save</li>

The second step is to initialize the checkbox by selecting the ‘checkbox’ div tag and calling the jqxCheckBox constructor. The code below initializes the checkbox and displays it in ‘checked’ state. $("#checkbox").jqxCheckBox({ checked: true }); jquery menu checkboxes

You may also want to display a radio button inside a menu item. The steps for this are the same as for the checkbox, but instead of calling the jqxCheckBox constructor, you need to call the jqxRadioButton constructor.
$("#radiobutton").jqxRadioButton({ checked: true });
Please note that, if you want to display a checkbox or radiobutton, you need to load the jqxcheckbox.js or jqxradiobutton.js.
jquery menu radio button

About admin

This entry was posted in JavaScript, JavaScript Plugins, JavaScript Widgets, jQuery, jQuery Plugins, jQuery UI, jQuery UI Plugins, jQuery UI Widgets, jQuery Widgets, jQWidgets, jqxCheckBox, jqxMenu, jqxRadioButton and tagged , , , , , , , , , , , , , , , , , , , , , , , , . Bookmark the permalink.

Leave a Reply