搜索
查看: 3900|回复: 5

[CSS] 为 HTMLayout 程序增加“动态换肤”功能

[复制链接]

33

主题

543

帖子

3304

积分

荣誉会员

Rank: 8Rank: 8

积分
3304
发表于 2014-3-15 22:17:26 | 显示全部楼层 |阅读模式
动态改变 <link> 标签的 href 属性并不能让 CSS 即时生效,要动态改变外联 CSS 的路径,需要用到一些小技巧,有了这些技巧,就可以为 HTMLayout 增加“动态换肤”的功能了。

link[rel="stylesheet"] 的 disabled 状态可以控制其样式表的有效性:将其设置为 true(禁用),所有由该 <link> 产生的样式会被移除;将其设置为 false(启用),则重新加载这些样式。(来源于:http://terrainformatica.com/forums/topic.php?id=964

下面是一个例子,为了让大家更方便地测试,我处理了 HLN_LOAD_DATA 响应通知以模拟外联 CSS,真正的项目中不需要这么写。

  1. import win.ui;
  2. /*DSG{{*/
  3. var winform = ..win.form(text="动态改变外联 CSS 路径";right=654;bottom=422)
  4. winform.add()
  5. /*}}*/

  6. import console;

  7. import web.layout;
  8. var wbLayout = web.layout(winform);

  9. var cssData = {
  10.     ["/skins/1.css"] = /**
  11.         html { background: #800; color: #fff }
  12.     **/;
  13.     ["/skins/2.css"] = /**
  14.         html { background: #008 }
  15.         button[type=checkbox] {
  16.             padding: 4px 20px 4px 4px;
  17.             background-position: 100% 50%;
  18.         }
  19.     **/;
  20. }

  21. wbLayout.callback = function (message, wParam, lParam, vParam, notifyCode) {
  22.     if (notifyCode === 0xB01/*_HLN_LOAD_DATA*/) {
  23.         var nmld = web.layout.NMHL_LOAD_DATA();
  24.         raw.convert(lParam, nmld);
  25.         var uri = string.fromUnicode(nmld.uri, 0, true);
  26.         if (cssData[uri]) {
  27.             var data = string.fromto(cssData[uri], 0, 65001);
  28.             web.layout.DataReady(winform.hwnd, uri, data, #data);
  29.         }
  30.         return 0/*_LOAD_OK*/;
  31.     }
  32. }

  33. namespace web.layout.behavior {
  34.     class alterCss {
  35.         ctor (ltEle, layout) {
  36.             
  37.         }
  38.         
  39.         onButtonClick = function (ltTarget, ltEle, reason, behaviorParams) {
  40.             with (layout.getEle("stylesheet")) {
  41.                 state.disabled = true;
  42.                 href = ltEle.state.checked ? "skins/2.css" : "skins/1.css";
  43.                 state.disabled = false;
  44.             }
  45.         }
  46.     }
  47. }

  48. wbLayout.html = /**
  49. <head>
  50.     <link #stylesheet rel="stylesheet" href="skins/1.css" />
  51. </head>
  52. <body>
  53. <button type="checkbox" style="behavior: ~alter-css;">Alter external CSS</button>
  54. </body>
  55. **/

  56. winform.show();
  57. win.loopMessage();
复制代码

评分

参与人数 1银币 +50 收起 理由
CP3 + 50 很给力!

查看全部评分

回复

使用道具 举报

0

主题

9

帖子

112

积分

一级会员

Rank: 2

积分
112
发表于 2014-3-15 23:55:08 | 显示全部楼层

{:3_41:},太强大了,学习了

,太强大了,学习了
回复

使用道具 举报

26

主题

104

帖子

639

积分

荣誉会员

Rank: 8Rank: 8

积分
639
发表于 2014-3-16 09:13:21 | 显示全部楼层

感谢分享! 后面可能会用到,先标记一下

感谢分享! 后面可能会用到,先标记一下
回复

使用道具 举报

4

主题

877

帖子

4719

积分

荣誉会员

Rank: 8Rank: 8

积分
4719
发表于 2014-3-16 13:56:11 | 显示全部楼层

[url=http://www.terrainformatica.com/forum/read.php?3,792,792#msg-792]Changing H

Changing HTMLayout skins in run time
  1. namespace web.layout.behavior.alterCss {
  2.     onButtonStateChanged = function (ltTarget, ltEle, reason, behaviorParams) {
  3.         var ltSytle = ltEle.documentElement.querySelector("#stylesheet")
  4.                 ltSytle.href = ltEle.state.checked ? "skins/2.css" : "skins/1.css";
  5.                 ltSytle.xcall("activate")
  6.     }  
  7. }
复制代码

用 activate 函数也可以。

评分

参与人数 2银币 +130 收起 理由
lujjjh + 80
CP3 + 50 很给力!

查看全部评分

回复

使用道具 举报

2

主题

48

帖子

1192

积分

四级会员

Rank: 6Rank: 6

积分
1192
QQ
发表于 2014-3-16 16:34:33 | 显示全部楼层

爽!!!太厉害了...感谢分享..

爽!!!太厉害了...感谢分享..
一曲且为梦中人..
回复

使用道具 举报

0

主题

2

帖子

18

积分

新手入门

Rank: 1

积分
18
发表于 2016-5-26 23:35:48 | 显示全部楼层

非常不错

非常不错
回复

使用道具 举报

您需要登录后才可以回帖 登录 | 注册会员

本版积分规则

手机版|未经许可严禁引用或转载本站文章|站长邮箱|aardio.com|aardio官方社区 ( 皖ICP备09012014号 )

GMT+8, 2018-6-21 19:59 , Processed in 0.062500 second(s), 21 queries .

Powered by Discuz! X3.4

© 2001-2017 Comsenz Inc.

快速回复 返回顶部 返回列表