jQuery UI Widgets Forums Navigation Menu, Context Menu How to call a HTML page

This topic contains 5 replies, has 2 voices, and was last updated by  Nadezhda 9 years, 4 months ago.

Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
  • How to call a HTML page #66261

    hcccs
    Participant

    I have this test code and I can’t figure out how to call a web page when a menu item is clicked.

       <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}] });
    			var source = 
    			[
    				{label: "AAAAA"},
    				{label: "BBBBB"},
    				{label: "CCCCC"}
    			];
    			$("#jqxMenu").jqxMenu({ source: source, width: '800px', height: '100px' });
    			$('#jqxMenu').on('itemclick', function (event) {
    				$("#log").text($(event.target).text() + " item has been clicked");
    			});
    		});
    	</script>
    
    How to call a HTML page #66290

    Nadezhda
    Participant

    Hello hcccs,

    Here is an example which shows how to use ‘itemclick’ metod to add page location to the first menu item:

    $('#jqxMenu').on('itemclick', function (event) {
        // get the clicked LI element.
        var element = event.args;
        if (element.textContent == "AAAAA") {
            window.location = 'http://www.jqwidgets.com/';
        }
    });

    Best Regards,
    Nadezhda

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

    How to call a HTML page #66459

    hcccs
    Participant

    Now I’m trying to load a page into the panel ‘ContentPanel’ but there is something not right, as usual. What could it be?

    
    <!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" 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}] });
    			var source = 
    			[
    				{label: "AAAAA"},
    				{label: "BBBBB"},
    				{label: "CCCCC"}
    			];
    			$("#jqxMenu").jqxMenu({ source: source, width: '800px', height: '100px' });
    			$('#jqxMenu').on('itemclick', function (event) {
    				var element = event.args;
    				if (element.textContent == "AAAAA") {
    					$('#ContentPanel').load('hund.php');
    				}
    				$('#BottomPanel').text($(event.target).text() + " item has been clicked");					
    			});
    		});
    	</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="jqxMenu"></div>
    		</div>
    		<div>
    			<div id="hor2Splitter">
    				<div>
    					<div id='ContentPanel'></div>
    				</div>
    				<div>
    					<div id='BottomPanel'></div>
    				</div>
    			</div>
    		</div>
    	</div>
    </body>
    </html>
    
    How to call a HTML page #66521

    Nadezhda
    Participant

    Hi hcccs,

    The above example works with simple html page on our side.

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <link type="text/css" rel="stylesheet" href="/jqwidgets/styles/jqx.base.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>
        <style type="text/css">
            html, body {
                height: 100%;
                width: 100%;
                margin: 0px;
                padding: 0px;
                overflow: hidden;
            }
        </style>
        <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 }] });
                var source =
                [
                    { label: "AAAAA" },
                    { label: "BBBBB" },
                    { label: "CCCCC" }
                ];
                $("#jqxMenu").jqxMenu({ source: source, width: '800px', height: '100px' });
                $('#jqxMenu').on('itemclick', function (event) {
                    var element = event.args;
                    if (element.textContent == "AAAAA") {
                        $('#ContentPanel').load('test.html');                 
                    }
                    $('#BottomPanel').text($(event.target).text() + " item has been clicked");
                });
            });
        </script>
    </head>
    <body>
        <div id="hor1Splitter">
            <div>
                <div id="jqxMenu"></div>
            </div>
            <div>
                <div id="hor2Splitter">
                    <div>
                        <div id='ContentPanel'></div>
                    </div>
                    <div>
                        <div id='BottomPanel'></div>
                    </div>
                </div>
            </div>
        </div>
    </body>
    </html>

    The ‘test.html’ file content is:

    <!DOCTYPE html>
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <title>Test page</title>
    </head>
    <body>
        <p>This is a test page.</p>
    </body>
    </html>

    Please, provide us more information about your file.

    Best Regards,
    Nadezhda

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

    How to call a HTML page #66646

    hcccs
    Participant

    I substituted a simple HTML file for the PHP file and then it worked.
    I’m trying to figure out the meaning of the item fields of the SOURCE property of JqxMenu. What are VALUE and HTML fields used for? If I know what item has been clicked, how do I access the fields in the item?

    How to call a HTML page #66700

    Nadezhda
    Participant

    Hi hcccs,

    You can use ‘html’ property to display an html element to the item for example you can add an icon. If you need an example, please refer to the Load Menu from Array demo. With “value” property you can get the item’s value. Unfortunately, the ‘value’ property is not accessible at the moment.

    Best Regards,
    Nadezhda

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

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

You must be logged in to reply to this topic.