jQuery UI Widgets Forums Editors Button, RepeatButton, ToggleButton, LinkButton Toolbar with Dropdown button and normal button

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

Viewing 9 posts - 1 through 9 (of 9 total)
  • Author

  • DollyB
    Member

    Hi,

    Could you give me an example having toolbar with normal button and dropdown button?

    Thankx
    DollyB


    Peter Stoev
    Keymaster

    Hi 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 Stoev

    jQWidgets Team
    http://www.jqwidgets.com


    DollyB
    Member

    Hi Peter,

    Thank You. My issue is solved now. 🙂

    Regards
    DollyB


    DollyB
    Member

    Hi 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
    Reports

    All form fields are required.

    Name

    Email

    Password


    Peter Stoev
    Keymaster

    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 Stoev

    jQWidgets Team
    http://www.jqwidgets.com


    DollyB
    Member

    Hi 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 File

    Am I doing something wrong??


    Peter Stoev
    Keymaster

    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 Stoev

    jQWidgets Team
    http://www.jqwidgets.com


    DollyB
    Member

    That’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 File
    File:


    Peter Stoev
    Keymaster

    Hi DollyB,

    Have you tried jQuery selection of your inputs by Id or by Class name?

    Best Regards,
    Peter Stoev

    jQWidgets Team
    http://www.jqwidgets.com

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

You must be logged in to reply to this topic.