jquery-ui-1.7.1 new tabs and close tabs by self

最近研究jquery-ui-1.7.1的tabs的使用。之前都有用开ext的tabs的。由于觉得ext的库比较大,而且我不需要ext那么强大的库。我需要简单好用够用就可以了。jquery和它的ui库比较适合我的需求。但是jquery ui的tabs库从开始追踪到现在。tabs的控件都没带上自动关闭按钮。虽然新的api中有remove事件和方法。经过一番研究。经过tabs自身的一些api进行了定制,实现带有关闭按钮的tabs的控件。
思路大概如下:
tabs的有一个属性tabTemplate是设置tab标签头的模板的。在模板中增加一个关闭按钮。然后在tabs的添加(add)的事件中增加该按钮的事件,在事件中关闭本tabs标签。

下边是两个sample测试文件,把文件复制到jquery-ui-1.7.1的示范目录中运行。
test.htm file



	
		
		daozaho jQuery UI Example
				
		
		
		
		
	
	

		

Welcome to jQuery UI--Tabs(close by self).

Author:daozhao. blog: daozhao.goflytoday.com

Add new tabs
aaaaaaaaaaaaaaaaaaaaa
bbbbbbbbbbbbbbbbbbbbbbbbbbbbb
cccccccccccccccccccccccccccc

6-7行的css文件和js文件根据自己的测试环境更改。
11行css代码是修正关闭按钮在firefox的显示效果的。ie和chrome浏览器有没有这个css都可以。

test.js 文件。

$(function(){
tabid = 1;
tab = $('#tabs').tabs(
		{add: function(event, ui) {
			   $(ui.tab.nextSibling).click(function(){
					var li = $(this).parent();
					var index = $('#tabs li').index(li.get(0));
                                        if(confirm('Are you sure to close "' + li.text() + '" tab?'))
                                        {
						tab.tabs("remove",index );
                                        }
                                        else
                                        {
                    	                     return false;
                                        }
                                        return true;
				});
			 }
		,tabTemplate: '
	
  • #{label}
  • ' }); $('#add').click(function(){ tab.tabs("add","#newtab"+tabid,"new tab "+tabid); $("#newtab" + tabid ).html("new tabs content tabid:"+tabid); tabid++; }); });

    第5行的$(ui.tab.nextSibling)代码是根据tabTemplate的html代码来定的,这个示范例子ui.tab.nextSibling就是代表关闭按钮。如果你的tabTemplate和我的不一样,就需要修改这个,但是不要修改成$(“.tab-close”),这样的话有一个bug.
    你不信,可以修改成下边的代码。

    		
           tab = $('#tabs').tabs(
    		{add: function(event, ui) {
    			   $(".tab-close").click(function(){
    					var li = $(this).parent();
    					alert(li.text() + " close button is click");
                        return true;
    				});
    			 }
    		,tabTemplate: '
    	
  • #{label}
  • ' });

    你测试的时候,在网页上点击多几次增加按钮。然后点击每一个tab的关闭按钮。你就知道有什么bug了。

    你会发现点击一次tab的关闭按钮,但是会出现几次的alert对话框。最早添加的tab会出现最多次数的alert对话框。最后添加的tab只会出现一次。

    《jquery-ui-1.7.1 new tabs and close tabs by self》有一个想法

    发表回复

    您的电子邮箱地址不会被公开。 必填项已用 * 标注