这章与上一张《jquery input 下拉框(模拟select控件)焦点事件》类似

这章讲述div的焦点事件如何使用

div的焦点事件与input的焦点事件区别在于 需要多添加一个属性:tabindex (Safari可能不支持) ; 这个属性是可以让键盘获取到焦点事件,当然,我们只是用这个属性来让div有焦点而已; 为了不改变网页原有的键盘属性; 建议设置成  tabindex = '-1';  tabindex 默认为0,即在网页中按下tab即可触发,第一下tab就触发当前事件;

ps : div还有一个属性 (html5新属性) 可以让其获得焦点,但不建议用在这; contenteditable="true"; 这个属性还有一个特性就是可以让div变成input那样,可编辑特性!

下面是html结构:

  <div class="div-box" tabindex="-1">
<p class="text"><span class="texts">Holle Word</span> <span class="tip"></span></p>
<ul class="dropdown-menu">
<h4>Holle Word</h4>
<hr>
<li>test</li>
<li>dome</li>
<li>标签</li>
</ul>
</div>

css :

    .div-box {
position: relative;
display: inline-block;
outline:;
} .text {
height: 32px;
line-height: 32px;
margin:;
padding: 0 6px;
cursor: pointer;
} .dropdown-menu {
position: absolute;
width: 200px;
color: #FFF;
margin:;
padding: 10px;
list-style: none;
border-radius: 10px;
background-color: #555;
-webkit-box-shadow: 0 5px 15px rgba(0, 0, 0, .5);
box-shadow: 0 5px 15px rgba(255, 255, 255, .1);
} .dropdown-menu h4 {
text-align: center;
margin: 10px 0;
} .dropdown-menu li {
border-bottom: 1px solid #999;
padding: 0 6px;
line-height: 28px;
} .dropdown-menu li:hover {
background-color: black;
cursor: pointer;
} .tip {
width:;
height:;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
border-top: 10px solid #555;
display: inline-block;
}

js :

    var isBox = false; // 定义一个触发焦点事件的开关,默认为不开启状态 || 也可以给input设置一个属性,来判断
$(".dropdown-menu").hide();
$(".div-box").focus(function () { // div绑定焦点事件,触发时打开焦点开关
$(this).find(".dropdown-menu").show();
isBox = true;
})
$(".div-box").mousemove(function () { // 鼠标在div区域内打开焦点开关
isBox = true;
});
$(".div-box").mouseout(function () { // 鼠标在div区域外关闭焦点开关
isBox = false;
});
$(".div-box").blur(function () { // div失去焦点时通过焦点开关状态判断鼠标所在区域
if (isBox == true) return false;
$(this).find(".dropdown-menu").hide();
});
$(".dropdown-menu").find('li').each(function () {
$(this).on("click", function () {
isBox = false;
var text = $(this).text();
$(this).parent().siblings(".text").find(".texts").text(text);
$(this).parent().parent().blur(); // ********* 清除焦点事件 (div本身是没焦点的)
$(this).parent().hide();
})
})

这章与上一章《jquery input 下拉框(模拟select控件)焦点事件》大致相同 ,区别在于tabindex 属性 和 在点击后需要移除div的焦点事件;

本章链接:http://www.cnblogs.com/ZevEssay/p/5953205.html

随机推荐

  1. EF架构~为BulkInsert引入SET IDENTITY_INSERT ON功能

    回到目录 在设计表结构时,我们通常将不是很在乎表现的主键设计成自增长的,大数据量用bigint,一般地用int就可以了,int就是C#里的Int32,它最大可以存储到2147483647,21亿,基本 ...

  2. 关于Eclipse的Save时的自定义操作

    Eclipse中Save+S的时候会包含很多其他操作.例如代码格式化,自动导入或者删除jar包等等. 如果修改代码的时候不想让Eclipse做这些操作,有两种方法. 第一: 用一个文本编辑器打开这个文 ...

  3. shell 批量压缩指定文件夹及子文件夹内图片

    shell 批量压缩指定文件夹及子文件夹内图片 用户上传的图片,一般都没有经过压缩,造成空间浪费.因此须要编写一个程序,查找文件夹及子文件夹的图片文件(jpg,gif,png),将大于某值的图片进行压 ...

  4. Linux进程实时IO监控iotop命令详解

    介绍 Linux下的IO统计工具如iostat, nmon等大多数是只能统计到per设备的读写情况, 如果你想知道每个进程是如何使用IO的就比较麻烦. iotop 是一个用来监视磁盘 I/O 使用状况 ...

  5. 使用VMware Workstation安装win7镜像文件时遇见的错误

    最近打算使用虚拟机安装个系统玩玩,就去网站上找了教程安装下win7系统.但是在安装过程中遇见两个问题,现在把遇见的问题总结记录一下,以及解决方法罗列一下. 我当时使用的是VMware 12版的,系统是 ...

  6. C#设计模式(3)——抽象工厂模式

    1.抽象工厂模式介绍 上一篇我们了解了工厂模式,知道工厂模式可以解决简单工厂的缺陷(简单工厂添加新产品时要修改工厂类,不符合开闭原则),但是简单工厂和工厂模式都是只生产一种产品(前边的简单工厂和工厂都 ...

  7. WinHex数据恢复笔记(二)

    续写上次笔记: 1.Winhex数据恢复软件的界面上的所有功能已经介绍了一遍,最主要的还是编程恢复的能力. 今天主要看看记事本的编辑恢复及其相关的一些问题,记事本的 编辑值是ASCII值,所以没有文件 ...

  8. poj3617 Best Cow Line(贪心,字典序问题)

    https://vjudge.net/problem/POJ-3617 这类字符串处理字典序问题经常用到贪心, 每决定输出一个字符之前,都要前后i++,j--逐个比大小,直至比出为止. #includ ...

  9. JS -- serializeJSON

    http://www.cnblogs.com/linzenews/p/7065050.html

  10. mui---获取设备的网络状态

    在用mui做音乐或视频播放器的时候,往往会考虑当前音乐+视频的播放环境.例如是4G ,WIFI,无网络,给出特定的提示: 具体做法:根据 getCurrentType来进行获取当前网络的类型: plu ...