Skip to content

Files

Latest commit

40f7570 · Jan 8, 2022

History

History
149 lines (106 loc) · 9.19 KB

File metadata and controls

149 lines (106 loc) · 9.19 KB

五、使其移动友好

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

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

修正头球

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

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

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

设计我们的列表对象

接下来让我们看看菜单,给它一点视觉上的活力。将data-roledata-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=headerdiv中插入以下代码:

      <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()"非常相似)。transitiondirectionicon标签稍微修饰了一下按钮,并赋予了它一些默认行为。

还有一种替代方法。您实际上可以在页面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设置(对于ShowBackButtonShowHomeButton,文件的开始看起来像下面的代码示例:**

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

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

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

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