16116人阅读
.NET MVC（26）
1.如何在页面中添加Js和CSS文件。
我们只需要在模板页中添加JS和CSS文件，然后子页面调用模板页即可。
& & ViewBag.Title = &用户注册&;
& & Layout = &~/Views/Shared/_Layout.cshtml&;
第二句话便是指定该页面的模板页。我们只需要在模板页中进行js和css的引用。
下面来看_Layout.cshtml的代码。
@Styles.Render(&~/Css&)
@Scripts.Render(&~/bundles/modernizr&)
@Scripts.Render(&~/bundles/jquery&)
@RenderSection(&scripts&, required: false)
第一条的作用是引入了一个捆绑的css文件，第二个引入一个捆绑的modernizr文件，modernizr是一个javascript文件库，它主要作用是为了兼容各类浏览器之间的差异。第三条语句引入一个捆绑的jquery文件。第四条语句@renderSection的作用是在模板页中占用一个位置，这个位置的名字就叫做scripts，然后让用户在子页面中去呈现这个叫做scripts的Section。false的意思是在子页面中并不要求一定要实现这个Section的呈现。关于@RenderSection的更多知识，可以参考这里。
值得注意的是，这些引用语句中的路径并不是真实在我们项目文件中的路径，比如我们的项目中并没有~/Css、~、bundles/modernizr这样的文件。那么文件到底在什么地方呢？
是通过App_start中的BundleConfig.cs来设置的。打开App_start中的Bundleconfig.cs文件，可以看到如下代码：
public class BundleConfig
// 有关 Bundling 的详细信息，请访问 /fwlink/?LinkId=254725
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&, &~/Scripts/jquery.ui.datepicker-zh-CN.js&, &~/Scripts/jquery.layout-latest.js&));
bundles.Add(new ScriptBundle(&~/bundles/jqueryval&).Include(
&~/Scripts/jquery.unobtrusive*&,
&~/Scripts/jquery.validate*&));
bundles.Add(new ScriptBundle(&~/bundles/kindeditor&).Include(
&~/Scripts/kindeditor/kindeditor-min.js&, &~/Scripts/kindeditor/lang/zh_CN.js&));
bundles.Add(new ScriptBundle(&~/bundles/ztree&).Include(
&~/Scripts/Ztree/jquery.ztree.core-{version}.js&));
// 使用 Modernizr 的开发版本进行开发和了解信息。然后，当你做好
// 生产准备时，请使用
上的生成工具来仅选择所需的测试。
bundles.Add(new ScriptBundle(&~/bundles/modernizr&).Include(
&~/Scripts/modernizr-*&));
bundles.Add(new StyleBundle(&~/Css&).Include(&~/Content/Default/Style.css&));
bundles.Add(new StyleBundle(&~/UserCss&).Include(&~/Content/Default/User/Style.css&));
//bundles.Add(new StyleBundle(&~/AdminCss&).Include(&~/Content/Admin/Style.css&));
//bundles.Add(new StyleBundle(&~/EasyUi/icon&).Include(&~/Scripts/EasyUi/themes/icon.css&));
bundles.Add(new StyleBundle(&~/JqueryUiMetro&).Include(&~/Content/JqueryUi/Metro/jquery-ui-{version}.css&));
bundles.Add(new StyleBundle(&~/ZtreeCss&).Include(&~/Content/zTree/Default.css&));
bundles.Add(new StyleBundle(&~/Css/Admin&).Include(&~/Areas/Admin/Content/Style.css&));
//bundles.Add(new StyleBundle(&~/Css/Admin/Easyui&).Include(&~/Areas/Admin/Content/Easyui/icon.css&, &~/Areas/Admin/Content/Easyui/metro-blue/easyui.css&));
看了上面的代码，应该很容易明白bundles的运行机制，new ScriptBundle().include().前面的括号里的路径是虚拟路径，而后面的是真实的路径，我们发现，真实路径里的有时候并不一定只是一个文件，还有可能是一个文件组。比如 bundles.Add(new ScriptBundle(&~/bundles/jQuery&).Include(&~/Scripts/jquery-{version}.js&));
绑定的就是各个版本的jquery。
这样，假如我们的一个页面引用了模板页，那么这个页面也就引用了模板页中添加的CSS和Jquery文件。我们来看看页面运行后的源文件。
&link href=&/Content/Default/Style.css& rel=&stylesheet&/&
&script src=&/Scripts/modernizr-2.6.2.js&&&/script&
&script src=&/Scripts/jquery-2.0.3.js&&&/script&
这是页面源文件，可以看到css和js文件都已经添加进去了。
另外，因为我们子页面中有一句：
@section Scripts {
@Scripts.Render(&~/bundles/jqueryval&)
}这一句通过@Scripts.Render(&~/bundles/jqueryval&)来填充模板页中的@RenderSection部分，所以我们还引用了虚拟路径为~/bundles/jqueryval的脚本文件。
所以，网页的源文件里，还有下面几句。
& & &script src=&/Scripts/jquery.unobtrusive-ajax.js&&&/script&
&script src=&/Scripts/jquery.validate.js&&&/script&
&script src=&/Scripts/jquery.validate.unobtrusive.js&&&/script&
只要看看bundle.cs的源码就可以知道是为什么了。
bundles.Add(new ScriptBundle(&~/bundles/jqueryval&).Include(
&~/Scripts/jquery.unobtrusive*&,
&~/Scripts/jquery.validate*&));这两句指定了所添加的文件是
&~/Scripts/jquery.unobtrusive*&和&pre code_snippet_id=&463872& snippet_file_name=&blog__3751162& name=&code& class=&html&&&~/Scripts/jquery.validate*&
这两个文件中包含了源文件中所列出的那三个文件。*的意思应该是指这类文件的集合。
参考知识库
* 以上用户言论只代表其个人观点，不代表CSDN网站的观点或立场
访问：78670次
积分：1098
积分：1098
排名：千里之外
原创：34篇
转载：52篇
(9)(2)(1)(2)(35)(6)(1)(2)(2)(1)(2)(8)(15)js与css实现弹出层覆盖整个页面的方法
投稿：shichen2014
字体：[ ] 类型：转载 时间：
这篇文章主要介绍了js与css实现弹出层覆盖整个页面的方法,分别以实例形式展示了弹出层覆盖整个页面的css样式与js控制的实现技巧,非常具有实用价值,需要的朋友可以参考下
本文实例讲述了js与css实现弹出层覆盖整个页面的方法。分享给大家供大家参考。具体实现方法如下：
弹出层透明背景加框的常用样式和结构如下:
代码如下:.alertMessageBg{
_position:
width:100%;
height:100%;
background:#000;
opacity:0.5;
-moz-opacity:0.5;
filter:alpha(opacity=50);
z-index:97;
.alertMessageDivBorder{
_position:
height:370
margin:-185px 0 0 -375
background:#000;
filter:alpha(opacity=30);
-moz-opacity:0.3;
opacity:0.3;
z-index:98;
.alertMessageDiv{
_position:
height:350
margin:-175px 0 0 -365
background:#
z-index:99;
font-size:14
&div class="alertMessageBg"&&/div&
&div class="alertMessageDivBorder"&&/div&
&div class="alertMessageDiv"&&/div&
弹出层背景覆盖整个网页的方法
代码如下:.alertMessageBg{
_position:
width:100%;
height:100%;
background:#000;
opacity:0.5;
-moz-opacity:0.5;
filter:alpha(opacity=50);
z-index:97;
代码如下:.alertMessageBg{
width:100%;
height:100%;
background:#000;
opacity:0.5;
-moz-opacity:0.5;
filter:alpha(opacity=50);
z-index:97;
var bgWidth = document.body.clientWidth + 'px',
　　bgHeight = document.body.clientHeight + 'px',
　　alertBgNode = $('.alertMessageBg');
alertBgNode.css({'width':bgWidth,'height':bgHeight});
对比以上两种方法，显然css方法更省事，尤其在不用兼容ie6的现在。
希望本文所述对大家基于JS的web程序设计有所帮助。
您可能感兴趣的文章:
大家感兴趣的内容
12345678910
最近更新的内容
常用在线小工具Javascript 是一种由Netscape的LiveScript发展而来的原型化继承的基于对象的动态类型的区分大小写的客户端脚本语言，主要目的是为了解决服务器端语言，比如Perl，遗留的速度问题，为客户提供更流畅的浏览效果。
这篇文章主要介绍了嵌入式iframe子页面与父页面js通信的方法,实例分析了嵌入式iframe子页面与父页面js通信的常用技巧,非常具有实用价值,需要的朋友可以参考下
本文实例讲述了嵌入式iframe子页面与父页面js通信的方法。分享给大家供大家参考。具体分析如下：
iframe框架中的页面与主页面之间的通信方式根据iframe中src属性是同域链接还是跨域链接，有明显不同的通信方式，同域下的数据交换和DOM元素互访就简单的多了，而跨域的则需要一些巧妙的方式来实现通信。
一、同域下父子页面的通信
父页面 parent.html：
&script type="text/javascript"&
function say() {
alert("parent.html------&I'm at parent.html");
function callChild()
//document.frames["myFrame"].window.say();//只适用于ie浏览器
myFrame.window.say();
myFrame.window.document.getElementById("button").value="我变了";
&input type=button value="调用child.html中的函数say()" onclick="callChild()"&
&iframe name="myFrame" src="child.html"&&/iframe&
子页面 child.html：
&script type="text/javascript"&
function say()
alert("child.html---&I'm at child.html");
function callParent() {
parent.say();
parent.window.document.getElementsByName("myFrame")[0].style.height="100px";
&input id="button" type=button value="调用parent.html中的say()函数" onclick="callParent()"&
如上面示例所示父页面调用子页面的方法可通过：FrameName.window.childMethod();(这种方式兼容各种浏览器)
子页面调用父页面的方法：parent.window.parentMethod();
DOM元素访问
根据FrameName.window得到了子窗口对象之后，再访问其中的DOM元素就跟访问同一页面中的DOM元素没区别了都可以通过document.getElementById(),document.getElementsByName()[index]如：parent.window.document.getElementsByName("myFrame")[0];
myFrame.window.document.getElementById("button")其中的window都是可以省略的。
要确保在Iframe加载完成后再进行操作，如果Iframe还未加载完成就开始调用里面的方法或变量，无疑会产生错误。判断Iframe是否加载完毕有两种方法：
1.在Iframe上用onload事件;
2.用document.readyState=="complete"来判断
二、跨域父子页面通信方法
如果iframe所链接的是外部页面，因为安全机制则不能使用同域名下的通信方式了。
父页面向子页面传递数据
实现的技巧就是利用 location 对象的 hash 值，通过它传递通信数据，我们只需要在父页面设置 iframe的 src 后面多加个#data 字符串（data就是你要传递的数据），然后在 子页面 中通过某种方式能即时的获取到这儿 data 就可以了，其实常用的一种方式就是：
1. 在 子页面 中通过 setInterval 方法设置定时器， 监听 location.href 的变化即可获得上面的 data 信息
2. 然后 子页面 就能根据这个 data 信息进行相应的逻辑处理。
子页面向父页面传递数据
实现的技巧就是利用一个代理 Iframe C，它嵌入到 子页面中，并且和父页面必须保持是同域，然后我们通过它充分利用上面第一种通信方式的实现原理就能把 子页面的数据传递给 iframeC，接下来的问题就是怎么让iframeC把数据传递给主页面A ，因为，iframeC 和主页面是同域的，所以它们之间传递数据就变得简单多了，属于同域名下的通信问题了，如前面所讨论的，在这里的可以使用一个经常使用的属性 window.top (也可以使用window.parent.parent)，它返回对载入浏览器得最顶层 window 对象的引用，这样我们就能直接条用父页面中方法啦。
希望本文所述对大家的javascript程序设计有所帮助。
Copyright &
All Rights Reserved &&&&&&我在工作中刚遇到一个关于一个主html在不同终端下引入不同的html页面css样式js等的问题，下面我把它的实现方法分享给大家。
分别新建移动端和PC端需要的html文件(这里就以html文件格式命名)
mobile-index.html代码如下：
&h1&这是移动端页面&/h1&
pc-index.html代码如下：
&h1&这是pc端页面&/h1&
mobile.css代码如下：
background-color: #0f0ff0;
pc.css代码如下：
background-color: #ff0;
color: #f00;
最后就是重点了：
新建一个index.html文件代码如下：
1 &!DOCTYPE html&
2 &html lang="zh-cn"&
&meta charset="UTF-8"&
&meta name="viewport" content="width=device-width, initial-scale=1"&
&title&一个页面实现pc端和移动端访问不同页面&/title&
&script src="/jquery-1.11.2.min.js"&&/script&
10 &script type="text/javascript"&
/*根据不同的客户端(这里指移动端和pc端)引入样式*/
var includeLinkStyle = function (url) {
var link = document.createElement('link');
link.rel = 'stylesheet';
link.type = 'text/css';
link.href =
document.getElementsByTagName('head')[0].appendChild(link);
var browserRedirect = function () {
/* 判断是pc端还是移动端
网上有很多，我只用其中一种演示*/
var sUserAgent = navigator.userAgent.toLowerCase();
var bIsIpad = sUserAgent.match(/ipad/i) == "ipad";
var bIsIphoneOs = sUserAgent.match(/iphone os/i) == "iphone os";
var bIsMidp = sUserAgent.match(/midp/i) == "midp";
var bIsUc7 = sUserAgent.match(/rv:1.2.3.4/i) == "rv:1.2.3.4";
var bIsUc = sUserAgent.match(/ucweb/i) == "ucweb";
var bIsAndroid = sUserAgent.match(/android/i) == "android";
var bIsCE = sUserAgent.match(/windows ce/i) == "windows ce";
var bIsWM = sUserAgent.match(/windows mobile/i) == "windows mobile";
/* 根据不同的客户端引入样以及加载页面 */
if (bIsIpad || bIsIphoneOs || bIsMidp || bIsUc7 || bIsUc || bIsAndroid || bIsCE || bIsWM) {
console.log("phone");
/*includeLinkStyle("样式地址");*/
includeLinkStyle("mobile.css");
$('body').load('mobile-index.html');
console.log("pc");
includeLinkStyle("pc.css");
$('body').load('pc-index.html');
browserRedirect();
43 &/script&
44 &/body&
45 &/html&
好了，这就是全部过程，是不是感觉很简单。不用怀疑，就是这么简单。
感谢阅读，欢迎交流！
本文为原创文章，会经常更新知识点以及修正一些错误，因此转载请保留原出处，以避免陈旧错误知识的误导。
本文地址：&
阅读(...) 评论()下次自动登录
现在的位置:
& 综合 & 正文
利用JS从父页面给IFRAME的子页面调用CSS样式文件。
Code&html&&head&&link href="main.css" rel="stylesheet" type="text/css"&&script&function aaa(){left.document.getElementsByTagName("link")[<span style="COLOR: #].href="top.css";}
&/script&&/head&&body onload="aaa();"&&iframe name="top" src="top.html"&&/iframe&
&iframe name="left" src="left.html"&&/iframe&
&iframe name="right" src="right.html"&&/iframe&
&/body&&/html&
&&&&推荐文章:
【上篇】【下篇】}