jQWidgets Forums

Tagged: html, itemclick, jqxMenu, Menu, value

This topic contains 5 replies, has 2 voices, and was last updated by Nadezhda 10 years, 1 month ago.

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

Author

How to call a HTML page Posts

February 1, 2015 at 9:55 pm 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>

February 2, 2015 at 9:42 am 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/

February 3, 2015 at 10:57 pm 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>

February 4, 2015 at 3:25 pm 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/

February 5, 2015 at 7:57 pm 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?

February 6, 2015 at 1:49 pm 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/

Author

Posts

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

You must be logged in to reply to this topic.