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

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

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

  • 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?


    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/

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

You must be logged in to reply to this topic.