Blogs

In this post, we will show you how to edit the Tabs titles at run-time. The task is to open a text Input when the user double-clicks a tab title. The input should be initialized with the title of the tab and the new title should be saved when the user clicks outside of the input.

Let’s start by defining the HTML structure for the jqxTabs. We will have three tabs – Tabs1, Tabs2 and Tabs3.

<div id='jqxTabs'>
    <ul>
        <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>

Add references to the external style sheets and JavaScript code files that control the layout of the jqxTabs widget and implement the operations and logic.

<link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" />
<link rel="stylesheet" href="../../jqwidgets/styles/jqx.classic.css" type="text/css" />
<script type="text/javascript" src="../../scripts/jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="../../jqwidgets/jqxcore.js"></script>
<script type="text/javascript" src="../../jqwidgets/jqxtabs.js"></script>
<script type="text/javascript" src="../../jqwidgets/jqxcheckbox.js"></script>

The last step is to initialize the Tabs widget and implement the tabs editing logic.

<script type="text/javascript">
    $(document).ready(function () {

        // Create jqxTabs.
        $('#jqxTabs').jqxTabs({ width: 600, height: 200, theme: 'classic' });

        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 tabs = $('#jqxTabs').find("li");
        // bind to the double-click event.
        tabs.bind('dblclick', function (event) {
            // find the double-clicked tab title.
            var target = event.target;
            var tab = target.tagName == "LI" ? $(target) : $(target).parents('li:first');
            // 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();
                    me.edittab.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());
            me.edittab = tab;
        });

    });
</script>

Let’s see how the code above works:

At first, we select all tabs and bind to the double-click event (dblclick)

var tabs = $('#jqxTabs').find("li");
tabs.bind('dblclick', function (event) {
});

Then we find which is the actually double-clicked Tab by using the code below:

var target = event.target;
var tab = target.tagName == "LI" ? $(target) : $(target).parents('li:first');

After that, we create a text Input with absolute positioning and we add it to the document’s body. We also trigger the input’s blur event and in the event handler, we save the new tab’s title and hide the input.

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();
        me.edittab.text(newtext);
        input.css('display', 'none');
        $('#jqxTabs').jqxTabs('_performHeaderLayout');
    });
}

In the following code example, we initialize the text Input by setting its position, width and height. The input should be positioned over the double-clicked tab. The last two lines in the code will set the input’s initial text and will save the clicked tab in the edittab member( we use the edittab member to set the tab’s text in the input’s blur handler).

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());
me.edittab = tab;

Before double-clicking a Tab, the Tabs widget looks like the screenshot below:

When we double-click the first tab, the editor is displayed in the first Tab. Now, we can enter the new title of the tab. Here’s the result after we edited the first tab of the tabs widget.