• 动态调用样式表代码[转]


    文章使用了多种动态调用样式表的方法。首先你可以学习到如何使用JavaScript代码来动态调用的方法,
    然后我们会探索如何从数据库中读取样式表代码。文章还提供了一些技巧来进一步提高样式表代码。
    还提供了一个完整的示例程序和有关源码。

    说明
         许多的人都想实现在用户登陆后的页面拥有自己的样式。我的做法是:首先我在数据库中存储了许多的样式代码,然后将他们拷贝、粘贴到内容的样式表中。然后我从数据库中读取出数据,讲数据赋值给变量,插入到我的动态页面中。

    1)动态调用JavaScript代码。    
         动态调用JavaScript代码有两种有效方法。
    Listing 
    1 
    Page.ClientScript.RegisterStartupScript(GetType(Page), 
    "item1", script)

    Listing 
    2
    ScriptManager.RegisterClientScriptBlock(Page, GetType(Page), 
    "item1", script, True)

    如果你创建的是AJAX enabled website或者使用了ScriptManager时,使用该方法。

    Listing 
    3
    <asp:ScriptManager ID="ScriptManager1" runat="server">
    </asp:ScriptManager>

    两种方法不同的是,第一种方法是将Script代码输出到页面的最下面。第二种方法是讲代码输出到
    <BODY>标签后面。
    第二种不同的是,第一种方法是必须在代码中增加一个
    <script>标签,第二种方法会自动为你添加标签。

    假设我的代码就像下面这样。

    Listing 
    4

    protected void Page_Load(object sender, EventArgs e)
    {
        
    string script = "";
        
    if(!IsPostBack)
        
    {
            script 
    = @"<script type='text/javascript'><!-- alert('Alert message two'); --></script>";
            Page.ClientScript.RegisterStartupScript(GetType(Page), 
    "focus4", script);

            script 
    = @"alert('Alert message one');";
                        ScriptManager.RegisterClientScriptBlock(Page, GetType(Page), 
    "item11", script, True)
        }

    }


    然后我们有两个文本框;第一个消息框显示
    "alert message one",虽然它第二个调用。
    并且我们把第二个文本框显示为
    "Alert message two"
    你可能会把你的提示信息硬编码在页面的
    <BODY>内。


    Listing 
    5

    <script type="text/javascript">
    <!--
    alert(
    'in between');
     
    -->
    </script>
    这个消息将会显示在第一个方法和第二个方法的中间。并且这个消息框将使用该代码在页面加载的时候弹出来。

    Listing 
    6

    Page.ClientScript.RegisterStartupScript

    这个方法调用的消息框执行页面加载后,在Listing 
    7 之前弹出。

    Listing 
    7

    ScriptManager.RegisterClientScriptBlock

    第三种执行动态执行你的代码的方式是这样。

    Listing 
    8
    <head>
    <title><% =titelpage%></title>
    <% =MyNewStyle%>
    </head>
    该代码是在页面中必须填充变量MyNewStyle。

    Listing 
    9

        
    protected string MyNewStyle = "";
        
    protected string titlepagina = "";
        
    protected void Page_Load(object sender, EventArgs e)
        
    {
            titelpagina 
    = "new title";
            MyNewStyle 
    = @"<style type='text/css'>TD{color:orange;border:1;" +
                
    @"border-color:black;border-style:solid;}</style>";
        }

    这是一种简单的动态填充样式的方法。

    2)执行一个样式

    你将知道在你的页面中的
    <HEAD>标签内执行一个样式或者一个样式表。

    Listing 
    10

    <head>
    <style type="text/css">
        TD
    {}{color:Navy;
        border:
    10;
        border
    -color:green;
        border
    -style:solid;}

    </style>
    </head>

    如果我用先前例子中的Javascript代码为样式表代码,将会发生什么?

    Listing 
    11

    script 
    = @"<style type=""text/css"">TD{color:Navy;border:10;" +
      
    @"border-color:red;border-style:solid;}</style>";
    Page.ClientScript.RegisterStartupScript(GetType(Page), 
    "focus5", script);

    应为ScriptManager要自动添加
    <javascript>标签到你的代码(在样式代码开始处加</script>),
    你必须首先闭合
    <javascript>标签代码,(在样式代码后加<script>
    然后插入你的样式,再从新开始
    <javascript>标签代码。

    Listing 
    12

    script 
    = @"<style type=""text/css"">TD{color:Navy;border:20;" +  
                
    @"border-color:blue;border-style:solid;}</style>";
    script2 
    = @"--></script>" + script + @"<script type=""text/javascript""><!--";
    ScriptManager.RegisterClientScriptBlock(Page, GetType(Page), 
    "tekst", script2, True)

    万一你同时用了Listing 13方法

    Listing 
    13

    ScriptManager.RegisterClientScriptBlock

    和Listing 14方法

    Listing 
    14

    Page.ClientScript.RegisterStartupScript 

    那么最后一个方法将会重写前一个方法,因为最后一个方法是在页面的最后执行。
    使用这个你可以实现你想要的东西。
    你甚至可以去改变页面的标题,你也可以执行样式表。
    你想要从代码执行
    <head>标签,必须先删除掉你的<head>静态HTML标签代码。

    Listing 
    15

    Dim script4 
    as String
    Dim MyNewTitle 
    as Sring = "item4"
    Dim MyStyleSheet 
    as String = "Croon.css"
     
    script4 
    = vbCrLf & vbCrLf & "style sheet and title to " & _
    MyNewTitle 
    & "<BR/><head runat=""server""><title>" & _
    MyNewTitle 
    & "</title><link href=" & _
    MyStyleSheet 
    & " rel=""stylesheet"" type=""text/css"" /></head>"
     
    Page.ClientScript.RegisterStartupScript(GetType(Page), 
    "item8", script4)

    来自于数据库的样式代码。

    我假设你知道如何从数据库中取出数据。
    假设我们的普通css样式包含Listing 
    16

    Listing 
    16

    BODY
    {background-color:Orange;color:Aqua;} 
    TABLE
    {border:1;border-style:solid;}  
    TD
    {color:Navy;}

    我改变成 Listing 
    17

    Listing 
    17

    <style type='text/css'>
    BODY
    {background-color:Orange;color:Aqua;} 
    TABLE
    {border:1;border-style:solid;}  
    TD
    {color:Navy;}
    </style>

    首先选择这个文本,拷贝他并且粘贴到数据的一个字段中。
    然后在代码中填充script变量。

    Listing 
    18

    Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) _
     Handles Me.Load
      Dim script As String
      If Not Page.IsPostBack Then
       script 
    = READ THE DATA FROM THE DATABASE
       Page.ClientScript.RegisterStartupScript(GetType(Page), 
    "focus5", script)
       script2 
    = "--></script>" & script & "<script type=""text/javascript""><!--"
       ScriptManager.RegisterClientScriptBlock(Page, GetType(Page), 
    "tekst", script2,
       True)
     End If 
    End sub

    改变样式的另一个方法。

    如果你想要转变另一个样式,你可能使用像调用styleswitch.js文件的Javascript代码.
    如果你有许多的客户端,他们都想拥有自己的样式表,这样的工作会变的不清楚。

    改变你的页面外观的第二种方法可能就是动态的Javascript代码,就像

    document.body.style.backgroundColor
    ='red';"

    但是你怎么在多个客户端之间开呢?每一个客户也许都有自己的颜色。
    你必须知道每一个适当的Javascript控制代码,并且必须知道如何动态的调用它。

    主页面

    Listing 
    19

    BODY
          
    {
          border: 
    0;
          border
    -style:solid;
          font
    -size:small;
          font
    -family:verdana;
          background
    -color:yellow;
          }


    并且附加上我的HTML代码

    Listing 
    20

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
    <html xmlns="http://www.w3.org/1999/xhtml">
        
    <head id="HEAD1"><title>Telefoon applicatie </title>
        
    <link href="Croon.css" rel="stylesheet" type="text/css" />
        
    </head>

    我创建了一个main.aspx页面,一个ASP.NET Ajax enabled website,并且插入了一个ScriptManager在我的页面中。
    其次,我插入了一个我通常的样式表的参照。
    全部的HTML代码如下

    Listing 
    21

    <%@ Page Language="VB" AutoEventWireup="true" CodeFile="Default.aspx.vb" 
    Inherits
    ="_Default"%>
    <span style='background:yellow'> </span>
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" 
    "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
        
    <title>Untitled Page</title>
            
    <link href="Croon.css" rel="stylesheet" type="text/css" />
    </head>
    <body>
        
    <form id="form1" runat="server">
            
    <asp:ScriptManager ID="ScriptManager1" runat="server" />
            
    <div>This text would be in Verdana from the normal style sheet. 
    I changed it dynamically 
    in Courier.
                
    &nbsp;</div>
        
    </form>
    </body>
    </html>

    在代码后台我放入

    Listing 
    22

    Partial Class _Default
        Inherits System.Web.UI.Page
     
        Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) _
          Handles Me.Load
            Dim script1 As String
    'Session("StijlScript")用来填充你想要的方式。
    '
    这篇文章我填充文本。
            HttpContext.Current.Session("StijlScript"= "<style type='text/css'>" & _
                
    "BODY {" & _
                vbCrLf 
    & "    background-color: red;" & _
                vbCrLf 
    & "    font-family:courier;" & _
                vbCrLf 
    & "    font-weight:normal;" & _
                vbCrLf 
    & "    color:red;}" & _
                vbCrLf 
    & "</style>"
    '我插入了一个 vbCrLf 在页面。你也可以插入一个字符串。

    HttpContext.Current.Session(
    "StijlScript"= "<style type='text/css'>" & _
        
    "BODY{background-color: red;font-family:courier;" & _
        
    "font-weight:normal;color:red;}</style>"
    '然后合并起来

            script1 
    = vbCrLf & "--></script>" 'to end the javascript code
     
            script1 
    = script1 & vbCrLf & HttpContext.Current.Session("StijlScript")           
            script1 
    = script1 & vbCrLf & "<script type=""text/javascript""><!--"
    '执行它
      
      ScriptManager.RegisterClientScriptBlock(CType( _
      Page.FindControl(
    "scriptManager1"), Object), _
      CType(Page.FindControl(
    "scriptManager1"), Object).GetType, _
      
    "RefreshMap", script1, True)
    'RefreshMap是唯一名字,如果你想要在最后提交这个script。
        End Sub
    End Class

    Result

    页面是一个黄色背景,没有使用ScriptManager.RegisterClientScriptBlock.
    我动态的改变成红色。在MyCode中的每一项将会重写我的CSS样式。如果你不使用一个项,将会使用默认的CSS样式。

    原文地址

    第一次翻译文章,有些地方可能翻译的不好请谅解。也能希望高手们指点下翻译不对的地方。
  • 相关阅读:
    POJ 1269 Intersecting Lines(判断两条线段关系)
    POJ 3304 Segments(判断直线和线段相交)
    poj 1383 Labyrinth【迷宫bfs+树的直径】
    poj 2631 Roads in the North【树的直径裸题】
    poj 1985 Cow Marathon【树的直径裸题】
    hdoj 1596 find the safest road【最短路变形,求最大安全系数】
    hdoj 1260 Tickets【dp】
    poj 1564 Sum It Up【dfs+去重】
    2014 牡丹江现场赛 i题 (zoj 3827 Information Entropy)
    hdoj 2473 Junk-Mail Filter【并查集节点的删除】
  • 原文地址:https://www.cnblogs.com/ziyan22/p/1098904.html
Copyright © 2020-2023  润新知