使用jQuery mobile NuGet让您的网站在移动设备上同样令人兴奋

问题

默认情况下，您的网站可能无法在移动设备上正常运行。当然，一些移动设备足以让你的网站显示在上面。但这也不安全。也许你不想为你的手机创建一个全新的网站，因为成本太高。

解决办法

使用jQuery手机NuGet包改变共享布局和视图，让你的网站在传统浏览器和大部分手机上显示良好。

讨论

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

不幸的是，由于许多事情表明这将是MVC中4的内容，所以在这里告诉我们还为时过早。我们应该提供一个非常简单的解决方案，而不是“等待”，它只需要最少的努力来维护移动网络应用程序和一个普通的网络应用程序。另外，Windows8即将问世，它在桌面上支持HTML5 Web应用，也将是一款桌面应用。

提示：维护同一个网站的多个版本会带来风向和额外的时间要求。每次添加新函数时，都必须先在多个环境中测试新函数，并在多个环境中进行回归测试。另外，仅仅因为它被认为“简单”并不意味着它不需要思考：它必须花费大量的思想来组织页面的结构，以确保它尽可能地被构建成两个主要平台：桌面浏览器和移动浏览器。

首先，我们需要从NuGet包管理器安装JQuery Mobile包。选择在线，然后在右侧的搜索框中输入JQueryMobile。

在此之前，我们应该注意到，MVC3的当前版本默认包含JQuery版本。最新版本是JQuery1.7x.因此，必须更新Jquery的版本。幸运的是，NuGet管理工具提供了一种简单的实现方式：

在当前项目中：工具库包管理器添加库包引用。我们需要更新现有的Jquery，而不是添加新的JQuery。在左侧面板上，选择更新。在更新Jquery之前，需要更新一些子包，否则会出错！我找到了一些正确的更新序列，点击每一个，然后点击update: JQuery。验证，jquery。vs.doc，jquery。ui。组合，最后是jquery。

成功更新所有包后，输入Jquery。移动在搜索框中，并安装它。这将安装一些必要的CSS和javascript文件。jQuery Mobile的插件是基于HTML5语法的。使用这种语法，各种CSS和JavaScript操作为页面提供了所需的外观，这与一些流行智能手机上的内置应用程序非常接近。

此示例的目的是演示如何更新现有网站。有了这个新的库，仍然有一个网络版本和一个移动版本。首先，您需要更新共享文件夹下的_Layoutview，以匹配jQuery Mobile页面的解剖语法。

！htmlhtmlheadtitle@ViewBag.Title/titlelink DOCTYPE。Content(' rel=' external no follow ' ~/Content/jquery . mobile-1 . 0 . min . CSS ')' rel='样式表' type=' text/CSS '/script src=' http : @ URl。内容(' ~/Scripts/jquery-1.6.4.min.js ')'类型=' text/JavaScript '/script script类型='text/javascript'$(文档)。ready(function(){ if(window . innerwidth 480){ $(' link[rel=样式表]')。attr({ href: '@Url。内容(' ~/Content/site . CSS ')' })；}});/script script src=' http : @ URl。content(' ~/Scripts/jquery . mobile-1.0 . min . js ')' type=' text/JavaScript '/script @ render section(' JavaScript and CSS '，required : false)/headsdydiv 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 id=' logindisplay ' class=' ui-bar ' @ 1Partial('_LogOnPartial')[ @Html。ActionLink('English '，' ChangeLanguage '，' Home '，new { language='en' }，null)] [ @Html。action link(' 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 Dictionarystring，object { { 'data-role '，' button' } })/lili@Html。ActionLink('About '，' About '，' Home '，null，new Dictionarystring，object { { 'data-role '，Button ' } })/Li/ul/div/div id=' main ' data-role=' content ' @ render body()/div id=' footer ' data-role=' footer '/div/body/html这是项目在shared/_layout下自动创建的模板。为了实现JQuery Mobile的功能，已经完成了以下项目：

1.包含JQuery移动CSS文件

2.包括JQuery移动JavaScript文件

3.许多数据角色属性被添加到现有的div标签中，包括页面、页眉、内容、页脚和一些其他元素。

4.添加一些JavaScript探针来切换CSS。如果浏览器大小大于480像素，请使用默认CSS。

提示：

完成最后一项有几种方法(例如：在CSS中使用@Media标记目标屏幕大小，执行手机和浏览器检测等)。).根据你的需要，你需要确定什么是最好的解决方案。也许你的网站应该实现某种模板。这取决于你。

(译者：我不是照着例子来的。我必须注意current _layout引用的css和javascript版本是否与您项目中的相同。)

如果您运行应用程序两次(一次在全屏模式下，一次在移动设备中，或者只是将浏览器调整到480像素以下)，您将看到两个截然不同的网站(见下图)。

普通版：

移动版本：

译者：酷吗？你凭什么认为我不知道？我觉得很酷！

如果你没有要测试的移动设备。您也可以注释掉底部的代码来查看效果：

脚本类型='text/javascript'$(文档)。ready(function(){ if(window . innerwidth 480){ $(' link[rel=样式表]')。attr({ href: '@Url。内容(' ~/Content/site . CSS ')' })；}});/script您可能会说，要让一切看起来都很好，还有很多工作要做，但是通过添加一些额外的数据角色属性的默认布局，已经完成了90%的工作。下一步是探索特殊功能，让你的网站变得有趣。JQuery Mobile具有以下基本功能：

导航栏(中间页眉或页脚，带图标或不带图标)、页面过渡、对话框、按钮、表格、列表视图(移动平台提供典型的手指滚动)，并提供全面的主题支持，改变完整的外观和感觉。导航栏示例：

div id=' login display ' class=' ui-bar ' @ Html。Partial('_LogOnPartial')@Html。ActionLink('English '，' ChangeLanguage '，' home '，new { language='en' }，Null)]@ html . action link(' Fran ais '，' change language '，' Home '，new {language=' fr'}，null)]/div以下示例将呈现典型智能手机的按钮，其他链接将添加相同的样式。

@ html.actionlink ('my coollink '，' some action '，' home '，null，new dictionary string，object {{'data-transition '，' slide'})加载Ajax后，以下页面的过渡将出现在新内容中。在我们的标准网站上，所有其他链接也是如此。

对话框示例：

a href=' foo . html ' rel=' external no follow ' data-rel=' dialog ' open dialog/a

就像前面的例子一样，这将作为Web浏览器的常规链接出现，但是在移动版本中，将显示标准的弹出窗口。

按钮示例：

a href=' index . html ' rel=' external nofollow ' rel=' external nofollow ' data-role=' button ' data-inline=' true ' cancel/a href=' index . html ' rel=' external nofollow ' rel=' external nofollow ' data-role=' button ' data-inline=' true ' data-theme=' b ' save/a

正如您所料，这些按钮被放置在标题中，它们将出现在顶部列中，一个在左侧，一个在右侧，模仿了当今智能手机上的标准标题按钮。

形式示例：

div class=' editor-label ' @ html . label for(model=model . short name)/div class=' editor-field ' @ html . editor for(model=model . short name)@ html . validation message for(model=model . short name)/div没有变化。大多数内置的形式函数将完全代表jQuery Mobile的期望。

列表视图示例：

ul数据-角色='listview '数据-主题=' g ' lia href=' Acura . html ' rel=' external nofollow ' Acura/a/lilia href=' Audi . html ' rel=' external nofollow ' Audi/a/lilia href=' BMW . html ' rel=' external nofollow ' BMW/a/Li/ul

上面的例子将列出所有的书籍，它们的标题将被设置为详细页面的链接。该链接位于标准的可滚动列表中。

更改主题的示例：

目前jQuery Mobile的五个内置主题，从一个字母到e，可以通过添加一个新的属性来改变它们的主题，这个属性叫做。数据主题，由不同的字母(a到e)表示。

译者：因为书中没有例子。我在我们的布局上更改了代码，如下所示：

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手机官网看看

以上就是本文的全部内容。希望对大家的学习有帮助，支持我们。