使用Ajax实现换肤功能

转载 2007年09月25日 21:58:00
网站换肤是经常要用到的一个功能,但是传统的方式似乎有点瑕疵,本文实现的Ajax换肤有点类似MSNSpace中的用户体验。

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

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

<ajaxToolkit:ModalPopupExtender ID="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样式。

    以下是整个前台代码:

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

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
    
<title>无标题页</title>
    
<link href="StyleSheet.css" rel="stylesheet" type="text/css" />
    
<script type="text/javascript">
var styleToSelect;
function onOk()
{
  document.getElementById(
'Paragraph1').className = styleToSelect;
}

</script>
</head>
<body>
    
<form id="form1" runat="server">
    
<div>
        
<asp:ScriptManager ID="ScriptManager1" runat="server">
        
</asp:ScriptManager>
    
    
</div>
        
<asp:LinkButton ID="LinkButton1" runat="server" Width="240px">Please change the style</asp:LinkButton>
        
<id=Paragraph1>
        
<href="http://blog.csdn.net/burningcpu"><span style="color: #3366cc">burningcpu</span></a>,
I am Zhou Lu, a memeber of ShangHai Iscom .net team, love software development, enjoy it.
        
</p>
        
<asp:Panel ID="Panel1" runat="server" CssClass="modalPopup" Style="display:none" Width="233px">
<p>Choose the style you would like</p>
<input id="RadioA" name="Radio" onclick="styleToSelect = 'sampleStyleA';" type="radio"/>
<label class="sampleStyleA" for = "RadioA">
Choose THIS Style.
</label><br />
<input id="RadioB" name="Radio" onclick="styleToSelect = 'sampleStyleB';" type="radio"/>
<label class="sampleStyleB" for = "RadioB">
Choose THIS Style.
</label><br />
<input id="RadioC" name="Radio" onclick="styleToSelect = 'sampleStyleC';" type="radio"/>
<label class="sampleStyleC" for = "RadioC">
Choose THIS Style.
</label><br />
<input id="RadioD" name="Radio" onclick="styleToSelect = 'sampleStyleD';" type="radio"/>
<label class="sampleStyleD" for = "RadioD">
Choose THIS Style.
</label><br />
<div align="center">
<asp:Button ID="OkButton" runat="server" Text="OK"/>
<asp:Button ID="CancelButton" runat="server" Text="Cancel"/>
</div>
</asp:Panel>
        
&nbsp;
        
<ajaxToolkit:ModalPopupExtender ID="ModalPopupExtender1" runat="server" TargetControlID="LinkButton1" PopupControlID="Panel1" BackgroundCssClass="modalBackground" DropShadow="true" OkControlID="OkButton" CancelControlID="CancelButton" OnOkScript="onOk()">
        
</ajaxToolkit:ModalPopupExtender>
    
</form>
</body>
</html>

实现效果:

 


 

相关文章推荐

jQuery实现换肤功能(使用cookie.js插件)

上一次和大家分享了如何实现换肤功能,但是

NET vs2010中使用IrisSkin2.dll轻松实现winForm窗体换肤功能

.NET vs2010中使用IrisSkin2.dll轻松实现winForm窗体换肤功能   (2010-12-02 21:43:12) 转载▼ 标签:  iri...

Qt实现换肤功能

  • 2014-07-31 20:19
  • 349KB
  • 下载

Android应用如何实现换肤功能

Android免费培训QQ群(118946422)第一期 转载请注明出处,商用请与本人联系。 本系列专题培训适用范围:初级Android程序员,即有J2SE基础和Android初级水平。J2SE基...
  • suiyc
  • suiyc
  • 2011-04-17 14:24
  • 23909

js+css实现换肤功能

  • 2010-05-25 09:24
  • 2.33MB
  • 下载

Qt/C++ 实现的换肤功能~

  • 2016-09-25 19:09
  • 571KB
  • 下载

换肤功能实现!!!

Hi,大家好,快元旦啦,提前祝大家元旦快乐,(*^__^*) 嘻嘻,今天给大家分享的是Apad Qzone换肤功能的实现,我们首先看下效果: 图1:默认的皮肤. 图2:...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:深度学习:神经网络中的前向传播和反向传播算法推导
举报原因:
原因补充:

(最多只允许输入30个字)