jQuery UI Widgets Forums Navigation NavigationBar, ToolBar, NavBar Drop down button behaviour in tool bar

This topic contains 2 replies, has 2 voices, and was last updated by  AllanD 1 month, 3 weeks ago.

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

  • AllanD

    I have been using demo javascript-toolbar-events.htm, from jqwidgets-ver16.0.0, to understand how to add a jqxDropDownButton to jqxToolBar. To match my requirements I have wrapped the demo in a jqxWindow.

    When I open the colour chooser in the modified demo and then move the window the chooser drop down does not move. Is this expected behaviour?

    If I do the same with the shape selector the drop down list is closed when the window is moved.


    `<!DOCTYPE html>
    <html lang=”en”>
    <title id=”Description”>This demo shows how to bind to tool events in jqxToolBar.
    <meta name=”description” content=”This demo shows how to bind to tool events in jqxToolBar.” />
    <link rel=”stylesheet” href=”../../../jqwidgets/styles/jqx.base.css” type=”text/css” />
    <meta http-equiv=”X-UA-Compatible” content=”IE=edge,chrome=1″ />
    <meta name=”viewport” content=”width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1″ />
    <script type=”text/javascript” src=”../../../scripts/jquery-1.12.4.min.js”></script>
    <script type=”text/javascript” src=”../../../jqwidgets/jqxcore.js”></script>
    <script type=”text/javascript” src=”../../../jqwidgets/jqxwindow.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/jqxinput.js”></script>
    <script type=”text/javascript” src=”../../../jqwidgets/jqxcolorpicker.js”></script>
    <script type=”text/javascript” src=”../../../jqwidgets/jqxdropdownbutton.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 () {
    $(“#toolbar”).jqxToolBar({ width: getWidth(‘toolbar’), height: 35, tools: ‘input | input | dropdownlist | custom’,
    initTools: function (type, index, tool, menuToolIninitialization) {
    switch (index) {
    case 0:
    tool.jqxInput({ width: 130, placeHolder: “Enter width…” });
    tool.on(“change”, function () {
    case 1:
    tool.jqxInput({ width: 130, placeHolder: “Enter height…” });
    tool.on(“change”, function () {
    case 2:
    tool.jqxDropDownList({ width: 130, source: [“square”, “circle”], placeHolder: “Choose shape…” });
    tool.on(“change”, function (event) {
    var args = event.args;
    if (args) {
    var label = args.item.label;
    if (label == “square”) {
    $(“#shape”).css(“border-radius”, 0);
    } else {
    $(“#shape”).css(“border-radius”, “50%”);
    case 3:
    tool.append(“<div style=’padding: 3px;’><div></div></div>”);
    var colorPicker = tool.children().children();

    function getTextElementByColor(color) {
    if (color == ‘transparent’ || color.hex == “”) {
    return $(“<div style=’text-shadow: none; position: relative; padding-bottom: 2px; margin-top: 2px;’>transparent</div>”);
    var element = $(“<div style=’text-shadow: none; position: relative; padding-bottom: 2px; margin-top: 2px;’>#” + color.hex + “</div>”);
    var nThreshold = 105;
    var bgDelta = (color.r * 0.299) + (color.g * 0.587) + (color.b * 0.114);
    var foreColor = (255 – bgDelta < nThreshold) ? ‘Black’ : ‘White’;
    element.css(‘color’, foreColor);
    element.css(‘background’, “#” + color.hex);
    return element;

    colorPicker.on(‘colorchange’, function (event) {
    tool.jqxDropDownButton(‘setContent’, getTextElementByColor(event.args.color));
    $(“#shape”).css(“background-color”, “#” + event.args.color.hex);
    colorPicker.jqxColorPicker({ color: “0F2B70”, colorMode: ‘hue’, width: 220, height: 220 });
    tool.jqxDropDownButton({ width: 130, height: 21 });
    tool.jqxDropDownButton(‘setContent’, getTextElementByColor(new $.jqx.color({ hex: “0F2B70” })));
    $(“#window”).jqxWindow({ width: 1024, height: 600 });
    <div id=”window”>
    <div id=”header”>Toolbar test</div>
    <div id=”content”>
    <div id=”toolbar”>
    <div style=”margin-top: 20px; margin-bottom: 50px; font-size: small; font-family: Verdana;”>
    Modify the shape by changing the options in the toolbar.</div>
    <div id=”shape” style=”width: 200px; height: 200px; border: 1px solid #222222; border-radius: 50%;
    background-color: #0F2B70;”>
    <div id=”dropdownbutton”><div>contents</div></div>

    <div style=”position: absolute; bottom: 5px; right: 5px;”>
    <a href=”https://www.jqwidgets.com/” alt=”https://www.jqwidgets.com/”><img alt=”https://www.jqwidgets.com/” title=”https://www.jqwidgets.com/” src=”https://www.jqwidgets.com/wp-content/design/i/logo-jqwidgets.png”/></a>

    Drop down button behaviour in tool bar #134497


    Hi Allan,

    In this case, you will need to close it manually. You can attach a “moved” or “moving” event to the jqxWindow and inside the handler close the colorPicker.

    Best Regards,
    Ivan Peevski
    jQWidgets Team


    Hi Ivan,

    Thank you for the clarification.

    Best regards,

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

You must be logged in to reply to this topic.