Heim > Web-Frontend > js-Tutorial > Hauptteil

Informationen zum Beispielcode für die Registerkarte „jqueryUI'.

小云云
Freigeben: 2017-12-27 09:34:00
Original
1765 Leute haben es durchsucht

Dieser Artikel teilt hauptsächlich den jqueryUI-Tab-Seitencode, der einen gewissen Referenzwert hat. Ich hoffe, er kann jedem helfen.

Das Beispiel in diesem Artikel teilt den spezifischen Code der Registerkarte „jqueryUI“ als Referenz. Der spezifische Inhalt lautet wie folgt:


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);
 }
Nach dem Login kopieren

Verwandte Empfehlungen :

JavaScript-Code-Sharing: Tab-Label-Wechsel

Verwendung von JavaScript zur Erläuterung der Auswirkung des Tab-Label-Wechsels

So implementieren Sie die Tab-Funktion mit js bzw. jquery

Das obige ist der detaillierte Inhalt vonInformationen zum Beispielcode für die Registerkarte „jqueryUI'.. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage
Über uns Haftungsausschluss Sitemap
Chinesische PHP-Website:Online-PHP-Schulung für das Gemeinwohl,Helfen Sie PHP-Lernenden, sich schnell weiterzuentwickeln!