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 點擊即可看到 所用使用用法和幫助文檔,然後慢慢翻譯吧
