MVC4 jquery 樣式 主題 用法(案例)

MVC4已經自帶了jquery,新建的項目,基本上什麼都不用添加就能夠運行,跑項目.(集成了那麼多東西,jquery,modernizr,自帶的默認權限,生成的模板,可是缺沒有一個統一的文檔或者什麼去介紹已經集成的東西,怎麼個用法 各類百科)

 

 

第一步:

 

[項目]-[管理NuGet程序包] 點擊更新 輸入jquery ui 而後更新jquery ui插件到最新版本

 

 

第二步:

 

在項目中 [view]-[Shared]-[_Layout.cshtml] 公共界面 統一引用 方便之後修改.

 

@Scripts.Render("~/bundles/jquery")        @*jquery 引用*@

         @Scripts.Render("~/bundles/jqueryui")      @*jquery ui 引用*@

         @Scripts.Render("~/bundles/jqueryZh");     @*jquery中文轉換類*@

         <link href="~/Content/themes/css/redmond/jquery-ui-1.10.3.custom.css" rel="stylesheet" />  @*jquerui 樣式主題*@

@Styles.Render 用法 是引用 項目 -[App_Start]-[BundleConfig.cs] 中已經定義好的引用路徑以下 

 

如下是我本身定好的 範例: 若是缺乏的能夠去 jquery 官方去 下載

 

public static void RegisterBundles(BundleCollection bundles)

        {

            bundles.Add(new ScriptBundle("~/bundles/jquery").Include(

                        "~/Scripts/jquery-{version}.js"));

 

 

            bundles.Add(new ScriptBundle("~/bundles/jqueryui").Include(

                        "~/Scripts/jquery-ui-{version}.js"));

 

 

            bundles.Add(new ScriptBundle("~/bundles/jqueryval").Include(

                        "~/Scripts/jquery.unobtrusive*",

                        "~/Scripts/jquery.validate*"));

 

 

            //中文語言類

            bundles.Add(new ScriptBundle("~/bundles/jqueryZh").Include(

                        "~/Content/themes/base/i18n/jquery.ui.datepicker-zh-CN.js"));

 

 

            bundles.Add(new ScriptBundle("~/bundles/jquerythemes").Include(

                        "~/Content/themes/css/redmond/jquery-ui-1.10.3.custom.css"));

 

 

            // 使用 Modernizr 的開發版本進行開發和了解信息。而後，當你作好

            // 生產準備時，請使用 http://modernizr.com 上的生成工具來僅選擇所需的測試。

            bundles.Add(new ScriptBundle("~/bundles/modernizr").Include(

                        "~/Scripts/modernizr-*"));

 

 

            bundles.Add(new StyleBundle("~/Content/css").Include("~/Content/site.css"));

 

 

            bundles.Add(new StyleBundle("~/Content/themes/base/css").Include(

                        "~/Content/themes/base/jquery-ui.css",

                        "~/Content/themes/base/jquery.ui.core.css",

                        "~/Content/themes/base/jquery.ui.resizable.css",

                        "~/Content/themes/base/jquery.ui.selectable.css",

                        "~/Content/themes/base/jquery.ui.accordion.css",

                        "~/Content/themes/base/jquery.ui.autocomplete.css",

                        "~/Content/themes/base/jquery.ui.button.css",

                        "~/Content/themes/base/jquery.ui.dialog.css",

                        "~/Content/themes/base/jquery.ui.slider.css",

                        "~/Content/themes/base/jquery.ui.tabs.css",

                        "~/Content/themes/base/jquery.ui.datepicker.css",

                        "~/Content/themes/base/jquery.ui.progressbar.css",

                        "~/Content/themes/base/jquery.ui.theme.css"));

        }

這樣作的好處是能夠 相似與將樣式,腳本多個打包引用,以這種方式能夠提升性能.(加載,訪問)

 

有關 Bundling 的詳細信息，請訪問 http://go.microsoft.com/fwlink/?LinkId=254725

 

 

第三步:

 

界面調用 JS設定 方法很簡單

 

$("須要調用的控件的ID").datepicker();便可如

 

<script>

    $(function () {

        $("#dateReceiptTenders_T").datepicker();

    });

 

 

</script>

界面控件

 

<div class="editor-label">

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

        </div>

        <div class="editor-field">

            @Html.EditorFor(model => model.dateReceiptTenders_T)

            @Html.ValidationMessageFor(model => model.dateReceiptTenders_T)

        </div>

而後運行項目便可.

 

 

備註:補充由於第二 有些主題樣式要去官方下載,官方是英文的幫助下,E文不太好,和基礎不紮實的孩子.

 

輸入www.jqueryui.com

 

在左側看見"Widgets" 即部件,控件

 

而後下面就是控件了,咱們要用的是日期控件因此點 "Datepicker" 日期選擇器 

 

而後下面就是 案例了點擊 view source (查看源代碼)  最簡單方法就是把代碼拷貝出來 ,而後新建個文本文檔把代碼放進去,改後綴名爲. html 就能夠看到效果

 

和官方的一摸同樣的

 

 

 

主題用法:

 

點擊選項卡"themes" 

 

點擊左邊的圖庫 gallery 選擇好本身喜歡的樣式後 下載到本地

 

將jquery-ui-1.10.3.custom\css\redmond\jquery-ui-1.10.3.custom.css 拷貝到項目中並引用

 

<link href="~/Content/themes/css/redmond/jquery-ui-1.10.3.custom.css" rel="stylesheet" />  @*jquerui 樣式主題*@

便可看到效果

 

 

 

其餘使用說明,下載的主題包中根目錄下面有

 

index.html 點擊便可看到 所用使用用法和幫助文檔,而後慢慢翻譯吧