jQuery UI Widgets › Forums › Lists › ListBox › Make Listbox appear on click
Tagged: display, jqxListBox, ListBox
This topic contains 4 replies, has 5 voices, and was last updated by Peter Stoev 12 years ago.
-
Author
-
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
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,
DimitarjQWidgets team
http://www.jqwidgets.com/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.
Peter/Dimitar,
Facing similar kind of issue. Please let me know the solution.
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 StoevjQWidgets Team
http://www.jqwidgets.com/ -
AuthorPosts
You must be logged in to reply to this topic.