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. c++之 scanf 接收用户输入内容

    该代码全部在Visual Studio 2015中编写,有关VS2015的安装后期在写相关的博客 scanf 介绍 在程序开发中,有时候需要通过获取用户输入的数据,进行对应的操作,scanf就是用来接 ...

  2. mycat实例(3)

    配置MyCat 4. 配置schema.xml schema.xml里面管理着MyCat的逻辑库.表,每张表使用的分片规则.分布在哪个DataNode以及DataSource上. 之前的例子: < ...

  3. C++: int和string相互转换

    假设在一个C++的程序中常常会用到int和string之间的互换.个人建议能够写成一个函数,下次用的时候直接调用就可以. #include <iostream> #include < ...

  4. Java之Static静态修饰符详解

    Java之Static静态修饰符详解 Java之Static静态修饰符详解 一.特点 1.随着类的加载而加载,随着类的消失而消失,生命周期最长 2.优先于对象存在 3.被所有类的对象共享 4.可以直接 ...

  5. 10. 混淆矩阵、总体分类精度、Kappa系数

    一.前言 表征分类精度的指标有很多,其中最常用的就是利用混淆矩阵.总体分类精度以及Kappa系数. 其中混淆矩阵能够很清楚的看到每个地物正确分类的个数以及被错分的类别和个数.但是,混淆矩阵并不能一眼就 ...

  6. linux上备份Oracle时EXP-00091的错误解决方法

    unix/linux上备份Oracle时EXP-00091的错误解决方法 unix/linux上备份数据时的错误解决方法 EXP-00091: Exporting questionable stati ...

  7. 关于css的优先级

    样式的优先级 外部样式 < 内部样式 < 内联样式 选择器的优先权 解释: 1.  内联样式表的权值最高 1000: 2.  ID 选择器的权值为 100; 3.  Class 类选择器的 ...

  8. c++设计模式之观察者模式

    概念:定义对象间的一种一对多的依赖关系,当一个对象的状态发生改变时,所有依赖于它的对象都得到通知并被自动更新. 通常讲就是被观察者向左右观察对象通知其状态的改变,以使得观察者进行相应信息的更新. 代码 ...

  9. postman接口测试工具3.0版本的坑

    今天用postman接口测试工具3.0版本被坑,找了半天,原来postman这个新版本有个坑啊 下面的get参数,第一行不管你填不填,都是无效的,可能是postman的一个bug吧

  10. Python即时网络爬虫项目: 内容提取器的定义(Python2.7版本)

    1. 项目背景 在Python即时网络爬虫项目启动说明中我们讨论一个数字:程序员浪费在调测内容提取规则上的时间太多了(见上图),从而我们发起了这个项目,把程序员从繁琐的调测规则中解放出来,投入到更高端 ...