使用jQuery mobile NuGet让你的网站在移动设备上同样精彩


Posted in jQuery onJune 18, 2019

问题

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

解决方案

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

讨论

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

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

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

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

使用jQuery mobile NuGet让你的网站在移动设备上同样精彩

在这之前,我们要注意的是,当前版本的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像素的浏览器),你会看到两个非常不同的网站(参见下图)。

普通版:

使用jQuery mobile NuGet让你的网站在移动设备上同样精彩

Mobile版:

使用jQuery mobile NuGet让你的网站在移动设备上同样精彩

译者:酷么?你怎么觉得我不知道,我是觉得很酷!

如果您没有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>

使用jQuery mobile NuGet让你的网站在移动设备上同样精彩

就像前面的例子,这将呈现为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>

使用jQuery mobile NuGet让你的网站在移动设备上同样精彩

正如您可能期望的那样,这些按钮放置在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>

使用jQuery mobile NuGet让你的网站在移动设备上同样精彩

上面的例子将列出所有的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 NuGet让你的网站在移动设备上同样精彩

是不是有点像某个系列书的风格,?濉?/p>

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

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

jQuery 相关文章推荐
jquery处理checkbox(复选框)是否被选中实例代码
Jun 12 jQuery
基于jQuery实现的Ajax 验证用户名唯一性实例代码
Jun 28 jQuery
JQuery 获取Dom元素的实例讲解
Jul 08 jQuery
基于jquery实现多选下拉列表
Aug 02 jQuery
基于jQuery选择器之表单对象属性筛选选择器的实例
Sep 19 jQuery
jQuery+koa2实现简单的Ajax请求的示例
Mar 06 jQuery
jQuery实现table表格信息的展开和缩小功能示例
Jul 21 jQuery
使用jquery DataTable和ajax向页面显示数据列表的方法
Aug 09 jQuery
jQuery实现鼠标移到某个对象时弹出显示层功能
Aug 23 jQuery
jquery实现联想词搜索框和搜索结果分页的示例
Oct 10 jQuery
jQuery插件simplePagination的使用方法示例
Apr 28 jQuery
JS+JQuery实现无缝连接轮播图
Dec 30 jQuery
如何使用CSS3和JQuery easing 插件制作绚丽菜单
Jun 18 #jQuery
如何用webpack4.0撸单页/多页脚手架 (jquery, react, vue, typescript)
Jun 18 #jQuery
通过JQuery,JQueryUI和Jsplumb实现拖拽模块
Jun 18 #jQuery
如何使用CSS3+JQuery实现悬浮墙式菜单
Jun 18 #jQuery
jquery中为什么能用$操作
Jun 18 #jQuery
js/jQuery实现全选效果
Jun 17 #jQuery
jQuery创建折叠式菜单
Jun 15 #jQuery
You might like
PHP大批量数据操作时临时调整内存与执行时间的方法
2011/04/20 PHP
Gambit vs CL BO3 第二场 2.13
2021/03/10 DOTA
Aster vs KG BO3 第三场2.19
2021/03/10 DOTA
JQuery为textarea添加maxlength属性的代码
2010/04/07 Javascript
jquery 选项卡效果 新手代码
2011/07/08 Javascript
Prototype的Class.create函数解析
2011/09/22 Javascript
jQuery调用AJAX时Get和post公用的乱码解决方法实例说明
2013/06/04 Javascript
js实现鼠标悬浮给图片加边框的方法
2015/01/30 Javascript
Python脚本后台运行的几种方式
2015/03/09 Javascript
JavaScript中String.prototype用法实例
2015/05/20 Javascript
使用JavaScript实现旋转的彩圈特效
2015/06/23 Javascript
jQuery获取URL请求参数的方法
2015/07/18 Javascript
javascript控制图片播放的实现代码
2020/07/29 Javascript
JavaScript 性能优化小结
2015/10/12 Javascript
jQuery实现的纵向下拉菜单实例详解【附demo源码下载】
2016/07/09 Javascript
把json格式的字符串转换成javascript对象或数组的方法总结
2016/11/03 Javascript
微信小程序实现自定义picker选择器弹窗内容
2020/05/26 Javascript
在微信小程序中渲染HTML内容的方法示例
2018/09/28 Javascript
javascript中toFixed()四舍五入使用方法详解
2018/09/28 Javascript
Mpvue中使用Vant Weapp组件库的方法步骤
2019/05/16 Javascript
vue-router路由模式详解(小结)
2019/08/26 Javascript
Vue登录主页动态背景短视频制作
2019/09/21 Javascript
浅析vue中的provide / inject 有什么用处
2019/11/10 Javascript
vue.js实现简单的计算器功能
2020/02/22 Javascript
Python itertools模块详解
2015/05/09 Python
python使用wmi模块获取windows下的系统信息 监控系统
2015/10/27 Python
python实现学生信息管理系统
2020/04/05 Python
关于python2 csv写入空白行的问题
2018/06/22 Python
英语专业学生个人求职信
2014/01/28 职场文书
工作失职检讨书(精华篇)
2014/10/15 职场文书
个人总结怎么写
2015/02/26 职场文书
python-opencv 中值滤波{cv2.medianBlur(src, ksize)}的用法
2021/06/05 Python
python编程学习使用管道Pipe编写优化代码
2021/11/20 Python
win10蓝屏0xc0000001安全模式进不了怎么办?win10出现0xc0000001的解决方法
2022/08/05 数码科技
VW、VH适配移动端的解决方案与常见问题
2023/05/21 HTML / CSS