<!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页麻烦大家看看
<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页麻烦大家看看
解决方案 »
- Prototype.Browser 属性为什么有firefox
- 如何把javabean里的一个值赋给javascript的变量?
- 关于JS 斜线移动问题!高手进!
- JS 错误之 ipblock is not a function
- 请教如何给用insertCell插入的表单元绑定事件句柄
- to :meizz(梅花雪) 等各位高手,请帮帮我的忙(不太难)。
- 大家帮帮我,这样的js怎样写啊,明天要用的,急求!!!!!!
- 菜单达人请进~树状菜单节点的右键菜单
- 大家帮一下:求可拖动窗口代码,就是层定义的那种。
- 一个简单的问题,送你分数
- 正则表达式替换的问题
- 文本框内容被程序改变,但onchange事件没有响应?
用的本地路径... 放哪下面也跑不了...
进来的人,拿分,准备结帖