1

まず、私は高校生で非常に新しいプログラマーです（CS101レベルを考えてください）。余暇（残念ながら限られた時間）に、もっと学ぶように励ましてくれるプロジェクトを試してみたいと思っています。面白いアイデアがあります。

ここが正しい質問の場所かどうかはわかりませんが、誰かが私を正しい方向に向けてくれるかどうか疑問に思っています。Windows 8のスタート画面に似たWebサイトを作成したいと思います（何らかの理由で画像がどのように表示されるかわからない場合は、画像へのリンクを次に示します）。

アイデアは、さまざまな長さの同様のブロックのようなオブジェクト（おそらくWindows 8のようにグリッドがきれいではない）を持ち、水平方向にスクロールでき、いくつかの「アクティブな」ものを配置できるというものです。1つをクリックすると、いくつかのAJAX手法を使用して、別のメニューに変更するか、ページの情報ウィンドウを開くことができます。Outlook/Hotmailがリロードせずに画面を変更する方法のようなものです。ボックスアイテムの情報は、おそらくデータベースから取得されます。

私はPHP、MySQL、JavaScriptの経験が少しあります。コードを理解し、簡単なスクリプトを書くのに十分です。プロジェクトのアイデアを学ぶために何に焦点を当てるべきですか？勉強することのロードマップを探しています。

ありがとう！

4

2 に答える 2

3

Win8の外観をcssと2つの画像幅でモックアップでき、通常のアイテムか幅の広いアイテムかを問わず、スタイルにクラスを追加するだけです。jQueryを使用すると、アイコン/ページをドラッグ可能にすることができます。少しの作業で、幅を測定し、遅延読み込みと同じようにajaxを介してより多くのコンテンツを読み込むことができますが、水平方向に使用しondblclick=""て、アプリ/コンテンツの読み込みを開始します。私が30分で思いついたものです。ソースと画像

ここに画像の説明を入力してください

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>basic win8</title>
<style>
*{font-family: "Segoe UI", Frutiger, "Frutiger Linotype";}
body{background-image:url('Win8Background.jpg');}

#wrapper {
    width: 70%;
    padding: 0px;
    margin-left:auto;
     margin-right:auto;
}
.sortable-list li {
    padding: 4px;
    margin: 4px;
    float: left;
    border: 1px solid black;
    list-style-image: none;
    list-style: none;
    list-style-type: none;
    background-color:#204558;
}

#dashboard-layout .item.normal {
    width: 100px;
    height: 100px;
}

#dashboard-layout .item.wide {
    width: 224px;
    height: 100px;
}

.item.normal p{
margin:0px;
padding: 0px;
}

.item.wide p{
margin:0px;
padding: 0px;
}

h1{color:white;}

#left_head{width:45%; float:left;}
#right_head{width:45%; float:right; text-align:right;margin-right:15px;}
</style>

<script type="text/javascript" src="jquery-1.8.0.min.js"></script>
<script type="text/javascript" src="jquery-ui-1.8.23.custom.min.js"></script>
<script type="text/javascript">
function update_columns() {
    var positions = []
    $("#dashboard-layout .item").each(function() {
        var $item = $(this);
        positions.push($item.attr('id'));
    });
    $.post("./", { 'positions[]': positions },
        function(data) {
            alert("Update Success - New positions:" + positions);
        }
    );
}

$(function() {
    $("ul.sortable-list").sortable({
        connectWith: "#wrapper",
        placeholder: 'ui-state-highlight',
        tolerance: 'pointer',
        revert: true,
        forcePlaceholderSize: true,
        forceHelperSize: true,
        update: update_columns,
    }).disableSelection();
});
</script>

</head>

<body>

<div id="left_head"><h1>Start</h1></div>
<div id="right_head"><h1>Lawrence Cherone</h1></div>
<div style="clear:both;"></div>

<div id="wrapper">

<ul class="sortable-list" id="dashboard-layout">

    <li id="a" ondblclick="" class="item normal" style="background-image:url(xbox.png); background-size:110px">
    content a
    </li>

    <li id="b" ondblclick="" class="item normal" style="background-image:url(xbox.png); background-size:110px">
    content b
    </li>

    <li id="c" ondblclick="" class="item wide" style="background-image:url(photos.png); background-size:224px">
    content c
    </li>

    <li id="d" ondblclick="" class="item wide" style="background-image:url(photos.png); background-size:224px">
    content d
    </li>

    <li id="e" ondblclick="" class="item wide" style="background-image:url(photos.png); background-size:224px">
    content e
    </li>

    <li id="f" ondblclick="" class="item normal" style="background-image:url(xbox.png); background-size:110px">
    content f
    </li>

    <li id="g" ondblclick="" class="item normal" style="background-image:url(xbox.png); background-size:110px">
    content g
    </li>

    <li id="h" ondblclick="" class="item wide" style="background-image:url(photos.png); background-size:224px">
    content h
    </li>

    <li id="i" ondblclick="" class="item wide" style="background-image:url(photos.png); background-size:224px">
    content i
    </li>

    <li id="j" ondblclick="" class="item normal" style="background-image:url(xbox.png); background-size:110px">
    content j
    </li>

    <li id="k" ondblclick="" class="item wide" style="background-image:url(photos.png); background-size:224px">
    content k
    </li>
</ul>

</div>

</body>
</html>
于 2012-11-13T05:05:58.257 に答える
0

サイトの各「ブロック」がデータベース内の単一の行を表すと仮定すると（継承された親子関係がないことを意味します）、CSS3を使用してブロックを作成し、jQueryを使用してロールオーバー効果を実行するのは非常に簡単です（ホバー、それに直面しましょう、動く魚は素晴らしいです）。

jQueryとAjaxを統合すると、PHPによるフラットファイルまたはOOPとしてのデータベース呼び出しを実行できるようになります。

また、ネストされたクエリを調べたい場合もあります。これは、1つのページに2つの「ブロック」があり、そのページに2つ以上のテーブルからデータを取得する必要がある場合など、クレイジーなことをしたい場合に役立つ可能性が高いためです。

幸運を

于 2012-11-13T04:24:22.613 に答える