# 五、使其移动友好

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

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

## 修正头球

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

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

```

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

## 设计我们的列表对象

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

```cs
       <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>

```

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

![](img/image018.png)

改进列表项的标题和样式

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

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

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

## 绕道:为什么我们什么都需要三份？

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

![](img/image019.jpg)

查看文件夹内容

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

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

## 添加主页和后退按钮

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

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

```cs
      <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`”标签，如下所示:

```cs
      <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`，文件的开始看起来像下面的代码示例:**

```cs
      @{
        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...

```

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

```cs
      @{
        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...

```

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

![](img/image020.jpg)

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

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