jQuery UI Widgets Forums Navigation Tabs Arrow keys don't work in text input elements contained within Tab panels

This topic contains 2 replies, has 2 voices, and was last updated by  MikeA 13 years ago.

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

  • MikeA
    Member

    Hi,
    I want to implement a ‘rename’ tab label feature using jqxTabs. So the user can double click a tab and rename the text label for the tab. I did not see any built in capability to do this. So I tried trapping the ‘dblclick’ event for a tab which my method does get called fine. However, when I display a standard ‘input’ type element, the arrow keys (and home, end keys) do not work in the input field. This input field is a child of the tab panel element. ( I add it dynamically) Is there a way to get arrow keys working when an input is a child of a tab panel?
    Also it would be best if there was a ‘rename tab label’ feature. What is the recommended way of implementing rename of tab labels?

    thanks,
    Mike


    Peter Stoev
    Keymaster

    Hi Mike,

    Please follow the steps below to create an editor for the Tabs.

    1. I created the tab using this html code:

    <div id='jqxTabs'>
    <ul style='margin-left: 10px;'>
    <li>Tab 1</li>
    <li>Tab 2</li>
    <li>Tab 3</li>
    </ul>
    <div>
    Content 1
    </div>
    <div>
    Content 2
    </div>
    <div>
    Content 3
    </div>
    </div>

    2. Then, I initialized the Tabs using this code:

    $('#jqxTabs').jqxTabs({ height: 200, width: 500});

    3. To edit the tab’s title on double click, I use the following script:

    var me = this;
    // disable keyboard navigation. The keyboard navigation handles the arrow keys and selects the next or previous tab depending on the // pressed arrow key.
    $('#jqxTabs').jqxTabs({ keyboardNavigation: false });
    // find the tab we will show an editor for.
    var tab = $('#jqxTabs').find("li:first");
    // bind to the double-click event.
    tab.bind('dblclick', function (event) {
    // create a text input or get the already created.
    var input = me.input || $("<div style='position: absolute; z-index: 9999; background: white'><input/></div>");
    var textinput = input.find('input');
    if (!me.input) {
    // add the text input to the document's body.
    $(document.body).append(input);
    // update the tab's text on blur.
    textinput.bind('blur', function () {
    var newtext = textinput.val();
    tab.text(newtext);
    input.css('display', 'none');
    $('#jqxTabs').jqxTabs('_performHeaderLayout');
    });
    }
    me.input = input;
    // show the input.
    input.css('display', 'block');
    // position the input over the tab and set its size.
    var taboffset = tab.offset();
    me.input.css({ left: taboffset.left, top: taboffset.top });
    me.input.height(tab.outerHeight());
    me.input.width(tab.outerWidth());
    var sizeoffset = 6;
    textinput.width(me.input.width() - sizeoffset);
    textinput.height(me.input.height() - sizeoffset);
    // set the initial text of the input.
    textinput.val(tab.text());
    });

    The script above will position a text input over a Tab and will allow you to edit the tab’s title. The tab’s title is updated when the ‘blur’ event of the input is triggered.

    Hope this helps you.

    Best Regards,
    Peter Stoev

    http://www.jqwidgets.com
    jQWidgets Team


    MikeA
    Member

    Peter,
    Once I disabled the keyboard navigation the keys worked in the input field. After rename I then enable the key again. Works great.
    Thanks for your help.

    Mike

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

You must be logged in to reply to this topic.