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

lujjjh · 发表于 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，真正的项目中不需要这么写。

import win.ui;
/*DSG{{*/
var winform = ..win.form(text="动态改变外联 CSS 路径";right=654;bottom=422)
winform.add()
/*}}*/
import console;
import web.layout;
var wbLayout = web.layout(winform);
var cssData = {
["/skins/1.css"] = /**
html { background: #800; color: #fff }
**/;
["/skins/2.css"] = /**
html { background: #008 }
button[type=checkbox] {
padding: 4px 20px 4px 4px;
background-position: 100% 50%;
}
**/;
}
wbLayout.callback = function (message, wParam, lParam, vParam, notifyCode) {
if (notifyCode === 0xB01/*_HLN_LOAD_DATA*/) {
var nmld = web.layout.NMHL_LOAD_DATA();
raw.convert(lParam, nmld);
var uri = string.fromUtf16(nmld.uri, 0, true);
if (cssData[uri]) {
var data = string.fromto(cssData[uri], 0, 65001);
web.layout.DataReady(winform.hwnd, uri, data, #data);
}
return 0/*_LOAD_OK*/;
}
}
namespace web.layout.behavior {
class alterCss {
ctor (ltEle, layout) {
}
onButtonClick = function (ltTarget, ltEle, reason, behaviorParams) {
with (layout.getEle("stylesheet")) {
state.disabled = true;
href = ltEle.state.checked ? "skins/2.css" : "skins/1.css";
state.disabled = false;
}
}
}
}
wbLayout.html = /**
<head>
<link #stylesheet rel="stylesheet" href="skins/1.css" />
</head>
<body>
<button type="checkbox" style="behavior: ~alter-css;">Alter external CSS</button>
</body>
**/
winform.show();
win.loopMessage();

复制代码

ivisions_huang · 发表于 2014-3-15 23:55:08

,太强大了，学习了

donque2010 · 发表于 2014-3-16 09:13:21

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

不争 · 发表于 2014-3-16 13:56:11

Changing HTMLayout skins in run time

namespace web.layout.behavior.alterCss {
onButtonStateChanged = function (ltTarget, ltEle, reason, behaviorParams) {
var ltSytle = ltEle.documentElement.querySelector("#stylesheet")
ltSytle.href = ltEle.state.checked ? "skins/2.css" : "skins/1.css";
ltSytle.xcall("activate")
}
}

复制代码

用 activate 函数也可以。

CP3 · 发表于 2014-3-16 16:34:33

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

hearts · 发表于 2016-5-26 23:35:48

非常不错

用户名		自动登录	找回密码
密码			注册会员

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

评分

评分