0

http://support.google.com/plus/?hl=enと同様のレイアウトのヘルプ ページを作成しようとしています。ページをリロードせずに新しいコンテンツ リストをロードするためのアドバイスや例を教えてください。

リンクを見て、たとえば「サークルとストリーム」を押すと、右側のリストが変わります。

前もって感謝します

4

5 に答える 5

1

Twitter からブートストラップを確認します。http://twitter.github.com/bootstrap/ . レイアウトとコントロールを簡単に作成できます。例を確認してください。

于 2012-06-28T12:47:51.753 に答える
1

ページに表示するコンテンツの量によって異なりますが、これを行う方法は、javascript を使用して関連するセクションを表示および非表示にすることです。簡単な例http://jsfiddle.net/am2Dm/10/を示す jsfiddle を次に示します。

大量のデータ、またはおそらく動的データがある場合は、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 に答える
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 の 2 つです。これらのいずれかを使用してみてください。どちらにも、このタスクを完了するのに役立つ多くの例とチュートリアルが付属しています。

于 2012-06-28T12:41:03.767 に答える