HTMLayout使用心得
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);
HTMLayout使用心得的更多相关文章
- 我的MYSQL学习心得(一) 简单语法
我的MYSQL学习心得(一) 简单语法 我的MYSQL学习心得(二) 数据类型宽度 我的MYSQL学习心得(三) 查看字段长度 我的MYSQL学习心得(四) 数据类型 我的MYSQL学习心得(五) 运 ...
- NoSql数据库使用半年后在设计上面的一些心得
NoSql数据库这个概念听闻许久了,也陆续看到很多公司和产品都在使用,优缺点似乎都被分析的清清楚楚.但我心里一直存有一个疑惑,它的出现究竟是为了解决什么问题? 这个疑惑非常大,为此我看了很多分析文章, ...
- 我的MYSQL学习心得(二) 数据类型宽度
我的MYSQL学习心得(二) 数据类型宽度 我的MYSQL学习心得(一) 简单语法 我的MYSQL学习心得(三) 查看字段长度 我的MYSQL学习心得(四) 数据类型 我的MYSQL学习心得(五) 运 ...
- 我的MYSQL学习心得(三) 查看字段长度
我的MYSQL学习心得(三) 查看字段长度 我的MYSQL学习心得(一) 简单语法 我的MYSQL学习心得(二) 数据类型宽度 我的MYSQL学习心得(四) 数据类型 我的MYSQL学习心得(五) 运 ...
- 我的MYSQL学习心得(四) 数据类型
我的MYSQL学习心得(四) 数据类型 我的MYSQL学习心得(一) 简单语法 我的MYSQL学习心得(二) 数据类型宽度 我的MYSQL学习心得(三) 查看字段长度 我的MYSQL学习心得(五) 运 ...
- 我的MYSQL学习心得(五) 运算符
我的MYSQL学习心得(五) 运算符 我的MYSQL学习心得(一) 简单语法 我的MYSQL学习心得(二) 数据类型宽度 我的MYSQL学习心得(三) 查看字段长度 我的MYSQL学习心得(四) 数据 ...
- 我的MYSQL学习心得(六) 函数
我的MYSQL学习心得(六) 函数 我的MYSQL学习心得(一) 简单语法 我的MYSQL学习心得(二) 数据类型宽度 我的MYSQL学习心得(三) 查看字段长度 我的MYSQL学习心得(四) 数据类 ...
- 我的MYSQL学习心得(七) 查询
我的MYSQL学习心得(七) 查询 我的MYSQL学习心得(一) 简单语法 我的MYSQL学习心得(二) 数据类型宽度 我的MYSQL学习心得(三) 查看字段长度 我的MYSQL学习心得(四) 数据类 ...
- 我的MYSQL学习心得(八) 插入 更新 删除
我的MYSQL学习心得(八) 插入 更新 删除 我的MYSQL学习心得(一) 简单语法 我的MYSQL学习心得(二) 数据类型宽度 我的MYSQL学习心得(三) 查看字段长度 我的MYSQL学习心得( ...
随机推荐
- Android service的开启和绑定,以及调用service的方法
界面: <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android= ...
- QQ拼音还是不行哇
QQ拼音还是不行啊,虽说没广告,但是很多词条没有,例如知乎.蒋京虎. 泰囧……
- 使用wget和ftp共享文件
一.需求 有一个机器A,上面那有很多文件.现在新买一个机器B,不想用U盘复制,就想把A弄成个服务器,然后B登录到A,想要什么文件就下载什么文件. 二.Win7实现 A是Win7和Ubuntu双系统,首 ...
- [codility]CountDiv
https://codility.com/demo/take-sample-test/count_div 此题比较简单,是在O(1)时间里求区间[A,B]里面能被K整除的数字,那么就计算一下就能得到. ...
- Xamarin.Android 入门之:Android的生命周期
一.前言 活动是Android应用程序的基本构建块,他们可以在许多不同的状态存在.当你把一个Android程序置于后台,过一段时间再打开发现之前的数据还存在. 二.活动状态 下面的图表说明了一个活动可 ...
- chrome中tcmalloc的使用
chrome中内存分配采用了第三方库tcmalloc,这个库主要提供给应用程序内存管理方面的优化,按资料说内存存取速度会从300ns降到50ns.更具体的关于这个tcmalloc的信息大家可以查网上的 ...
- Java多线程2:实现多线程的两种方式
原文:http://www.cnblogs.com/skywang12345/p/3479063.html 常见的实现多线程的方式有2种,一是继承Thread类,二是实现 Runnable接口,还可以 ...
- 246. Strobogrammatic Number
题目: A strobogrammatic number is a number that looks the same when rotated 180 degrees (looked at ups ...
- Linux 动画显示
Linux最强大的一个特征就是它有大量的各种小命令工具,这也可以称做是它最有趣的一个地方了.在这些大量的有用的命令和脚本中,你会发现有少部 分命令工具不那么有用的——如果你不愿意说是完全没用处的话.你 ...
- sql 随笔 2015-07-02
sql 自定义函数 --检查函数是否存在 if exists (select * from dbo.sysobjects where id = object_id(N'dbo.pTitleCase') ...