zoukankan      html  css  js  c++  java
  • 使用母版页时内容页如何使用css和javascript

    由于网站的主要频道页和列表页的头部和底部都是一样的,如果将每个页面放在单独的页面中,当头部和底部需要更改时维护量太大。于是想把头部和底部做成母版页,频道页和列表页的具体内容放到内容页中。这样当头和底需要改动时,只要修改一下母版页就可以了。

          好处有了,问题也接着来了。原来在频道页和列表页中有其各自的css引入和一些javascript函数,当使用母版页时,放在内容页中这些css样式和 javascript函数怎么处理呢?因为大家知道,使用母版页的内容页是不能包含<head></head>标记的,而css 和javascript函数的声明是要放到<head></head>中间的,这些css样式和javascript函数如何处 理呢?上网查了一下,大致有三种解决方案:方案一:把所有的css样式和javascript函数放到母版页的<head></head>中, 我觉得这样做的弊端就是导致母版页的<head></head>区特别臃肿,同时如果原来两个频道页中包含同名的css声明或 javascript函数,但却是不同样式或执行不同操作,怎么办呢?所以这第一种方案很快被我否定了。方案二是在内容页的PageLoad事件中通过代 码来指定本内容页的css文件。具体代码如下:

    static public class ControlHelper
    {
        static public void AddStyleSheet(Page page, string cssPath)
         {
             HtmlLink link = new HtmlLink();
             link.Href = cssPath;
             link.Attributes["rel"= "stylesheet";
             link.Attributes["type"= "text/css";
             page.Header.Controls.Add(link);
         }
    }


    这样,在具体页面,我们就可以通过如下代码添加 CSS 引用:

    protected void Page_Load(object sender, EventArgs e)
    {
         ControlHelper.AddStyleSheet(this.Page, "css/projectPage.css");    
    }

    这种解决方案的好处时可以在程序运行时动态更改所需的css文件,但是对javascript函数处理起来该怎么做呢?再说有必要把本该加在html代码中的css和javascript通过cs代码来加入吗?因此,这种解决方案也很快被我否定了。剩下的第三种解决方案就是在母版页的<head></head>中添加一个内容控件,然后在内容页中在对应的内容控件中写css和javascript代码。听起来这个这个解决方案应该是最方便,最适宜的解决方法。可是当我把ContentPlaceHolder控件拖放到<head></head中间时,vs2005却报了下面的错误:

    白天的时候,看到这我就以为这种方法行不通了,差点就放弃了。晚上回家想找找更好的解决方案,可所有的文章基本上都是说的前两种,对第三种解决方案有人说报错,不行。看来碰到这个提示后放弃的人还真不少。我没理这个错误,直接转到内容页,,在内容页中插入以下代码:

     
    看了一下,内容页中没有报错,看来有戏。可转到内容页的设计视图一看,出现了如下界面:
    心凉了一下,因为没看到我上面应用的css样式的效果,我的css文件的代码如下:
    #content
    {
         text-align:center;
         200px;
         height:100px;
        
         color:#FF0000;
         font-size:12px;
    }
    也就是让id为content的div宽度200px,高度100px,文字居中,背景颜色为为绿色,字体为红色,12px。不甘心的我按下了F5调试键,令人惊喜的一个画面出现了:
    这说明css应用成功了,同时也看到了那个测试可爱的hello world对话框alert了出来。成功了!

    总结一下,其实很多人开始的想法和我一样,想如何用最简单的方法实现在内容页中使用css和 javascript的功能。他们中的很多人可能也找到我找到的那篇文章,但是当碰到我的那个母版页中的错误提示后就放弃了,也许有人坚持到了第二步,可 是在设计视图中没看到css的应用效果后可能也放弃了。其实只要在坚持一下就成功了!余世维说的好“比别人多想一点,你就能成功!”,确实很有道理啊

  • 相关阅读:
    HUST 1372 marshmallow
    HUST 1371 Emergency relief
    CodeForces 629D Babaei and Birthday Cake
    CodeForces 629C Famil Door and Brackets
    ZOJ 3872 Beauty of Array
    ZOJ 3870 Team Formation
    HDU 5631 Rikka with Graph
    HDU 5630 Rikka with Chess
    CodeForces 626D Jerry's Protest
    【POJ 1964】 City Game
  • 原文地址:https://www.cnblogs.com/accumulater/p/6767138.html
Copyright © 2011-2022 走看看