最新消息:

第6款插件:stylesheetToggle.js切换网页外观

高级页面 杨红伟 2075浏览 0评论

说明:该插件通过单击设置的链接或按钮自由切换网页的CSS来改变网页的外观,非常方便!
官方链接:http://www.kelvinluck.com/assets/jquery/styleswitch/toggle.html
JS下载: http://www.ijquery.cn/js/stylesheetToggle.js
预览: http://www.ijquery.cn/demo/stylesheetToggle
打包下载: http://www.ijquery.cn/demo/ ... tylesheetToggle.zip
参数说明:

[code]

//绑定元素进行切换
$.stylesheetSwitch(this.getAttribute('rel'));
return false;
或者
//单击一个元素进行切换
$.stylesheetToggle();
return false;

[/code]

图片展示:

StyleWheetToggle1

StyleWheetToggle2

StyleWheetToggle3

JS引用代码:

[js]

<script type="text/javascript" charset="utf-8" src="http://www.ijquery.cn/js/jquery-1.4.2.min.js"></script>
<script type="text/javascript" charset="utf-8" src="http://www.ijquery.cn/js/stylesheetToggle.js"></script>
<script>
$(function () {
//初始化
$.stylesheetInit();
//使用Toggle功能进行样式单的切换。
$('#toggler').bind('click', function() {
$.stylesheetToggle();
return false;
});
//切换为指定的style
$('.styleswitch').bind('click', function() {
$.stylesheetSwitch(this.getAttribute('rel'));
return false;
});
});
</script>

[/js]

HTML代码:

[html]

<div>
<div id="container">

<p>使用Toggle功能进行样式单的切换。</p>
<p><a id="toggler" href="#">Toggle</a></p>

<p>切换为指定的style。</p>
<ul>
<li><a href="#" rel="style1">styles1</a></li>
<li><a href="#" rel="style2">styles2</a></li>
<li><a href="#" rel="style3">styles3</a></li>
</ul>

</div>
</div>

[/html]

CSS代码:

[css]

<link rel="stylesheet" type="text/css" href="css/style1.css" title="style1" media="screen" />
<link rel="stylesheet" type="text/css" href="css/style2.css" title="style2" media="screen" />
<link rel="stylesheet" type="text/css" href="css/style3.css" title="style3" media="screen" />

[/css]

三个CSS代码分别如下:

[css]

.container {background: #fff;}
.container {background: #abc;}
.container {background: #def;}

[/css]

发表我的评论
取消评论
表情

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址