滑动表单内容

Posted 2023-05-09

【中文标题】滑动表单内容

【英文标题】：Sliding Form Content

【发布时间】：2012-09-14 05:35:15

【问题描述】：

所以我有一个 3 页（Page1.php、Page2.php、Page3.php）的注册页面，在 20 多小时的编码后全部完成。但现在我正在从事设计工作。我的想法是将所有表单放在一个页面上，而不是三个不同的页面（Page1.php、Page2.php、Page3.php）。

首页是这样的：

因此，当用户单击注册链接时，我希望表单出现在该区域中：

我拥有表单的所有代码，因此只需复制粘贴即可。但我需要做的是为表单实现某种滑块。所以用户点击注册，表格出现在右边，他们填写第一页，然后在右下角点击继续，然后滑到下一页。请注意，当他们单击继续时，我不想转到一个全新的页面，我想留在同一页面上，我只想显示不同的内容。

我知道如何在 jquery 中执行所有 onclick（显示/隐藏）操作，但我想知道是否有一个好的插件可以用来提供更平滑的过渡和更好的体验。或者如果有更好的方法（纯 CSS 或其他）

【问题讨论】：

一定要搜索 jQuery 滑块插件，有几个可以帮你把它包起来

@thewebguy 好的，但是 jquery 滑块插件提供了图像滑块。我想滑动这个表格。有更具体的插件名称吗？

仅使用 css 是不可能的。因为它不会remember某事的状态。你有像:hover 和:click 这样的选择器，但是没有任何东西会记住你点击了什么。所以比如你点击第2页，你可以显示第2页，但是在mouseUp事件之后它会立即消失。

【参考方案1】：

只需将所有内容设置为.hide() 和.show() 即具有唯一标识符的div。

所以你有：

<a href="javascript:void();" data-tab="page1" class="tab">Page 1</a>
<a href="javascript:void();" data-tab="page2" class="tab">Page 2</a>
<a href="javascript:void();" data-tab="page3" class="tab">Page 3</a>
<div class="tab" data-tab="page1">Content for page 1</div>
<div class="tab" data-tab="page1">Content for page 1</div>
<div class="tab" data-tab="page1">Content for page 1</div>

用jquery代码：

$('a.tab').click(function()
    $('div.tab').hide();
    $('div.tab[data-tab=' + $(this).attr('data-tab') + ']').show();
);

嗯，基本上就是这样。你可以做剩下的，但这应该让你朝着正确的方向开始:)

您可以根据需要将其复杂化。我有一些编码，他们使用 CakePhp 中的 TabHelper 执行此操作，并且使用一点 javascript 我构建了相同的代码。因为我不喜欢jQueryUi tab plugin（提示）

另外，看看Php Frameworks，你说你花了 20 小时编码来注册和登录。好吧，我对CakePhp 做了同样的事情，但现在我的网站已经完成并且完全可维护并发送在正确的时间发送电子邮件并具有很多功能。