jQuery UI Widgets › Forums › General Discussions › Listmenu Design Question

Tagged: , ,

This topic contains 1 reply, has 2 voices, and was last updated by  Dimitar 12 years ago.

Viewing 2 posts - 1 through 2 (of 2 total)
  • Author
    Listmenu Design Question Posts
  • November 11, 2013 at 6:42 am Listmenu Design Question #32369

    markcarpe
    Member

    I am trying to associate a single form object with all listitems in a listmenu.

    The objective being not to duplicate the form for each parent li element.

    On going to the form I would clear out the form values and add the clicked listitem id in a hidden field to make the form unique for submit.

    Can you tell me how you would approach this design problem?

    November 12, 2013 at 8:51 am Listmenu Design Question #32464

    Dimitar
    Participant

    Hello markcarpe,

    I am not sure whether this is what you actually strive to achieve, but please check out this example:

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" />
        <script type="text/javascript" src="../../scripts/jquery-1.10.2.min.js"></script>
        <script type="text/javascript" src="../../jqwidgets/jqxcore.js"></script>
        <script type="text/javascript" src="../../jqwidgets/jqxlistmenu.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/jqxpanel.js"></script>
        <script type="text/javascript">
            $(document).ready(function () {
                var items = $("#list").children();
                for (var i = 0; i < items.length; i++) {
                    $(items[i]).append("<ul data-role='listmenu'><li><form id='form" + i + "'>Username:<input type='text' />Password:<input type='password' /></form></li></ul>");
                };
                $('#list').jqxListMenu({ width: 300, enableScrolling: false, showHeader: true, showBackButton: true, showFilter: false });
            });
        </script>
    </head>
    <body class='default'>
        <ul id="list" data-role="listmenu">
            <li>A</li>
            <li>B</li>
            <li>C</li>
        </ul>
    </body>
    </html>

    Best Regards,
    Dimitar

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

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

You must be logged in to reply to this topic.