动画布局[关闭]答案

【问题标题】：Animated layouts [closed]动画布局[关闭]
【发布时间】：2012-07-16 07:00:09
【问题描述】：

我想创建一个布局更改的页面，而不是加载新页面。这个想法是让用户点击一个项目，然后重新排列页面上的所有项目。我可以弄清楚如何做到这一点，但我不知道如何为每个页面创建链接。

因此，如果用户单击项目 A 并获得布局 A，我希望有一个链接。

如果用户点击项目 B 并获得布局 B，我想为此创建一个链接。

有什么想法吗？

【问题讨论】：

标签： php javascript jquery html css

【解决方案1】：

您可以更改 HTML 正文中的 class。这将允许您根据布局使用 CSS 的不同部分。每个链接都可以使用 jQuery 设置类：

// In your javascript (within jQuery ready function)
$('#layoutTwoOne').click(function(event) {
    $('body').removeClass('layoutTwo').addClass('layoutOne');
});
$('#layoutTwoLink').click(function(event) {
    $('body').removeClass('layoutOne').addClass('layoutTwo');
});

在您的 HTML 中：

<a href="#" id="layoutOneLink">Switch to Layout One</a>
<a href="#" id="layoutTwoLink">Switch to Layout Two</a>

在您的 CSS 中：

body.layoutOne {
    background-color: black;
}
body.layoutTwo {
    background-color: white;
}
body.layoutOne div {
    /* Some special css for all divs in layout one */
}

代码可能更受数据驱动。这有点像黑客，但它会做你需要的。 :)

【讨论】：

【解决方案2】：

如果你使用 jQuery，你基本上可以使用任何你喜欢的元素作为链接/按钮或其他任何东西。

Jquery 允许我们为用户交互触发的事件附加各种事件侦听器 -

鼠标点击
双响
键盘按键向下/向上
等等……

这些操作可以附加到 HTML 中的任何元素。可能是-

<a> 标签
<img> 标签
表结构中的<td> 或<tr>
一个通用的<div> 元素
等等……

您甚至可以将点击绑定到您喜欢的任何元素上，并让它触发您的changeLayout() 函数（或类似的东西）。简单（单次）单击处理程序的语法如下所示 -

$("#elementSelector").on('click',function(){
  // user has clicked the element!
  // do some cool animations and stuff!
});

对于id 属性等于elementSelector 的任何元素都会触发该函数。

一些符合描述的元素示例 -

<div id="elementSelector"></div>
<a href="#" id="elementSelector"></a>
<td id="elementSelector"></td>

【讨论】：