使用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>

实现效果:

 


 

仿造百度换肤功能的实现

换肤功能的应用很广,不管是搜索界面还是普通的管理界面等等,都可以进行设计并且应用换肤功能,起到更好的用户体验。 今天仿造百度的换肤功能,实现了基本的换肤功能,接下来将会为大家介绍如何实现。在设计界...
  • u010297791
  • u010297791
  • 2016年09月14日 09:17
  • 1635

JavaScript+CSS实现网页换肤功能

Html代码部分 1.要有一个带id的样式表链接,我们要通过操作这个链接来调用不同的href。 <link href="css/main0.css" rel="stylesheet" type="...
  • zhubin215130
  • zhubin215130
  • 2013年05月14日 16:56
  • 2500

js利用cookie实现网页的换肤

在浏览网页的时候,我们经常可以看到部分页面上具有换肤功能,点击改变皮肤且但我们下次浏览的时候,还会是我们选择的皮肤。作为菜鸟来说,这是一种赤裸裸的诱惑……今天查了相关资料,很粗糙的写了一个利用cool...
  • u014703834
  • u014703834
  • 2014年07月31日 16:32
  • 1375

iOS App主题皮肤切换功能简介和具体实现详解 附有源码

1. 主题皮肤功能切换介绍 主题切换就是根据用户设置不同的主题,来动态改变用户的界面,通常会改变 navigationBar背景图片、 tabBar背景图片、 tabBar中的按钮的图片和选中的背景图...
  • vbirdbest
  • vbirdbest
  • 2016年01月28日 15:35
  • 6617

Qt之界面换肤

简述常用的软件基本都有换肤功能,例如:QQ、360、迅雷等。换肤并没有想象中那么难,其实很简单,利用我们前面分享过的QSS系列文章完全可以实现各种样式的定制!简述 实现原理 效果 新建QSS文件 编写...
  • u011012932
  • u011012932
  • 2016年08月31日 13:26
  • 11386

Android一键换肤功能:一种简单的实现

 Android一键换肤功能:一种简单的实现 现在的APP开发,通常会提供APP的换肤功能,网上流传的换肤代码和实现手段过于复杂,这里有一个开源实现,我找了一大堆,发现这个项目相对较为简洁:h...
  • zhangphil
  • zhangphil
  • 2016年05月19日 17:03
  • 3701

html页面换肤的简单实例

利用iQuery实现简单的页面换肤
  • u010914447
  • u010914447
  • 2014年04月30日 08:49
  • 1869

Android插件换肤功能实战

Android App实现换肤有很多方式,有的是通过内置资源的方式,有的是通过设置相同签名并且AndroidManifest.xml中配置相同android:sharedUserId使得两个apk运行...
  • goodlixueyong
  • goodlixueyong
  • 2016年04月08日 00:53
  • 1673

网页换肤(简洁写法[提供思路])

网站更换皮肤样式,可以通过动态改变网页引入的css样式文件来实现。根据这个思路,此功能就变得简单: css引入方式为(外部样式)://skin_0.css文件内容 【默认样式】#skin li{ ...
  • zhumengstyle
  • zhumengstyle
  • 2017年08月02日 15:08
  • 204

jquery+ajax+php实现搜索功能

html代码 搜索 搜索 function search(){ var keyword=$("#gover_search_key").val(); $.ajax({ ...
  • less_cold
  • less_cold
  • 2016年08月29日 15:36
  • 2833
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:使用Ajax实现换肤功能
举报原因:
原因补充:

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