JavaScript Tabs

Invoke the select method of the jqxTabs. Author: http://jqwidgets.com

by Hristo Hristov

HTML

<script src=" http://jqwidgets.com/public/jqwidgets/jqx-all.js"></script>
<link rel="stylesheet" href="http://jqwidgets.com/public/jqwidgets/styles/jqx.base.css">
<link rel="stylesheet" href="http://jqwidgets.com/public/jqwidgets/styles/jqx.energyblue.css">
<div id='jqxTabs'>
    <ul style='margin-left: 20px;'>
        <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>
<div style='margin-top: 10px;'>
    <input type="button" id='jqxButton' value="Select the last tab" />
</div>

<button id="btn">click</button>

JavaScript

$('#jqxTabs').jqxTabs({
    width: 300,
    height: 150,
    theme: 'energyblue'
});
$('#jqxButton').jqxButton({
    width: '200px',
    height: 30,
    theme: 'energyblue'
});
$('#jqxButton').click(function () {
    $('#jqxTabs').jqxTabs('select', 2);
    
    $('#jqxTabs').jqxTabs('addAt', 2, 'tabTitle', '<p class="xxl" style="color: red;">tabContentXXL</p>');
});

var cl = function (s) { console.log(s) };
$('#btn').click(function () {
    //$("#jqxwindow").jqxWindow('closeAll')
    cl(111);
    //cl($("#jqxwindow"));
    //$('#jqxwindow').jqxWindow('open');
    cl($('.xxl'));
});

$('#btn').jqxButton();
if ($('#jqxwindow').length == 0) {
    // Do something
    cl(123123);
    $('#jqxTabs').jqxTabs('showAllCloseButtons'); 
}