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学习心得( ...
随机推荐
- ubuntu 13.10 64bit装BeyondCompare
1. Beyond Compare官网下载amd-64位的,安装失败,依赖于ia32-libs,但是这个文件已经不在源里了: 2. 官网下载tar.gz源码包,解压安装失败: 3. 直接装32位的,可 ...
- 李洪强iOS开发之最全App上架流程
在上架App之前想要 真机测试的同学 请查看 iOS- 最全的真机测试教程 里面包含怎么让多台电脑同时 上架App和同时真机调试.P12文件的使用详解 准备 开发者账号 完工的项目 上架步骤 一.创建 ...
- lintcode :reverse integer 颠倒整数
题目: 颠倒整数 将一个整数中的数字进行颠倒,当颠倒后的整数溢出时,返回 0 (标记为 32 位整数). 样例 给定 x = 123,返回 321 给定 x = -123,返回 -321 解题: 直接 ...
- *[topcoder]IncrementingSequence
http://community.topcoder.com/stat?c=problem_statement&pm=12107 此题想了半天,当时瞥到了Greedy,所以就想着贪心,最后的方法 ...
- git Unstaged changes after reset
转载:http://my.oschina.net/yuzn/blog/150275 相信大家都做过这个操作,就是本地做了修改后,不想提交,想恢复如初 git reset HEAD 这样的话,我们就 ...
- centos杀死进程命令
比如 先查看 httpd 进程 ps aux |grep httpd [root@moyea309 init.d]# ps aux |grep httpdroot 2091 0.0 0. ...
- HDU5088——Revenge of Nim II(高斯消元&矩阵的秩)(BestCoder Round #16)
Revenge of Nim II Problem DescriptionNim is a mathematical game of strategy in which two players tak ...
- linux自动启动shell和init概述(fedora use systemmd now!!!)
linux运行级别 linux启动之后会在一个级别运行,下面列出了这些运行级别: 0 系统停止 1 单用户系统,不需要登陆 2 多用户系统但不支持NFS,命令行模式登陆 3 完整多用户模式,命令行模 ...
- dex
数字交叉连接设备(Dendenkosha Electronic Exchange),就是常说的电子交换器. 数字交叉连接设备完成的主要是STM-N信号的交叉连接功能,它是一个多端口器件,它实际上相 ...
- JNIEnv解析
1.关于JNIEnv和JavaVM JNIEnv:线程相关的变量 JavaVM:是虚拟机在JNI层的代表, JNIEnv是一个与线程相关的变量,不同线程的JNIEnv彼此独立.JavaVM是虚拟机在J ...