【譯】MVC3 20個秘方-（16）讓你的網站在移動設備上同樣精彩！
使用JQuery Mobile 讓你的網站在移動設備上同樣精彩！
問題
默認情況下，你的網站在移動設備上展現的可能不太好。當然，有的移動設備足夠讓你的網站在它上顯示。但是這也不是穩妥的。可能你不希望為移動電話創建一個全新的網站，成本太高。
解決方案
使用jQuery mobile NuGet包，改變共享的布局和視圖，并使你的網站在傳統的瀏覽器和大部分手機展現的都很好。
討論
首先，如果你一直在閱讀關于4 MVC的路線圖，你會注意到很多討論是圍繞著移動的增強。特別的是，在這個例子中我們將使用jQuery mobile工具箱。
不幸的是，如很多事情表明這將是MVC中的4中的內容，在這個告訴我們還為時過早。與其“等待”我們不如提供一個非常簡單的解決方案，需要最小的努力來維護移動Web應用程序和一個普通的Web應用程序。此外，Windows8很快出來，它在桌面上支持HTML5 Web應用程序，它也將是一個桌面應用程序。
提示：維護同一網站的多個版本帶來風向和額外的時間要求。每次添加新的功能，
你必須首先測試在多種環境的新功能，在多種環境做回歸測試。此外，僅僅是因為
這被認為是“簡單”并不意味著它不需要動腦筋：必須給花費很多心思來組織頁面的結構，以確保它的建成盡可能最好的兩個主要平臺：臺式機瀏覽器和移動瀏覽器。
作為開始，我們需要從NuGet package manager 安裝JQuery Mobile 包。選Online，再右邊搜索框里輸入JQueryMobile。
在這之前，我們要注意的是，當前版本的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("~/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像素的瀏覽器），你會看到兩個非常不同的網站（參見下圖）。
普通版：
Mobile版：
（譯者：酷么？你怎么覺得我不知道，我是覺得很酷！
如果您沒有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" data-rel="dialog">Open dialog</a>
就像前面的例子，這將呈現為Web瀏覽器的通用的鏈接，但在移動版本，標準的彈出窗口將顯示。
Button 例子：
<a href="index.html" data-role="button" data-inline="true">Cancel</a>
<a href="index.html" data-role="button" data-inline="true" data-theme="b">Save</a>
正如您可能期望的那樣，這些按鈕放置在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">Acura</a></li>
<li><a href="audi.html">Audi</a></li>
<li><a href="bmw.html">BMW</a></li>
</ul>
上面的例子將列出所有的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 的例子。想知道更詳細的內容，可以去JQuqey Mobile 官網去看看）
另請參見：
浙公網安備 33010602011771號