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 样式 主题 用法(案例)的更多相关文章

  1. jQuery中的ajax用法案例

    什么是 AJAX? AJAX = 异步 JavaScript 和 XML(Asynchronous JavaScript and XML). 简短地说,在不重载整个网页的情况下,AJAX 通过后台加载 ...

  2. android中的样式主题和国际化

    一.Android中的样式和主题     1.1样式     样式是作用在控件上的,它是一个包含一个或者多个view控件属性的集合.android style类似网页设计中的css设计思路,可以让设计 ...

  3. 创建自定义 jQuery 移动主题

    自定义页面.工具栏.内容.表单元素.列表.按钮等元素的外观 智能电话和平板设备的高采用率最终导致增加了对移动 Web 开发人员和设计师的需求.jQuery Mobile 框架支持您创建能与原生应用程序 ...

  4. 关于Jquery Ajax的用法

    今天简单描述一下Jquery Ajax的用法,和我在使用过程中的一些看法,仅供自己娱乐和大家参考值之用! Jquery Ajax的重要性不言而喻,只从Jquery面世之后,终于解救了像我这种既做前台又 ...

  5. 【Android 应用开发】 ActionBar 样式具体解释 -- 样式 主题 简单介绍 Actionbar 的 icon logo 标题 菜单样式改动

    作者 : 万境绝尘 (octopus_truth@163.com) 转载请著名出处 : http://blog.csdn.net/shulianghan/article/details/3926916 ...

  6. Jquery remove 高级用法

    Jquery remove 高级用法 html 代码 <div class="file-image">abc1111</div><div class= ...

  7. jquery.cookie.js 用法

    jquery.cookie.js 用法   一个轻量级的cookie 插件,可以读取.写入.删除 cookie. jquery.cookie.js 的配置 首先包含jQuery的库文件,在后面包含 j ...

  8. jQuery $.post $.ajax用法

    jQuery $.post $.ajax用法 jQuery.post( url, [data], [callback], [type] ) :使用POST方式来进行异步请求 参数: url (Stri ...

  9. jQuery包裹节点用法完整示例

    本文实例讲述了jQuery包裹节点用法.分享给大家供大家参考,具体如下: <html> <head> <meta http-equiv="Content-Typ ...

随机推荐

  1. How to uninstall (remove) JAVA from OS X Lion

    Open terminal (Applications -> Utilities -> Terminal) To remove JVM enter folowing: sudo rm -r ...

  2. Gradle Tips#1-tasks

    原文链接 以这篇博客開始,我将写一系列关于Gradle的文章,用来记录接触Gradle构建脚本以来我所理解的Gradle. 今天要讲的就是Gradle tasks以及task的配置和运行.可能有的读者 ...

  3. 【剑指offer】替换字符串中的空格

    转载请注明出处:http://blog.csdn.net/ns_code/article/details/25002199 剑指offer上的第四道题目,在九度OJ上測试通过,但还是有些问题.由于是用 ...

  4. UIImageView圆角,自适应图片宽高比例,图片拉伸,缩放比例和图片缩微图

    /*      设置圆角,通过layer中的cornerRadius和masksToBounds即可.            自适应图片宽高比例.通过UIViewContentModeScaleAsp ...

  5. NET基础课--开发工具实用功能

    1.浏览代码结构 类视图 2.重构功能 提取长的的方法体中的部分方法到单独函数中 路径:选择代码段,右击重构----提取方法 3.代码结构 a 代码对齐 点[编辑]-[高级]-[设置选定内容的格式] ...

  6. MVC View基础(转)

    View主要用于呈现数据.由于Controller和相关的Service已经处理完业务逻辑并将结果打包成model实体,View只需要怎么去获得model并将其转为Html 1选择需要渲染的视图 在上 ...

  7. ASP.NET中的Request和Respone对象的使用

            前台<body>中的表单代码: ASP.NET对象有如下几个: 本文从“asp.net中通过from表单submit提交到后台的实例”来谈谈Request和Response ...

  8. pca图像识别

    代码下载:基于PCA(主成分分析)的人脸识别 人脸识别是一个有监督学习过程,首先利用训练集构造一个人脸模型,然后将测试集与训练集进行匹配,找到与之对应的训练集头像.最容易的方式是直接利用欧式距离计算测 ...

  9. CSS3实现时间表

    一直想学CSS3,今天别的论坛看到的例子,挺好,mark起来以后自己看. <!doctype html> <html> <head> <meta charse ...

  10. JS多选日期

    项目需要一个可以选择多个日期的日期选择框,从网上找到一个单选的选择框源码 (http://blog.5d.cn/user2/samuel/200503/61881.html),修改成可以多选. 使用方 ...