第12章[12.4] 鼠标移入移除时弹出和关闭窗口

需要实现功能的规格描述

鼠标进入某个区域时自动弹出一个新窗口，在该新窗口中可以做一些选择等功能
但鼠标离开新窗口时，自动关闭该新窗口。
类似菁优网在组卷时选取教材版本和年级的功能，页面如下：

框架实现思考

Ext JS 的组件中，Button具备mouseover和mouseout的事件，其他的组件包含focus，blur获得或失去焦点的事件，但是没有鼠标移入和移除事件。
HTML的标准元素包含mouseover、mouseout以及mouseleave等事件
任何Ext JS的组件都可以通过getEl() 方法获取该组件的DOM。故可以通过组件的DOM添加鼠标移入和移除事件处理

方案思路

在组件渲染完成后（afterrender事件），获取组件或子元素的DOM，给该DOM添加mouseover事件和处理的方法。
在处理方法中打开一个窗口，并给该窗口赋一个唯一的id，在打开该窗口时判断，如果存在则打开，如果不存在则创建。
新窗口创建并显示之后，获取该窗口的DOM并添加鼠标移出事件和关闭窗口的处理方法。
新窗口的显示的位置

第12章[12.4] 鼠标移入移除时弹出和关闭窗口相关推荐

Axure交互-鼠标移入移除显示与隐藏
Axure交互-鼠标移入移除显示与隐藏 1.场景描述画布布局为两个元件,按钮和图片.通过对按钮添加交互实现鼠标移入时图片显示,移出按钮时图片隐藏. 2.新增按钮移入移出交互 2.1.添加两个元件 2 ...
【HTML】js控制代码，鼠标移入移除改变颜色
非常简单的一段小代码! 鼠标移入移除显示不同的颜色. 标题标题 <!DOCTYPE html> <html><head><meta charset=&quo ...
vue鼠标移入移除带动画事件实例
vue鼠标移入移除事件实例文章目录 vue鼠标移入移除事件实例效果图: 一. 技术分析二.实例的实现分析 1. 初始状态 2. 鼠标移入状态 3. 鼠标移出状态三.源代码四.举一反三的例子 ...
js(jquery)鼠标移入移出事件时，出现闪烁、隐藏显示隐藏显示不停切换的情况
<script> $(".guanzhu").hover(function(){$(".weixinTop").show();},function( ...
CSS实现当鼠标移入或者移出时实现动画过渡效果
现在需要完成这样一个需求在鼠标移入一个按钮时,需要有一个从下到上慢慢改变背景颜色以及字体颜色的动画效果,再鼠标移出的时候,也要有一个从上到下慢慢变回原来动画的过渡效果因为不会截动态图,因此用每个步 ...
html鼠标可拖动窗体,javascript div 弹出可拖动窗口
javascript div 弹出可拖动窗口更新时间:2009年02月26日 21:50:37 作者: 创建弹出div窗口. /* * 创建弹出div窗口. 1.接口说明:DivWindow(i ...
html5鼠标点击弹出层,jQuery实现单击弹出Div层窗口效果(可关闭可拖动)
本文实例讲述了jQuery实现单击弹出Div层窗口效果.分享给大家供大家参考.具体如下: 这是一款jquery实现的可拖动可关闭的弹出框效果,网上已经有很多类似效果了,网页上实现这种效果其实并不难,现 ...
react-native TextInput组件在模拟器Simulator上鼠标聚焦后键盘不弹出
如题,react-native的TextInput组件在模拟器Simulator上鼠标聚焦后键盘不弹出 <TextInputstyle={styles.inputItem}onChangeTex ...
C Primer Plus 第12章 12.6 分配内存：malloc()和free()
2019独角兽企业重金招聘Python工程师标准>>> 首先,回顾一些有关内存分配的事实.所有的程序都必须留出足够内存来存储它们使用的数据.一些内存分配是自动完成的.例如,可以这样声 ...

第12章[12.4] 鼠标移入移除时弹出和关闭窗口

需要实现功能的规格描述

框架实现思考

方案思路

第12章[12.4] 鼠标移入移除时弹出和关闭窗口相关推荐

最新文章

热门文章