Maison > interface Web > js tutoriel > le corps du texte

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

小云云
Libérer: 2017-12-27 09:34:00
original
1749 Les gens l'ont consulté

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);
 }
Copier après la connexion

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!

Étiquettes associées:
source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal
À propos de nous Clause de non-responsabilité Sitemap
Site Web PHP chinois:Formation PHP en ligne sur le bien-être public,Aidez les apprenants PHP à grandir rapidement!