87,994
社区成员
发帖
与我相关
我的任务
分享关于jquery的增加和删除tab,请进,分送上
<!doctype html>
<html lang="en">
<head>
<title>jQuery UI Tabs - Default functionality</title>
<link type="text/css" href="../../themes/base/ui.all.css" rel="stylesheet" />
<script type="text/javascript" src="../../jquery-1.3.2.js">
</script>
<script type="text/javascript" src="../../ui/ui.core.js">
</script>
<script type="text/javascript" src="../../ui/ui.tabs.js">
</script>
<link type="text/css" href="../demos.css" rel="stylesheet" />
<script type="text/javascript">
var index = 0;
$(function(){
$("#tabs").tabs();
$('#createtab1').bind("click",createNewTab);
$('#createtab2').bind("click",createNewTab);
});
function createNewTab(){
var title =index +1;
title ="#"+title;
$('#tabs').tabs("add", "#insertcontext", title);
$('#insertcontext').show();
index += 1;
if(index >=3){
$('#createtab1').unbind('click',createNewTab);
$('#createtab2').unbind('click',createNewTab);
}
}
function removeTab(){
var tabs = $('#tabs').tabs();
var selected = tabs.tabs('option', 'selected'); // => 0
alert(selected);
//这边有问题 tabs.tabs("remove",selected);
}
</script>
</head>
<body>
<div class="demo">
<div id="tabs">
<ul id="tabul">
<li>
<a href="#tabs-1">Nunc tincidunt</a>
</li>
<li>
<a href="#tabs-2">Proin dolor</a>
</li>
</ul>
<div id="tabs-1">
<p>
Proin elit arcu, rutrum commodo, vehicula tempus, commodo a, risus. Curabitur nec arcu. Donec sollicitudin mi sit amet mauris. Nam elementum quam ullamcorper ante. Etiam aliquet massa et lorem. Mauris dapibus lacus auctor risus. Aenean tempor ullamcorper leo. Vivamus sed magna quis ligula eleifend adipiscing. Duis orci. Aliquam sodales tortor vitae ipsum. Aliquam nulla. Duis aliquam molestie erat. Ut et mauris vel pede varius sollicitudin. Sed ut dolor nec orci tincidunt interdum. Phasellus ipsum. Nunc tristique tempus lectus.
</p>
<a id="createtab1" href="#">add new tab</a>
</div>
<div id="tabs-2">
<p>
Morbi tincidunt, dui sit amet facilisis feugiat, odio metus gravida ante, ut pharetra massa metus id nunc. Duis scelerisque molestie turpis. Sed fringilla, massa eget luctus malesuada, metus eros molestie lectus, ut tempus eros massa ut dolor. Aenean aliquet fringilla sem. Suspendisse sed ligula in ligula suscipit aliquam. Praesent in eros vestibulum mi adipiscing adipiscing. Morbi facilisis. Curabitur ornare consequat nunc. Aenean vel metus. Ut posuere viverra nulla. Aliquam erat volutpat. Pellentesque convallis. Maecenas feugiat, tellus pellentesque pretium posuere, felis lorem euismod felis, eu ornare leo nisi vel felis. Mauris consectetur tortor et purus.
</p>
<a id="createtab2" href="#">add new tab</a>
</div>
<div id="insertcontext" style="display:none">
<form>
<table>
<tr>
<td>
input your name:
</td>
<td>
<input type="text" name="name" />
</td>
</tr>
<tr>
<td>
input your password:
</td>
<td>
<input type="password" namw="pwd" />
</td>
</tr>
<hr/>
<br/>
<tr>
<td>
<input type="submit" value="submit" onclick="removeTab()" />
</td>
<td>
<input type="reset" value="reset" />
</td>
</tr>
</table>
</form>
</div>
</div>
</div><!-- End demo -->
</body>
</html>以上代码必须放在query-ui-1.7.2.custom\development-bundle\demos\tabs下面才能正确跑
有前二个tab,tab里面有一个超链接, 点击一次,产生一个新的tab , 最多只能产生三个tab ,超过时单击失效
在产生的tab页里面有sumbit按钮,单击一下,本tab就被删除,删除后可重新单击前二个tab的超链接,产生新的tab页
麻烦大家看看
...全文
请发表友善的回复…
发表回复
duzhonghua 2009-11-20
- 打赏
- 举报
没人知道啊
进来的人,拿分,准备结帖
进来的人,拿分,准备结帖
duzhonghua 2009-11-19
- 打赏
- 举报
自己顶一下
duzhonghua 2009-11-19
- 打赏
- 举报
那麻烦替换一下路径
Click_Me 2009-11-19
- 打赏
- 举报
用的本地路径... 放哪下面也跑不了...
