使用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 ajax请求struts action实现异步刷新
Apr 19 jQuery
jQuery日期范围选择器附源码下载
May 23 jQuery
jquery仿京东商品放大浏览页面
Jun 06 jQuery
jquery dataTable 后台加载数据并分页实例代码
Jun 07 jQuery
基于JQuery的Ajax方法使用详解
Aug 16 jQuery
解决IE7中使用jQuery动态操作name问题
Aug 28 jQuery
jquery实现企业定位式导航效果
Jan 01 jQuery
基于jQuery.i18n实现web前端的国际化
May 04 jQuery
20个最常见的jQuery面试问题及答案
May 23 jQuery
jQuery实现表单动态加减、ajax表单提交功能
Jun 08 jQuery
jQuery模拟12306城市选择框功能简单实现方法示例
Aug 13 jQuery
jQuery实现鼠标放置名字上显示详细内容气泡提示框效果的方法分析
Apr 04 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将某个目录下面的所有文件罗列出来的方法详解
2013/06/21 PHP
php实现过滤表单提交中html标签的方法
2014/10/17 PHP
PHP对文件夹递归执行chmod命令的方法
2015/06/19 PHP
php获取文件类型和文件信息的方法
2015/07/10 PHP
WordPress中查询文章的循环Loop结构及用法分析
2015/12/17 PHP
php读取qqwry.dat ip地址定位文件的类实例代码
2016/11/15 PHP
JavaScript 保存数组到Cookie的代码
2010/04/14 Javascript
JavaScript 变量作用域分析
2011/07/04 Javascript
js open() 与showModalDialog()方法使用介绍
2013/09/10 Javascript
利用js读取动态网站从服务器端返回的数据
2014/02/10 Javascript
jQuery将多条数据插入模态框的示例代码
2014/09/25 Javascript
12306验证码破解思路分享
2015/03/25 Javascript
JavaScript实现简单的二级导航菜单实例
2015/04/15 Javascript
Backbone.js框架中Model与Collection的使用实例
2016/05/07 Javascript
jQuery实用密码强度检测
2017/03/02 Javascript
vue组件开发props验证的实现
2019/02/12 Javascript
nodejs npm错误Error:UNKNOWN:unknown error,mkdir 'D:\Develop\nodejs\node_global'at Error
2019/03/02 NodeJs
微信小程序实现拍照画布指定区域生成图片
2019/07/18 Javascript
浅谈vue在html中出现{{}}的原因及解决方式
2020/11/16 Javascript
[45:14]Optic vs VP 2018国际邀请赛淘汰赛BO3 第二场 8.24
2018/08/25 DOTA
windows下wxPython开发环境安装与配置方法
2014/06/28 Python
详解django中使用定时任务的方法
2018/09/27 Python
python程序 创建多线程过程详解
2019/09/23 Python
Django模型验证器介绍与源码分析
2020/09/08 Python
聊聊python在linux下与windows下导入模块的区别说明
2021/03/03 Python
美国汽车轮胎和轮毂销售网站:Tire Rack
2018/01/11 全球购物
C#中有没有静态构造函数,如果有是做什么用的?
2016/06/04 面试题
计算机专业个人求职自荐信
2013/09/21 职场文书
委托书范文
2014/04/02 职场文书
公安纪律作风整顿剖析材料
2014/10/10 职场文书
2014年节能减排工作总结
2014/12/06 职场文书
中班上学期个人总结
2015/02/12 职场文书
承诺书范本大全
2015/05/04 职场文书
2016高考冲刺决心书
2015/09/23 职场文书
一年之计:2019年下半年的计划
2019/05/07 职场文书
Go语言-为什么返回值为接口类型,却返回结构体
2021/04/24 Golang