MVC4 jquery 样式 主题 用法(案例)
来源:互联网 发布:node-mysql模块 编辑:程序博客网 时间:2024/06/08 09:10
开发工具: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 样式 主题 用法(案例)
- 主题样式切换代码:jQuery Theme Switcher
- Drupal 7中应用jQuery UI样式和主题
- jQuery Mobile中主题theme样式a-z
- 主题:ListView(带图片)显示用法案例
- 样式和主题&自定义样式和主题
- 样式和主题 + 自定义样式和主题
- 样式和主题之样式
- Android样式与主题
- Android主题与样式
- Android主题与样式
- android 样式和主题
- flex---->样式和主题
- android样式与主题
- android主题跟样式
- 样式和主题
- android 中主题样式。
- Octopress在页面和内容中加入代码、图片、带标题图片方法
- 恭喜MrBen开通了CSDN博客
- Spider的URL检索算法
- 我的编码习惯
- SiteMesh的介绍用法及原理
- MVC4 jquery 样式 主题 用法(案例)
- Android Eclipse JNI 调用 .so文件加载问题
- Android系统框架
- android AsyncTask介绍
- 2.5 Picking the Date and Time with UIDatePicker
- Ubuntu12.04下Firefox浏览器安装12306证书
- Singleton小记
- cocos2d-x移植-adds2line.sh的使用篇
- RTP Packet