0

我正在尝试制作一个布局与http://support.google.com/plus/?hl=en类似的帮助页面。有人可以给我一些建议或示例，说明无需重新加载页面即可加载新内容列表的最佳方式。

例如，如果您查看链接并按下“圈子和流媒体”，它会更改右侧的列表。

先感谢您

4

5 回答 5

1

这取决于您想在页面上显示多少内容，但我这样做的方式是使用 javascript 来显示和隐藏相关部分。这是一个 jsfiddle，显示了一个简单的示例http://jsfiddle.net/am2Dm/10/。

如果您有大量数据，或者可能是动态数据，您可能需要考虑关闭 AJAX 调用来检索您的内容列表 - 但这可能是矫枉过正。

于 2012-06-28T12:57:04.627 回答
1

出于这个目的，您可以使用库 jQuery。访问此处以获取 jquery 的文档。还请通过 css3 和 html5 功能，因为它们提供了巨大的格式化工具，例如浮动、位置、显示等。

或者没有外部库，您可以简单地使用 css3 和 html5 属性来创建无表格布局。

html

<div style="width: 100%;">
            <div style="float: left; width:50%; height: 200px;background-color:Yellow;">
               <input type="button" onclick="asd(1)" value="one" />
               <input type="button" onclick="asd(2)" value="two" />
               <input type="button" onclick="asd(3)" value="three" />
            </div>
            <div id="one" style="float: left; width: 110px;height:200px;display:none; background-color:Blue;">
                Cell 2
            </div>
            <div id="two" style="float:left;width: 110px;height:200px;background-color:Red; display:none;">
                Cell 3
            </div>
            <div id="three" style="float:left; width: 110px;height:200px;;background-color:Green; display:none;">
                Cell 4
            </div>
        </div>

JavaScript

function asd(a)
{
    document.getElementById("one").style.display="none";
    document.getElementById("two").style.display="none";
    document.getElementById("three").style.display="none";
    if(a==1)
    document.getElementById("one").style.display="block";
    if(a==2)
    document.getElementById("two").style.display="block";
    if(a==3)
    document.getElementById("three").style.display="block";
}

现在根据您的要求放置 div 的内容。

于 2012-06-28T12:45:07.573 回答
1

从 Twitter 检查引导程序。http://twitter.github.com/bootstrap/。您可以轻松创建布局和控件。检查示例。

于 2012-06-28T12:47:51.753 回答
0

试试这个（不需要框架）：

<ul>
    <li><a href="javascript:loadList('Games')">Games</a></li>
    <li><a href="javascript:loadList('Music')">Music</a></li>
    <li><a href="javascript:loadList('Videos')">Videos</a></li>
</ul>

<ul id="targetList"></ul>

<script type="text/javascript">

var list = {
    Games: [
        { name: 'Warcraft III', href: 'http://www.blizzard.net' },
        { name: 'Warcraft III', href: 'http://www.blizzard.net' },
        { name: 'Warcraft III', href: 'http://www.blizzard.net' }
        ],
    Music: [
        { name: 'Madonna', href: 'http://www.madonna.com' },
        { name: 'Madonna', href: 'http://www.madonna.com' },
        { name: 'Madonna', href: 'http://www.madonna.com' }
        ],
    Videos: [
        { name: 'Youtube', href: 'http://www.youtube.com' },
        { name: 'Youtube', href: 'http://www.youtube.com' },
        { name: 'Youtube', href: 'http://www.youtube.com' }
        ]
    };

function loadList(index) {

    var targetList = document.getElementById("targetList");
    targetList.innerHTML = "";

    for(var i = 0; i < list[index].length; i++) {
        var li = document.createElement('li');
            var a = document.createElement('a');
                a.href = list[index][i].href;
                a.innerHTML = list[index][i].name;
            li.appendChild(a);
        targetList.appendChild(li);
        }

    }

loadList('Games');

</script>
于 2012-06-28T12:59:59.640 回答
0

存在大量可以帮助您执行此操作的 Javascript 工具。最常用的两个可能是 Mootools 和 jQuery。尝试使用其中之一，它们都带有大量示例和教程，可以帮助您完成此任务。

于 2012-06-28T12:41:03.767 回答