jQWidgets Forums

jQuery UI Widgets › Forums › Navigation › Menu, Context Menu › Toggled item

Tagged: , ,

This topic contains 1 reply, has 2 voices, and was last updated by  Peter Stoev 12 years, 11 months ago.

Viewing 2 posts - 1 through 2 (of 2 total)
  • Author
    Toggled item Posts
  • April 6, 2012 at 6:51 am Toggled item #3236

    Black Moon
    Member

    Hi All!

    Is it possible to toggle on/off items in menu?

    I need menu with button toggle ability (like common toggle button)
    Analogue – is .net buttonbar.

    April 7, 2012 at 7:36 am Toggled item #3253

    Peter Stoev
    Keymaster

    Hi Black Moon,

    The following example code shows how to add a Toggle Button to the jqxMenu:

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" />
        <script type="text/javascript" src="../../scripts/jquery-1.7.1.min.js"></script>
        <script type="text/javascript" src="../../jqwidgets/jqxcore.js"></script>
        <script type="text/javascript" src="../../jqwidgets/jqxmenu.js"></script>
        <script type="text/javascript" src="../../jqwidgets/jqxbuttons.js"></script>
    	<script type="text/javascript">
    		$(document).ready(function () {
    			var theme = '';
    			// Create a jqxMenu
    			$("#jqxMenu").jqxMenu({ width: '650', height: '35px', autoOpen: false, autoCloseOnMouseLeave: false, showTopLevelArrows: true, theme: theme });
    			$("#Button").jqxToggleButton({ width: 150, height: 30, theme: theme });
    		 });
    	</script>
    </head>
    <body>
    	<div id='jqxMenu'>
    		<ul>
    			<li><a href="#Home">Home</a></li>
    			<li>Products
    			</li>
    			<li>Purchase
    			</li>
    			<li><a href="#Services">Services</a></li>
    			<li>About Us
    			</li>
    			<li style='list-style: none;' ignoretheme='true'>
    				<input value="Button" id="Button" style="margin-top: -5px;" type="button" /></div>
    			</li>
    		</ul>
    	</div>
    </body>
    </html>

    The button is added to the last item.

    Best Regards,
    Peter Stoev

    jQWidgets Team
    http://www.jqwidgets.com

  • Author
    Posts
Viewing 2 posts - 1 through 2 (of 2 total)

You must be logged in to reply to this topic.