使用Ajax实现换肤功能

wapysun

浏览: 21489981 次
性别:
来自: 杭州

最近访客更多访客>>

devcang

hunankeda110

辽东小小

apex53

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

2012-06 ( 77)
2012-05 ( 587)
2012-04 ( 177)
更多存档...

Ajax ASP ASP.net CSS JavaScript

网站换肤是经常要用到的一个功能，但是传统的方式似乎有点瑕疵，本文实现的Ajax换肤有点类似ＭＳＮＳｐａｃｅ中的用户体验。

　功能：点击linkbutton,在网页中央弹出一个radio单选框，同时背景变成灰色，选择这个单选框的选项，实现换肤功能。

这主要是ModalPopupExtender控件提供的功能，控件设置如下:

<ajaxToolkit:ModalPopupExtenderID="ModalPopupExtender1"runat="server"TargetControlID="LinkButton1"PopupControlID="Panel1"BackgroundCssClass="modalBackground"DropShadow="true"OkControlID="OkButton"CancelControlID="CancelButton"OnOkScript="onOk()">

</ajaxToolkit:ModalPopupExtender>

TargetControlID:关联触发按钮； PopupControlID：弹出的单选框，一般使用panel; BackgroundCssClass:弹出单选框后的背景色； DropShadow：弹出单选框后是否需要阴影； OkControlID：关联确定按钮； CancelControlID；关联取消按钮； OnOkScript：关联选择后应该执行的脚本。

其中onOk(),是响应Javascript的代码，使用一个变量来替代css样式。

以下是整个前台代码：

<%@PageLanguage="C#"AutoEventWireup="true"CodeFile="changeCSS.aspx.cs"Inherits="changeCSS"%>

<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<htmlxmlns="http://www.w3.org/1999/xhtml">

<headrunat="server">

<linkhref="StyleSheet.css"rel="stylesheet"type="text/css"/>

<scripttype="text/javascript">

varstyleToSelect;

functiononOk()

{

document.getElementById('Paragraph1').className=styleToSelect;

}

</script>

</head>

<body>

<formid="form1"runat="server">

<div>

<asp:ScriptManagerID="ScriptManager1"runat="server">

</asp:ScriptManager>

</div>

<asp:LinkButtonID="LinkButton1"runat="server"Width="240px">Pleasechangethestyle</asp:LinkButton>

<pid=Paragraph1>

<ahref="http://blog.csdn.net/burningcpu"><spanstyle="color:#3366cc">burningcpu</span></a>,

IamZhouLu,amemeberofShangHaiIscom.netteam,lovesoftwaredevelopment,enjoyit.

</p>

<asp:PanelID="Panel1"runat="server"CssClass="modalPopup"Style="display:none"Width="233px">

<p>Choosethestyleyouwouldlike</p>

<inputid="RadioA"name="Radio"onclick="styleToSelect='sampleStyleA';"type="radio"/>

<labelclass="sampleStyleA"for="RadioA">

ChooseTHISStyle.</label><br/>

<inputid="RadioB"name="Radio"onclick="styleToSelect='sampleStyleB';"type="radio"/>

<labelclass="sampleStyleB"for="RadioB">

ChooseTHISStyle.</label><br/>

<inputid="RadioC"name="Radio"onclick="styleToSelect='sampleStyleC';"type="radio"/>

<labelclass="sampleStyleC"for="RadioC">

ChooseTHISStyle.</label><br/>

<inputid="RadioD"name="Radio"onclick="styleToSelect='sampleStyleD';"type="radio"/>

<labelclass="sampleStyleD"for="RadioD">

ChooseTHISStyle.</label><br/>

<divalign="center">

<asp:ButtonID="OkButton"runat="server"Text="OK"/>

<asp:ButtonID="CancelButton"runat="server"Text="Cancel"/>

</div>

</asp:Panel>

</ajaxToolkit:ModalPopupExtender>

</form>

</body>

</html>

实现效果：

分享到：

如何在ASP.NET下遍历指定页面上所有控件 | ASP.NET 2.0中实现模板中的数据绑定

2007-10-23 14:31
浏览 849
评论(0)
查看更多

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论