jQuery UI Widgets › Forums › Lists › ListBox › Make Listbox appear on click

Tagged: , ,

This topic contains 4 replies, has 5 voices, and was last updated by  Peter Stoev 12 years ago.

Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
    Make Listbox appear on click Posts
  • March 31, 2013 at 7:20 pm Make Listbox appear on click #18322

    w424637
    Member

    Is it possible to have a listbox only appear after a button is clicked somewhere on the page.

    I have the listbox set up but don’t want it to be available until a user clicks a button. Only then does it appear.

    I actually want three things to appear but if i could understand the code to make one appear i will hopefully be able to apply it

    April 1, 2013 at 5:26 am Make Listbox appear on click #18331

    Dimitar
    Participant

    Hello w424637,

    Here is the solution:

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <title>jQuery ListBox Sample</title>
        <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" />
        <script type="text/javascript" src="../../../scripts/jquery-1.9.1.min.js"></script>
        <script type="text/javascript" src="../../jqwidgets/jqxcore.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>
    </head>
    <body>
        <div id='content'>
            <script type="text/javascript">
                $(document).ready(function () {
                    var source = [
                        "Affogato",
                        "Americano",
                        "Bicerin",
                        "Breve",
                        "Café Bombón",
                        "Café au lait",
                        "Caffé Corretto",
                        "Café Crema",
                        "Caffé Latte",
    		        ];
                    // Create a jqxListBox
                    $("#jqxlistbox").jqxListBox({ source: source, width: '200px', height: '200px' });
                    $("#button").jqxButton();
                    $("#button").click(function () {
                        $("#jqxlistbox").css("display", "block");
                    });
                });
            </script>
            <div id='jqxlistbox' style="display: none;">
            </div>
            <div style="margin-top: 10px;">
                <input id="button" type="button" value="Show listbox" />
                <div id="eventlog">
                </div>
            </div>
        </div>
    </body>
    </html>

    Best Regards,
    Dimitar

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

    April 12, 2013 at 12:39 pm Make Listbox appear on click #19115

    kuberasamrat
    Participant

    Hi Dimitar,

    In the above example. I have made some modifications. I got bizarre results. Could you please fix that issue for me.

    1) I have added: Checkboxes: true. It means listbox will be a multi-select.

    2) On button click list box appears. I would like to close list box on clicking anywhere.
    so I added
    $(“html”).click(function(){
    $(“#jqxlistbox”).css(‘display’,’none’);
    });

    Now when ever I click checkboxes, they get selected(multiple) and on clicking anywhere it is closing.

    Issue : Instead of clicking checkboxes, we can also click the text such that it will be selected. But here on clicking the text, it is getting selected but it is closing. To select other option I need to click the button again. I need to overcome this situation.

    April 16, 2013 at 9:22 am Make Listbox appear on click #19347

    vijaybabu
    Participant

    Peter/Dimitar,

    Facing similar kind of issue. Please let me know the solution.

    April 16, 2013 at 9:42 am Make Listbox appear on click #19350

    Peter Stoev
    Keymaster

    Hi vijaybabu,

    If you would like to hide the listbox when you click anywhere, check for the Click Coordinates. If the click is outside the widget, hide it. If it is inside the widget, do nothing.

    P.S. As far as I know, you work with “kuberasamrat” for the same company. Please, avoid double posting.

    Best Regards,
    Peter Stoev

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

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

You must be logged in to reply to this topic.