MVC4 jquery 样式主题用法(案例)_综合

开发工具:VS2012

MVC版本:MVC4

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 点击即可看到所用使用用法和帮助文档,然后慢慢翻译吧

MVC4 jquery 样式 主题 用法(案例)

MVC4 jquery 样式主题用法(案例)