（16）让你的网站在移动设备上同样精彩！

于 2015-10-22 11:02:38 发布
阅读量310 收藏
点赞数
分类专栏： MVC的20个秘方
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/linyang24/article/details/49330665
版权
问题

默认情况下，你的网站在移动设备上展现的可能不太好。当然，有的移动设备足够让你的网站在它上显示。但是这也不是稳妥的。可能你不希望为移动电话创建一个全新的网站，成本太高。

解决方案

使用jQuery mobile NuGet包，改变共享的布局和视图，并使你的网站在传统的浏览器和大部分手机展现的都很好。

讨论

首先，如果你一直在阅读关于4 MVC的路线图，你会注意到很多讨论是围绕着移动的增强。特别的是，在这个例子中我们将使用jQuery mobile工具箱。

不幸的是，如很多事情表明这将是MVC中的4中的内容，在这个告诉我们还为时过早。与其“等待”我们不如提供一个非常简单的解决方案，需要最小的努力来维护移动Web应用程序和一个普通的Web应用程序。此外，Windows8很快出来，它在桌面上支持HTML5 Web应用程序，它也将是一个桌面应用程序。

提示：维护同一网站的多个版本带来风向和额外的时间要求。每次添加新的功能， 你必须首先测试在多种环境的新功能，在多种环境做回归测试。此外，仅仅是因为 这被认为是“简单”并不意味着它不需要动脑筋：必须给花费很多心思来组织页面的结构，以确保它的建成尽可能最好的两个主要平台：台式机浏览器和移动浏览器。

作为开始，我们需要从NuGet package manager 安装JQuery Mobile 包。选Online，再右边搜索框里输入JQueryMobile。

 

在这之前，我们要注意的是，当前版本的MVC3 默认包括的是1.5X版本的JQuery 。当前最新版本的是JQuery1.7x。所以必须更新Jquery的版本。幸运的是，NuGet 管理工具已经提供了一个简单的方式去实现：

在当前项目：Tools→Library Package Manager→Add Library Package Reference.我们需要更新现有的JQuery 而不是添加新的Jquery。在左边的面板上，选择Update。在更新Jquery之前，需要先更新一些子包，否则会出错哦！我发现了一些正确的更新顺序，点选每一个并且点击update：Jquery.Validation, Jquery.vs.doc, Jquery.ui.combined最后点JQuery。

一旦所有的包都被更新成功，在搜索框里输入Jquery.Mobile 并且安装。这将安装一些必需的CSS和javascript文件。jQuery Mobile的插件是基于HTML5的语法。使用这个语法，各种CSS和JavaScript操作为页面提供所需的外观，很接近一些较受欢迎的智能手机上的内置应用。

这个例子的目的是演示如何可以更新现有的网站。使用这个新的library，仍然保持一个Web版本，以及一个移动版本。首先，需要更新Shared文件夹下的_Layoutview去匹配jQuery Mobile页面解剖语法。

双击代码全选
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
<!DOCTYPE html>
< html >
< head >
     < title >@ViewBag.Title</ title >
     < link href = "@Url.Content(" ~/Content/jquery.mobile-1.0.min.css")" rel = "stylesheet" type = "text/css" />
     < script src = "@Url.Content(" ~/Scripts/jquery-1.6.4.min.js")" type = "text/javascript" ></ script >
     < script type = "text/javascript" >
                 $(document).ready(function () {
                    
                     if (window.innerWidth > 480) {
                         $("link[rel=stylesheet]").attr({ href: '@Url.Content("~/Content/Site.css")' });
                     }
                 });
     </ script >
     < script src = "@Url.Content(" ~/Scripts/jquery.mobile-1.0.min.js")" type = "text/javascript" ></ script >
     @RenderSection("JavaScriptAndCSS", required: false)
</ head >
< body >
     < div class = "page" data-role = "page" data-theme = "a" >
         < div id = "header" data-role = "header" data-theme = "e" >
             < div id = "title" >
                 < h1 >
                     My MVC Application</ h1 >
             </ div >
             < div id = "logindisplay" class = "ui-bar" >
                 @Html.Partial("_LogOnPartial")
                 [ @Html.ActionLink("English", "ChangeLanguage", "Home", new { language = "en" }, null)
                 ] [ @Html.ActionLink("Français", "ChangeLanguage", "Home", new { language = "fr" }, null)
                 ]
             </ div >
             < div id = "menucontainer" class = "ui-bar" >
                 < ul id = "menu" >
                     < li >@Html.ActionLink("Home", "Index", "Home", null, new Dictionary< string , object> { { "data-role", "button" } })</ li >
                     < li >@Html.ActionLink("About", "About", "Home", null, new Dictionary< string , object> { { "data-role", "button" } })</ li >
                 </ ul >
             </ div >
         </ div >
         < div id = "main" data-role = "content" >
             @RenderBody()
         </ div >
         < div id = "footer" data-role = "footer" >
         </ div >
     </ div >
</ body >
</ html >
 

这是shared/_layout下项目自动创建的模板。实现JQuery Mobile的功能，已经完成下列事项：

 

1. 包含了 JQuery Mobile CSS 文件

2. 包含了JQuery Mobile JavaScript 文件

3.添加了多个data-role 属性在已经存在的<div>标签里，包括 page, header, content, 和 footer和一些其他元素。

4. 添加一些 JavaScript 探测去切换 CSS，如果浏览器的size大于480像素，使用default CSS。

 

提示：

有几种方法来完成的最后一项（例如，在CSS中使用@Media标记目标屏幕尺寸，执行手机和浏览器检测等）。根据您的需要，你将需要确定什么是最好的解决办法。也许你的网站应该执行某种模板，你自己决定。

(译者：我按照例子做是没弄出来的，一定要注意当前_layout 所引用的css 和javascript的版本是否和你项目里的一样。)

如果你运行的应用程序两次（一次在全屏模式下，一次在移动设备或简单调整低于480像素的浏览器），你会看到两个非常不同的网站（参见下图）。

普通版：

Mobile版：

（译者：酷么？你怎么觉得我不知道，我是觉得很酷！

如果您没有mobile设备可以测试的话。你也可以注释掉下边代码来查看效果：

 

双击代码全选
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
< script type = "text/javascript" >
 
                $(document).ready(function () {
 
                  
 
                    if (window.innerWidth > 480) {
 
                        $("link[rel=stylesheet]").attr({ href: '@Url.Content("~/Content/Site.css")' });
 
                    }
 
                });
 
    </ script >
 

 你也许会说，仍然有大量的工作要做，使一切看起来不错，但通过添加一些额外的data-role属性的默认布局，90％的工作已经完成了。接下来的步骤是探索特殊功能去让你的网站很有趣。 jQuery Mobile的有以下基本功能：

•导航条（中页眉或页脚，带或不带图标） •页面过渡 •对话框

•按钮 •表格 •列表视图（在移动平台上提供了典型的手指滚动） •全面的主题化的支持，以换出完整的外观和感受。

 

导航条事例：

双击代码全选
1
2
3
4
5
6
7
< div id = "logindisplay" class = "ui-bar" >
@Html.Partial("_LogOnPartial")
@Html.ActionLink("English", "ChangeLanguage", "Home",
new { language = "en" }, null) ]
@Html.ActionLink("Francais", "ChangeLanguage", "Home",
new { language = "fr" }, null) ]
</ div >
 

下面的例子将呈现典型的智能手机的按钮，以及其他链接都将添加相同的样式。

双击代码全选
1
2
3
@Html.ActionLink("My Cool Link", "SomeAction", "Home", null,
new Dictionary< string , object>
{{ "data-transition", "slide" }})
 

以下页面的过渡将在加载完Ajax后显现在新的内容。在我们的标准网站，其他的所有连接也这样做。

Dialog 例子：

<a href="foo.html" data-rel="dialog">Open dialog</a>

就像前面的例子，这将呈现为Web浏览器的通用的链接，但在移动版本，标准的弹出窗口将显示。

Button 例子：

双击代码全选
1
2
< a href = "index.html" data-role = "button" data-inline = "true" >Cancel</ a >
< a href = "index.html" data-role = "button" data-inline = "true" data-theme = "b" >Save</ a >
 

 

正如您可能期望的那样，这些按钮放置在Header，他们将呈现在最上面一栏，一个在左边，一个在右边，模仿今天在智能手机的标准Header按钮。

Form例子：

双击代码全选
1
2
3
4
5
6
7
< div class = "editor-label" >
@Html.LabelFor(model => model.ShortName)
</ div >
< div class = "editor-field" >
@Html.EditorFor(model => model.ShortName)
@Html.ValidationMessageFor(model => model.ShortName)
</ div >
 

没有什么改变。大多数内置的形式功能将完全呈现jQuery Mobile的预期。

List View例子：

双击代码全选
1
2
3
4
5
< ul data-role = "listview" data-theme = "g" >
     < li >< a href = "acura.html" >Acura</ a ></ li >
     < li >< a href = "audi.html" >Audi</ a ></ li >
     < li >< a href = "bmw.html" >BMW</ a ></ li >
</ ul >
 

上面的例子将列出所有的books，他们的标题被设置成为一个转向详细页的链接。这个链接在一个标准可滚动的列表中。

更改Theme的示例： 目前，jQuery Mobile的五个内置的主题，从一个字母到E每个 上述项目可以通过追加一个新的属性称为，改变他们的主题。data-theme，用不同的字母（A至E）表示。

（译者：由于书里没有给例子。我在我们的_layout上改变代码如下：

双击代码全选
1
2
< div class = "page" data-role = "page" data-theme = "a" >
         < div id = "header" data-role = "header" data-theme = "e" >
 

我给page 一个主题是a，给header一个主题是e。下图是效果：

 

是不是有点像某个系列书的风格，囧。

还有太多太多jquery mobile 的例子。想知道更详细的内容，可以去JQuqey Mobile 官网去看看）

Lin&Yi
关注
专栏目录
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

Lin&Yi

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值