zoukankan
html css js c++ java
动态调用样式表代码[转]
文章使用了多种动态调用样式表的方法。首先你可以学习到如何使用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样式。
原文地址
第一次翻译文章,有些地方可能翻译的不好请谅解。也能希望高手们指点下翻译不对的地方。
查看全文
相关阅读:
Android学习地址
Android动画设计源码地址
chromeWebBrowser之浏览器开发
win8.1蓝屏解决
打包应用程序
win8.1解决鼠标右键反应慢的问题
Rewrite服务器和robots文件屏蔽动态页面
第08组 Alpha事后诸葛亮
第08组 Alpha冲刺(6/6)
第08组 Alpha冲刺(5/6)
原文地址:https://www.cnblogs.com/ziyan22/p/1098904.html
最新文章
hadoop HDFS常用命令
大数据初入门
Hadoop大数据初入门----haddop伪分布式安装
dubbo 图片服务器(FastDFS) redis solr ActiveMQ等简单配置使用
Spring boot初入门
Flask结合Redis消息队列实现电影弹幕
pageHelper分页
Android
Android
Android
热门文章
Android
Android
Android
Android Service基础知识你知道多少?
Android
Android的Intent你知道多少?
Android四大组件framework层
hosts的设置,我们直接可以在下面路径找到hosts文件:C:WindowsSystem32driversetc
安卓图片压缩
为什么微信android图片质量会比iphone的差?
Copyright © 2011-2022 走看看