使用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-mobile基础属性与用法详解
本文实例讲述了jquery-mobile基础属性与用法.分享给大家供大家参考,具体如下: 写在前面 本文是根据w3c 学习轨迹,自己研习过程中记录下的笔记,只供自己学习轨迹记录之用,不喜勿喷. 0. 引入库 引入对应的文件: <link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.css"> <script src="
-
jquery mobile移动端幻灯片滑动切换效果
自动适应设备的宽度,滑动会切换大图,底部导航跟随切换.点击底部导航切换大图.使用的jquery_mobile插件,引入1.4.5的插件,CSS表和jquery库即可,除了ID,CLASS命名可能会和你项目重复,改成单独即可,其他应该没有重复的,因为本脚本使用计时器写的,加入了方法判定,在执行一个方法的时候,锁定其他方法禁止执行,不会冲突,使用计时器来控制动画,可能不尽如人意,准备重构一下改成Jquery的animate()方法来执行动画效果.近期重构好在上传使用内置方法不用计时器的版本吧. <h
-
jquery mobile实现可折叠的导航按钮
本文实例为大家分享了jquery实现可折叠的导航按钮的具体代码,供大家参考,具体内容如下 功能: 当功能较多时,创建可折叠分组导航按钮.只需指定 data-role=" collapsible "创建可折叠面板 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>可折叠的导航面板</title> <!--使用名为viewp
-
jQueryMobile之窗体长内容的缺陷与解决方法实例分析
本文实例讲述了jQueryMobile窗体长内容的缺陷与解决方法.分享给大家供大家参考,具体如下: 前面的一篇文章<jQueryMobile之Helloworld与页面切换的方法>没有考虑到窗体中放置长内容的状况 一旦窗体中出现长内容,使用笔者那种固定header与footer的全屏布局是存在缺陷的, 如图所示,长内容最后的内容,直到滚动条拉到最底部也无法穷尽, 而且很有可能的是,虽然现在这个地方的内容是显示为半透明,但往往这个位置是一些提交按钮什么的, 用户根本就没法点, 因此,需要进行改进
-
jquery-mobile表单的创建方法详解
本文实例讲述了jquery-mobile表单的创建方法.分享给大家供大家参考,具体如下: 一.注意事项 1. <form> 元素必须设置 method 和 action 属性 2. 每个表单元素必须设置唯一的 "id" 属性. 该 id 在站点的页面中必须是唯一的. 这是因为 jQuery Mobile 的单页面导航模型允许许多不同的"页面"同时呈现. 3. 每个表单元素必须有一个标记(label). 请设置 label 的 for 属性来匹配元素的 i
-
jQuery Mobile漏洞会有跨站脚本攻击风险
概述 根据国外媒体的最新报道,谷歌公司的安全工程师Eduardo Vela在jQuery Mobile框架中发现了一个安全漏洞,这个漏洞将会让 所有使用了jQuery Mobile的网站暴露于跨站脚本攻击风险之下 . jQuery Mobile项目(jQuery框架中的一个组件)是一个基于HTML5的开发框架,在它的帮助下,开发者可以设计出能够适配目前主流移动设备和桌面系统的响应式Web站点以及应用程序.实际上,jQuery Mobile不仅可以为主流移动平台提供jQuery的核心库,而且它也是
-
jQuery-mobile事件监听与用法详解
本文实例讲述了jQuery-mobile事件监听与用法.分享给大家供大家参考,具体如下: 触摸事件 - 当用户触摸屏幕时触发(敲击和滑动) 滚动事件 - 当上下滚动时触发 方向事件 - 当设备垂直或水平旋转时触发 页面事件 - 当页面被显示.隐藏.创建.加载以及/或卸载时触发 一.初始化事件 1. ready 事件 页面加载完成 $(document).ready(function(){ //your code here... }); 2. 页面加载完成事件二 pageinit $(docume
-
jQuery Mobile和HTML5开发App推广注册页
jQuery Mobile和HTML5的组合可以直接开发web版的app,所以用到我当前app中的推广注册页的编写是很恰当的,其实只要你熟悉html4+jquery的组合开发,那么html5+jqueryMobile你会立刻上手. html5比html4多了很多的标签,特别是多媒体这块有了很好的支持,但是如果只是做一般的web手机页面,那么多数标签是用不上的,JqueryMobile与jquery的不同点就在一些事件名称上,当然这里封装的也是html5的原生事件,还要说一个关于html5提倡的一
-
使用jQuery mobile NuGet让你的网站在移动设备上同样精彩
问题 默认情况下,你的网站在移动设备上展现的可能不太好.当然,有的移动设备足够让你的网站在它上显示.但是这也不是稳妥的.可能你不希望为移动电话创建一个全新的网站,成本太高. 解决方案 使用jQuery mobile NuGet包,改变共享的布局和视图,并使你的网站在传统的浏览器和大部分手机展现的都很好. 讨论 首先,如果你一直在阅读关于4 MVC的路线图,你会注意到很多讨论是围绕着移动的增强.特别的是,在这个例子中我们将使用jQuery mobile工具箱. 不幸的是,如很多事情表明这将是MVC
-
jQuery Mobile框架中的表单组件基础使用教程
一.表单组件基础 1.组件简介 jQuery Mobile 中的表单组件是基于标准 HTML ,然后在此基础上增强样式,因此即使浏览器不支持 jQuery Mobile 表单仍可正常使用.需要注意的是, jQuery Mobile 会把表单元素增强为触摸设备很容易使用的形式,因此对于 iphone/ipad 与 Android 使用 Web 表单将会变得非常方便. jQuery Mobile 的表单组件有以下几种: (1)文本输入框, type="text" 标记的 input 元素会
-
jQuery Mobile页面返回不需要重新get
jQuery Mobile 是用于创建移动 Web 应用的前端开发框架. jQuery Mobile 可以应用于智能手机与平板电脑. jQuery Mobile 使用 HTML5 & CSS3 最小的脚本来布局网页. 最近公司的web app项目,使得我有幸一直接触和学习jQuery Mobile.这确实是一个很不错的移动开发库,有助于擅长web开发的工程师,快速入门并构建自己的移动应用.但是在前两天,我碰到了一个问题,使我查了很多资料都没有找到很好的解决方案,最终只能逼着我读jQuery Mo
-
jQuery mobile 移动web(6)
jquery mobile 针对移动端设备的事件类型. 1.touch 事件. tap 快速触摸屏幕并且离开,类似一种完整的点击操作. taphold 触摸屏幕并保持一段时间. swipe 在1秒内水平移动30px屏幕像素上时触发. swipeleft 向左侧滑动 swiperight 像右侧滑动. 2.方向改变事件 orientationchange 事件函数当移动设备的方向发生改变触发,在事件的回调函数内的第二个参数返回一个用于识别当前方向的参数, 该参数有两种返回值:p
-
jQuery mobile的header和footer在点击屏幕的时候消失的解决办法
jQuery Mobile简介 jQuery Mobile 是创建移动 web 应用程序的框架. jQuery Mobile 适用于所有流行的智能手机和平板电脑. jQuery Mobile 使用 HTML5 和 CSS3 通过尽可能少的脚本对页面进行布局. 给header和footer添加 data-position="fixed" 和 data-tap-toggle="false"即可,代码如下: <div data-role="footer&q
-
使用jQuery Mobile框架开发移动端Web App的入门教程
一.jQuery Mobile 的渐进增强设计与浏览器支持 根据维基百科( Wikipedia ) 的解释,渐进增强的设计主要包括以下几点 basic content should be accessible to all web browsers (所有浏览器都应能访问全部基础的内容) basic functionality should be accessible to all web browsers (所有浏览器都应能访问全部基础的功能) sparse, semantic markup
-
jQuery Mobile操作HTML5的常用函数总结
一. $.mobile.changePage() & $.mobile.loadPage() 1.$.mobile.changePage() $.mobile.changePage() 方法会在页面加载时自动调用,若这个页面为当前文档中的不同 "page",则会转到这个新页面隐藏旧页面:若这个页面为外部页面,即页面与当前页面不在同一文档中(本质上是新页面不在当前 DOM 中),$.mobile.changePage() 首先会调用 $.mobile.loadPage() 把外部
-
jQuery mobile在页面加载时添加加载中效果 document.ready 和window.onload执行顺序比较
想要添加这个效果,先来弄明白页面的加载和事件执行顺序,看这个简单例子: <html xmlns="http://www.w3.org/1999/xhtml"> <head > <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>验证加载顺序</title> <script src=