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 点击即可看到 所用使用用法和帮助文档,然后慢慢翻译吧
- jQuery中的ajax用法案例
什么是 AJAX? AJAX = 异步 JavaScript 和 XML(Asynchronous JavaScript and XML). 简短地说,在不重载整个网页的情况下,AJAX 通过后台加载 ...
- android中的样式主题和国际化
一.Android中的样式和主题 1.1样式 样式是作用在控件上的,它是一个包含一个或者多个view控件属性的集合.android style类似网页设计中的css设计思路,可以让设计 ...
- 创建自定义 jQuery 移动主题
自定义页面.工具栏.内容.表单元素.列表.按钮等元素的外观 智能电话和平板设备的高采用率最终导致增加了对移动 Web 开发人员和设计师的需求.jQuery Mobile 框架支持您创建能与原生应用程序 ...
- 关于Jquery Ajax的用法
今天简单描述一下Jquery Ajax的用法,和我在使用过程中的一些看法,仅供自己娱乐和大家参考值之用! Jquery Ajax的重要性不言而喻,只从Jquery面世之后,终于解救了像我这种既做前台又 ...
- 【Android 应用开发】 ActionBar 样式具体解释 -- 样式 主题 简单介绍 Actionbar 的 icon logo 标题 菜单样式改动
作者 : 万境绝尘 (octopus_truth@163.com) 转载请著名出处 : http://blog.csdn.net/shulianghan/article/details/3926916 ...
- Jquery remove 高级用法
Jquery remove 高级用法 html 代码 <div class="file-image">abc1111</div><div class= ...
- jquery.cookie.js 用法
jquery.cookie.js 用法 一个轻量级的cookie 插件,可以读取.写入.删除 cookie. jquery.cookie.js 的配置 首先包含jQuery的库文件,在后面包含 j ...
- jQuery $.post $.ajax用法
jQuery $.post $.ajax用法 jQuery.post( url, [data], [callback], [type] ) :使用POST方式来进行异步请求 参数: url (Stri ...
- jQuery包裹节点用法完整示例
本文实例讲述了jQuery包裹节点用法.分享给大家供大家参考,具体如下: <html> <head> <meta http-equiv="Content-Typ ...
随机推荐
- CodeForces 158 B. Taxi(模拟)
[题目链接]click here~~ [题目大意]n组团体去包车,每组团体的人数<=4,一辆车最多容纳4人,求所求车的数目最小 [解题思路]:思路见代码~~ // C #ifndef _GLIB ...
- [AngualrJS] Using Angular-Cache for caching http request
Check the website: https://jmdobry.github.io/angular-cache/#using-angular-cache-with-http Install: n ...
- 初步swift语言学习笔记9(OC与Swift杂)
笔者:fengsh998 原文地址:http://blog.csdn.net/fengsh998/article/details/34440159 转载请注明出处 假设认为文章对你有所帮助,请通过留言 ...
- MP3文件结构及解码概述
MP3文件结构概述 Layer-3音频文件.MPEG(MovingPicture Experts Group)在汉语中译为活动图像专家组,特指活动影音压缩标准,MPEG音频文件是MPEG1标准中的声音 ...
- js校验
判空 function check(s) { return (s == null || typeof (s) == "undefined" || s == "" ...
- NFinal ajax
AJAX返回 我们经常会用到ajax,当我们想返回json时,需要这样写. context.Response.ContentType="application/json"; con ...
- iOS-tableView点击下拉菜单
#import "ViewController.h" @interface ViewController ()<UITableViewDataSource,UITableVi ...
- (转) ROS NAMING AND NAMESPACES
原文地址:http://nootrix.com/2013/08/ros-namespaces/ In this tutorial, we will be talking about ROS nam ...
- JSON的parse()方法
JSON方法也可以接受另外的一个参数,作为还原函数. 实例: var book = { title:"JavaScript Learn", author:["wang&q ...
- activiti笔记二:用户任务
1, assignee 代替humanPerformer 功能 2, cadidateUsers代替potentialOwner功能 3, candidateGroups代替potentialOwn ...