집 >웹 프론트엔드 >JS 튜토리얼 >jQuery 플러그인 데이터 목록은 아름다운 입력 드롭다운 list_jquery를 구현합니다.

jQuery 플러그인 데이터 목록은 아름다운 입력 드롭다운 list_jquery를 구현합니다.

WBOY원래의: 2016-05-16 15:50:171926검색

HTML5는 입력 상자(datalist)에 보기 좋은 드롭다운 목록을 정의합니다. 그러나 현재 지원은 좋지 않습니다(젠장 IE, 다행스럽게도 점차 은퇴할 예정입니다...). 그래서 최근에 IE8과 호환되는 수요 기반의 작은 데이터 목록 플러그인을 작성했습니다(더 이상 IE7을 사용하는 사람이 많지 않죠?). 구체적인 구현 요구사항은 다음과 같습니다.

선택하면(포커스 흐림 트리거)(마우스든 탭 키든) 입력 상자가 지워지고 사용자 지정 드롭다운 목록이 표시된 후 키보드의 위쪽 및 아래쪽 키를 사용할 수 있습니다. 선택하려면(마우스를 사용할 수 없는 이유는 없습니다.) 마우스 왼쪽 버튼을 클릭하거나 Enter 키를 눌러 선택한 목록의 값을 입력 상자에 입력합니다.

구체적인 구현 코드는 다음과 같습니다.

HTML

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="description" content="" />
<meta name="keywords" content="" />
<meta name="robots" content="index, follow" />
<meta name="googlebot" content="index, follow" />
<meta name="author" content="codetker" />
  <title> 表单选中弹出框</title>
<link href="css/reset.css" type="text/css" rel="Stylesheet" /> 
<link href="css/master.css" type="text/css" rel="Stylesheet" /> 

<script type="text/javascript" src="js/jquery-1.11.0.js"></script>
</head>

<body>
  <div class="wrap">
    <form class="center">
      <div class="input_wrap">
        <input name="input1" class="input input1" type="text"/>
        <ul class="input1_ul select_list">
          <li>问题1</li>
          <li>问题2</li>
          <li>问题3</li>
          <li>问题4</li>
          <li>问题5</li>
        </ul>
      </div>
    </form>
  </div>
<script type="text/javascript" src="js/jquery.codetker.datalist.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  $(".input_wrap").myDatalist({"bgcolor":"red","widths":1,"heights":1}); 
});
</script>
</body>
</html>

CSS(reset.css는 브라우저 기본값을 초기화하는 데 사용됩니다. 여기서는 style.css입니다)

.wrap{ margin:0 auto; font-family: "微软雅黑";font-size: 14px;}
.center{ margin: 0 auto; width:500px;}
.input{ margin: 0; padding: 0; /*border:none;*/ width:140px; height: 24px; float:left;}
.select_list{display: none; position:absolute; z-index: 100;}
.select_list li{ height:24px; margin: 0; padding: 0; background-color: #fff; cursor: pointer; list-style: none; position:relative;}
.select_list li:hover{ background-color: red;}
.input_wrap{ position:relative; }

자바스크립트

/*
  datalist 0.1 
  自定义datalist插件，实现html5中input元素datalist的效果
  兼容IE8+,Firefox,Chrome等常见浏览器
*/

;(function($,window,document,undefined){ //undefinde是真实的undefined，并非参数
  //将可选择的变量传递给方法

  //定义构造函数
  var Datalist=function(ele,opt){
    this.$element=ele;
    this.defaults={
      'bgcolor':'green',
      'widths':1,
      'heights':1
    },
    this.options=$.extend({}, this.defaults, opt);
  }
  //定义方法
  Datalist.prototype={
    showList:function(){
      var color=this.options.bgcolor;
      var width=this.options.widths;
      var height=this.options.heights; //属性值

      var obj=this.$element; //obj为最外层包裹的div之类的元素，应该拥有positive：relative属性,方便datalist定位。
      var input=$(obj).children().eq(0); //input元素
      var inputUl=$(obj).children().eq(1); //datalist元素
      //设置弹出datalist的大小和样式
      $(inputUl).css({
        "top":$(input).outerHeight()+"px",
        "width":$(input).outerWidth()*width+"px"
      });
      $(inputUl).children().css({
        "width":$(input).outerWidth()*width+"px",
        "height":$(input).outerHeight()*height+"px"
      });

      $(inputUl).children('li').mouseover(function() {
        $(this).css("background-color",color);
        $(this).siblings().css("background-color","#fff");
      });
      $(inputUl).children('li').mouseout(function() {
        $(this).css("background-color","#fff");
      });
      //再次focus变为空，也可以改为某个默认值
      //datalist的显示和隐藏
      $(input).focus(function() {
        if($(this).val()!=""){
          $(this).val("");
        }
        $(inputUl).slideDown(500);

        var n=-1; //记录位置,-1表示未选中。当n=-1时直接按enter浏览器默认为倒数第一个
        $(document).keydown(function(event) {
          /* 点击键盘上下键，datalist变化 */
          stopDefaultAndBubble(event);
          if(event.keyCode==38){//向上按钮
            if(n==0||n==-1){
              n=4;
            }else{
              n--;
            }
            $(inputUl).children('li').eq(n).siblings().mouseout();
            $(inputUl).children('li').eq(n).mouseover();
          }else if(event.keyCode==40){//向上按钮
            if(n==4){
              n=0;
            }else{
              n++;
            }
            $(inputUl).children('li').eq(n).siblings().mouseout();
            $(inputUl).children('li').eq(n).mouseover();
          }else if(event.keyCode==13){//enter键
            $(inputUl).children('li').eq(n).mouseout();
            $(input).val( $(inputUl).children('li').eq(n).text() );
            n=-1;
          }
        });


        //去掉浏览器默认
        function stopDefaultAndBubble(e){
          e=e||window.event;
          //阻止默认行为
          if (e.preventDefault) {
            e.preventDefault();
          }
          e.returnValue=false;

          //阻止冒泡
          if (e.stopPropagation) {
            e.stopPropagation();
          }
          e.cancelBubble=true;
        }

      });
      $(input).blur(function() {
        $(inputUl).slideUp(500);
      });
      $(inputUl).delegate('li', 'click', function() {
          $(input).val( $(this).text() );
      });

      return this;
    }
  }
  //在插件中使用Datalist对象
  $.fn.myDatalist=function(options){
    //创建实体
    var datalist=new Datalist(this,options);
    //调用其方法
    return datalist.showList();
  }
 
})(jQuery,window,document);

여기서 ul li 목록은 데이터 목록 옵션을 시뮬레이션하는 데 사용됩니다. 구현 논리는 매우 간단합니다. 주목해야 할 점은 ul.input1_ul의 상대적 위치 지정을 용이하게 하기 위해 div.input_wrap이 상대적으로 위치 지정된다는 것입니다. 서로 영향을 미치지 않는 입력 상자가 많기 때문에 여기서는 input1입니다. 아무튼 제가 직접 개발한 첫 번째 플러그인이므로 표시해 두겠습니다.

코드가 필요한 경우 https://github.com/codetker/myDatalist를 클릭하세요.

위 내용은 이 글의 전체 내용입니다. 모두 마음에 드셨으면 좋겠습니다.

성명：

이전 기사：JavaScript_javascript 팁에서 문자열을 자르는 방법다음 기사：JavaScript_javascript 팁에서 문자열을 자르는 방법

jQuery 플러그인 데이터 목록은 아름다운 입력 드롭다운 list_jquery를 구현합니다.

관련 기사