使用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 append与appendTo方法比较
May 24 jQuery
JQueryMiniUI按照时间进行查询的实现方法
Jun 07 jQuery
jquery+css实现侧边导航栏效果
Jun 12 jQuery
jQuery UI Draggable + Sortable 结合使用(实例讲解)
Sep 07 jQuery
jQuery实现的电子时钟效果完整示例
Apr 28 jQuery
jQuery使用bind动态绑定事件无效的处理方法
Dec 11 jQuery
jQuery实现的中英文切换功能示例
Jan 11 jQuery
详解jQuery中的getAll()和cleanData()
Apr 15 jQuery
jQuery中使用validate插件校验表单功能
May 24 jQuery
jQuery轮播图功能制作方法详解
Dec 03 jQuery
jQuery 选择器用法基础入门示例
Jan 04 jQuery
jquery实现鼠标悬浮弹出气泡提示框
Dec 23 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的开合式多级菜单程序
2006/10/09 PHP
PHP转换文件夹下所有文件编码的实现代码
2013/06/06 PHP
js 判断脚本加载完毕的代码
2011/07/13 Javascript
jquery 面包屑导航 具体实现
2013/06/05 Javascript
Iframe实现跨浏览器自适应高度解决方法
2014/09/02 Javascript
在Node.js应用中使用Redis的方法简介
2015/06/24 Javascript
javascript入门之数组[新手必看]
2016/11/21 Javascript
JS中with的替代方法与String中的正则方法详解
2016/12/23 Javascript
EasyUi 打开对话框后控件赋值及赋值后不显示的问题解决办法
2017/01/19 Javascript
详谈js中window.location.search的用法和作用
2017/02/13 Javascript
jQuery封装placeholder效果实现方法,让低版本浏览器支持该效果
2017/07/08 jQuery
js获取form表单中name属性的值
2019/02/27 Javascript
vue插件mescroll.js实现移动端上拉加载和下拉刷新
2019/03/07 Javascript
vue实现配置全局访问路径头(axios)
2019/11/01 Javascript
微信小程序定义和调用全局变量globalData的实现
2019/11/01 Javascript
如何在wxml中直接写js代码(wxs)
2019/11/14 Javascript
解决Angularjs异步操作后台请求用$q.all排列先后顺序问题
2019/11/29 Javascript
基于javascript实现日历功能原理及代码实例
2020/05/07 Javascript
vue组件开发之slider组件使用详解
2020/08/21 Javascript
python爬虫爬取快手视频多线程下载功能
2018/02/28 Python
Python cookbook(数据结构与算法)对切片命名清除索引的方法
2018/03/13 Python
Python实现的knn算法示例
2018/06/14 Python
使用Python正则表达式操作文本数据的方法
2019/05/14 Python
python根据多个文件名批量查找文件
2019/08/13 Python
python内置模块collections知识点总结
2019/12/19 Python
解决pycharm中opencv-python导入cv2后无法自动补全的问题(不用作任何文件上的修改)
2020/03/05 Python
Python flask框架实现查询数据库并显示数据
2020/06/04 Python
css3 矩阵的使用详解
2018/03/20 HTML / CSS
微笑面对生活演讲稿
2014/05/13 职场文书
求职教师自荐书
2014/06/19 职场文书
某集团股份有限公司委托书样本
2014/09/24 职场文书
毕业设计论文致谢词
2015/05/14 职场文书
获奖感言一句话
2015/07/31 职场文书
详解Python为什么不用设计模式
2021/06/24 Python
mysql分表之后如何平滑上线详解
2021/11/01 MySQL
微信小程序APP的事件绑定以及传递参数时的冒泡和捕获
2022/04/19 Javascript