这章与上一张《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

jquery div 下拉框焦点事件的更多相关文章

  1. jQuery对下拉框Select操作总结

    jQuery对下拉框Select操作总结 转自网络,留做备用 jQuery获取Select元素,并选择的Text和Value: 1. $("#select_id").change( ...

  2. jQ给下拉框绑定事件,为什么要绑定在框(select标签)上,而不是绑定在选项(option标签)上

    这是我在学习锋利的 jquery 书中 5.1.4 的代码时遇到的一个小问题,源代码如下: <head> <style type="text/css"> * ...

  3. select change下拉框改变事件 设置选定项,禁用select

    select change下拉框改变事件 设置选定项,禁用select 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitio ...

  4. jQuery的下拉框应用

    jQuery的下拉框应用 jQuery的下拉框左右选择应用 直接上代码 <!DOCTYPE html> <html> <head> <meta charset ...

  5. Jquery操作下拉框(DropDownList)实现取值赋值

    Jquery操作下拉框(DropDownList)想必大家都有所接触吧,下面与大家分享下对DropDownList进行取值赋值的实现代码 1. 获取选中项: 获取选中项的Value值: $('sele ...

  6. jquery 获取下拉框值与select text

    下面先介绍了很多jquery获取select属性的方法,同时后面的实例我们讲的是jquery 获取下拉框值与select text代码. 下面先介绍了很多jquery获取select属性的方法,同时后 ...

  7. js,jquery获取下拉框选中的option

    js获取select选中的值: var sel=document.getElementById("select1"); var index = sel.selectedIndex; ...

  8. Jquery操作下拉框(DropDownList)的取值赋值实现代码(王欢)

    Jquery操作下拉框(DropDownList)的取值赋值实现代码(王欢) 1. 获取选中项: 获取选中项的Value值: $('select#sel option:selected').val() ...

  9. jQuery操作下拉框的text值和val值

    jQuery操作下拉框的text值和val值 1,JS源码 <select name="select1" id="select1" style=" ...

随机推荐

  1. ASP.NET Web API路由规

    默认的规则 在ASP.NET MVC4中 global.asax.cs代码中并无注册默认路由规则的代码 代码如下: public class WebApiApplication : System.We ...

  2. 转 关于C#中派生类调用基类构造函数的理解

    关于C#中派生类调用基类构造函数的理解 .c#class       本文中的默认构造函数是指在没有编写构造函数的情况下系统默认的无参构造函数 1.  当基类中没有自己编写构造函数时,派生类默认的调用 ...

  3. fork炸弹

    众所周知,bash是一款极其强大的shell,提供了强大的交互与编程功能.这样的一款shell中自然不会缺少“函数”这个元素来帮助程序进行 模块化的高效开发与管理.于是产生了由于其特殊的特性,bash ...

  4. web小技巧

    如内容超出单元格,则隐藏style="TABLE-LAYOUT: fixed" 让弹出窗口总是在最上面: <body onblur="this.focus();&q ...

  5. jquery实现图片上传前本地预览

    <!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8" ...

  6. Beta阶段爬取数目预估

    预计于12月29号能进行Beta版本发布. Beta阶段我们的爬取动作应该更有针对性,在爬取期间如若数据处理小组有需求,会优先爬取数据处理小组提供的种子链接.预估在项目展示之前能够爬取的数目: 普通网 ...

  7. 【转】SOA架构设计经验分享—架构、职责、数据一致性

      1.背景介绍       最近一段时间都在做系统分析和设计工作,面对的业务是典型的重量级企业应用方向.突然发现很多以往觉得很简单的问题变得没有想象的那么容易,最大的问题就 是职责如何分配.论系统架 ...

  8. idea中Hibernate错误:无法解析表

    idea中Hibernate错误:无法解析表 这种情况主要是在idea中使用hibernate自定义注解,idea无法检查数据源 this inspecton controls whether the ...

  9. pyDay11

    内容来自廖雪峰的官方网站. 1.杨辉三角generator: def triangles(): L = [1] while True: yield L L.append(0) L = [L[i-1] ...

  10. [LeetCode] 29. Divide Two Integers ☆☆

    Divide two integers without using multiplication, division and mod operator. If it is overflow, retu ...