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