jquery_jquery를 기반으로 하는 웹 페이지 SELECT 드롭다운 상자 미화 코드

1. 일부 선택 미화 코드가 원래 선택 컨트롤의 onchange 이벤트를 트리거할 수 없는 문제를 해결했습니다.
2. $("...").selectCss()에 대한 다중 호출을 허용하여 업데이트 후 Select 옵션을 동기화할 수 없는 문제를 해결합니다.

사용방법은 다음과 같습니다.

코드를 복사하세요 코드는 다음과 같습니다. 다음은 다음과 같습니다:

="" onchange= "alert(this.value)" id="select1">
옵션 1 옵션 2
옵션 3

옵션 31
옵션 32 >33개 선택




selectCss.css 및 selectCss.js가 포함된 기본 파일

selectCss.js 파일 코드:

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

(함수($){
함수 hideOptions(속도){
if(speed.data){speed=speed.data}
if($(document).data(" nowselectoptions"))
{
$($(document).data("nowselectoptions")).slideUp(속도);
$($(document).data("nowselectoptions")).prev ("div").removeClass("tag_select_open");
$(document).data("nowselectoptions",null)
$(document).unbind("click",hideOptions); $(document).unbind("keyup",hideOptionsOnEscKey);
}
}
function hideOptionsOnEscKey(e){
var myEvent = e || window.event; myEvent.keyCode;
if(keyCode==27)hideOptions(e.data);
}
function showOptions(speed){
$(document).bind("click",speed, hideOptions);
$(document).bind("keyup",hideOptionsOnEscKey)
$($(document).data("nowselectoptions")).slideDown(speed); $(document).data("nowselectoptions")).prev("div").addClass("tag_select_open")
}

$.fn.selectCss=function(_speed){
$(this).each(function(){
var speed=_speed||"fast";
if($(this).data("cssobj")){
$($( this).data("cssobj")).remove();
}
$(this).hide();
var divselect = $("

").insertAfter(this).addClass("tag_select");
$(this).data("cssobj",divselect);
var divoptions = $("

").insertAfter(divselect).addClass("tag_options").hide();
divselect.click(function(e){
if($($(document).data("nowselectoptions")).get(0) != $(this).next("ul"). get(0)){
hideOptions(speed);
}
if(!$(this).next("ul").is(":visible"))
{
e.stopPropagation();
$(document).data("nowselectoptions",$(this).next("ul"))
showOptions(speed)
}
} );
divselect.hover(function(){
$(this).addClass("tag_select_hover");
}
,
function(){
$(this).removeClass ("tag_select_hover")
});
$(this).change(function(){
$(this).nextAll("ul").children("li:eq(" $(this)[0].selectedIndex ")") .addClass("open_selected").siblings().removeClass("open_selected")
$(this).next("div").html($(this).children("option:eq(" $ (this)[0].selectedIndex ")").text())
});
$(this).children("option").each(function(i){
var lioption= $("

").html($(this). text()).attr("title",$(this).attr("title")).appendTo(divoptions)
if($(this).attr("selected")){
lioption.addClass("open_selected");
divselect.html($(this).text())
}
lioption.data("option",this); (function(){
lioption.data("option").selected=true;
$(lioption.data("option")).trigger("change",true)
});
lioption.hover(
function(){$(this).addClass("open_hover");},
function(){ $(this).removeClass("open_hover"); }
)
});
});
}
})(jQuery);



selectCss.Css 文件代码:

复system代码

代码如下: .tag_select{display:block;color:#000;너비:179px;높이:23px;배경:투명 URL("images/index_22.jpg") 반복 없음 0 0;패딩: 0 10px;줄 높이:23px; 색상:#7D7D7D; 글꼴 크기:12px; 커서:포인터} .tag_select_hover{ 색상:#ff0000; 배경:투명 url("selectbg.jpg") 반복 없음 0 0; }

.tag_select_open{ color:#0000ff; 배경:투명 URL("selectbg.jpg") 반복 없음 0 0;}

ul.tag_options{위치:absolute;margin:0;list-style:none;배경:#fff;padding:0 0 1px; 여백:0;너비:162px ; 높이:100px; 오버플로:숨김; 오버플로-y:자동; 글꼴 크기:12px; 여백-왼쪽:10px; 커서:포인터; z-index:1000 }
ul.tag_options li{배경:#fff; 디스플레이:블록;너비:140px;패딩:0 10px;높이:20px;텍스트 장식:없음;라인 높이:20px;색상:#000; 글꼴 두께:일반; 글꼴 크기:12px}
ul.tag_options li.open_hover{배경:#0000ff;color:#000; 글꼴 두께:일반; 글꼴 크기:12px}
ul.tag_options li.open_selected{배경:#ccc; 글꼴 크기:12px;글꼴 두께:굵게; }


selectbg.jpg 사진: