jquery div 下拉框焦点事件

这章与上一张《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: 0;
    }
    
    .text {
      height: 32px;
      line-height: 32px;
      margin: 0;
      padding: 0 6px;
      cursor: pointer;
    }
    
    .dropdown-menu {
      position: absolute;
      width: 200px;
      color: #FFF;
      margin: 0;
      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: 0;
      height: 0;
      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