jQuery UI Widgets › Forums › Navigation › NavigationBar, ToolBar, NavBar › Flush widgets to the right of toolbar

Tagged: , , , , , , , ,

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

Viewing 2 posts - 1 through 2 (of 2 total)
  • Author
    Flush widgets to the right of toolbar Posts
  • July 8, 2015 at 12:41 pm Flush widgets to the right of toolbar #73526

    PTBD
    Participant

    Hello,

    I was wondering if there is a easy way to flush widgets to the right side of the toolbar and also have widgets on the left side. So basically to have dynamic space between left and right widgets.

    Does jqxToolBar offer such functionallity or would I have to use a second jqxToolBar right next to the the first one?

    July 9, 2015 at 5:41 am Flush widgets to the right of toolbar #73546

    Dimitar
    Participant

    Hello PTBD,

    This can be done by increasing the left margin of the first right-aligned tool, e.g.:

    <!DOCTYPE html>
<html lang="en">
<head>
    <link type="text/css" rel="Stylesheet" href="../../jqwidgets/styles/jqx.base.css" />
    <style type="text/css">
        .buttonIcon
        {
            margin: -5px 0 0 -3px;
            width: 16px;
            height: 17px;
        }
    </style>
    <script type="text/javascript" src="../../scripts/jquery-1.11.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>
    <script type="text/javascript" src="../../jqwidgets/jqxdropdownlist.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxcombobox.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxinput.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxtoolbar.js"></script>
    <script type="text/javascript" src="../../scripts/demos.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            $("#jqxToolBar").jqxToolBar({
                width: 800, height: 35, tools: 'toggleButton toggleButton toggleButton | toggleButton | dropdownlist combobox | input | custom',
                initTools: function (type, index, tool, menuToolIninitialization) {
                    if (type == "toggleButton") {
                        var icon = $("<div class='jqx-editor-toolbar-icon jqx-editor-toolbar-icon-" + theme + " buttonIcon'></div>");
                    }
                    switch (index) {
                        case 0:
                            icon.addClass("jqx-editor-toolbar-icon-bold jqx-editor-toolbar-icon-bold-" + theme);
                            icon.attr("title", "Bold");
                            tool.append(icon);
                            break;
                        case 1:
                            icon.addClass("jqx-editor-toolbar-icon-italic jqx-editor-toolbar-icon-italic-" + theme);
                            icon.attr("title", "Italic");
                            tool.append(icon);
                            break;
                        case 2:
                            icon.addClass("jqx-editor-toolbar-icon-underline jqx-editor-toolbar-icon-underline-" + theme);
                            icon.attr("title", "Underline");
                            tool.append(icon);
                            break;
                        case 3:
                            tool.jqxToggleButton({ width: 80, toggled: true });
                            tool.text("Enabled");
                            tool.on("click", function () {
                                var toggled = tool.jqxToggleButton("toggled");
                                if (toggled) {
                                    tool.text("Enabled");
                                } else {
                                    tool.text("Disabled");
                                }
                            });
                            break;
                        case 4:
                            tool.jqxDropDownList({ width: 130, source: ["<span style='font-family: Courier New;'>Courier New</span>", "<span style='font-family: Times New Roman;'>Times New Roman</span>", "<span style='font-family: Verdana;'>Verdana</span>"], selectedIndex: 1 });
                            break;
                        case 5:
                            tool.jqxComboBox({ width: 50, source: [8, 9, 10, 11, 12, 14, 16, 18, 20], selectedIndex: 3 });
                            break;
                        case 6:
                            tool.jqxInput({ width: 200, placeHolder: "Type here to search..." });
                            tool.css('margin-left', '195px');
                            break;
                        case 7:
                            var button = $("<div>" + "<img src='../../images/administrator.png' title='Custom tool' />" + "</div>");
                            tool.append(button);
                            button.jqxButton({ height: 15 });
                            break;
                    }
                }
            });
        });
    </script>
</head>
<body>
    <div id="jqxToolBar">
    </div>
</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.