“让一切尽可能简单，但不要简单。”阿尔伯特·爱因斯坦

通过我们在上一章中所做的更改，我们现在有了一个看起来有点像移动友好网站的网站，但是仍然存在几个问题。如果我们使用我们的演示网站，上下滚动页面，你会看到标题从页面上滚下并消失，并且列表没有任何移动风格的列表应该有的图形风格。我们可以解决许多问题，但是让我们从解决这两个问题开始。

目前，页眉附在页面顶部。如果滚动页面，标题会消失。在页眉上添加一个data-position标签，当你向上或向下滚动时，页眉会粘在页面顶部。

      <div data-role="header" data-position="fixed" data-theme="b">

就这样！使用 jQuery 的一大好处是。移动是因为它有很多像这样的内置功能，你可以很容易地使用。有了这个标签，标题将停留在屏幕顶部。如果用户点击屏幕，他或她也可以使标题出现或消失。

接下来让我们看看菜单，给它一点视觉上的活力。将data-role和data-inset标签添加到列表头将使列表呈现新的样式。此外，我们可以通过使用一个list-divider项目为列表添加一个标题，使其更具视觉趣味:

       <nav>
         <ul data-role="listview" data-inset="true">
            <li data-role="list-divider">Menu Items</li>
            <li>@Html.ActionLink("Home", "Index", "Home")</li>
            <li>@Html.ActionLink("About", "About", "Home")</li>
            <li>@Html.ActionLink("Contact", "Contact", "Home")</li>
          </ul>
        </nav>

通过进行这些极小的更改，我们将拥有一个更漂亮的页面:

改进列表项的标题和样式

现在，我们在使这个网站移动友好方面取得了一些进展。在查看主页时，点击关于页面链接，看看会发生什么。有一点你会注意到，你可以点击那一行的任何地方，这个动作就会发生。你不必局限于点击关于这个词。

如果你一直跟随(而不是独自前进)，当你点击关于链接时，你应该会看到类似于上一张图片右半部分的内容。注意到什么东西不见了吗？您应该注意到标题栏中没有后退按钮。大多数移动应用程序跟踪它们的上下文，并为您提供一种轻松返回的方法。你可能会忍不住回答说，用户可以一直使用浏览器中的后退按钮，这在很多情况下都是有效的。但是，如果这进入全屏网络应用模式呢？正如您将在第 7 章中看到的，我们可以设置我们的应用程序来接管屏幕并模拟一个本地应用程序，在这种情况下，没有后退按钮，因此我们确实需要处理这个问题。

另一件非常值得注意的事情是，我们还在主页页面和关于页面显示了菜单，这是多余的。在桌面上，用户希望菜单栏位于屏幕顶部。但你必须记住，这是一个带有小屏幕的移动设备——我们希望最大限度地利用我们的房地产，只在每页上显示绝对必要的信息。我们在这里的目标是创建一个移动友好的网站，同时也创建一个桌面友好的网站，所以我们也需要定制它。我们的下一步将是删除该菜单，并添加返回按钮功能。

在我们继续添加后退按钮之前，让我们来一次快速的侧行。看看视图文件夹，看看你有没有注意到什么不寻常的地方:

查看文件夹内容

当我们创建索引页面的移动友好视图时，我们将该文件复制到索引。Phone.cshtml 和索引。Tablet.cshtml ，并在其中的每一个中放入特殊的布局命令。关于视图，我们还没有做到这一点，那么这是如何获得移动视图的呢？如果关于页面没有这两个文件，为什么我们还需要这两个额外的文件？

答案是，只要把布局文件放在那里，任何没有的页面。电话或。平板电脑将加载默认页面，如果它与我们的DisplayMode定义匹配，它将使用**_ 布局。电话或_ 布局。平板电脑**布局文件。这可能是也可能不是我们想要的。如果我们的目标是在所有三个平台上创建独特的体验，我们将希望为每个文件提供一个独特的版本。如果您将内容复制三次，确实会导致一些维护问题，但是我们将在第 8 章中讨论如何解决这个问题。

目前，我们的首要目标是在工具栏中放一个后退按钮，所以让我们回到这个问题。通常，左上角有两个基本按钮:一个后退按钮或一个主页按钮。很多时候一个后退按钮就是你需要的全部，但是也有一些时候你不想回到上一个屏幕，所以你想要一个固定行为的主页按钮。例如，如果您向用户呈现一个可编辑项目的列表，然后他或她编辑一个项目并单击保存，您不希望用户单击返回按钮并被带回到他们刚刚离开的编辑屏幕。旧数据仍会出现在列表中，因此我们必须处理这种情况。(咻！我们的待办事项清单上有很多事情！)

让我们从编辑我们的布局文件开始，并在标题中添加可选的后退或主页按钮的代码。在编辑器中打开该文件，用data-role=header在div中插入以下代码:

      <div data-role="header" data-position="fixed" data-theme="b">
        <h1>@ViewBag.Title</h1>
      @{
        bool ShowBackButton = false;
        bool ShowHomeButton = false;
        if (ViewBag.ShowBackButton != null &&
            ViewBag.ShowBackButton == true)
        {
          ShowBackButton = true;
        }
        if (ViewBag.ShowHomeButton != null &&
            ViewBag.ShowHomeButton == true)
        {
          ShowHomeButton = true;
        }
        if (ShowBackButton)
        {
          <a data-rel="back" data-role="button"
             data-transition="slide" data-direction="reverse"
             data-icon="back">Back</a>
        }
        if (ShowHomeButton)
        {
          <a href="@Url.Action("Index", "Home")" data-role="button"
             data-transition="slide" data-direction="reverse"
             data-icon="home">Home</a>
        }
      }
      </div>

后面的data-rel="``"标签是 jQuery 的另一个特殊标签。移动，并提示它跟踪当前的页面堆栈。当你点击这个按钮时，它将返回到上一页(这与你可能熟悉的 JavaScript 中的onclick="history.back()"非常相似)。transition、direction和icon标签稍微修饰了一下按钮，并赋予了它一些默认行为。

还有一种替代方法。您实际上可以在页面div上添加一个“data-add-back-btn”标签，如下所示:

      <div data-role="page" data-theme="b" data-add-back-btn="true">
        <div data-role="header" data-position="fixed" data-theme="b">
        <h1>@ViewBag.Title</h1>
      </div>

这两种方法都有效，但是它们有一个小问题:它们使用 jQuery 中的堆栈。移动，它根据用户到达页面的方式而变化。如果用户给你的二级页面添加书签，然后稍后再返回——你猜怎么着？如果他们直接导航到页面，第二个版本中的后退按钮将会消失，如果你使用第一种技术，后退按钮将会出现，但它可能不会做任何事情。如果有问题，您可以使用主页按钮直接链接回主页。

接下来，我们将为我们的手机和平板电脑创建一个独特的版本**。复制该文件并粘贴两次到 Home 目录，然后将这些文件重命名为 About。Phone.cshtml 和关于。Tablet.cshtml 。在编辑器中打开它们，并插入Layout赋值和ViewBag设置(对于ShowBackButton或ShowHomeButton，文件的开始看起来像下面的代码示例:**

      @{
        Layout = "../Shared/_Layout.Phone.cshtml";
        ViewBag.ShowBackButton = true;
      }
      @{ ViewBag.Title = "About"; }
      <hgroup class="title">
        <h1>@ViewBag.Title.</h1>
        <h2>@ViewBag.Message</h2>
      </hgroup>
      ...the rest of the file...

通过在顶部插入以下几行，对平板电脑版本进行同样的操作，使其看起来像下面的代码示例:

      @{
        Layout = "../Shared/_Layout.Tablet.cshtml";
        ViewBag.ShowBackButton = true;
      }
      @{ ViewBag.Title = "About"; }
      <hgroup class="title">
        <h1>@ViewBag.Title.</h1>
        <h2>@ViewBag.Message</h2>
      </hgroup>
      ...the rest of the file...

就这样。现在当你试着运行它的时候，你有一个网站终于开始看起来有点像一个移动应用。

带有主页和后退按钮的应用程序

在这一章中，我们添加了固定的标题、好看的菜单、后退和主页按钮，以及一些其他东西，使我们的网站看起来更像一个移动应用程序。我们可以通过一些增强来进一步扩展它，但是这只是一个很好的开始，只需要几行代码。