创建网页，如 Windows 8 开始屏幕（新手）答案

【问题标题】：Create Webpage like Windows 8 Start Screen (Newbie)创建网页，如 Windows 8 开始屏幕（新手）
【发布时间】：2012-11-01 13:44:38
【问题描述】：

首先，我是一名高中生和一个非常新的程序员（想想 CS101 级别）。在我的空闲时间（遗憾的是有限），我想尝试一些项目来鼓励我学习更多，我有一个有趣的想法。

我不确定这是否是问的正确地方，但我想知道是否有人可以让我指出正确的方向。我想制作一个看起来类似于 Windows 8 开始屏幕的网站（这里是 link to an image，如果由于某种原因你不知道它的样子）。

这个想法是具有类似的块状对象，它们具有不同的长度（可能不像 Windows 8 那样整齐的网格），可以水平滚动，并且可以在它们上面有一些“活动”的东西。单击一个可以使用一些 AJAX 技术来更改到另一个菜单，或者在页面上打开一个信息窗口。有点像 Outlook/Hotmail 如何在不重新加载的情况下更改屏幕。盒子物品的信息可能来自数据库。

我在 PHP、MySQL 和 JavaScript 方面有少量经验 - 足以理解一些代码并编写简单的脚本。对于我的项目想法，我应该重点学习什么？我只是在寻找要研究的东西的路线图。

谢谢！

【问题讨论】：

不幸的是，这不是问题的好地方，因为它太开放了。堆栈溢出是关于技术问题，您可以在其中显示代码并获得有关为什么某些东西不起作用的帮助。当您有特定问题时，例如：“我应该使用表格来显示不同长度的块，如 Windows 8”，或“这种翻转效果无法按我的意愿工作”。
@JuanMendes 我以为是这样，但我不确定有更好的地方。超级用户似乎不太关心编程，“程序员”网站是为专业人士准备的。而且我真的不想去雅虎！答案...
您可以尝试jacedc.deviantart.com/#/d5oqhvq，但它尚未完成且不包含响应式设计。浏览器的行为也有很大的不同，但它仍然是一个未完成的项目。（P.S. 抱歉来晚了，我只是想把它扔掉：P）
@ModernDesigner 这很有趣，但我的项目已经演变成更多的水平滚动时间轴应用程序。

标签： php javascript ajax web-applications windows-8

【解决方案1】：

您可以使用 css 和 2 个图像宽度来模拟 win8 外观，无论它是普通项目还是宽项目，只需在样式中添加额外的类即可。使用 jQuery，您可以使图标/页面可拖动等，通过一些工作，您可以简单地测量宽度并通过 ajax 加载更多内容，就像延迟加载但水平的一样，使用 ondblclick="" 启动应用程序的加载/内容，这是我在 30 分钟内想出的。 Source & images

<!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>

【讨论】：

感谢您花费的时间！我认为我使用 jQuery 的方向是正确的，但并不完全确定。

【解决方案2】：

假设您网站上的每个“块”代表数据库中的一行（意味着没有继承的父子关系），那么简单地使用 CSS3 来创建块非常容易，jQuery 来做翻转效果（和悬停，因为让我们面对现实吧，移动的鱼很棒）。

集成 jQuery 和 Ajax 将允许您通过 PHP 作为平面文件或 OOP 进行数据库调用。

可能还想研究嵌套查询，因为如果您想做一些疯狂的事情，例如在一页上有 2 个“块”并且您需要从 2 个以上的表中获取数据到所述页面上，它们很可能会派上用场.

祝你好运

【讨论】：

"通过 PHP 作为平面文件或 OOP 进行数据库调用。"我已经阅读了一些关于使用单独的 .php 文件来查询数据库的内容，但是您在说什么“OOP”？我假设您的意思是面向对象编程，但不确定在这种情况下如何应用它，或者与此处使用的技术不同：openenergymonitor.org/emon/node/107
Flat File = require_once('File.php') OOP Method: require_once('DBCon.php); require_once('DBQueries.php); require_once('Application-Blocks.php');而且这些文件中的每一个都包含多个功能，因此当需要更改“网页”时，您只需运行几行简单的行，例如 $dbConn = new dbConn(); $dbConn->dbConnect(); $dbConn->dbQueries->loadAppConfig();非常粗糙，但希望你能明白。使用 OOP 可以创建准备好的函数，几乎可以在任何地方访问。