jQWidgets Forums

jQuery UI Widgets › Forums › Navigation › Menu, Context Menu › Menu source doesn't work

Tagged: , ,

This topic contains 4 replies, has 2 voices, and was last updated by  hcccs 10 years, 4 months ago.

Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
    Menu source doesn't work Posts
  • January 12, 2015 at 9:47 pm Menu source doesn't work #65283

    hcccs
    Participant

    This is code taken more or less directly from the example of menu source but it does not seem to work:

    <!DOCTYPE html>
    <html lang=”en”>
    <head>
    <link type=”text/css” rel=”stylesheet” href=”/jqwidgets/styles/jqx.base.css” />
    <script type=”text/javascript” src=”/js/jquery-2.1.3.js”></script>
    <script type=”text/javascript” src=”/jqwidgets/jqxcore.js”></script>
    <script type=”text/javascript” src=”/jqwidgets/jqxsplitter.js”></script>
    <script type=”text/javascript”>
    $(document).ready(function () {
    });
    </script>
    <script>
    var source = [
    {label: “AAAAA”},
    {label: “BBBBB”},
    {label: “CCCCC”}
    ];
    $(“#jqxMenu”).jqxMenu({ source: source, width: ‘800px’, height: ‘100px’});
    </script>

    <style type=”text/css”>
    html, body
    {
    height: 100%;
    width: 100%;
    margin: 0px;
    padding: 0px;
    overflow: hidden;
    }
    </style>
    </head>
    <body>
    <div id=’jqxMenu’></div>
    </body>
    </html>

    January 13, 2015 at 1:03 pm Menu source doesn't work #65304

    Nadezhda
    Participant

    Hello hcccs,

    Here is a working example of the above code. Please, note that reference to jquery file is different and widget initialisation is placed in body of ‘ready’ function. 

    <!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>
    <style type="text/css">
        html, body {
            height: 100%;
            width: 100%;
            margin: 0px;
            padding: 0px;
            overflow: hidden;
        }
    </style>
    <script type="text/javascript">
        $(document).ready(function () {
            var source = [
            { label: "AAAAA" },
            { label: "BBBBB" },
            { label: "CCCCC" }
            ];
            $("#jqxMenu").jqxMenu({ source: source, width: '800px', height: '100px' });
        });
    </script>
</head>
<body>
    <div id='jqxMenu'></div>
</body>
</html>

    Best Regards,
    Nadezhda

    jQWidgets team
    http://www.jqwidgets.com/

    January 18, 2015 at 6:26 pm Menu source doesn't work #65555

    hcccs
    Participant

    Hi Nadezhda,

    I have got it working and I have taken my little project a little bit further by intrducing a lot more splitters. I have put a menu in the top central panel but now it refuses to function. If I put in some text, it’s allright but the menu does not appear. I hope I haven’t made any silly mistakes this time.

    <!DOCTYPE html>
<html lang="en">
<head>
   <meta name="keywords" content="jQuery Splitter, Splitter Widget, Splitter, jqxSplitter" />
   <link   type="text/css" rel="stylesheet"  href="/jqwidgets/styles/jqx.base.css" />
   <link   type="text/css" rel="stylesheet"  href="/jqwidgets/styles/jqx.darkblue.css" />	
   <script type="text/javascript" src="/js/jquery-2.1.3.js"></script>
   <script type="text/javascript" src="/jqwidgets/jqxcore.js"></script>
   <script type="text/javascript" src="/jqwidgets/jqxsplitter.js"></script>
   <script type="text/javascript">
      $(document).ready(function () {
		   $('#hor1Splitter').jqxSplitter({ width: '100%', height: '100%', orientation: 'horizontal', panels: [{size: '10%', resizable: false}, {size: '90%', resizable: false}] });
		   $('#hor2Splitter').jqxSplitter({ width: '100%', height: '100%', orientation: 'horizontal', panels: [{size: '90%', resizable: false}, {size: '10%', resizable: false}] });
		   $('#ver1Splitter').jqxSplitter({ width: '100%', height: '100%', orientation: 'vertical', 	 panels: [{size: '10%', resizable: false}, {size: '90%', resizable: false}] });
		   $('#ver2Splitter').jqxSplitter({ width: '100%', height: '100%', orientation: 'vertical', 	 panels: [{size: '90%', resizable: false}, {size: '10%', resizable: false}] });
		   $('#ver3Splitter').jqxSplitter({ width: '100%', height: '100%', orientation: 'vertical', 	 panels: [{size: '10%', resizable: false}, {size: '90%', resizable: false}] });
		   $('#ver4Splitter').jqxSplitter({ width: '100%', height: '100%', orientation: 'vertical', 	 panels: [{size: '90%', resizable: false}, {size: '10%', resizable: false}] });
		   $('#ver5Splitter').jqxSplitter({ width: '100%', height: '100%', orientation: 'vertical', 	 panels: [{size: '10%', resizable: false}, {size: '90%', resizable: false}] });
		   $('#ver6Splitter').jqxSplitter({ width: '100%', height: '100%', orientation: 'vertical', 	 panels: [{size: '90%', resizable: false}, {size: '10%', resizable: false}] });			
			var source = [
				{label: "AAAAA"},
				{label: "BBBBB"},
				{label: "CCCCC"}
				];
		$("#jqxMenu").jqxMenu({ source: source, width: '800px', height: '100px' });
		});
	</script>

	<style type="text/css">
		html, body 
		{
		height: 100%;
		width: 100%;
		margin: 0px;
		padding: 0px;
		overflow: hidden;
		}
   </style>
</head>

<body>
   <div id="hor1Splitter">
		<div>
			<div id="ver1Splitter">
				<div>				
					<span>Top left</span>
				</div>
				<div>
					<div id="ver2Splitter">
						<div>
							<div id="jqxMenu"></div>
						</div>
						<div>
							<span>Top right</span>
						</div>
					</div>
				</div>
			</div>
		</div>
		<div>
			<div id ="hor2Splitter">
				<div>
					<div id="ver3Splitter">
						<div>
							Middle left
						</div>
						<div>
							<div id="ver4Splitter">
								<div>
									<span>Middle center</span>
								</div>
								<div>
									<span>Middle right</span>
								</div>
							</div>
						</div>
					</div>
				</div>
				<div>
					<div id="ver5Splitter">
						<div>
							<span>Bottom left</span>
						</div>
						<div>
							<div id="ver6Splitter">
								<div>
									<span>Bottom center</span>
								</div>
								<div>
									<span>Bottom right</span>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</body>
</html>
    January 19, 2015 at 9:14 am Menu source doesn't work #65583

    Nadezhda
    Participant

    Hi hcccs,

    You have missed reference to JavaScript file which is required for jqxMenu. Please, find the below example which displays menu in the top central panel.

    <!DOCTYPE html>
<html lang="en">
<head>
    <title></title>
    <link type="text/css" rel="stylesheet" href="/jqwidgets/styles/jqx.base.css" />
    <link type="text/css" rel="stylesheet" href="/jqwidgets/styles/jqx.darkblue.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/jqxsplitter.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxmenu.js"></script>

    <script type="text/javascript">
        $(document).ready(function () {
            $('#hor1Splitter').jqxSplitter({ width: '100%', height: '100%', orientation: 'horizontal', panels: [{ size: '10%', resizable: false }, { size: '90%', resizable: false }] });
            $('#hor2Splitter').jqxSplitter({ width: '100%', height: '100%', orientation: 'horizontal', panels: [{ size: '90%', resizable: false }, { size: '10%', resizable: false }] });
            $('#ver1Splitter').jqxSplitter({ width: '100%', height: '100%', orientation: 'vertical', panels: [{ size: '10%', resizable: false }, { size: '90%', resizable: false }] });
            $('#ver2Splitter').jqxSplitter({ width: '100%', height: '100%', orientation: 'vertical', panels: [{ size: '90%', resizable: false }, { size: '10%', resizable: false }] });
            $('#ver3Splitter').jqxSplitter({ width: '100%', height: '100%', orientation: 'vertical', panels: [{ size: '10%', resizable: false }, { size: '90%', resizable: false }] });
            $('#ver4Splitter').jqxSplitter({ width: '100%', height: '100%', orientation: 'vertical', panels: [{ size: '90%', resizable: false }, { size: '10%', resizable: false }] });
            $('#ver5Splitter').jqxSplitter({ width: '100%', height: '100%', orientation: 'vertical', panels: [{ size: '10%', resizable: false }, { size: '90%', resizable: false }] });
            $('#ver6Splitter').jqxSplitter({ width: '100%', height: '100%', orientation: 'vertical', panels: [{ size: '90%', resizable: false }, { size: '10%', resizable: false }] });
            var source = [
                { label: "AAAAA" },
                { label: "BBBBB" },
                { label: "CCCCC" }
            ];
            $("#jqxMenu").jqxMenu({ source: source, width: '800px', height: '100px' });
        });
    </script>

    <style type="text/css">
        html, body {
            height: 100%;
            width: 100%;
            margin: 0px;
            padding: 0px;
            overflow: hidden;
        }
    </style>
</head>

<body>
    <div id="hor1Splitter">
        <div>
            <div id="ver1Splitter">
                <div>
                    <span>Top left</span>
                </div>
                <div>
                    <div id="ver2Splitter">
                        <div>
                            <div id="jqxMenu"></div>
                        </div>
                        <div>
                            <span>Top right</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div>
            <div id="hor2Splitter">
                <div>
                    <div id="ver3Splitter">
                        <div>
                            Middle left
                        </div>
                        <div>
                            <div id="ver4Splitter">
                                <div>
                                    <span>Middle center</span>
                                </div>
                                <div>
                                    <span>Middle right</span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div>
                    <div id="ver5Splitter">
                        <div>
                            <span>Bottom left</span>
                        </div>
                        <div>
                            <div id="ver6Splitter">
                                <div>
                                    <span>Bottom center</span>
                                </div>
                                <div>
                                    <span>Bottom right</span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</body>
</html>

    Best Regards,
    Nadezhda

    jQWidgets team
    http://www.jqwidgets.com/

    January 19, 2015 at 9:17 pm Menu source doesn't work #65634

    hcccs
    Participant

    Of course it works now. I thought I had checked everything but I missed it. Thanks.

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

You must be logged in to reply to this topic.