CODEWITHSUNDEEP
javascriptjquery
Ravi Mule
Ravi Mule

Reputation: 404

Tabs creation menu in JQuery

I am trying to add create tab menu, but I want to show new tab to user when user click on save and continue button

Using the below script 

<script>

$(function () 
{
     var $tabs = $("#tabs");
     $tabs.tabs();
     $tabs.tabs("option", 'disabled', [1, 2, 3]);
     function getSelectedTabIndex() 
     {
          return $tabs.tabs('option', 'selected');
     }

     $("#goNext").click(function () 
     {
          var b = getSelectedTabIndex() + 1;
          $tabs.tabs('enable', b);
          $tabs.tabs('option', 'active', b);
          $tabs.tabs('option', 'selected', b);
      });
});
</script>

Upvotes: 1

Views: 114

Answers (2)

dhana
dhana

Reputation: 6525

From Jquery UI active, Try This,

$( "#tabs" ).tabs( {active:1});
// activate next tab
$( "#tabs" ).tabs( "option", "active", tabCounter-1 );

Demo link http://jsfiddle.net/dhana36/y2U5u/

Upvotes: 0

Suhaib Janjua
Suhaib Janjua

Reputation: 3574

Try the following code....

Also live Demo here...

Step 1: Create the tabs

<div style="margin-bottom:10px">
    <a href="#" class="easyui-linkbutton" onclick="addTab('google','http://www.google.com')">google</a>
    <a href="#" class="easyui-linkbutton" onclick="addTab('jquery','http://jquery.com/')">jquery</a>
    <a href="#" class="easyui-linkbutton" onclick="addTab('easyui','http://jeasyui.com/')">easyui</a>
</div>
<div id="tt" class="easyui-tabs" style="width:400px;height:250px;">
    <div title="Home">
    </div>
</div>

Step 2: Implement the 'addTab' function

function addTab(title, url){
    if ($('#tt').tabs('exists', title)){
        $('#tt').tabs('select', title);
    } else {
        var content = '<iframe scrolling="auto" frameborder="0"  src="'+url+'" style="width:100%;height:100%;"></iframe>';
        $('#tt').tabs('add',{
            title:title,
            content:content,
            closable:true
        });
    }
}

Upvotes: 1

Related Questions