À propos de l'exemple de code de la page de l'onglet jqueryUI

Cet article partage principalement le code de la page de l'onglet jqueryUI pour tout le monde, qui a une certaine valeur de référence. Les amis intéressés peuvent s'y référer. J'espère que cela pourra aider tout le monde.

L'exemple de cet article partage le code spécifique de la page de l'onglet jqueryUI pour votre référence. Le contenu spécifique est le suivant

var temp=1;
 var arr=["我的首页"];
  //×号点击关闭li
 $("#tabs").delegate( ".ui-icon-close", "click", function() {
   var panelId = $( this ).closest( "li" ).remove().attr( "aria-controls" );
   var val= $( this ).closest( "li" ).children("a").text();
   for( i=0;i<arr.length;i++){
     if(arr[i] == val) {
       arr.splice(i, 1);
       break;
     }
   }
   // alert(paneiId);
   $( "#" +panelId ).remove();
   $("#tabs").tabs( "refresh" );
//   $("#tabs").tabs("option","active",$("#tabs").find(hre).index()-1);
   if($( "#" +panelId).parent.attr("tabindex")=="0"){
     $("#tabs").tabs("option","active",$( "#" +panelId).index()-1);
   }
 });

 $("#tabs").bind( "keyup", function( event ) {
   if ( event.altKey && event.keyCode === $.ui.keyCode.BACKSPACE ) {
     var panelId = $("#tabs").find( ".ui-tabs-active" ).remove().attr( "aria-controls" );
     $( panelId ).remove();
    // alert(456);
     $("#tabs").tabs( "refresh" );
   }
 });
 //加入iframe
 $("#tabs").tabs();
 function getSelectedTabIndex() {
   return $("#tabs").tabs(&#39;option&#39;, &#39;active&#39;);
 }

 //get tab contents and load frame
 beginTab = $("#tabs ul li:eq(" + getSelectedTabIndex() + ")").find("a");

 loadTabFrame($(beginTab).attr("href"),$(beginTab).attr("rel"));
 //页签切换
 $("#mm").on(&#39;click&#39;,&#39;a&#39;,function(){
   loadTabFrame($(this).attr("href"),$(this).attr("rel"));
 })

 function loadTabFrame(tab, url) {
   if ($(tab).find("iframe").length == 0) {
     var html = [];
     html.push(&#39;<p class="tabIframeWrapper">&#39;);
     html.push(&#39;<p class="openout"><a href="&#39; + url + &#39;" rel="external nofollow" ></a></p><iframe class="iframetab" src="&#39; + url + &#39;">Load Failed?</iframe>&#39;);
     html.push(&#39;</p>&#39;);
     $(tab).append(html.join(""));
     $(tab).find("iframe").height($(window).height()-80);
   }
   return false;
 }

 //点击左边按钮后，创建tab

 $(".layui-nav-child").on(&#39;click&#39;,&#39;dd&#39;,function(){

   var tab_name=$(this).text();
   var title_1=$(this).children("a").attr("title");
   //未创建过，则创建标签
   if(arr.indexOf(tab_name)==-1){
     arr.push(tab_name);
     var link_url= $(this).children("a").attr("title");
     temp++;
     addTab(tab_name,link_url,temp);
   }
   //创建了，则跳转到已存的标签页
  else{

     $("#mm li a").each(function(i,val){

       if($(this).attr("rel")==title_1){
         var jjjj=$(this).attr("href");
         $("#tabs").tabs("option","active", $(jjjj).index()-1);
         loadTabFrame(jjjj,title_1);

         return false;
       }
     });


   }
 });

 //创建标签
 function addTab(name,url,temp1){

   var hre="#contant_"+ temp1;
   var hre1="contant_"+ temp1;
  //var li="<li><a class=&#39;tabLink&#39; href="+url+" rel="external nofollow" target=&#39;conFrame&#39;>"+name+"</a><i class=&#39;icon-closeA&#39;>×</i></li>";
   var li="<li><a class=&#39;tabLink&#39; href=&#39;"+hre+"&#39; rel=&#39;"+url+"&#39;>"+name+"</a><i class=\"ui-icon-close\">×</i></li>";
   //alert(li);
   // $(li).appendTo(".m-tabList").addClass(&#39;tabCur&#39;).siblings(&#39;li&#39;).removeClass(&#39;tabCur&#39;);
   var p="<p id=&#39;"+hre1+"&#39;></p>";
  $("#tabs" ).find( ".ui-tabs-nav" ).append( li );
//   var panelId = $( this ).closest( "li" ).attr( "aria-controls" );
   $("#tabs").append(p);
   $("#tabs").tabs("refresh");
    $("#tabs").tabs("option","active",$("#tabs").find(hre).index()-1);
   loadTabFrame(hre,url);
 }

Recommandations associées. :

Partage de code JavaScript : changement d'étiquette d'onglet

Utilisation de JavaScript pour expliquer l'effet du changement d'étiquette d'onglet

Comment implémenter la fonction de tabulation en utilisant respectivement js et jquery

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!