使用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回调方法使用示例
Jun 26 jQuery
jQuery+C#实现参数RSA加密传输功能【附jsencrypt.js下载】
Jun 26 jQuery
基于jquery实现五星好评
Nov 18 jQuery
用jquery获取select标签中选中的option值及文本的示例
Jan 25 jQuery
jQuery实现判断上传图片类型和大小的方法示例
Apr 11 jQuery
jQuery轮播图实例详解
Aug 15 jQuery
jQuery访问json文件中数据的方法示例
Jan 28 jQuery
JQuery样式操作、click事件以及索引值-选项卡应用示例
May 14 jQuery
jQuery实现input[type=file]多图预览上传删除等功能
Aug 02 jQuery
Jquery动态列功能完整实例
Aug 30 jQuery
JQuery 实现文件下载的常用方法分析
Oct 29 jQuery
jQuery实现简单三级联动效果
Sep 05 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下使用strpos需要注意 === 运算符
2010/07/17 PHP
php在多维数组中根据键名快速查询其父键以及父键值的代码
2011/05/07 PHP
php 无限级分类,超级简单的无限级分类,支持输出树状图
2014/06/29 PHP
PHP配合fiddler抓包抓取微信指数小程序数据的实现方法分析
2020/01/02 PHP
什么是MEAN?JavaScript编程中的MEAN是什么意思?
2014/12/18 Javascript
JS与jQuery遍历Table所有单元格内容的方法
2015/12/07 Javascript
JS焦点图,JS 多个页面放多个焦点图的实例
2016/12/08 Javascript
Angularjs+bootstrap+table多选(全选)支持单击行选中实现编辑、删除功能
2017/03/27 Javascript
jq checkbox 的全选并ajax传参的实例
2017/04/01 Javascript
JavaScript实现前端分页控件
2017/04/19 Javascript
Angular4学习笔记之根模块与Ng模块
2017/09/09 Javascript
JS动态添加元素及绑定事件造成程序重复执行解决
2017/12/07 Javascript
JS中的BOM应用
2018/02/02 Javascript
讲解vue-router之什么是动态路由
2018/05/28 Javascript
VueJS 组件参数名命名与组件属性转化问题
2018/12/03 Javascript
微信小程序登录态和检验注册过没的app.js写法
2019/05/22 Javascript
在React中写一个Animation组件为组件进入和离开加上动画/过度效果
2019/06/24 Javascript
Nodejs监控事件循环异常示例详解
2019/09/22 NodeJs
javascript实现商品图片放大镜
2019/11/28 Javascript
微信小程序使用 vant Dialog组件的正确方式
2020/02/21 Javascript
Python脚本文件打包成可执行文件的方法
2015/06/02 Python
Matplotlib配色之Colormap详解
2021/01/05 Python
解决html5中的video标签ios系统中无法播放使用的问题
2020/08/10 HTML / CSS
美国瑜伽品牌:Gaiam
2017/10/31 全球购物
介绍一下linux文件系统分配策略
2013/02/25 面试题
几个判断型的面试题
2012/07/03 面试题
舞蹈教师自荐信
2014/01/27 职场文书
我的中国心演讲稿
2014/09/04 职场文书
个人授权委托书范文
2014/09/21 职场文书
学校党风廉政建设调研报告
2015/01/01 职场文书
社会实践活动总结
2015/02/05 职场文书
综合素质评价自我评价
2015/03/06 职场文书
亮剑观后感300字
2015/06/05 职场文书
Python 多线程之threading 模块的使用
2021/04/14 Python
Nginx的gzip相关介绍
2022/05/11 Servers
Go语言测试库testify使用学习
2022/07/23 Golang