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. CodeForces 158 B. Taxi(模拟)

    [题目链接]click here~~ [题目大意]n组团体去包车,每组团体的人数<=4,一辆车最多容纳4人,求所求车的数目最小 [解题思路]:思路见代码~~ // C #ifndef _GLIB ...

  2. [AngualrJS] Using Angular-Cache for caching http request

    Check the website: https://jmdobry.github.io/angular-cache/#using-angular-cache-with-http Install: n ...

  3. 初步swift语言学习笔记9(OC与Swift杂)

    笔者:fengsh998 原文地址:http://blog.csdn.net/fengsh998/article/details/34440159 转载请注明出处 假设认为文章对你有所帮助,请通过留言 ...

  4. MP3文件结构及解码概述

    MP3文件结构概述 Layer-3音频文件.MPEG(MovingPicture Experts Group)在汉语中译为活动图像专家组,特指活动影音压缩标准,MPEG音频文件是MPEG1标准中的声音 ...

  5. js校验

    判空 function check(s) { return (s == null || typeof (s) == "undefined" || s == "" ...

  6. NFinal ajax

    AJAX返回 我们经常会用到ajax,当我们想返回json时,需要这样写. context.Response.ContentType="application/json"; con ...

  7. iOS-tableView点击下拉菜单

    #import "ViewController.h" @interface ViewController ()<UITableViewDataSource,UITableVi ...

  8. (转) ROS NAMING AND NAMESPACES

    原文地址:http://nootrix.com/2013/08/ros-namespaces/   In this tutorial, we will be talking about ROS nam ...

  9. JSON的parse()方法

    JSON方法也可以接受另外的一个参数,作为还原函数. 实例: var book = { title:"JavaScript Learn", author:["wang&q ...

  10. activiti笔记二:用户任务

    1, assignee 代替humanPerformer  功能 2, cadidateUsers代替potentialOwner功能 3, candidateGroups代替potentialOwn ...