真实的国产乱ⅩXXX66竹夫人,五月香六月婷婷激情综合,亚洲日本VA一区二区三区,亚洲精品一区二区三区麻豆

成都創(chuàng)新互聯(lián)網(wǎng)站制作重慶分公司

如何使用jQuerymobileNuGet

小編給大家分享一下如何使用jQuery mobile NuGet，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！

成都創(chuàng)新互聯(lián)是一家專注于網(wǎng)站設(shè)計制作、成都網(wǎng)站設(shè)計與策劃設(shè)計,武邑網(wǎng)站建設(shè)哪家好?成都創(chuàng)新互聯(lián)做網(wǎng)站,專注于網(wǎng)站建設(shè)10余年,網(wǎng)設(shè)計領(lǐng)域的專業(yè)建站公司;建站業(yè)務(wù)涵蓋:武邑等地區(qū)。武邑做網(wǎng)站價格咨詢:18982081108

問題

默認情況下，你的網(wǎng)站在移動設(shè)備上展現(xiàn)的可能不太好。當然，有的移動設(shè)備足夠讓你的網(wǎng)站在它上顯示。但是這也不是穩(wěn)妥的?？赡苣悴幌Ｍ麨橐苿与娫拕?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)站的多個版本帶來風向和額外的時間要求。每次添加新的功能，
你必須首先測試在多種環(huán)境的新功能，在多種環(huán)境做回歸測試。此外，僅僅是因為
這被認為是“簡單”并不意味著它不需要動腦筋：必須給花費很多心思來組織頁面的結(jié)構(gòu)，以確保它的建成盡可能最好的兩個主要平臺：臺式機瀏覽器和移動瀏覽器。

作為開始，我們需要從NuGet package manager 安裝JQuery Mobile 包。選Online，再右邊搜索框里輸入JQueryMobile。

如何使用jQuery mobile NuGet

在這之前，我們要注意的是，當前版本的MVC3 默認包括的是1.5X版本的JQuery 。當前最新版本的是JQuery1.7x。所以必須更新Jquery的版本。幸運的是，NuGet 管理工具已經(jīng)提供了一個簡單的方式去實現(xiàn)：

在當前項目：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頁面解剖語法。




@ViewBag.Title



$(document).ready(function () {
if (window.innerWidth > 480) {
$("link[rel=stylesheet]").attr({ href: '@Url.Content("~/Content/Site.css")' });
}
});


@RenderSection("JavaScriptAndCSS", required: false)







My MVC Application
@Html.Partial("_LogOnPartial") [ @Html.ActionLink("English", "ChangeLanguage", "Home", new { language = "en" }, null) ] [ @Html.ActionLink("Français", "ChangeLanguage", "Home", new { language = "fr" }, null) ]
  • @Html.ActionLink("Home", "Index", "Home", null, new Dictionary { { "data-role", "button" } })
  • @Html.ActionLink("About", "About", "Home", null, new Dictionary { { "data-role", "button" } })
    • @RenderBody()

    這是shared/_layout下項目自動創(chuàng)建的模板。實現(xiàn)JQuery Mobile的功能，已經(jīng)完成下列事項：

    1. 包含了 JQuery Mobile CSS 文件

    2. 包含了JQuery Mobile JavaScript 文件

    3.添加了多個data-role 屬性在已經(jīng)存在的

    標簽里，包括 page, header, content, 和 footer和一些其他元素。

    4. 添加一些 JavaScript 探測去切換 CSS，如果瀏覽器的size大于480像素，使用default CSS。

    提示：

    有幾種方法來完成的最后一項（例如，在CSS中使用@Media標記目標屏幕尺寸，執(zhí)行手機和瀏覽器檢測等）。根據(jù)您的需要，你將需要確定什么是最好的解決辦法。也許你的網(wǎng)站應(yīng)該執(zhí)行某種模板，你自己決定。

    (譯者：我按照例子做是沒弄出來的，一定要注意當前_layout 所引用的css 和javascript的版本是否和你項目里的一樣。)

    如果你運行的應(yīng)用程序兩次（一次在全屏模式下，一次在移動設(shè)備或簡單調(diào)整低于480像素的瀏覽器），你會看到兩個非常不同的網(wǎng)站（參見下圖）。

    普通版：

    如何使用jQuery mobile NuGet

    Mobile版：

    如何使用jQuery mobile NuGet

    譯者：酷么？你怎么覺得我不知道，我是覺得很酷！

    如果您沒有mobile設(shè)備可以測試的話。你也可以注釋掉下邊代碼來查看效果：

    
$(document).ready(function () {
if (window.innerWidth > 480) {
$("link[rel=stylesheet]").attr({ href: '@Url.Content("~/Content/Site.css")' });
}
});

    你也許會說，仍然有大量的工作要做，使一切看起來不錯，但通過添加一些額外的data-role屬性的默認布局，90％的工作已經(jīng)完成了。接下來的步驟是探索特殊功能去讓你的網(wǎng)站很有趣。 jQuery Mobile的有以下基本功能：

    • 導(dǎo)航條（中頁眉或頁腳，帶或不帶圖標）

    • 頁面過渡

    • 對話框

    • 按鈕

    • 表格

    • 列表視圖（在移動平臺上提供了典型的手指滾動）

    • 全面的主題化的支持，以換出完整的外觀和感受。

    導(dǎo)航條事例：

    
@Html.Partial("_LogOnPartial")
@Html.ActionLink("English", "ChangeLanguage", "Home",
new { language = "en" }, null) ]
@Html.ActionLink("Francais", "ChangeLanguage", "Home",
new { language = "fr" }, null) ]

    下面的例子將呈現(xiàn)典型的智能手機的按鈕，以及其他鏈接都將添加相同的樣式。

    @Html.ActionLink("My Cool Link", "SomeAction", "Home", null,
new Dictionary
{{ "data-transition", "slide" }})

    以下頁面的過渡將在加載完Ajax后顯現(xiàn)在新的內(nèi)容。在我們的標準網(wǎng)站，其他的所有連接也這樣做。

    Dialog 例子：

    Open dialog

    如何使用jQuery mobile NuGet

    就像前面的例子，這將呈現(xiàn)為Web瀏覽器的通用的鏈接，但在移動版本，標準的彈出窗口將顯示。

    Button 例子：

    Cancel 
Save

    如何使用jQuery mobile NuGet

    正如您可能期望的那樣，這些按鈕放置在Header，他們將呈現(xiàn)在最上面一欄，一個在左邊，一個在右邊，模仿今天在智能手機的標準Header按鈕。

    Form例子：

    
@Html.LabelFor(model => model.ShortName)


@Html.EditorFor(model => model.ShortName)
@Html.ValidationMessageFor(model => model.ShortName)

    沒有什么改變。大多數(shù)內(nèi)置的形式功能將完全呈現(xiàn)jQuery Mobile的預(yù)期。

    List View例子：

    

  • Acura
    • 

  • Audi
    • 

  • BMW
    •

    如何使用jQuery mobile NuGet

    上面的例子將列出所有的books，他們的標題被設(shè)置成為一個轉(zhuǎn)向詳細頁的鏈接。這個鏈接在一個標準可滾動的列表中。

    更改Theme的示例：

    目前，jQuery Mobile的五個內(nèi)置的主題，從一個字母到E每個
    上述項目可以通過追加一個新的屬性稱為，改變他們的主題。data-theme，用不同的字母（A至E）表示。

    譯者：由于書里沒有給例子。我在我們的_layout上改變代碼如下：


    我給page 一個主題是a，給header一個主題是e。下圖是效果：

    如何使用jQuery mobile NuGet

    以上是“如何使用jQuery mobile NuGet”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對大家有所幫助，如果還想學(xué)習(xí)更多知識，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道！


    分享文章：如何使用jQuerymobileNuGet
    網(wǎng)站URL：http://weahome.cn/article/iphsei.html

    在線咨詢

    微信咨詢

    電話咨詢

    028-86922220（工作日）

    18980820575（7×24）

    提交需求

    返回頂部