jQuery mobile NuGet移动网站用法
- 更新时间：2020-07-16 08:25:35
- 编辑：饶正诚
参考资料
- 锋利的jQuery PDF 电子书 / 194.9 MB / 单东林 张晓菲 魏 推荐度：
- 精彩绝伦的JQuery PDF 电子书 / 32.3 MB / Jake Rutter 推荐度：
- jQuery Web开发案例教程 PDF 电子书 / 15.1 MB / 前沿科技 温谦 推荐度：
- 《jQuery EasyUI开发指南》源码 配套资源 / 59.46 MB / 王波 推荐度：
- 《巧用JQuery》源代码 配套资源 / 111.54 KB / 吴超,张帅 编著 推荐度：
正文内容
使用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 官网去看看
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持码农之家。
相关教程
-
实例详解jquery属性及常用的函数
本篇文章主要是对jquery中常用的函数和属性进行了详细的介绍，需要的朋友可以过来参考下，希望对大家有所帮助
发布时间：2020-01-11
-
关于jQuery检查某个元素是否存在代码
本文给大家讲解的是使用jQuery检测某个元素是否存在的代码和思路，十分的实用，有需要的小伙伴可以参考下。
发布时间：2020-02-14
-
使用jQuery完成页面定时弹出广告代码实例
这篇文章主要介绍了使用jQuery实现页面定时弹出广告效果,需要的朋友可以参考下
发布时间：2020-02-16
-
jQuery链式调用与show的知识点分析
这篇文章主要介绍了jQuery的XX如何实现？——2.show与链式调用 的相关资料，非常具有参考借鉴价值，感兴趣的朋友一起学习吧
发布时间：2020-01-15
-
实例解析jQuery中parents()和parent()的区别
这篇文章主要介绍了jQuery中parents()和parent()的区别,具体分析了parents()和parent()的原理与用法区别,非常具有实用价值,需要的朋友可以参考下
发布时间：2020-02-05
-
jQuery中read和JavaScript中的onload函数的区别总结
这篇文章主要介绍了jQuery中的read和JavaScript中的onload函数的区别,这两个函数在web编程中是最常用的,一定要搞清楚它们的区别,需要的朋友可以参考下
发布时间：2019-11-12
-
jquery.validate相关参数及自定义验证方法
jquery.validate是一个基于jquery的非常优秀的验证框架，我们可以通过它迅速验证一些常见的输入,并且可以自己扩充自己的验证方法，而且对国际化也有非常好的支持，通过本文给大家介绍jquery.
发布时间：2020-02-16
-
jQuery中autocomplete实例用法
这篇文章主要为大家详细介绍了jQuery插件autocomplete使用方法，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
发布时间：2020-01-02
-
浅谈Jquery与DOM对象
这篇文章主要介绍了简述Jquery与DOM对象的相关资料,十分的简单实用，需要的朋友可以参考下
发布时间：2020-01-28
-
jquery插件validate使用示例
jquery插件validate验证的小例子
发布时间：2020-03-01
-
jQuery实战案例精粹
jQuery实战案例精粹 从Web开发的实际应用角度出发，结合当下热门的 jQuery插件技术，深入浅出地介绍了 jQuery高性能开发的技巧，是前端开发、设计人员的绝佳选择。 本书共 22章，介绍了 jQuer
大小：272 MBjQuery电子书
-
移动互联网之路：HTML5+CSS3+jQuery Mobile APP与移动网站设计从入门到精通
移动互联网之路 全面、系统地讲解了 HTML 5、CSS 3 和 jQuery Mobile 从 Web 界面设计到移动应用开发的各种技术和知识点。本书难度适中，知识结构严谨，内容由浅入深、从易到难，讲解通俗易懂，
大小：92.1 MB移动互联网电子书
-
jQuery实战
jQuery实战(第三版) 适用于想深入学习jQuery的Web开发人员，jQuery是互联网上流行的JavaScript框架。本书的目标是希望读者成为Web高级开发人员，无论起点如何。本书深入介绍了整个jQuery框架，此外
大小：99.0 MBjQuery电子书
-
jQuery api 3.3.1中文手册
jQuery3.3.1中文手册 是一套jQuery API 3.3.1速查表，很实用的手册，在编写jQuery查看很实用，其内包含了jquery学习过程中的各类知识点，能够让你清楚地了解每一个函数的核心内容，属性以及css框架信息，从而更好的实现编程。需要的朋友可下载试试！ 使用说明 这是目前最新版的jQuery api中文文档3.3.1版本。先解压压缩包。在打开软件。如果出现空白情况。请确保IE版本在9.0以上，或者是鼠标右击文件，选择ldquo;属性rdquo;，点击ldquo;取消限制rdquo;即
大小：1.58 MBjQuery
-
Web前端开发HTML5/CSS3/jQuery/AJAX从学到用完美实践
本书是著名前端开发大牛阮晓龙老师爽作，HTML5、CSS3、jQuery、AJAX一站搞定，一本真正好学、实用又精彩的书，讲述了用HTML5 CSS3设计构建网站的必备知识，欢迎下载
大小：167.1 MBWeb前端电子书
