需要为jquery-ui中的tab添加一个判断标签存在的方法exist,使用的是jquery&ui1.8版本。(听说1.9的ui要重新设计tabs组件,很期待啊)
<%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding="utf-8"%> <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>Jsp Demo</title> <script type="text/javascript" src="script/jquery.js"></script> <script type="text/javascript" src="script/jquery-ui.js"></script> <link rel="stylesheet" href="style/jquery.ui.core.css"> <link rel="stylesheet" href="style/jquery.ui.tabs.css"> <style type="text/css"> .tabs{ width:100%; height:90%; } .tab-li{ display:inline; margin:5px 5px 0 0; } .tab-close{ width:3px; height:3px; } </style> <script type="text/javascript"> <!-- $(function(){ var $tabs =$("#div_tabs").tabs({ tabTemplate:"<li label='\#{label}' class='tab-li'><a href='\#{href}'>\#{label}</a><span class='tab-close'>X</span></li>", remove:function(event,ui){ alert(1); } }); $.extend($.ui.tabs.prototype, { exist: function(tabname) { var isexist=-1; $("#div_tabs").find("ul:first-child").find("li").each(function(index,elm){ if(this.label==tabname){ isexist=index; return false; } }); return isexist; } }); $(".tab-li .tab-close").live("click",function(){ var index = $( ".tab-li", $tabs ).index( $( this ).parent() ); $tabs.tabs( "remove", index ); }); $("#addSelector").change(function(){ addTab("content.jsp",this.value); }); }); function addTab(url,tabName){ var ind=$("#div_tabs").tabs( "exist",tabName); if(ind==-1){ $("#div_tabs").tabs( "add", url, tabName); }else{ $("#div_tabs").tabs( "select", ind); } } --> </script> <style type="text/css"> #div_tabs ul{ background-color:#f5f5f5; } </style> </head> <body> <select id="addSelector"> <option>请选择</option> <option value="tab1">tab 1</option> <option value="tab2">tab 2</option> </select> <div id="div_tabs" class="tabs"> <ul style="padding:0 0 0 8px;"> </ul> </div> </body> </html>
代码相对简单,只是作为一个测试demo。