Status area in tabs header

[ChrisJMember]

I’d like to add a small amount of text, and possibly a button at the right side of the tab header line (ie the same level as the tabs themselves) to display program status. Is there an easy way to do this?

Thanks
Chris

[MinkoBlocked]

Hello Chris,

you can achieve this by adding text and button into the element of the tab with class jqx-tabs-headerWrapper.
It’s with relative position so you can add the desired content like this:

JavaScript

$('#jqxTabs').jqxTabs({ width: 430, height: 200, position: 'top', theme: theme });
var container = $('#jqxTabs').children('.jqx-tabs-headerWrapper');
container.append('<div style="position:absolute;right:5px;top:5px;">Some text<button>X</button></div>');

HTML

<div id='jqxTabs'>
    <ul>
        <li style="margin-left: 3px;">Node.js</li>
        <li>JSP</li>
        <li>ASP</li>
        <li>Python</li>
    </ul>
    <div>
        Node.js
    </div>
    <div>
        JavaServer Pages
    </div>
    <div>
        ASP.NET
    </div>
    <div>
        Python
    </div>     
</div>

Best regards,
Minko

jQWidgets Team
http://jqwidgets.com/

[Author]

Posts