jquery 모방 QQ 로그인 계정 선택 드롭다운 상자 effect

QQ 로그인 시 이전에 로그인했던 계정을 선택하시면 됩니다. 이건 홈페이지 로그인 시에도 사용할 수 있어서 이런 플러그인을 만들고 싶어서 온라인에서 많이 검색해봤는데요. 나에게 맞는 것을 찾지 못했기 때문에 자동으로 만들기로 결정했습니다.

원칙은 텍스트 상자와 ul을 추가하여 드롭다운 상자를 시뮬레이션하고 글꼴을 사용하여 드롭다운 버튼을 시뮬레이션하는 것입니다.

1. 정적 효과 만들기

먼저 CSS와 HTML을 사용하여 원하는 대로 만드세요. 여기서 사용하는 두 가지 글꼴은 아이코문 홈페이지에서 직접 제작할 수 있는 글꼴입니다. 글꼴을 사용하면 입력 상자의 위치를 지정하기가 매우 편리하고 크기, 색상 등도 제어할 수 있다는 장점이 있습니다. 유일한 단점은 IE6 및 IE7에서는 :before 선택기를 지원하지 않기 때문에 이 글꼴을 표시할 수 없다는 점입니다. 하지만 다른 방법을 통해 직접 시도해 볼 수도 있습니다. 다음은 HTML 코드입니다

<span style="display:inline-block;position:relative" class="combox_border">
  <input type="text" class="combox_input"/><font class="ficomoon icon-angle-bottom combox_button" style="display:inline-block"></font>
  <ul style="position:absolute;top:29px;left:-1px" class="combox_select">
    <li><a href="javascript:void(0)">选项一</a></li>
    <li><a href="javascript:void(0)">选项二</a></li>
    <li><a href="javascript:void(0)">选项三</a></li>
    <li><a href="javascript:void(0)">选项四</a></li>
  </ul>
</span>

로그인 후 복사

1. 태그에는 스타일과 클래스가 있습니다. 이 스타일은 필수 속성이며

가 있어야 합니다.

2. 가장 바깥쪽 부분을 스팬으로 감싸고 인라인 블록 속성을 부여합니다. 인라인 요소를 사용하는 이유는 향후 레이아웃의 편의를 위해서입니다. 많은 경우 블록 요소는 float 및 기타 스타일을 사용하면 제어하기가 더 까다롭습니다.

3. Ficomoon icon-angle-bottom이 글꼴을 정의합니다

4. ul 위치 지정을 사용하여 드롭다운을 시뮬레이션할 계획입니다. 앞으로는 top이 jquery에 따라 범위의 높이 설정을 얻을 수 있습니다. 왼쪽은 하드 코딩되어 있습니다

5. li의 콘텐츠에 a 태그를 추가했습니다. a 태그에는 :hover 의사 클래스가 있으므로 CSS를 변경할 수 있습니다. 스타일을 바꾸는 것은 콘텐츠에 달려 있습니다

CSS 코드는 다음과 같습니다.

@font-face {
  font-family: 'icomoon';
  src:url('fonts/icomoon.eot&#63;-fl11l');
  src:url('fonts/icomoon.eot&#63;#iefix-fl11l') format('embedded-opentype'),
    url('fonts/icomoon.woff&#63;-fl11l') format('woff'),
    url('fonts/icomoon.ttf&#63;-fl11l') format('truetype'),
    url('fonts/icomoon.svg&#63;-fl11l#icomoon') format('svg');
  font-weight: normal;
  font-style: normal;
}
.ficomoon{font-family:'icomoon';}
.icon-angle-top:before {content: "\f102"}.icon-angle-bottom:before {content: "\f103"}
/*下面的可根据自己的实际情况做修改*/
.combox_border{border:1px solid #c2c2c2;height:28px;width:245px}
.combox_input{border:0;line-height:25px;height:25px;padding-left: 5px;width:85%;vertical-align: middle;}
.combox_button{width:12%;text-align:center;vertical-align: middle;cursor:pointer;border-left:1px solid #c2c2c2}
.combox_select{border:1px solid #c2c2c2;border-top:0;width:100%}
.combox_select li{overflow:hidden;height:30px;line-height:30px;cursor:pointer;}
.combox_select a {display: block;line-height: 28px;padding: 0 8px;text-decoration: none;color: #666;}
.combox_select a:hover {text-decoration: none;background:#f5f5f5}

로그인 후 복사

Combox_border 및 기타 스타일을 사용자 정의할 수 있으며, CSS3 스타일을 추가하여 아름답게 만들 수도 있습니다.

2. JS 특수효과 제작

JS를 할 때 이상한 문제가 발생했습니다. 즉, 어떤 브라우저에서도 오류가 보고되지 않지만 IE6에서는 unset 개체 속성 오류가 발생한다는 것을 알게 되었습니다. UTF-8이 아닌 js 파일의 인코딩 문제는 인코딩을 변경하십시오.

첫 번째는 jquery 플러그인 형식입니다

(function($){
    $.fn.combox = function(options) {
      
    };
})(jQuery);

로그인 후 복사

그런 다음 기본 매개변수를 추가하세요

var defaults = { 
        borderCss: "combox_border", 
        inputCss: "combox_input", 
        buttonCss: "combox_button", 
        selectCss: "combox_select",
        datas:[]
};
var options = $.extend(defaults, options);

로그인 후 복사

그럼 렌더링 방법이 있습니다

this.each(function() {
   var _this = $(this);
   _this = _initBorder(_this);//初始化外框CSS IE6中需要有返回值
   _this = _initInput(_this);//初始化输入框
   _initSelect(_this);//初始化下拉列表
});

로그인 후 복사

입력 상자, 버튼, 드롭다운 상자를 동적으로 생성하고 스타일과 시간을 첨부합니다. 좀 더 명확하게 하기 위해 세 가지 렌더링을 각각 세 가지 기능에 넣었습니다

function _initBorder($border) {//初始化外框CSS
        $border.css({'display':'inline-block', 'position':'relative'}).addClass(options.borderCss);
        return $border;
      }
      
      function _initInput($border){//初始化输入框
        $border.append('<input type="text" class="'+options.inputCss+'"/>');
        $border.append('<font class="ficomoon icon-angle-bottom '+options.buttonCss+'" style="display:inline-block"></font>');
        //绑定下拉特效
        $border.delegate('font', 'click', function() {
          var $ul = $border.children('ul');
          if($ul.css('display') == 'none') {
            $ul.slideDown('fast');
            $(this).removeClass('icon-angle-bottom').addClass('icon-angle-top');
          }else {
            $ul.slideUp('fast');
            $(this).removeClass('icon-angle-top').addClass('icon-angle-bottom');
          }          
        });
        return $border;//IE6需要返回值
      }
      
      function _initSelect($border) {//初始化下拉列表
        $border.append('<ul style="position:absolute;left:-1px;display:none" class="'+options.selectCss+'">');
        var $ul = $border.children('ul');
        $ul.css('top',$border.height()+1);
        var length = options.datas.length;
        for(var i=0; i<length ;i++)
          $ul.append('<li><a href="javascript:void(0)">'+options.datas[i]+'</a></li>');
        $ul.delegate('li', 'click', function() {
          $border.children(':text').val($(this).text());
          $ul.hide();
          $border.children('font').removeClass('icon-angle-top').addClass('icon-angle-bottom');//确定的时候要将下拉的icon改变
        });
        return $border;
      }

로그인 후 복사

jquery 객체임을 알 수 있도록 세 가지 함수의 매개변수에 $ 기호를 추가했습니다. 이 기능에는 기술적인 어려움이 없습니다. 모두 매우 일반적이고 자연스러운 논리입니다. 또한 플러그인에는 총 50줄만 있으므로 매우 쉽습니다. 수정합니다.

다음은 호출 플러그인입니다.

<script type="text/javascript">
$(document).ready(function() {
 $('#combox').combox({datas:['选项一','选项二','选项三']});
})
</script>
</head>
<body>
　　<span id="combox"></span>
</body>
</html>

로그인 후 복사

한 문장만 입력하면 되기 때문에 매우 편리합니다.

추가 지침:
최근 실제 프로젝트에서 이 플러그인을 사용했는데 몇 가지 새로운 문제에 직면했습니다.

1. 실제 프로젝트에서는 마지막에 동적으로 생성된 입력 상자의 값을 가져와야 하며, 이 경우 입력 상자를 배치해야 하며 새로운 inputId를 추가할 수 있습니다. 기본 매개변수 제어

2. 드롭다운 목록에 콘텐츠가 없으면 _initSelect 메서드를 호출할 필요가 없습니다

if(options.datas.length > 0)
 _initSelect(_this, this);//初始化下拉列表

로그인 후 복사

3. 아래 버튼을 클릭하면 드롭다운 콘텐츠가 표시됩니다. 드롭다운 상자를 숨기려면 특정 콘텐츠를 선택해야 합니다. 인터넷에서 관련 코드를 검색해 보니 불편합니다. >

//点击其他地方影藏下拉列表
$(document).click(function(e) {
  e = window.event || e; // 兼容IE7
  var $obj = $(e.srcElement || e.target);
  if($obj.closest($border).length <= 0) {
   $ul.hide();
   $border.children('font').removeClass('icon-angle-top').addClass('icon-angle-bottom');//确定的时候要将下拉的icon改变
  }
});

로그인 후 복사

이상 내용이 이 글의 전체 내용입니다. 자바스크립트 프로그래밍을 배우시는 모든 분들께 도움이 되었으면 좋겠습니다.