레이어가 닫히고 이벤트가 원본
a.click(function () {
var n = $(this).index; ();
select.selectedIndex = n;
input.val(select.options [n].text)
div.hide();
});
}
//여기에서는 특수 클래스 이름인 "noscroll"을 판단합니다.
//옵션이 너무 많으면 기본적으로 옵션 목록에 스크롤 막대가 표시됩니다. .noscroll 수정이 있으면 스크롤 막대가 강제로 표시되지 않습니다.
var noscroll = (select.options.length < ; 10 || $(select).hasClass("noscroll"))
if ( /msie 6/i.test(window.navigator.userAgent)) {
div.css("height", noscroll ? "auto" : "215px").css("overflow-y", noscroll ? "hidden " : "scroll");
} else {
div.css("max-height", noscroll ? "10000px" : "215px");
}
//여기서 특수 클래스 이름 "onside"
//.onside 수정이 있는 경우 팝업 옵션 레이어는 측면에 있고, 그렇지 않으면 아래에 있습니다.
//참고: 여기서 사용된 두 함수 LocateBeside 및 LocateBelow는 다음과 같습니다. 나중에 제공하겠습니다
$(select).hasClass("onside")
? div.locateBeside(this, -2)
: div.locateBelow(this, -4 );
//<입력>
if ( window.activeDummySelect == select) {
div.slideToggle(100)
} else {
div.hide().slideDown(100);
window.activeDummySelect = select;
}
//스크롤바가 있는 경우 스크롤바를 해당 위치로 스크롤해야 합니다. 현재 선택된 항목
if (!select.selectedIndex > 6 && div[0].scrollHeight > div.height ()) {
div.scrollTop((select.selectedIndex - 3) * div[0] .firstChild.offsetHeight);
}
});
})
// 마지막으로, 웹페이지에서 빈 영역을 클릭할 때
$(document).click(function (e) {
if (!$(e.target).is (".dummy") && !$(e.target).is(" #dummydata")) {
$("#dummydata").hide();
}
});
}
});
위 코드에서는 두 가지 메서드가 사용된다고 나와 있습니다. 두 가지 메서드는 제 js 라이브러리에 있는 jQuery의 확장입니다. 그런데, 두 가지 메서드를 추가로 지정해 보겠습니다.
:-) 코드
$.fn.extend ({
찾기: 함수 (x, y ) {
if (this.css("position") == "fixed") {
y -= $(document).scrollTop();
}
return this.css({ left: x, top: y });
},
locateBeside: function (el, adjustX) {
var p = $(el). offset(),
w1 = $(el ).outerWidth(),
w2 = this.outerWidth(),
h2 = this.outerHeight(),
x = p.left w1 5 (adjustX || 0),
y = p.top;
if ($(document).width() < x w2) {
x = p.left - w2 - 5 - (adjustX || 0)
}
if ($(document).height() < y h2) {
y = p.top - (y h2 15 - $(document).height() );
}
이것을 반환합니다. Locate(x, y);
},
locateBelow: function (el, adjustY) {
var p = $(el).offset() ;
return this.locate(p.left , p.top $(el).outerHeight() 3 (adjustY || 0)),
locateCenter: function () {
return this.locate(
($(window ).width() - this.width()) / 2,
($(window).height() - this.height()) / 2 $( document).scrollTop()
);
}
});
마지막으로 스타일 시트 정의 및 데모 효과의 몇 가지 예가 제공됩니다.
input.dummy { background-image: url(/static/images/ 콤보.gif); 배경 위치: 오른쪽 12px; 배경 반복: 반복 없음; 커서: 포인터 !중요; }
input.dummy:hover, input.dummy:focus { 배경 이미지: url(/static) /images/combo_hover.gif) }
#dummydata { 위치: 절대; z-색인: 20; 테두리: 1px 배경색: #393939;
#dummydata a { 디스플레이: 블록; 색상: #ddd ; 텍스트 들여쓰기: 3px; 텍스트 오버플로: 줄임표 }
#dummydata a:hover; -장식: 없음; }
#dummydata.matrix { 너비: 208px; 패딩: 5px; } /* 행렬 효과*/
#dummydata.matrix a { float: left; 너비: 33%; >#dummydata.matrix-large { 너비: 640px; 패딩: 5px } /* 행렬-대형 효과*/
#dummydata.matrix-large a { float: left; 25%; dummydata a.fullwidth { float: none; }
#dummydata a.delimiter { float: 없음; 너비: 100%; 가시성: 숨겨진 }
#dummydata a.selected; }
위 스타일 정의 그림의 효과
html에서 해야 할 일은 몇 가지 클래스 수정만 추가하는 것뿐입니다
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
