|
|
需要为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。 |
|
京ICP备14020293号-2
本网站内容均收集于互联网，如有问题请联系QQ:389897944予以删除
窥视卡
雷达卡
楼主
提升卡
置顶卡
沉默卡
喧嚣卡
变色卡
千斤顶
显身卡