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.

Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
  • Need help with a menu issue #23447

    ohioguy67
    Member

    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
    Settings

    Option 1
    Option 2
    List

    –>

    Can you please tell me what I’m doing wrong?

    Need help with a menu issue #23451

    ohioguy67
    Member

    Trying to put code in with each line commented so it shows up here:

    <!– –>
    <!– –>
    <!– –>
    <!– Test –>
    <!– –>
    <!– –>
    <!– –>
    <!– –>
    <!– –>
    <!– –>
    <!– –>
    <!– –>
    <!– –>
    <!– –>
    <!– –>

    <!– –>


















    <!– –>
    <!– –>

    <!– –>
    <!–

    –>
    <!– –>
    <!– Home –>
    <!– Settings –>
    <!– –>
    <!– Option 1 –>
    <!– Option 2 –>
    <!– List –>
    <!– –>
    <!–

    –>
    <!– –>
    <!– –>
    <!– –>
    <!– –>
    <!– –>
    <!–

    –>

    <!– –>
    <!– –>

    Need help with a menu issue #23454

    ohioguy67
    Member

    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?

    Need help with a menu issue #23493

    ohioguy67
    Member

    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” script

    script 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
    head

    body
    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
    div

    body
    html

    Need help with a menu issue #23494

    ohioguy67
    Member

    Hooray 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.

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

You must be logged in to reply to this topic.