jQWidgets Forums

Tagged: change item, jqxMenu, Menu

This topic contains 1 reply, has 2 voices, and was last updated by Nadezhda 10 years, 7 months ago.

Viewing 2 posts - 1 through 2 (of 2 total)

Author

How to change a menu item Posts

November 8, 2014 at 6:51 pm How to change a menu item #62427

November 10, 2014 at 11:08 am How to change a menu item #62467

Nadezhda

Participant

Hello mikemazz,

Here is an example which shows how to change menu item(submenu item) via ‘html’ method if you have html menu. When you click on button the menu item will be changed.

<!DOCTYPE html>
<html lang="en">
<head>
    <title></title>
    <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" />
    <script type="text/javascript" src="../../scripts/jquery-1.11.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/jqxcheckbox.js"></script>
    <script type="text/javascript" src="../../scripts/demos.js"></script>
    <script src="../../jqwidgets/jqxbuttons.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            $("#jqxMenu").jqxMenu({ width: '90%', height: '30px' });
            $('#jqxButton').jqxButton({
               width:80
            });
            $('#jqxButton').on('click', function () {
                //alert("kk");
                $("#secondID li:nth-child(2)").html("New menu item");
            });                       
        });
    </script>
</head>
<body>
    <div id='jqxMenu'>
        <ul id="firstID">
            <li><a href="#Home">Home</a></li>
            <li>Solutions
                <ul id="secondID" style='width: 250px;'>
                    <li><a href="#Education">Education</a></li>
                    <li><a href="#Financial">Financial services</a></li>
                    <li><a href="#Government">Government</a></li>
                    <li><a href="#Manufacturing">Manufacturing</a></li>
                    <li type='separator'></li>
                    <li>Software Solutions
                        <ul id="thirdID"style='width: 220px;'>
                            <li><a href="#ConsumerPhoto">Consumer photo and video</a></li>
                            <li><a href="#Mobile">Mobile</a></li>
                            <li><a href="#RIA">Rich Internet applications</a></li>
                            <li><a href="#TechnicalCommunication">Technical communication</a></li>
                            <li><a href="#Training">Training and eLearning</a></li>
                            <li><a href="#WebConferencing">Web conferencing</a></li>
                        </ul>
                    </li>
                    <li><a href="#">All industries and solutions</a></li>
                </ul>
            </li>
            <li>Products
                <ul id="fourthID">
                    <li><a href="#PCProducts">PC products</a></li>
                    <li><a href="#MobileProducts">Mobile products</a></li>
                    <li><a href="#AllProducts">All products</a></li>
                </ul>
            </li>
            <li>Support
                <ul id="fifthID" style='width: 200px;'>
                    <li><a href="#SupportHome">Support home</a></li>
                    <li><a href="#CustomerService">Customer Service</a></li>
                    <li><a href="#KB">Knowledge base</a></li>
                    <li><a href="#Books">Books</a></li>
                    <li><a href="#Training">Training and certification</a></li>
                    <li><a href="#SupportPrograms">Support programs</a></li>
                    <li><a href="#Forums">Forums</a></li>
                    <li><a href="#Documentation">Documentation</a></li>
                    <li><a href="#Updates">Updates</a></li>
                </ul>
            </li>
            <li>Communities
                <ul id="sixthID"style='width: 200px;'>
                    <li><a href="#Designers">Designers</a></li>
                    <li><a href="#Developers">Developers</a></li>
                    <li><a href="#Educators">Educators and students</a></li>
                    <li><a href="#Partners">Partners</a></li>
                    <li type='separator'></li>
                    <li>By resource</li>
                </ul>
            </li>
            <li>Company
                <ul id="seventhID" style='width: 180px;'>
                    <li><a href="#About">About Us</a></li>
                    <li><a href="#Press">Press</a></li>
                    <li><a href="#Investor">Investor Relations</a></li>
                    <li><a href="#CorporateAffairs">Corporate Affairs</a></li>
                    <li><a href="#Careers">Careers</a></li>
                    <li><a href="#Showcase">Showcase</a></li>
                    <li><a href="#Events">Events</a></li>
                    <li><a href="#ContactUs">Contact Us</a></li>
                    <li><a href="#Become an affiliate">Become an affiliate</a></li>
                </ul>
            </li>
        </ul>
    </div>
    <input type="button" value="Click me" id='jqxButton' />
</body>
</html>

Best Regards,
Nadezhda

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.