jquery ui 1.7 ui.tabs 动态添加与关闭(按钮关闭+双击关闭)

 

研究了两天ui.tabs,终于搞定,之前在网上下了一个老版本的api,好多方法在1.7都用不了

然后我就晕了.addTabs和removeTabs方法在1.7都没有了

而在网上看到别人写的一个符合我要求的代码就是老版本的,但我觉得不能放弃,一定要用新版本的UI

哎,突然发现这个博客的编辑功能很牛哦,要有代码看看就好

不费话了,放代码

 

 

Code
<!--

Code highlighting produced by Actipro CodeHighlighter (freeware)
http://www.CodeHighlighter.com/

-->

 $(document).ready(function(){
       $('#tabs').tabs({add:addEventHandler});  //给tabs块绑定addEventHandler事件
       $('#newtabs').click(addTab);
 
 })
 
 var tabCounter = 1;        
 function addTab(){
     if(tabCounter > 6){
        alert('tabs can not more than 6!');
        return;
    }
    $('<div id="new-tab-'+tabCounter+'">'+'New tab'+tabCounter+'</div>').appendTo('#tabs');
    $('#tabs').tabs("add","#new-tab-"+tabCounter,'New tab'+tabCounter);
    tabCounter++;
}
function addEventHandler(event,ui){
    var li = $(ui.tab).parent();
    $('<img src="close.gif"/>') //关闭按钮
        .appendTo(li)
        .hover(function(){
                var img = $(this);
                img.attr('src','close_hover2.png');
            },
            function(){
                var img = $(this);
                img.attr('src','close.png');
            }
        )
        .click(function(){        //关闭按钮,关闭事件绑定
            var li = $(ui.tab).parent();
      var index = $('#tabs li').index(li.get(0));
      $("#tabs").tabs("remove",index);
      tabCounter--;
        });
        $(ui.tab).dblclick(function(){   //双击关闭事件绑定
            var li = $(ui.tab).parent();
      var index = $('#tabs li').index(li.get(0));
      $("#tabs").tabs("remove",index);
      tabCounter--;
        });
}