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#实现下载功能,可用于软件自动更新

    以前在百度写的文档,转移到此处 软件截图: 代码下载: http://twzy.ys168.com/   在代码下载文件夹中 //代码: using System; using System.Comp ...

  2. FileSystemWatcher使用方法具体解释

    FileSystemWatcher控件主要功能: 监控指定文件或文件夹的文件的创建.删除.修改.重命名等活动.能够动态地定义须要监控的文件类型及文件属性修改的类型. 1.经常使用的几个基本属性: (1 ...

  3. git错误:fatal: Not a git repository (or any of the parent directories): .git

    git错误:fatal: Not a git repository (or any of the parent directories): .git 我用git add file添加文件时出现这样错误 ...

  4. Spring 反转控制(IOC) 依赖注入(DI)

    简单的理解: 之前是我为了完成业务A 需要某个对象B的支持 那么我在这个业务A中就会创建一个对象B使用,说白了就是我根据需求来控制对象B, 而spring的ioc把对象B的控制权从业务A手中拿到自己手 ...

  5. linux磁盘管理、新增磁盘、分区、挂载

    1. du -sh 查看目录.文件总大小 -a:全部文件与目录大小都列出来.如果不加任何选项和参数只列出目录(包含子目录)大小. -c:最后加总2. df -h 查看磁盘使用量3. lsblk 查看系 ...

  6. container宽度

    bootstrap:宽度太宽时无需改变container的宽度大小,只需:.row{margin-left: 30px;margin-right: 30px;}

  7. 简化工作——我的bat文件

    重启adb(radb.bat): @echo off call adb kill-server call adb start-server call adb remount push 一个apk(pu ...

  8. javaScript增加样式规则(新增样式)

    <html> <head> <link rel="stylesheet" type="text/css" href="b ...

  9. winsocket <研究了一天的成果>

    首先,这都是套路( ▼-▼ ) 头文件     #include <WinSock.h> #include <Winsock2.h> 用这个,这个是升级版 各个函数解释 1.W ...

  10. YUI的UA检测

    YUI.UA是针对javascript的宿主环境检测的一个检测对象,返回的是一系统关于当前宿主的信息 1.对象相关信息列表及userAgent 检测对象o = { ie: 0, //ie Mozill ...