jQWidgets Forums
jQuery UI Widgets › Forums › Navigation › Menu, Context Menu › Need help with a menu issue
This topic contains 4 replies, has 1 voice, and was last updated by ohioguy67 12 years ago.
-
Author
-
Hi. I am trying to create a main menu for my application. I want one of the menu options to br ing up a submenu that has checkboxes next to the items. I need to keep the submenu options in the javascript section so I’ve made the submenu a jqxlistbox object. The problem I’m having is that when the submenu is displayed, its size seems to be fixed and I can’t find a way to change it (so any long entries in the jqxlistbox are cut off). Here’s the code so far:
<!–
Test
$(document).ready(function () {
var theme = ‘base’;
$(“#jqxMenu”).jqxMenu({ width: ‘200’, height: ’30px’, theme: theme });$(‘#jqxMenu’).on(‘itemclick’, function (event)
{
// get the clicked LI element.
var element = event.args;
alert(element.id);
});var listSource = [{ label: ‘Field 1’, value: ‘name’, checked: false }, { label: ‘Field 123456789012345’, value: ‘type’, checked: true }
];
$(“#jqxlistbox”).jqxListBox({ source: listSource, width: 200, height: 100, theme: theme, checkboxes: true });
$(“#jqxlistbox”).on(‘checkChange’, function (event) {
alert(event.args.value);
});
});Home
SettingsOption 1
Option 2
List–>
Can you please tell me what I’m doing wrong?
Trying to put code in with each line commented so it shows up here:
<!– –>
<!– –>
<!– –>
<!– Test –>
<!– –>
<!– –>
<!– –>
<!– –>
<!– –>
<!– –>
<!– –>
<!– –>
<!– –>
<!– –>
<!– –>
<!– –>
<!– –>
<!– –>
<!– –>
<!––>
<!– –>
<!– Home –>
<!– Settings –>
<!– –>
<!– Option 1 –>
<!– Option 2 –>
<!– List –>
<!– –>
<!––>
<!– –>
<!– –>
<!– –>
<!– –>
<!– –>
<!––>
<!– –>
<!– –>Well I can’t seem to get the code to display here. Is there a way to paste it so it’s not interpreted as HTML?
Ok, I’m trying one more time with all the brackets removed.
!DOCTYPE html
html lang=”en”
head
title Test title
link rel=”stylesheet” href=”jqwidgets/styles/jqx.base.css” type=”text/css” /
script type=”text/javascript” src=”jquery-1.9.1.min.js” script
script type=”text/javascript” src=”jqwidgets/jqxcore.js” script
script type=”text/javascript” src=”jqwidgets/jqxdata.js” script
script type=”text/javascript” src=”jqwidgets/jqxbuttons.js” script
script type=”text/javascript” src=”jqwidgets/jqxscrollbar.js” script
script type=”text/javascript” src=”jqwidgets/jqxlistbox.js” script
script type=”text/javascript” src=”jqwidgets/jqxdropdownlist.js” script
script type=”text/javascript” src=”jqwidgets/jqxmenu.js” script
script type=”text/javascript” src=”jqwidgets/jqxpanel.js” script
script type=”text/javascript” src=”jqwidgets/jqxcheckbox.js” scriptscript type=”text/javascript”
$(document).ready(function () {
var theme = ‘base’;
$(“#jqxMenu”).jqxMenu({ width: ‘200’, height: ’30px’, theme: theme });$(‘#jqxMenu’).on(‘itemclick’, function (event)
{
// get the clicked LI element.
var element = event.args;
alert(element.id);
});var listSource = [{ label: ‘Field 1’, value: ‘name’, checked: false }, { label: ‘Field 123456789012345’, value: ‘type’, checked: true }
];
$(“#jqxlistbox”).jqxListBox({ source: listSource, width: 200, height: 100, theme: theme, checkboxes: true });
$(“#jqxlistbox”).on(‘checkChange’, function (event) {
alert(event.args.value);
});
});
script
headbody
div id=’jqxMenu’
ul
li Home li
li Settings
ul
li id=’opt1′ Option 1 li
li id=’opt2′ Option 2 li
li List
ul
li style=’margin:0px; padding:0px’ div id=’jqxlistbox’ div li
ul
li
ul
li
ul
divbody
htmlHooray it worked (except it lost all the indentation). I’m going to create a new post so that it’s clearer. Please disregard this one.
-
AuthorPosts
You must be logged in to reply to this topic.