html语言中移动表格,HTML标签表格滑动

曾经终败给现在 2022-10-05 15:56 200阅读 0赞

我在http://jsfiddle.net/technotarek/ymxn4/的jsFiddle上做了这个。

修订后的JS完整地在下面。请注意，小提琴包括一些新的CSS。我也修改了HTML，但除了\#tab-container div之外，它只是为了外观。该解决方案根据他们在http://twitter.github.com/bootstrap/javascript.html\#tabs的文档推荐使用Twitter Bootstrap

var selector;

var selectorID;

activateTab('\#myTab a:first');

function activateTab(selectorID)

\{

$(selectorID).tab('show')

.closest('.disabled').removeClass('disabled');

\}

function deactivateTab(selector)

\{

$(selector).off('click.twbstab')

.closest('li').addClass('disabled');

\}

$('.btn-demo').on('click',function() \{

selector = '\#myTab a\[href="'+$(this).data('activate')+'"\]';

selectorID = $(selector).attr('href');

\});

var val1 = $('\#frmtype1').validate(

\{

errorPlacement: function(error, element) \{\},

// prevent the standard error message from showing, rather you use the inline-text

rules: \{

'Reg\_type': \{

required: true

\}

\}

\});

// validate 1st form

$('\#frmtype1').submit(function(e)

\{

// validate the first page

if(val1.form()) \{

$('.help-inline').hide();

activateTab(selector);

\} else \{

$('.help-inline').show();

\}

return false;

\});

// validate 2nd form

$('\#frmtype2').submit(function(e)

\{

// validate the second page

activateTab(selector);

return false;

\});

// if 2nd or 3rd tab is clicked, validate as if the form was submitted

$('\#myTab li:eq(1) a, \#myTab li:eq(2) a').click(function(e)

\{

selectorID = $(this).attr('href');

// validate the first page

if(val1.form()) \{

$('.help-inline').hide();

activateTab(this);

$(selectorID).tab('show');

\} else \{

$('.help-inline').show();

\}

return false;

\});

// re-position all tab-panes, except the active pane, so that they are prepared for the slide effect

$(".tab-pane").css("position", "relative");

$(".tab-pane").not(".active").animate(\{

left: "1000px"

\});

// perform slide effect

$('a\[data-toggle="tab"\]').on('show', function (e) \{

lastPane = $(e.relatedTarget).attr('href');

$(lastPane).animate(\{left: "1000px"\}, 300)

currPane = $(e.target).attr('href');

$(currPane).animate(\{left: "0px"\}, 300);

\});

让一切工作的关键在于脚本的最后(以“// re-position ...”开头)。请注意，原始代码不起作用的原因部分是因为您没有包含演示中使用的缓动库(根据@ forty-two的注释)，还因为演示中的代码用于创建制表符效果与Twitter Bootstrap中的标签工作方式有根本的不同。

发表评论取消回复

表情：

评论列表（有 0 条评论，200人围观）

还没有评论，来说两句吧...

相关阅读

相关 html的表格标签

html的表格标签的学习

超、凢脫俗/ 2024年05月06日 21:22/ 0 赞/ 94 阅读

相关表格标签（HTML）

表格标签（HTML） <!DOCTYPE html> <html lang="en"> <head> <meta cha

矫情吗；*/ 2023年10月03日 12:27/ 0 赞/ 15 阅读

相关 13-HTML学习-表格标签

我想起以前学习LaTeX的日子 <!DOCTYPE html> <html lang="en"> <head> <meta chars

比眉伴天荒/ 2023年10月02日 18:31/ 0 赞/ 7 阅读

相关网页设计：HTML表格标签

表格组成： table 表格容器(外框) `<caption>`：定义表格的标题； `<th></th>`：定义一个表格头； `<tr></tr>

刺骨的言语ヽ痛彻心扉/ 2022年12月27日 04:44/ 0 赞/ 235 阅读

相关 html标签之表格标签

HTML表格组成: 由`<table>`标签以及一个或多个`<tr>`、`<th>`或`<td>`标签： `<table>`标签：用来定义表格，整个表格包含在`<

落日映苍穹つ/ 2022年12月27日 04:41/ 0 赞/ 325 阅读

相关 HTML中的表格标签

表格标签表格主要用于显示、展示数据，因为它可以让数据变得非常规整，可读性好。表格不是用来布局页面的，而是用来展示数据的。 <table></talbe>是用于定义表格

深藏阁楼爱情的钟/ 2022年12月15日 14:14/ 0 赞/ 260 阅读

相关三、 HTML表格标签

文章目录三、表格标签 3.1 表格的用途 3.2 表格标签 3.3 表格的常用属性 3.4 表格的跨行及跨列

蔚落/ 2022年11月12日 04:25/ 0 赞/ 255 阅读

相关 (4)表格的html标签,html标签之表格标签

HTML表格组成: 由 <table> <tbody> <tr> <th>或</th> <td>标签：标签中；</td> </tr> <

叁歲伎倆/ 2022年10月19日 15:56/ 0 赞/ 320 阅读

相关 html语言中移动表格,HTML标签表格滑动

我在http://jsfiddle.net/technotarek/ymxn4/的jsFiddle上做了这个。修订后的JS完整地在下面。请注意，小提琴包括一些新的CSS。我

曾经终败给现在/ 2022年10月05日 15:56/ 0 赞/ 201 阅读

相关 html 表格的标签

表格标签(设置表格的宽高不能限定每个单元格大小都一样): <table> <tr> //表示一行 <th></th>

柔情只为你懂/ 2021年07月24日 12:35/ 0 赞/ 502 阅读