云南网站建设创新企业 昆明多彩网络公司

|网页对话|电话:0871-63215311

无刷新样式切换jq插件styleswitch

来源:昆明网站建设 日期:2010-07-08 阅读: 发表评论

在网站制作过程当中,都会遇到客户这样的要求:希望网站的风格有多种,如红色、蓝色风格可以随时切换,但是又不希望网站被刷新,那么styleswitch就派上用场了

网站制作过程当中,都会遇到客户这样的要求:希望网站的风格有多种,如红色、蓝色风格可以随时切换,但是又不希望网站被刷新,那么styleswitch就派上用场了。

首先,需要插入jquery.js,并且在网页上引用3种css样式:
<link rel="stylesheet" type="text/css" href="styles1.css" title="styles1" media="screen" />
 <link rel="alternate stylesheet" type="text/css" href="styles2.css" title="styles2" media="screen" />
 <link rel="alternate stylesheet" type="text/css" href="styles3.css" title="styles3" media="screen" /> 
 <script type="text/javascript" src="../../jquery-1.3.2.min.js"></script>
 <script type="text/javascript" src="styleswitch.js"></script>

然后给切换的按钮或链接加上如下代码:
<a href="serversideSwitch.html?style=style1" rel="styles1" class="styleswitch">styles1</a>
<a href="serversideSwitch.html?style=style2" rel="styles2" class="styleswitch">styles2</a>
<a href="serversideSwitch.html?style=style3" rel="styles3" class="styleswitch">styles3</a>

styleswitch.js下载

styleswitch.js基本原理说明:首先是判断有没有style样式的cookie存在,如果存在的话就读取style样式名,然后将其设置有状态,如果cookie不存在,则不进行操作,当点击切换按钮时,就设置cookie为切换的style名称,然后将该style设置为有效。

发表评论评论列表(有 条评论)

网页对话 0871-63215311