jQuery UI Widgets › Forums › Editors › Button, RepeatButton, ToggleButton, LinkButton › Toolbar with Dropdown button and normal button
Tagged: Button, javascript button, javascript toolbar
This topic contains 8 replies, has 2 voices, and was last updated by Peter Stoev 12 years, 4 months ago.
-
Author
-
Hi,
Could you give me an example having toolbar with normal button and dropdown button?
Thankx
DollyBHi DollyB,
Here’s a sample of a Button and DropDownButton in a container DIV tag:
<!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> <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" /> <script type="text/javascript" src="../../scripts/jquery-1.7.2.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> <script type="text/javascript" src="../../jqwidgets/jqxdropdownlist.js"></script></head><body> <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", "Caffé macchiato", "Café mélange", "Coffee milk", "Cafe mocha", "Cappuccino", "Carajillo", "Cortado", "Cuban espresso", "Espresso", "Eiskaffee", "The Flat White", "Frappuccino", "Galao", "Greek frappé coffee", "Iced Coffee", "Indian filter coffee", "Instant coffee", "Irish coffee", "Liqueur coffee" ]; // Create a jqxDropDownList $("#jqxWidget").jqxDropDownList({ source: source, selectedIndex: 1, width: '200', height: '25' }); $("#button").jqxButton({ source: source, width: '100', height: '27' }); }); </script> <div style="height: 25px; padding: 5px;" class="jqx-widget-header"> <input type="button" value="Button" style="float: left;" id="button" /> <div style="margin-left: 5px; float: left;" id='jqxWidget'> </div> </div></body></html>
Best Regards,
Peter StoevjQWidgets Team
http://www.jqwidgets.comHi Peter,
Thank You. My issue is solved now. 🙂
Regards
DollyBHi Peter,
On clicking on Button, i just want to open a window or Dialog which contains an option to browse the file. I sit a right option if I opt dialog in such scenario?
I tried to open a dialog on clicking on the “Button”. Geting error, “object doesn’t support this property or method”. Why is it happening?
My code looks like,var buttonSource = [
“More”,
“Check In”,
“Check Out”,
“Delete”
];$(“#jqxWidgetButton”).jqxDropDownList({ source: buttonSource, selectedIndex: 0, width: ‘100’, height: ’25’ });
$(“#addFileButton”).jqxButton({ source: buttonSource, width: ‘100’, height: ’27’ });$(“#addFileButton”).click(function() {
$(“#dialogform”).dialog({autoOpen: false});
});<mars:marstypeimage type="” width=”23″ height=”23″ border=”0″ alt=”View Object”/>: –Details
Attachments
ReportsAll form fields are required.Name
Email
Password
Hi DollyB,
You can take a look at this demo of jqxWindow which demonstrates how to open it or close it and what files are required: jquery-window-api.htm.
I also suggest you to see this help topic: jquery-window-getting-started.htm.Best Regards,
Peter StoevjQWidgets Team
http://www.jqwidgets.comHi again
The following code displays buttons one below the other. 🙁
$(“#jqxWidgetButton”).jqxDropDownList({ source: buttonSource, selectedIndex: 0, width: ‘100’, height: ’25’ });
$(“#addFileButton”).jqxLinkButton({width: ‘100’, height: ’27’ });<a style='margin-left: 25px;' target="_blank" href="/eMatrix/jsp/mars/documentMgmt/addFile.jsp?oid=&nfiles=4″ id=’addFileButton’>Add FileAm I doing something wrong??
Hi DollyB,
To position the dropdownlist and the button one next to another, set the ‘float’ to left.
For example:
<div style="height: 25px; padding: 5px;" class="jqx-widget-header"><a style='margin-left: 25px; float: left;' target="_blank" id='addFileButton'>Add File</a><div style="margin-left: 5px; float: left;" id='jqxWidget'></div></div>
Best Regards,
Peter StoevjQWidgets Team
http://www.jqwidgets.comThat’s blunder from my side. Thank U.
How do I get the file input type value? I am using IE8.
The following code works fine in Firefox but in IE8 it displays /fakepath . Could you tell me any alternative solution for resolving this?function populateFileList()
{
alert($(‘input[type=file]’).val());
alert($(‘#uploadFile’).val());
}<FORM name="addForm" method="post" enctype="multipart/form-data" action="”>
Add FileFile:Hi DollyB,
Have you tried jQuery selection of your inputs by Id or by Class name?
Best Regards,
Peter StoevjQWidgets Team
http://www.jqwidgets.com -
AuthorPosts
You must be logged in to reply to this topic.