2012-12-20 22:04题主

分享webbuilder中实现简单的动态切换主题功能

简介:实现动态切换主题,并能在本机保存主题信息,让用户随时打开都是自己设置过的主题
原理:使用Ext.util.CSS.swapStyleSheet切换主题CSS,cookie保存主题信息
步骤:
1、添加主题切换按钮
在IDE中打开 系统模块 -> Portal -> Index,并在顶部工具栏合适的位置添加主题切换按钮

2、添加主题切换的方法,以供调用
打开wb.js,在里面添加以下方法:

方法很简单,我就不解释了,免得让大家见笑。
保存了cookie,可以在加载的时候读取并调用,直接可以在Wb.initialize方法中来调用


3、关联按钮和以上方法
在按钮的checkchange事件中调用changeTheme,如:Wb.changeTheme('ext-all');
按钮的checked属性也需要设置如这样:Wb.getCookie('theme')=='ext-all-gray',考虑到用户cookie中可能没有信息的情况,这样初始化打开的时候,就会出现没有选中任何主题的bug,所以做一下兼容,defaultBtn的checked属性应该设置为:Wb.getCookie('theme')=='ext-all' || Wb.getCookie('theme')==''

OK,这样就大功告成了
  
2012-12-20 23:14#1
谢谢分享,huangking总能给大家带来好东西。
2012-12-20 23:26#2
不错!以前手工做过一款皮肤是2.3的,包括作图纯手工,下次有需要我再搞一下
2012-12-21 00:12#3
感谢提供wb这么好的一个平台,我从这里学到了很多东西
2012-12-21 09:23#4
顶一下
2012-12-21 09:36#5
感谢分享!很细致的分享。
2012-12-21 10:56#6
谢谢 收藏了
2012-12-21 12:13#7
不错,收藏了。huangking你的qq号码方便留下吗,有时间了一起交流下wb的使用。
2012-12-21 13:19#8
你到下拉列表Default 和Gray用 的是menuitem控件,显示的效果如下
 

我这里也是用的相同的控件显示的却是这样的,
其中【蓝色经典】,和【灰色时代】用的都是menuitem控件,
【亮丽色彩用】的是button控件
而且我选择里【灰色时代】时【蓝色经典】还是√的状态 不知道你是如何设置的。

2012-12-21 14:26#9
博乐 radio需要设置group属性 这样才能在一组item之间切换
2012-12-21 16:44#10
我看楼主的贴图用的就是单独的menuitem组件组件呀。
我试试你到建议。
2012-12-23 13:25#11
收藏
2012-12-24 09:05#12

返回开发者社区