[RESOLVED]editable tabs

hi

i need to add the tab control dynamically from javascript, user can add, remove and can rename the tab text. is there any build in control available other wise i have to create my owm tab control to allow this fetures

Hi sivakl_2001,

You can use the following lines in your javascript, please try:

   var myWindow = window.open("MsgWindow");
            myWindow.document.write("<p>This is 'MsgWindow'.</p>");

Hope this helps.

Please revert for more details.

Hi sivakl_2001,

please check the jquery ui tab control :

http://api.jqueryui.com/tabs/

Best Regards,

Kevin Shen.

Hi kelvin thanks for your reply

does the jquery ui tab has build in features to add , rename and delete the tabs without code?

if not can you give examples for add , rename tab text and delete tab from jquery,

If you are planning on working with any kind of dynamic tabs and changing them, I would recommend using a purely client-side tabs component like the aforementioned
jQueryUI library.

You could easily create a complete example with editable tabs as seen below :

<!DOCTYPE html>
<html>
<head>
  <!-- jQueryUI References -->
  <link href="//code.jquery.com/ui/1.11.2/themes/smoothness/jquery-ui.min.css" rel="stylesheet" type="text/css" />
  <script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
  <script src="//code.jquery.com/ui/1.11.2/jquery-ui.min.js"></script>
  <script>
    $(function() {
       // Wire up your tabs
       $("#tabs").tabs();
      
       // Add a new tab
       $("#create-new-tab").click(function(){
           // Get the name for the tab 
           var name = $("#new-tab-name").val();
           // Get the content for the tab
           var content = $("#new-tab-content").val();
           
           // Build a position for the new tab
           var tabIndex = $("#tabs ul li").length + 1;
           
           // Built the tab and insert it 
           var tab = '<li><a href="#tab-' + tabIndex + '">' + name + '</a></li>';
         
           // Append your tab to the list
           $("#tabs ul").append(tab);
         
           // Add the content area
           var tabContent = '<div id="tab-' + tabIndex + '">' + content + '</div>';
         
           // Append the content to your tabs area
           $("#tabs").append(tabContent);
         
           // Refresh your tabs area
           $("#tabs").tabs("refresh");
       });
      
       // Add a new tab
       $("#update-tab").click(function(){
           // Get the index
           var index = $("#update-tab-index").val();
           // Get the name for the tab 
           var name = $("#update-tab-name").val();
           // Get the content for the tab
           var content = $("#update-tab-content").val();
           
           // Find the current tab and its content
           var $tab = $("#tabs ul li:eq(" + (index - 1) + ") a");
           var $tabContent = $("#tab-" + index);
           
         
           // Ensure the tab and content exists
           if($tab != undefined && $tabContent != undefined){
               // Update the tab
               $tab.html(name);
               // Update the content
               $tabContent.html(content);
             
               // Refresh your tabs area
               $("#tabs").tabs("refresh");
           }
           else{
               // The tab could not be found
               alert("The tab could not be found. Ensure you are using a 1-based position.")
           }
       });
      
       // Delete an existing tab
       $("#delete-tab").click(function(){
           // Get the index
           var index = $("#delete-tab-index").val();
           
           // Find the current tab and its content
           var $tab = $("#tabs ul li:eq(" + (index - 1) + ") a");
           var $tabContent = $("#tab-" + index);
           
           // Ensure the tab and content exists
           if($tab != undefined && $tabContent != undefined){
               $tab.remove();
               $tabContent.remove();
             
               // Refresh your tabs area
               $("#tabs").tabs("refresh");
           }
           else{
               // The tab could not be found
               alert("The tab could not be found. Ensure you are using a 1-based position.")
           }
       });
    });
  </script>
</head>
<body>
  <div id="tabs">
    <ul>
      <li><a href="#tab-1">A</a></li>
      <li><a href="#tab-2">B</a></li>
      <li><a href="#tab-3">C</a></li>
    </ul>
    <div id="tab-1">
      Tab A
    </div>
    <div id="tab-2">
      Tab B
    </div>
    <div id="tab-3">
      Tab C
    </div>
  </div>
  <br />
  <hr />
  <b>Add New Tab</b><br />
      Tab Name: <input id='new-tab-name' /> 
      Tab Content: <input id='new-tab-content' /> 
      <input type='button' id='create-new-tab' value='Add New Tab' /><br /><br />
  
  <b>Update Tab</b><br />
      Tab Position: <input id='update-tab-index' /> 
      Tab Name: <input id='update-tab-name' /> 
      Tab Content: <input id='update-tab-content' /> 
      <input type='button' id='update-tab' value='Update Tab' /><br /><br />
  
  <b>Delete Tab</b><br />
      Tab Position: <input id='delete-tab-index' /> <input type='button' id='delete-tab' value='Delete Tab' />
</body>
</html>

You can find a working example here and see the operations in action below :

Adding a Tab

Updating a Tab

Deleting a Tab

Leave a Reply