Node.js 사용자 정의 연결 드롭다운 box_javascript 기술

이 드롭다운 상자가 미적 요구를 조금 충족할 수 있다고 생각합니다.

클릭의 효과입니다. 키보드의 방향키, 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)


다음 페이지의 응용 프로그램,

코드

코드 복사


코드는 다음과 같습니다.

{ defaultText: "", callbackfn: 함수(값) {

if (값 == 1) {

jQuery("#my-dropdown2_list").parent().remove()
jQuery("#linkc_value") .val(value);
return;
}
jQuery.getJSON(
'/Department.mvc/GetSubDepartment?DepartmentID=' value,
function(list) {
jQuery ("#my-dropdown2_list").parent().remove();
jQuery("#my-dropdown2").html("")
var temp = ""
temp = "부서를 선택하세요 "
for (var i = 0; i temp = "" list[i].DepartmentName "";
}
jQuery("#my-dropdown2").html(temp);
jQuery("#my-dropdown2").show();
jQuery('#my-dropdown2').sSelect({
callbackfn: function(value) {
jQuery("#linkc_value" ).val(값);
}
});
}
}
); return true; }
// window.onerror = killErrors;
})
function linkc() {
location.href = "/User.mvc/Front?DepartmentID=" jQuery(" #linkc_value").val();
}



이 세 부분은 일부일 뿐이지만
시간이 많이 걸립니다. 다른 코드는 게시되지 않습니다. 질문이 있으시면 메시지를 남겨주세요. . .