Node.js 사용자 정의 연결 드롭다운 box_javascript 기술
- WBOY원래의
- 2016-05-16 18:34:571181검색
이 드롭다운 상자가 미적 요구를 조금 충족할 수 있다고 생각합니다.
클릭의 효과입니다. 키보드의 방향키, Enter, Esc 등의 이벤트를 쓰고, 페이지 하단과의 거리에 따라 위쪽으로 표시할지 여부를 판단할 수 있습니다.
오늘 링크를 걸었는데, 그런데 코드 일부를 올려보겠습니다
효과 미리보기:
다음 코드는 ie6의 호환성 문제를 해결합니다
코드 복사 코드는 다음과 같습니다.
$ ContainerDivText.mousedown(function() {
setTimeout(
function() {
if ($newUl[0].style.display == 'block') {
$ newUl.hide() ;
positionHideFix();
return false
}
$containerDiv.focus()//목록 표시
$newUl.slideDown(100) ;
positionFix ();
//키를 눌렀을 때
document.onkeydown = function(e) {
if (e == null) { // 즉
var keycode = event .keyCode;
} else { // 그 밖의 모든 것
var keycode = e.which;
}
//키를 누르거나 esc 키를 누르면 목록이 숨겨집니다.
if (keycode == 13 || 키코드 == 27) {
$newUl.hide();
return false
}
}, 1); //settimeout 함수는 ie6에 사용됩니다. 요소에 초점을 맞춘 요소를 클릭하면
//ie6은 해당 요소를 두 번 클릭한 것으로 간주하기 때문입니다(2010-2-4)
}); 🎜>
다음 코드는 드롭다운 박스 이벤트 정의 기능 부족 문제를 해결합니다
코드
코드 복사
코드는 다음과 같습니다. if (!opts.callbackfn) { $newLi.click(function(e) { var $clickedLi = jQuery(e .target),
text = $clickedLi.text (); //update counter
currentIndex = $newLi.index($clickedLi)
//모든 hilite를 제거한 다음 hilite를 추가합니다. 선택된 항목
$newLi.removeClass('hiLite' );
$clickedLi.addClass('hiLite')
setSelectText(text)
$newUl.hide(); ContainerDiv.css('위치', '정적'); //즉
});
} else {
$newLi.click(function(e) {
var $clickedLi = jQuery( e.target),
text = $clickedLi.text();
//update counter
currentIndex = $newLi.index($clickedLi)
//모든 hilite를 추가합니다. 선택한 항목에
$newLi.removeClass('hiLite');
$clickedLi.addClass('hiLite')
setSelectText(text)
$newUl.hide(); $containerDiv.css('position', 'static') ; //ie
(opts.callbackfn)(this.value)
})
} //param callbackfn은 ul;(2010-2 -4)
다음 페이지의 응용 프로그램,
코드
currentIndex = $newLi.index($clickedLi)
//모든 hilite를 제거한 다음 hilite를 추가합니다. 선택된 항목
$newLi.removeClass('hiLite' );
$clickedLi.addClass('hiLite')
setSelectText(text)
$newUl.hide(); ContainerDiv.css('위치', '정적'); //즉
});
} else {
$newLi.click(function(e) {
var $clickedLi = jQuery( e.target),
text = $clickedLi.text();
//update counter
currentIndex = $newLi.index($clickedLi)
//모든 hilite를 추가합니다. 선택한 항목에
$newLi.removeClass('hiLite');
$clickedLi.addClass('hiLite')
setSelectText(text)
$newUl.hide(); $containerDiv.css('position', 'static') ; //ie
(opts.callbackfn)(this.value)
})
} //param callbackfn은 ul;(2010-2 -4)
다음 페이지의 응용 프로그램,
코드
코드 복사
코드는 다음과 같습니다.