Close icon not showing in Jquery-ui-Tabs

StackOverflow https://stackoverflow.com/questions/20234118

  •  05-08-2022
  •  | 
  •  

سؤال

Below in my code and i am using Jquery-Ui-Tabs to create tabs . Everything is working fine but close icon is not showing on the tabs .Please let me know if anything is missing. Help is appreciated.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>

    <title>Web portal</title>


     <link rel="stylesheet" type="text/css" href="css/jquery-ui-1.10.3.custom.css">
     <script type='text/javascript' src='script/jquery-1.6.2.js'></script>
     <script type='text/javascript' src='script/jquery-ui-1.10.3.custom.min.js'></script>
     <style>
     #tabs li .ui-icon-close { float: left; margin: 0.4em 0.2em 0 0; cursor: pointer; }
     </style>





    <script>
    $(function() {

    var tabs=$('#tabs').tabs();
    tabs.delegate( "span.ui-icon-close", "click", function() {
      var panelId = $( this ).closest( "li" ).remove().attr( "aria-controls" );
      $( "#" + panelId ).remove();
      tabs.tabs( "refresh" );
    });

     });
    </script>





</head>

<body>

    <div id="pageWrap">
    <div id="page_header">
    <h3>UI TABS</h3>
    </div>
    <div id="left">

   </div>
        <div id="right">


        <div id="welcome">
        <div id="tabs">
  <ul>
    <li><a href="#tabs-1">test tab1</a><span class="ui-icon ui-icon-close"></span></li>
    <li><a href="#tabs-2">test tab2</a><span class="ui-icon ui-icon-close"></span></li>
  </ul>
  <div id="tabs-1">
    <p>This is the test tab1....</p>
  </div>
  <div id="tabs-2">
    <p>This is the test tab2....</p>
  </div>

      </div>

      </div>
    </div>
    </div>

</body>

</html>
هل كانت مفيدة؟

المحلول

Please Check this demo and Demo 2

<li>
  <a href="#tabs-1">Nunc tincidunt</a>
     <span class='ui-icon ui-icon-circle-close ui-closable-tab'></span>
</li>

Jquery

$(".ui-closable-tab").live( "click", function() {
    var tabContainerDiv=$(this).closest(".ui-tabs").attr("id");
    var panelId = $( this ).closest( "li" ).remove().attr( "aria-controls" );
    $( "#" + panelId ).remove();
    $("#"+tabContainerDiv).tabs("refresh");
    var tabCount=$("#"+tabContainerDiv).find(".ui-closable-tab").length;
    if (tabCount<1) {
        $("#"+tabContainerDiv).hide();
    }
});
مرخصة بموجب: CC-BY-SA مع الإسناد
لا تنتمي إلى StackOverflow
scroll top