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学习心得( ...

随机推荐

使用 Storyboard Segue 实作 UIViewController 的切换
http://blog.csdn.net/mazhen1986/article/details/7791430 Storyboard 是在 iOS 5 SDK 中才出现的新名词,它其实就是原本的 Xi ...
分析windows宿主机Ping不通linux虚拟机的其中一种情况
ping不通的情况是由于设置网络选项的时候,可以看到界面名称的选择如下(当前选择的是无线网卡驱动):
小米2s 降到1299
关于这个价格,网上叫声一片,尤其是几天前刚买了小米2s的,恨死了雷布斯…… 以下是来自百度贴吧的帖子: [02-27 米粉杂谈]我来说个关于价格的事实吧 http://tieba.baidu.com/ ...
与Google轻轻地擦肩而过
第一集因为那几年三天两头往硅谷里飞,所以我实在记不清这个故事到底是发生在98年还是99年夏天某日的一个下午. 那天我和Excite.com的创始人Mark V. H.在Palo Alto的一家餐厅共 ...
python 模拟浏览器
想用python模拟浏览器访问web的方法测试些东西,有哪几种方法呢? 一类:单纯的访问web,不解析其js,css等. 1. urllib2 #-*- coding:utf-8 -* import ...
Entity Framework: Get mapped table name from an entity
The extension methods I have created one extension method for DbContext and other for ObjectContext: ...
iOS 越狱机免证书调试
目前在XCode上开发的iOS程序只能在模拟器Simulator中运行,如果要放到真机上测试,需要苹果官方认证的开发者账号,购买开发者证书iDP,99美金一年啊! 作为刚开始学习iOS编程的菜鸟,这么 ...
MyBatis开发Dao
MyBatis开发Dao有两种方法: 1.原始Dao开发方法,就是程序需要编写Dao的接口和Dao的实现类. 2.MyBatis的mapper接口(相当于Dao接口)代理开发方法.(更重要) ---- ...
简化PHP开发的10个工具
本文介绍了可以帮助简化 PHP 开发的11个项目,包括框架,类库,工具,代码. 1. CakePHP Development Framework CakePHP 是一个 PHP 的快速开发框架.它提供 ...
.NET 内存管理—CLR的工作
看了http://www.cnblogs.com/liulun/p/3145351.html 不错,补习下相关技术.. 正文: .NET依托CLR进行的内存的管理有了CLR 基本不需要担心.net ...

HTMLayout使用心得

HTMLayout使用心得的更多相关文章

随机推荐

热门专题