HTMLayout使用心得
2013-11-17 19:24 鉴于 阅读(5105) 评论(1) 编辑 收藏 举报1.关闭按钮
采用CSS!提供的behavior实现窗口关闭功能，不需要在C++代码中处理关闭事件
div
{
behavior: sys-ctl;
-sys-ctl-pos: close;
}
2.文字点击展开和折叠功能
点击某个文字，下面的子项展开，再次点击子项隐藏。使用click!来控制点击事件，需要将behavior定义为button
如果div canExpand的show为”true”，则设置div list隐藏，反之则设置list显示
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style>
[hidden]
{
display:none;
}
.canExpand
{
behavior:button;
click!:(self.show=="true")?(self.parent().$(.list).hidden = null,self.show=null) # (self.parent().$(.list).hidden = true, self.show="true");
}
</style>
</head>
<body>
<div>
<div class="canExpand" show=true>点击</div>
<div .list hidden>
<div .item>子项1</div>
<div .item>子项2</div>
<div .item>子项3</div>
<div .item>子项4</div>
</div>
</div>
</body>
</html>
3.输入框提示文字
focus-on! 获取焦点时判断输入框文字是否为“请输入文字”，是则清除文字
focus-off!: 光标焦点离开输入框时，判断输入框是否为空，是则设置文字为“请输入文字”。
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style>
[hidden]
{
display:none;
}
.TextPrompt
{
color:#C9C9C9;
focus-on!:(self:value=="请输入文字") ? (self:value="") # ();
focus-off!:(self:value=="") ? (self:value="请输入文字") # ();
}
</style>
</head>
<body>
<div>
<input class="TextPrompt" value="请输入文字"></input>
</div>
</body>
</html>
4.多个同一行显示
将父div的style设置为"display:inline”确实可以让几个子div在一行显示，但是子div内不能再嵌套div
但是如果将父div设置为flow:horizontal 就可以了。
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style>
.oneLine
{
flow:horizontal;
width:50px;
}
</style>
</head>
<body>
<div class="oneLine">
<div>1</div>
<div>2</div>
<div>3</div>
</div>
</body>
</html>
5.find_first 查找元素
// Find first child element matching the selector
// :root is the element itself
template<class char_t> HELEMENT find_first( const char_t* selector, ... ) const
为htmlaout::dom::element的成员函数，将会在当前dom对象的子元素里查找。
6.dom::element 属性、状态标识、样式访问
element.属性 用来访问元素的DOM属性
element:状态标识 用来访问dom元素，鼠标滑过、鼠标点击、获取焦点等状态变化的标识
element::样式属性 访问dom元素的样式属性
$(selector) 返回选中的元素集
$1(selector) 返回符合条件的第一个元素
7.dom::element 的释放
需要先调用detach()，进而调用HTMLayoutDetachElement() 从父节点及Dom树上移除该节点，如果该节点的引用计数为0，则该元素将被销毁，再调用destroy()销毁元素。
8.HTMLLayout最小化按钮复位
最小化按钮定义通常类似如下：
.min
{
right:30;
background-image:url(1.png);
behavior: sys-ctl;
-sys-ctl-pos: min;
}
.min:hover
{
background-image:url(2.png);
}
.min:active
{
background-image:url(3.png);
}
通常使用3张图片描述一个Button给用户，展示 鼠标不在按钮上|划过按钮|点击按钮 三种状态
behavior描述该按钮为一个最小化按钮，也就是主窗体最小化是由HTMLLayout来实现，而不是在C++中实现，由于主窗体最小化时，DIV是无法得知鼠标已经离开，所以最小化再恢复之后，最小化按钮安装为Active，和鼠标点击最小化按钮是一样。
在MFC中如果使用图片拼接展示按钮时也会遇到类似的问题，但是可以用定时器判断鼠标是否离开按钮来复位按钮状态。
在HTMLLayout中，该问题解决办法为：
在CSS中重新定义div min为 behavior:button，然后在C++工程中进行按钮Click事件中进行处理：
先ShowWindow(SW_MINIMIZE) 让主窗体最小化，然后将min div的active状态清除
HLDOM_RESULT r = HTMLayoutSetElementState(minBtn, 0, STATE_ACTIVE, TRUE);
