经常遇到如下的需求

鼠标hover到目标对象一定时间后,弹出tips或者窗口;

鼠标离开目标对象一定时间后,隐藏tips或者窗口;

鼠标从目标对象移动到弹出的窗口上,这种状况下不隐藏窗口;

考虑到这种需求,绘制如下的状态图:

如上图所示,将tips的状态分为hide,showing,show,hiding,enter 五个状态;

hide: tips没有显示

showing: 准备显示tips

show: 显示tips

hiding: 准备隐藏tips

enter: 鼠标进入了tips控件,这种状况下仍然显示 tips

使用上面的状态图,清晰地描述了tips可能存在的各种状态,并确定了驱动事件有哪些。理清了思路。

hide状态时:hover到目标控件会进入 showing 状态;

showing 状态时:离开目标控件会返回到 hide 状态;

进入 showing 状态后,开启一个timer,当timer结束后,如果仍然是 showing 状态,则转到 show 状态并显示tips

show 状态时:离开目标控件会进入hiding状态;

hiding 状态时:hover到目标控件会返回到 show 状态;

进入 hiding 状态后,开启一个timer,当timer结束后,如果仍然是 hiding 状态,则转到 hide 状态并隐藏tips

鼠标从目标控件移动到tips上,会使得状态从 show 转到 hiding 转到 enter, 此时tips仍然显示,当离开tips控件后,状态又转移回 hiding ,此时开启一个timer,timer结束后,同样根据是否仍然是 hiding 状态来隐藏tips

编程实现:

function AddWindowTip(tippedObj, text, callback)

    local function showTipsFunc(tippedObj, x, y)
-- 创建tips窗口
local hostwndId = "TipsHelper.TipsHostWnd.Instance." .. tippedObj:GetID()
local objtreeId = "TipsHelper.TipsTree.Instance." .. tippedObj:GetID()
local hostwndTemplateId = "TipsWndTemplate"
local objtreeTemplateId = "TipsTreeTemplate" local hostwndManager = XLGetObject("Xunlei.UIEngine.HostWndManager")
local hostwnd = hostwndManager:GetHostWnd(hostwndId)
if hostwnd then
local objtree = hostwnd:GetBindUIObjectTree()
if objtree then
hostwnd:UnbindUIObjectTree()
local objtreeManager = XLGetObject("Xunlei.UIEngine.TreeManager")
objtreeManager:DestroyTree(objtree)
end
hostwndManager:RemoveHostWnd(hostwndId)
end
local templateManager = XLGetObject("Xunlei.UIEngine.TemplateManager")
local wndTemplate = templateManager:GetTemplate(hostwndTemplateId, "HostWndTemplate")
if not wndTemplate then
return
end
local hostwnd = wndTemplate:CreateInstance(hostwndId)
if not hostwnd then
return
end
local objtreeTemplate = templateManager:GetTemplate(objtreeTemplateId, "ObjectTreeTemplate")
local objtree = objtreeTemplate:CreateInstance(objtreeId)
if not objtree then
return
end
hostwnd:BindUIObjectTree(objtree)
hostwnd:Create() -- 设定text
local rootObj = objtree:GetRootObject()
local textObj = objtree:GetUIObject("text")
textObj:SetText(text)
local width, height = textObj:GetTextExtent()
textObj:SetObjPos(,,width,height)
width,height = width + , height +
rootObj:SetObjPos(,,width+,height+) -- 移动窗口位置
local tippedOwner = tippedObj:GetOwner()
local tippedHostWnd = tippedOwner:GetBindHostWnd()
local l,t,r,b = tippedObj:GetObjPos()
local left = l+(r-l-width)/
local top = b
left,top = tippedHostWnd:HostWndPtToScreenPt(left,top)
hostwnd:Move(left,top,width,height) return rootObj
end
local function hideTipsFunc(tippedObj)
-- 销毁tips窗口
local hostwndId = "TipsHelper.TipsHostWnd.Instance." .. tippedObj:GetID() local hostwndManager = XLGetObject("Xunlei.UIEngine.HostWndManager")
local hostwnd = hostwndManager:GetHostWnd(hostwndId)
if not hostwnd then
return
end local objtree = hostwnd:GetBindUIObjectTree()
if objtree then
hostwnd:UnbindUIObjectTree()
local objtreeManager = XLGetObject("Xunlei.UIEngine.TreeManager")
objtreeManager:DestroyTree(objtree)
end
hostwndManager:RemoveHostWnd(hostwndId) return true
end -- state: tip 的状态, hide隐藏,showing正在显示,show显示,hiding正在隐藏,enter进入tips中
local state = "hide" -- 使用状态控制 tips 在各个状态间转换
tippedObj:AttachListener("OnMouseMove", true, function(obj, x, y, flags)
if state == "hide" then
state = "showing"
local timerMgr = XLGetObject("Xunlei.UIEngine.TimerManager")
timerMgr:SetOnceTimer(function()
if state == "showing" then
local tipsObj = showTipsFunc(obj, x, y)
if tipsObj then
state = "show" --[[ 这段代码,使得移动到弹出的窗口上时,窗口不会被隐藏
tipsObj:AttachListener("OnMouseMove", true, function()
if state == "hiding" then
state = "enter"
end
end)
tipsObj:AttachListener("OnMouseLeave", true, function()
if state == "enter" then
state = "hiding"
local timerMgr = XLGetObject("Xunlei.UIEngine.TimerManager")
timerMgr:SetOnceTimer(function()
if state == "hiding" then
if hideTipsFunc(obj) then
state = "hide"
if callback and type(callback) == "function" then
callback(tippedObj, false)
end
end
end
end, 300)
end
end)
--]] if callback and type(callback) == "function" then
callback(obj, true)
end
end
end
end, )
elseif state == "hiding" then
state = "show"
end
end)
tippedObj:AttachListener("OnMouseLeave", true, function(obj, x, y, flags)
if state == "show" then
state = "hiding"
local timerMgr = XLGetObject("Xunlei.UIEngine.TimerManager")
timerMgr:SetOnceTimer(function()
if state == "hiding" then
if hideTipsFunc(obj) then
state = "hide"
if callback and type(callback) == "function" then
callback(tippedObj, false)
end
end
end
end, )
elseif state == "showing" then
state = "hide"
end
end) end

使用 xlue 实现 tips的更多相关文章

  1. Mac上MySQL忘记root密码且没有权限的处理办法&workbench的一些tips (转)

    忘记Root密码肿么办 Mac上安装MySQL就不多说了,去mysql的官网上下载最新的mysql包以及workbench,先安装哪个影响都不大.如果你是第一次安装,在mysql安装完成之后,会弹出来 ...

  2. 【Tips】史上最全H1B问题合辑——保持H1B身份终级篇

    [Tips]史上最全H1B问题合辑——保持H1B身份终级篇 2015-04-10留学小助手留学小助手 留学小助手 微信号 liuxue_xiaozhushou 功能介绍 提供最真实全面的留学干货,帮您 ...

  3. layer.js中layer.tips

    <script src="~/Content/js/layer/layer.js"></script> layer.tips('名称不能为空', '#pro ...

  4. HTML 最简单的tips 怎么支持指定DIV显示提示信息

    <body> <style type="text/css"> a.link{position:relative;} a.link div.tips{ bor ...

  5. CSS:CSS使用Tips

    Css是前端开发中效果展现的主要部分之一,良好的Css书写习惯可以为实际的项目开发提高效率,也可以为实现良好的团队合作提供保证. 一般新手在使用Css的时候经常会犯一些错误,出现一些不经意的漏洞,如果 ...

  6. 【读书笔记】100个Switf必备tips

    声明 欢迎转载,但请保留文章原始出处:)  博客园:http://www.cnblogs.com 农民伯伯: http://over140.cnblogs.com 正文 1.Selector 在Swi ...

  7. 【转】40个良好用户界面Tips

    一个良好的用户界面应具有高转换率,并且易于使用.但要用户体验良好并不容易做到,下面我们整理了40个良好用户界面Tips,希望能对你有帮助! 1 尽量使用单列而不是多列布局 单列布局能够让对全局有更好的 ...

  8. 转:Eclipse Search Tips

    from:  https://github.com/ajermakovics/eclipse-instasearch/wiki/Eclipse-search-tips Eclipse Search T ...

  9. VS:101 Visual Studio 2010 Tips

    101 Visual Studio 2010 Tips Tip #1        How to not accidentally copy a blank line TO – Text Editor ...

随机推荐

  1. Scriptable render pipeline unity

    https://www.youtube.com/watch?v=zbjkEQMEShM LWRP https://blogs.unity3d.com/cn/2018/02/21/the-lightwe ...

  2. ISP图像调试工程师——自动对焦(熟悉3A算法)

    https://wenku.baidu.com/view/40ec4a14fc4ffe473368ab96.html

  3. http://www.linuxidc.com/Linux/2016-04/129738.htm

    http://www.linuxidc.com/Linux/2016-04/129738.htm

  4. 使用rsync进行多服务器同步

    使用rsync进行多服务器同步 @(Others) 当集群数量很大时,修改配置文件和节点之间的文件同步是一件很麻烦且浪费时间的事情. rsync是linux上实现不同机器之间文件同步.备份的工具,ce ...

  5. JMS之——ActiveMQ高可用+负载均衡集群

    一.高可用集群 从ActiveMQ5.9开始,ActiveMQ的集群实现方式取消了传统的Master-Slave方式,增加了基于ZooKeeper+LevelDB的Master-Slave实现方式,其 ...

  6. OpenGL(八)使用 subroutine 切换可编程管线

    Subroutine 功能是在OpenGL 4.0 版本号里才添加的.因此对于各种Android手机.这个功能基本跪了.假设你发现你的程序报错:ARB_shader_subroutine.那就说明当前 ...

  7. (剑指Offer)面试题37:两个链表的第一个公共结点

    题目: 输入两个链表,找出它们的第一个公共结点. 链表结点的定义如下: struct ListNode{ int val; ListNode* next; ListNode(int x):val(x) ...

  8. 常用HTML标签的全称及描述

    常用HTML标签的英文全称及简单描述   HTML标签 英文全称 中文释义 a Anchor 锚 abbr Abbreviation 缩写词 acronym Acronym 取首字母的缩写词 addr ...

  9. java中接口与抽象类的区别

    接口和抽象类的共同特征如下: 接口和抽象类都不能被实例化,位于继承树的顶端,用于被其他类实现和继承. 接口和抽象类都可以包含抽象的方法,实现接口的类或者继承抽象类的类都必须实现这些抽象的方法. 区别: ...

  10. 在EXCEL中如何让一列数字变成文本格式?就是想让单元格的左上角变一个绿绿的?

    如何在EXCEL中如何让一列数字变成文本格式?就是想让单元格的左上角变一个绿绿的? 解决方案:将整列单元格格式设为文本,然后,选中该列,数据--分列--完成 详细步骤: (1)选中1行或者1列,再单击 ...