JqueryUI之tabs组件拓展：实现卡片式打开多页面

最新推荐文章于 2022-09-21 23:42:19 发布

原创最新推荐文章于 2022-09-21 23:42:19 发布 · 330 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#UI #CSS #HTML

Web前端同时被 2 个专栏收录

14 篇文章

订阅专栏

jquery

2 篇文章

订阅专栏

关注我的微博：http://weibo.com/2139463997

需求：

1.采用卡片式打开多页面

2.过滤重复打开页面如果该页面已经打开，只需要切换至该tab

3.能够在iframe页面直接关闭加载该页面的tab容器

CSS:

  #frame_tabs { margin-top: 0px;}
  #frame_tabs ul li{height: 25px;}
  #frame_tabs a{height: 20px;}
  #frame_tabs li .ui-icon-close { float: left; margin: 0.4em 0.2em 0 0; cursor: pointer; }
  #frame_tabs .ui-tabs-panel{padding: 0px; overflow:hidden;}
  #navibar {height:538px; overflow:hidden;}
  #frame_tabs .navi{height:530px; overflow:hidden;}

JS:

$(function() {
		initFramePanel();
		//
		tab_counter = $frame_tabs.tabs( "length" ) + 1; 
 });

 var tab_counter;	 
 var $frame_tabs;
 var frame_width = 900;
 function initFramePanel(){
   
		$frame_tabs = $('#frame_tabs').tabs({
			tabTemplate: '<li><a href="#{href}">#{label}</a> <span class="ui-icon ui-icon-close">Remove Tab</span></li>',
			add: function(event, ui) {
			    var index = $(this).tabs( "length" ) - 1;
				var url = $(this).tabs( "option", "url");
				var pageKey = url.replace('http://','').replace('/','');
				alert(pageKey);
				var iframeHtml = " <iframe id='frameA' name='frameA' width='" +frame_width+ "px' height='500px' src='" + url
			+ "' frameborder=0 scrolling='no'></iframe> <input type='hidden' value='"+ pageKey +"' />";
				$(ui.panel).html(iframeHtml);
				var selecting = $(this).tabs( "length" ) - 1;
				$(this).tabs( "option", "selected", index);
			}
		});

		$('#frame_tabs span.ui-icon-close').live('click', function() {
            var _li = $(this).parent();
            var index = $('li',$frame_tabs).index(_li);          
			$frame_tabs.tabs('remove', index);
	    });
 }


/** 载入节点url */
function addPageTab(url,title){
   
  // 当前页面状态（是否已经打开）
   var pageIsOpen = false;
   // 打开页面唯一标记
   var pageKey = url.replace('http://','').replace('/','');
   $("#frame_tabs input").each(function(index,elm){
        var inputVal = $(elm).val();
		if(inputVal == pageKey){
		  pageIsOpen = true;
		  $frame_tabs.tabs( "option", "selected", index);
		  return false;
		}
   });
	// 
    if(pageIsOpen)return;
   //
    $frame_tabs.tabs( "option", "url" , url);
	$frame_tabs.tabs('add', '#frame_tabs-'+tab_counter, title);
    tab_counter++;
}

// 关闭页面
//在frame页面通过调用关闭事件:window.parent.closePage()
function closePage(){
    $("#frame_tabs li").each(function(index,elm){
	    if($(elm).hasClass('ui-state-active')){
		    // 移出页面
		   $frame_tabs.tabs('remove',index);
		   return false;
		}
  });
}

html template:

<!-- tab template Start -->
	<div id="frame_tabs">
	    
		<div class="navi">
		  <ul class="ui-tabs-nav ui-helper-reset ui-helper-clearfix ui-widget-header ui-corner-all">
			<li class="ui-state-default ui-corner-top"><a href="#frame_tabs-1">Blank</a> </li>
          </ul>
		<div class="ui-tabs-panel ui-widget-content ui-corner-bottom ui-tabs-hide" id="frame_tabs-1"></div>
    </div>
</div>
<!--tab template End -->

效果：