使用jQuery mobile NuGet让你的网站在移动设备上同样精彩
问题
默认情况下,你的网站在移动设备上展现的可能不太好。当然,有的移动设备足够让你的网站在它上显示。但是这也不是稳妥的。可能你不希望为移动电话创建一个全新的网站,成本太高。
解决方案
使用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页面解剖语法。
<!doctype html> <html> <head> <title>@viewbag.title</title> <link href="@url.content(" rel="external nofollow" ~/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设备可以测试的话。你也可以注释掉下边代码来查看效果:
<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的有以下基本功能:
- 导航条(中页眉或页脚,带或不带图标)
- 页面过渡
- 对话框
- 按钮
- 表格
- 列表视图(在移动平台上提供了典型的手指滚动)
- 全面的主题化的支持,以换出完整的外观和感受。
导航条事例:
<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>
下面的例子将呈现典型的智能手机的按钮,以及其他链接都将添加相同的样式。
@html.actionlink("my cool link", "someaction", "home", null, new dictionary<string, object> {{ "data-transition", "slide" }})
以下页面的过渡将在加载完ajax后显现在新的内容。在我们的标准网站,其他的所有连接也这样做。
dialog 例子:
<a href="foo.html" rel="external nofollow" data-rel="dialog">open dialog</a>
就像前面的例子,这将呈现为web浏览器的通用的链接,但在移动版本,标准的弹出窗口将显示。
button 例子:
<a href="index.html" rel="external nofollow" rel="external nofollow" data-role="button" data-inline="true">cancel</a> <a href="index.html" rel="external nofollow" rel="external nofollow" data-role="button" data-inline="true" data-theme="b">save</a>
正如您可能期望的那样,这些按钮放置在header,他们将呈现在最上面一栏,一个在左边,一个在右边,模仿今天在智能手机的标准header按钮。
form例子:
<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例子:
<ul data-role="listview" data-theme="g"> <li><a href="acura.html" rel="external nofollow" >acura</a></li> <li><a href="audi.html" rel="external nofollow" >audi</a></li> <li><a href="bmw.html" rel="external nofollow" >bmw</a></li> </ul>
上面的例子将列出所有的books,他们的标题被设置成为一个转向详细页的链接。这个链接在一个标准可滚动的列表中。
更改theme的示例:
目前,jquery mobile的五个内置的主题,从一个字母到e每个
上述项目可以通过追加一个新的属性称为,改变他们的主题。data-theme,用不同的字母(a至e)表示。
译者:由于书里没有给例子。我在我们的_layout上改变代码如下:
<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 官网去看看
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
上一篇: 泡菜怎么吃你知道吗