About jqueryUI tab page sample code

This article mainly shares the jqueryUI tab page code for everyone, which has certain reference value. Interested friends can refer to it. I hope it can help everyone.

The example in this article shares the specific code of the jqueryUI tab page for your reference. The specific content is as follows

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);
 }

Related recommendations:

JavaScript code sharing: tab label switching

Explanation of the effect of tab label switching using JavaScript

js and How jquery implements tab page functions respectively

The above is the detailed content of About jqueryUI tab page sample code. For more information, please follow other related articles on the PHP Chinese website!