선택 태그 시뮬레이션/미화 방법은 JS 플러그인_jquery를 사용합니다.

태그의 모양이 매우 짜증납니다. 브라우저마다 일관성이 없습니다. IE의 경우 버전마다 모양이 다르며 CSS로 수정할 수 없습니다.

여기서

를 아름답게 만드는 방법을 공유하겠습니다.
장점: 를 계속 사용하면 모양만 변경되고 양식 동작을 변경하거나 방해하지 않으며 나중에 JS를 로드할 수 있습니다. (참고: 이 스크립트는 jQuery를 사용합니다.)

말할 것도 없고 코드에 다 나와 있습니다.

코드 복사 코드는 다음과 같습니다.

$(document).ready(function () {
// 아름답게 해야 할

태그를 찾습니다. 클래스 이름 "beautify"를 사용하여 이를 결정합니다. < 이 스타일의 선택>은 무시됩니다.
var selects = $("select.beautify")
if (selects.length > 0) {
//먼저 $("body").append("

");
//하나씩 꾸미세요
selects.each(function () {
//이 항목에 대한 별칭 설정(즉, ) 다음 익명 함수에서 사용되는 이 함수 아래
var select = this
// 생성, .dummy는 이 유형의 < input>
//동시에 일부 속성과 스타일을 이 더미 입력에 복사합니다.
//생성 후 이 ;
var input = $("")
.attr("disabled", this.disabled)
.css("너비", parsInt(this.style.width ) "px")
.css("display", this.style.display)
.insertAfter(this)
.val( this.options[this.selectedIndex].text);
//를 숨기고 .beautify에서 display:none을 정의하지 마세요. js가 로드되지 않으면 계속 사용해야 하기 때문입니다.
this .style.display = "none";
/ / 를 클릭한 경우
input.click(function () {
// 이전에 생성된 < div id='dummydata'> 및 콘텐츠 지우기
// 의 스타일 시트를 전달합니다. 이

를 수정해야 하는 경우
var div = $("#dummydata")
.empty()
.attr("class", select.className)
//

의 너비를 설정합니다. 특수 클래스 이름 "extend"를 결정합니다.
//.extend가 포함되어 있으면 너비가 추가 사용자 정의 제어에 적용됩니다. 그렇지 않으면 너비는 기본적으로

과 일치합니다. (select).hasClass("extend")
? div.css ("width", "")
: div.css("width", $(this).innerWidth())
//을

내부에서 태그에 해당합니다(var i = 0; i < select.options. length; i ) {
var item = select.options[i]
var a = $(" /a>")
.css("color", item.style.color)
.addClass(item.className)
.html(item.text)
.appendTo(div);
if (i == select.selectedIndex) {
a .addClass("selected")
}
//옵션을 클릭하면 해당하는 으로 설정하면

레이어가 닫히고 이벤트가 원본
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에서 해야 할 일은 몇 가지 클래스 수정만 추가하는 것뿐입니다

본 웹사이트의 성명

본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.