使用jQuery mobile NuGet讓你的網(wǎng)站在移動(dòng)設(shè)備上同樣精彩
問(wèn)題
默認(rèn)情況下，你的網(wǎng)站在移動(dòng)設(shè)備上展現(xiàn)的可能不太好。當(dāng)然，有的移動(dòng)設(shè)備足夠讓你的網(wǎng)站在它上顯示。但是這也不是穩(wěn)妥的?？赡苣悴幌Ｍ麨橐苿?dòng)電話(huà)創(chuàng)建一個(gè)全新的網(wǎng)站，成本太高。
解決方案
使用jQuery mobile NuGet包，改變共享的布局和視圖，并使你的網(wǎng)站在傳統(tǒng)的瀏覽器和大部分手機(jī)展現(xiàn)的都很好。
討論
首先，如果你一直在閱讀關(guān)于4 MVC的路線(xiàn)圖，你會(huì)注意到很多討論是圍繞著移動(dòng)的增強(qiáng)。特別的是，在這個(gè)例子中我們將使用jQuery mobile工具箱。
不幸的是，如很多事情表明這將是MVC中的4中的內(nèi)容，在這個(gè)告訴我們還為時(shí)過(guò)早。與其“等待”我們不如提供一個(gè)非常簡(jiǎn)單的解決方案，需要最小的努力來(lái)維護(hù)移動(dòng)Web應(yīng)用程序和一個(gè)普通的Web應(yīng)用程序。此外，Windows8很快出來(lái)，它在桌面上支持HTML5 Web應(yīng)用程序，它也將是一個(gè)桌面應(yīng)用程序。
提示：維護(hù)同一網(wǎng)站的多個(gè)版本帶來(lái)風(fēng)向和額外的時(shí)間要求。每次添加新的功能，
你必須首先測(cè)試在多種環(huán)境的新功能，在多種環(huán)境做回歸測(cè)試。此外，僅僅是因?yàn)?br />
這被認(rèn)為是“簡(jiǎn)單”并不意味著它不需要?jiǎng)幽X筋：必須給花費(fèi)很多心思來(lái)組織頁(yè)面的結(jié)構(gòu)，以確保它的建成盡可能最好的兩個(gè)主要平臺(tái)：臺(tái)式機(jī)瀏覽器和移動(dòng)瀏覽器。
作為開(kāi)始，我們需要從NuGet package manager 安裝JQuery Mobile 包。選Online，再右邊搜索框里輸入JQueryMobile。
在這之前，我們要注意的是，當(dāng)前版本的MVC3 默認(rèn)包括的是1.5X版本的JQuery 。當(dāng)前最新版本的是JQuery1.7x。所以必須更新Jquery的版本。幸運(yùn)的是，NuGet 管理工具已經(jīng)提供了一個(gè)簡(jiǎn)單的方式去實(shí)現(xiàn)：
在當(dāng)前項(xiàng)目：Tools→Library Package Manager→Add Library Package Reference.我們需要更新現(xiàn)有的JQuery 而不是添加新的Jquery。在左邊的面板上，選擇Update。在更新Jquery之前，需要先更新一些子包，否則會(huì)出錯(cuò)哦！我發(fā)現(xiàn)了一些正確的更新順序，點(diǎn)選每一個(gè)并且點(diǎn)擊update：Jquery.Validation, Jquery.vs.doc, Jquery.ui.combined最后點(diǎn)JQuery。
一旦所有的包都被更新成功，在搜索框里輸入Jquery.Mobile 并且安裝。這將安裝一些必需的CSS和javascript文件。jQuery Mobile的插件是基于HTML5的語(yǔ)法。使用這個(gè)語(yǔ)法，各種CSS和JavaScript操作為頁(yè)面提供所需的外觀，很接近一些較受歡迎的智能手機(jī)上的內(nèi)置應(yīng)用。
這個(gè)例子的目的是演示如何可以更新現(xiàn)有的網(wǎng)站。使用這個(gè)新的library，仍然保持一個(gè)Web版本，以及一個(gè)移動(dòng)版本。首先，需要更新Shared文件夾下的_Layoutview去匹配jQuery Mobile頁(yè)面解剖語(yǔ)法。
<!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下項(xiàng)目自動(dòng)創(chuàng)建的模板。實(shí)現(xiàn)JQuery Mobile的功能，已經(jīng)完成下列事項(xiàng)：
1. 包含了 JQuery Mobile CSS 文件
2. 包含了JQuery Mobile JavaScript 文件
3.添加了多個(gè)data-role 屬性在已經(jīng)存在的<div>標(biāo)簽里，包括 page, header, content, 和 footer和一些其他元素。
4. 添加一些 JavaScript 探測(cè)去切換 CSS，如果瀏覽器的size大于480像素，使用default CSS。
提示：
有幾種方法來(lái)完成的最后一項(xiàng)（例如，在CSS中使用@Media標(biāo)記目標(biāo)屏幕尺寸，執(zhí)行手機(jī)和瀏覽器檢測(cè)等）。根據(jù)您的需要，你將需要確定什么是最好的解決辦法。也許你的網(wǎng)站應(yīng)該執(zhí)行某種模板，你自己決定。
(譯者：我按照例子做是沒(méi)弄出來(lái)的，一定要注意當(dāng)前_layout 所引用的css 和javascript的版本是否和你項(xiàng)目里的一樣。)
如果你運(yùn)行的應(yīng)用程序兩次（一次在全屏模式下，一次在移動(dòng)設(shè)備或簡(jiǎn)單調(diào)整低于480像素的瀏覽器），你會(huì)看到兩個(gè)非常不同的網(wǎng)站（參見(jiàn)下圖）。
普通版：
Mobile版：
譯者：酷么？你怎么覺(jué)得我不知道，我是覺(jué)得很酷！
如果您沒(méi)有mobile設(shè)備可以測(cè)試的話(huà)。你也可以注釋掉下邊代碼來(lái)查看效果：
<script type="text/javascript">
$(document).ready(function () {
if (window.innerWidth > 480) {
$("link[rel=stylesheet]").attr({ href: '@Url.Content("~/Content/Site.css")' });
}
});
</script>
你也許會(huì)說(shuō)，仍然有大量的工作要做，使一切看起來(lái)不錯(cuò)，但通過(guò)添加一些額外的data-role屬性的默認(rèn)布局，90％的工作已經(jīng)完成了。接下來(lái)的步驟是探索特殊功能去讓你的網(wǎng)站很有趣。 jQuery Mobile的有以下基本功能：
- 導(dǎo)航條（中頁(yè)眉或頁(yè)腳，帶或不帶圖標(biāo)）
- 頁(yè)面過(guò)渡
- 對(duì)話(huà)框
- 按鈕
- 表格
- 列表視圖（在移動(dòng)平臺(tái)上提供了典型的手指滾動(dòng)）
- 全面的主題化的支持，以換出完整的外觀和感受。
導(dǎo)航條事例：
<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>
下面的例子將呈現(xiàn)典型的智能手機(jī)的按鈕，以及其他鏈接都將添加相同的樣式。
@Html.ActionLink("My Cool Link", "SomeAction", "Home", null,
new Dictionary<string, object>
{{ "data-transition", "slide" }})
以下頁(yè)面的過(guò)渡將在加載完Ajax后顯現(xiàn)在新的內(nèi)容。在我們的標(biāo)準(zhǔn)網(wǎng)站，其他的所有連接也這樣做。
Dialog 例子：
<a href="foo.html" rel="external nofollow" data-rel="dialog">Open dialog</a>
就像前面的例子，這將呈現(xiàn)為Web瀏覽器的通用的鏈接，但在移動(dòng)版本，標(biāo)準(zhǔn)的彈出窗口將顯示。
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>
正如您可能期望的那樣，這些按鈕放置在Header，他們將呈現(xiàn)在最上面一欄，一個(gè)在左邊，一個(gè)在右邊，模仿今天在智能手機(jī)的標(biāo)準(zhǔn)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>
沒(méi)有什么改變。大多數(shù)內(nèi)置的形式功能將完全呈現(xiàn)jQuery Mobile的預(yù)期。
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>
上面的例子將列出所有的books，他們的標(biāo)題被設(shè)置成為一個(gè)轉(zhuǎn)向詳細(xì)頁(yè)的鏈接。這個(gè)鏈接在一個(gè)標(biāo)準(zhǔn)可滾動(dòng)的列表中。
更改Theme的示例：
目前，jQuery Mobile的五個(gè)內(nèi)置的主題，從一個(gè)字母到E每個(gè)
上述項(xiàng)目可以通過(guò)追加一個(gè)新的屬性稱(chēng)為，改變他們的主題。data-theme，用不同的字母（A至E）表示。
譯者：由于書(shū)里沒(méi)有給例子。我在我們的_layout上改變代碼如下：
<div class="page" data-role="page" data-theme="a"> <div id="header" data-role="header" data-theme="e">
我給page 一個(gè)主題是a，給header一個(gè)主題是e。下圖是效果：
是不是有點(diǎn)像某個(gè)系列書(shū)的風(fēng)格，囧。
還有太多太多jquery mobile 的例子。想知道更詳細(xì)的內(nèi)容，可以去JQuqey Mobile 官網(wǎng)去看看
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
- jQueryMobile之窗體長(zhǎng)內(nèi)容的缺陷與解決方法實(shí)例分析
- jquery mobile實(shí)現(xiàn)可折疊的導(dǎo)航按鈕
- jQuery Mobile漏洞會(huì)有跨站腳本攻擊風(fēng)險(xiǎn)
- jquery mobile移動(dòng)端幻燈片滑動(dòng)切換效果
- jQuery-mobile事件監(jiān)聽(tīng)與用法詳解
- jquery-mobile表單的創(chuàng)建方法詳解
- jquery-mobile基礎(chǔ)屬性與用法詳解
- jQuery Mobile和HTML5開(kāi)發(fā)App推廣注冊(cè)頁(yè)
相關(guān)文章
Jquery ajax執(zhí)行順序 返回自定義錯(cuò)誤信息(實(shí)例講解)
由于Jquery中的Ajax的async默認(rèn)是true(異步請(qǐng)求),如果想一個(gè)Ajax執(zhí)行完后再執(zhí)行另一個(gè)Ajax, 需要把a(bǔ)sync=false就可以了2013-11-11
jquery ui 實(shí)現(xiàn) tab標(biāo)簽功能示例【測(cè)試可用】
這篇文章主要介紹了jquery ui 實(shí)現(xiàn) tab標(biāo)簽功能,結(jié)合完整實(shí)例形式分析了jquery ui 實(shí)現(xiàn) tab標(biāo)簽切換功能的相關(guān)操作技巧,需要的朋友可以參考下2019-07-07
jQuery數(shù)據(jù)緩存功能的實(shí)現(xiàn)思路及簡(jiǎn)單模擬
jQuery緩存系統(tǒng)不僅運(yùn)用于DOM元素，動(dòng)畫(huà)、事件等都有用到這個(gè)緩存系統(tǒng)2013-05-05
HTML Form 表單里的各種組件，例如文本輸入框，textarea，按鈕等，都可以通過(guò)CSS或其它技術(shù)進(jìn)行美化，讓它們看起來(lái)很漂亮了，唯獨(dú)下拉列表選項(xiàng)框(select box),不管你怎么做，它擺在那里總顯得格格不入。2011-08-08
很多網(wǎng)站的首頁(yè)都有廣告輪播，今天閑來(lái)看了一網(wǎng)站的首頁(yè)廣告輪播方式，是通過(guò) jQuery的blockSlide插件實(shí)現(xiàn)的，然后自己測(cè)試了一下，很好。2010-11-11
jquery實(shí)現(xiàn)textarea輸入字符控制(仿微博輸入控制字符)
首先獲取輸入框的值然后獲取輸入框的值;如果字?jǐn)?shù)大于500、發(fā)布按鈕禁用否從發(fā)布按鈕啟用，感興趣的朋友可以詳細(xì)了解下哈2013-04-04
jquery簡(jiǎn)單實(shí)現(xiàn)鼠標(biāo)經(jīng)過(guò)導(dǎo)航條改變背景圖
鼠標(biāo)經(jīng)過(guò)導(dǎo)航條改變背景圖的效果很是好看，下面為大家介紹下使用jquery是如何實(shí)現(xiàn)的，感興趣的朋友可以參考下2013-12-12
在網(wǎng)站上應(yīng)該用的30個(gè)jQuery插件整理
jQuery插件是網(wǎng)頁(yè)設(shè)計(jì)師最喜歡的。從圖像滑塊，圖像畫(huà)廊和導(dǎo)航插件，它們是如此眾多，如此多樣，如此驚人的和互動(dòng)可以制作美化網(wǎng)站2011-11-11
zTree節(jié)點(diǎn)文字過(guò)多的處理方法
這篇文章主要為大家詳細(xì)介紹了zTree節(jié)點(diǎn)文字過(guò)多的處理方法，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-11-11
js根據(jù)json數(shù)據(jù)中的某一個(gè)屬性來(lái)給數(shù)據(jù)分組的方法
今天小編就為大家分享一篇js根據(jù)json數(shù)據(jù)中的某一個(gè)屬性來(lái)給數(shù)據(jù)分組的方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-10-10