jquery_jquery를 기반으로 하는 편집 가능한 드롭다운 상자 구현 코드

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

1. 정적 효과 만들기

먼저 CSS와 HTML을 사용하여 원하는 대로 만드세요. 제가 사용하는 폰트는 icomoon 홈페이지에서 직접 제작할 수 있는 두 가지입니다. 글꼴을 사용하면 입력 상자 위치가 매우 편리하고 크기, 색상 등을 제어할 수도 있다는 장점이 있습니다. 유일한 단점은 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)" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >选项一</a></li>
 <li><a href="javascript:void(0)" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >选项二</a></li>
 <li><a href="javascript:void(0)" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >选项三</a></li>
 <li><a href="javascript:void(0)" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >选项四</a></li>
 </ul>
</span>

1. 태그에는 스타일과 클래스가 있습니다. 이 스타일은 필수 속성이며
가 있어야 합니다. 2. 가장 바깥쪽 부분을 스팬으로 감싸고 인라인 블록 속성을 부여합니다. 인라인 요소를 사용하는 이유는 향후 레이아웃의 편의를 위해서입니다. 블록 요소로 대체하는 것도 가능하지만 여러 번 블록 요소를 사용합니다. 플로팅 및 기타 스타일은 제어하기가 더 까다롭습니다.
3. Ficomoon icon-angle-bottom이 글꼴을 정의합니다
4. 범위의 속성 위치는 상대적입니다. ul 위치 지정을 사용하여 드롭다운을 시뮬레이션할 계획입니다. 앞으로는 jquery에 따라 위쪽이 범위의 높이 설정을 얻을 수 있습니다. 코딩
5. li의 콘텐츠에 a 태그를 추가했습니다. a 태그에는 :hover 의사 클래스가 있습니다. 위로 이동하면 CSS가 변경되므로 이동에 따른 특수 효과를 덜 작성할 수 있습니다. 콘텐츠에 맞춰 스타일을 바꿔보세요.

아래는 CSS 코드입니다:

@font-face {
 font-family: 'icomoon';
 src:url('fonts/icomoon.eot?-fl11l');
 src:url('fonts/icomoon.eot?#iefix-fl11l') format('embedded-opentype'),
 url('fonts/icomoon.woff?-fl11l') format('woff'),
 url('fonts/icomoon.ttf?-fl11l') format('truetype'),
 url('fonts/icomoon.svg?-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);

borderCss	最外面包裹的样式，就是上面的span
inputCss	输入框的样式
buttonCss	按钮的样式，就是
selectCss	下拉列表的样式
datas	下拉列表中的内容

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

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)" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >'+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>

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

데모 데모: http://demo.jb51.net/js/2014/combox_jquery/

데모 다운로드: http://www.jb51.net/jiaoben/199034.html