JavaScript를 사용하여 HTML 선택 tag_javascript 기술의 드롭다운 목록 효과를 아름답게 만듭니다.
- WBOY원래의
- 2016-05-16 15:31:441267검색
먼저 예시를 통해 select 태그의 사용법을 살펴보겠습니다.
<html> <body> <form> <select name="cars"> <option value="volvo">Volvo</option> <option value="saab">Saab</option> <option value="fiat">Fiat</option> <option value="audi">Audi</option> </select> </form> </body> </html>
그러면 일반적인 효과는 다음과 같습니다.
아름다움과 추함은 잠시 제쳐두고...select는 모든 HTML 요소 중에서 가장 사기적인 요소 중 하나입니다. 그를 미치게 만드는 주요 요인은 다음과 같습니다.
다른 브라우저에 표시되는 기본 드롭다운 상자는 정확히 동일하지 않습니다.
IE에서는 선택 항목의 높이를 수동으로 설정할 수 없으며(이것이 가장 짜증나는 일입니다!) 지원하려면 글꼴 크기에만 의존할 수 있습니다
선택 오른쪽의 드롭다운 화살표는 배경을 제거할 수 없으므로 CSS를 사용하여 미화를 할 수 없습니다
요약하면 주요 솔루션은 다음과 같습니다.
선택을 숨기고 div를 사용하여 시뮬레이션
선택 투명도를 0으로 설정한 다음 상대 위치 지정을 사용하여 선택처럼 보이고 아래에 아름답게 표시된 div를 추가합니다
숨기기 방식의 일반적인 원리는 다음과 같습니다.
페이지에서 처리해야 할 선택 항목을 찾아 숨기세요
선택한 옵션에 따라 li 목록(물론 div일 수도 있음)을 생성하고 숨깁니다.
선택한 값(선택한 옵션)을 표시하려면 선택 위치에 div를 생성하세요. CSS를 사용하여 선택 항목처럼 보이도록 아름답게 만듭니다
"select" 클릭 시 li 목록을 표시하는 이벤트를 추가합니다. 그리고 상대 위치 지정을 사용하여 이 목록을 "선택" 아래에 표시하세요
li 목록에 이벤트를 추가하여 드롭다운 상자의 값 선택 프로세스를 시뮬레이션합니다(클릭 이벤트 및 키보드 ↑↓ 이벤트를 시뮬레이션해야 함)
값 선택이 완료되면 위의 "select"에 선택된 값이 표시되어야 하며, 실제 선택 값이 설정되어야 합니다
물론 좀 더 복잡하게 만들고 싶다면 옵션 검색, 다중 선택, 다중 선택 후 옵션 삭제 등을 추가할 수도 있습니다. 당시의 일반적인 원칙은 위와 유사했습니다. 인터넷에는 그러한 플러그인이 많이 있습니다. 하지만 온라인 플러그인을 사용할 때는 브라우저의 호환성 테스트에 주의를 기울여야 합니다. 선택을 시뮬레이션하는 기능이 복잡할수록 호환성을 달성하기가 더 어려워집니다.
프로그램에 이러한 복잡한 선택이 필요하지 않은 경우 투명도 설정의 두 번째 옵션이 적합할 수 있습니다. 오늘 제가 여러분과 나누고 싶은 것도 바로 이 계획입니다.
그 원리는 다음과 같습니다.
현재 페이지의 선택 항목을 찾아 투명도를 0으로 설정합니다. 보이지 않게 설정하지만 클릭하여 값을 선택할 수 있습니다
div를 만들고 상대 위치 지정을 사용하여 선택 항목 아래에 배치한 다음 CSS로 제어하여 선택 항목처럼 보이게 만듭니다. 왜 아래에 배치해야합니까? 이로 인해 실제 선택을 클릭할 수 있으며 실제 선택은 완전히 투명하기 때문에 사용자가 시뮬레이션 선택을 클릭한 것처럼 보입니다. 위에 배치하면 사용자가 이 시뮬레이션 선택을 클릭하면 실제 선택이 확장되지 않습니다! ! !
div의 텍스트를 select
값으로 설정합니다.
실제 선택으로 값을 선택한 후 시뮬레이션 div에 해당 값이 표시되도록 이벤트를 추가합니다
코드부터 시작해 보겠습니다.
( function ($){
var selectFix= function (){
var select=$( this );
//设置透明度为0 当然你也可以使用css控制 使用Jquery设置透明度可以屏蔽 透明度的 浏览器兼容性问题
$(select).css({
"opacity" :0
});
//找到select的选项
var sOptions= this .get(0).options;
//设置模拟select的值
var setFixDivText= function (selectValue){
var text= "" ;
for ( var i=0;i<sOptions.length;i++){
var option=sOptions[i];
if (option.value==selectValue){
text=$(option).text();
break ;
}
}
return text;
};
//模拟的select
//初始化时要将select的值传入
var selectFixDiv=$( '<div id="J_selectFix_' +select.attr("id ")+'" class = "selectFix" >'+setFixDivText($(select).val())+ '</div>' );
select.after(selectFixDiv);
var left=$(select).offset().left;
var top=$(select).offset().top-1; //因为一般select都有1px的边框，所以这里往上拉1px
$(selectFixDiv).css({
"top" : top,
"left" : left
});
//select选值时，将值显示到模拟的select上
$(select).bind( "change click" , function (){
$(selectFixDiv).text(setFixDivText($( this ).val()));
});
};
$.fn.selectFix=selectFix;
})(jQuery);
(function($){
var selectFix=function(){
var select=$(this);
//设置透明度为0 当然你也可以使用css控制 使用Jquery设置透明度可以屏蔽 透明度的 浏览器兼容性问题
$(select).css({
"opacity":0
});
//找到select的选项
var sOptions=this.get(0).options;
//设置模拟select的值
var setFixDivText=function(selectValue){
var text="";
for(var i=0;i<sOptions.length;i++){
var option=sOptions[i];
if(option.value==selectValue){
text=$(option).text();
break;
}
}
return text;
};
//模拟的select
//初始化时要将select的值传入
var selectFixDiv=$('<div id="J_selectFix_'+select.attr("id")+'" class="selectFix">'+setFixDivText($(select).val())+'</div>');
select.after(selectFixDiv);
var left=$(select).offset().left;
var top=$(select).offset().top-1;//因为一般select都有1px的边框，所以这里往上拉1px
$(selectFixDiv).css({
"top" : top,
"left" : left
});
//select选值时，将值显示到模拟的select上
$(select).bind("change click",function(){
$(selectFixDiv).text(setFixDivText($(this).val()));
});
};
$.fn.selectFix=selectFix;
})(jQuery);
실행 중인 플러그인 코드:
jQuery(document).ready( function () {
var selects=$( "select.selectInput" );
if (selects.length){
selects.each( function (){
$( this ).selectFix();
});
}
});
jQuery(document).ready(function() {
var selects=$("select.selectInput");
if(selects.length){
selects.each(function(){
$(this).selectFix();
});
}
});
다음은 HTML 코드입니다.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" >
< HTML >
< HEAD >
< TITLE > New Document </ TITLE >
< META NAME = "Generator" CONTENT = "EditPlus" >
< META NAME = "Author" CONTENT = "" >
< META NAME = "Keywords" CONTENT = "" >
< META NAME = "Description" CONTENT = "" >
< script type = text /javascript src = "http://ajax.googleapis.com/ajax/libs/jquery/1.6/jquery.min.js" > </ script >
< script type = text /javascript src = "temp.js" > </ script >
< style >
html {font-family: "宋体";font-size: 12px;line-height: 25px;color: #6F6F6F;}
.dn {display: none;}
select{cursor: pointer;}
input,
select,
textarea,
.selectFix {background: white;border: 1px solid #E0E0E0;hide-focus: expression( this.hideFocus = true ); outline: none;}
.formText,
.selectInput,
.text,
.selectFix{border: 1px solid #CCC;width: 180px;height: 30px;line-height:30px;padding: 0 3px;}
.selectInput {width: 248px; font-size:13px; position: relative; z-index: 2;}
.selectFix{width:248px; background: url(selectBg.png) no-repeat; background-position: right; background-color: #fff; position:absolute; z-index: 1;}
</ style >
</ HEAD >
< BODY >
< div id = "main" >
< select id = "sex" class = "selectInput" name = "sex" >
< option value = "0" > 男 </ option >
< option value = "1" > 女 </ option >
</ select >
</ div >
</ BODY >
</ HTML >
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="">
<META NAME="Keywords" CONTENT="">
<META NAME="Description" CONTENT="">
<script type=text/javascript src="http://ajax.googleapis.com/ajax/libs/jquery/1.6/jquery.min.js"></script>
<script type=text/javascript src="temp.js"></script>
<style>
html {font-family: "宋体";font-size: 12px;line-height: 25px;color: #6F6F6F;}
.dn {display: none;}
select{cursor: pointer;}
input,
select,
textarea,
.selectFix {background: white;border: 1px solid #E0E0E0;hide-focus: expression(this.hideFocus=true); outline: none;}
.formText,
.selectInput,
.text,
.selectFix{border: 1px solid #CCC;width: 180px;height: 30px;line-height:30px;padding: 0 3px;}
.selectInput {width: 248px; font-size:13px; position: relative; z-index: 2;}
.selectFix{width:248px; background: url(selectBg.png) no-repeat; background-position: right; background-color: #fff; position:absolute; z-index: 1;}
</style>
</HEAD>
<BODY>
<div id="main">
<select id="sex" class="selectInput" name="sex">
<option value="0">男</option>
<option value="1">女</option>
</select>
</div>
</BODY>
</HTML>
주요 브라우저와 호환됩니다.
그러나 이전 버전의 IE에서는 여전히 실제 선택 영역의 높이를 확장할 수 없다는 큰 결함이 있습니다. 따라서 사용자가 시뮬레이션된 선택의 아래쪽 위치를 클릭하면 선택이 확장될 수 없다는 것을 알게 됩니다! !
하지만 디자인의 예술은 균형입니다. 이 결함을 견딜 수 없다면 첫 번째 솔루션을 사용할 수 있습니다.
또한 테스트 결과 선택 항목이 숨겨진 컨테이너에 있는 경우 표시한 후 선택 항목의 위치가 비어 있는 것으로 나타났습니다! !
무슨 일이야? !
HTML 요소를 숨긴 후에는 해당 요소의 화면 좌표를 얻을 수 없는 것으로 나타났습니다! ! ! 따라서 표시될 때 실제 선택은 완전히 투명한 반면, 시뮬레이션된 선택은 화면의 왼쪽 상단 모서리까지 실행됩니다. 획득한 셀렉트의 좌표는 (0,0)이기 때문입니다
걱정하지 마세요. 이 문제에 대한 해결책이 있습니다:
1. 코드만 작성하면 select의 미화 프로그램이 실행됩니다
먼저 위 코드를 실행하는 미화 프로그램을 다음과 같이 수정해야 합니다.
jQuery(document).ready( function () {
var selects=$( "select.selectInput" );
if (selects.length){
selects.each( function (){
if (!($( this ).attr( "autoFix" )== "false" )){
$( this ).selectFix();
}
});
}
});
jQuery(document).ready(function() {
var selects=$("select.selectInput");
if(selects.length){
selects.each(function(){
if(!($(this).attr("autoFix")=="false")){
$(this).selectFix();
}
});
}
});
그런 다음 숨겨진 선택 항목에 autoFix="false" 속성을 추가합니다.
< select id = "sex" class = "selectInput" name = "sex" autoFix = "false" >
< option value = "0" > 男 </ option >
< option value = "1" > 女 </ option >
</ select >
<select id="sex" class="selectInput" name="sex" autoFix="false">
<option value="0">男</option>
<option value="1">女</option>
</select>
그런 다음 외부 컨테이너가 표시되면 $("#sex").selectFix()를 수동으로 호출하세요
2. 컨테이너의 표시나 숨김이 타사 플러그인으로 제어되어 수정이 불편한 경우 다음과 같은 해결 방법을 고려해 볼 수 있습니다.
미화 프로그램에서 먼저 선택 항목이 숨겨져 있는지 확인합니다. 그렇지 않으면 논리가 변경되지 않고 숨겨져 있으면 타이머, 루프를 추가하여 요소가 표시되는지 확인하고 표시되면 자동으로 수정을 호출한 다음 제거합니다. 타이머
코드는 다음과 같습니다.
//加上隐藏select的操作
( function ($){
var selectFix= function (){
var select=$( this );
//设置透明度为0 当然你也可以使用css控制 使用Jquery设置透明度可以屏蔽 透明度的 浏览器兼容性问题
$(select).css({
"opacity" :0
});
if (!select.is( ":hidden" )){
var sOptions= this .get(0).options;
var setFixDivText= function (selectValue){
var text= "" ;
for ( var i=0;i<sOptions.length;i++){
var option=sOptions[i];
if (option.value==selectValue){
text=$(option).text();
break ;
}
}
return text;
};
var selectFixDiv=$( '<div id="J_selectFix_' +select.attr("id ")+'" class = "selectFix" status= "close" >'+setFixDivText($(select).val())+ '</div>' );
select.after(selectFixDiv);
var selectWidth=$(select).innerWidth();
var selectFixDivWidth=$(selectFixDiv).innerWidth();
var left=$(select).offset().left;
var top=$(select).offset().top-1;
$(selectFixDiv).css({
"top" : top,
"left" : left,
"margin" : 0
});
$(select).bind( "change click" , function (){
$(selectFixDiv).text(setFixDivText($( this ).val()));
});
} else {
var tasks = function (){
if (!$(select).is( ":hidden" )){
$(select).selectFix();
clearInterval(timer);
}
};
var timer=setInterval(tasks,500)
}
};
$.fn.selectFix=selectFix;
})(jQuery);
//加上隐藏select的操作
(function($){
var selectFix=function(){
var select=$(this);
//设置透明度为0 当然你也可以使用css控制 使用Jquery设置透明度可以屏蔽 透明度的 浏览器兼容性问题
$(select).css({
"opacity":0
});
if(!select.is(":hidden")){
var sOptions=this.get(0).options;
var setFixDivText=function(selectValue){
var text="";
for(var i=0;i<sOptions.length;i++){
var option=sOptions[i];
if(option.value==selectValue){
text=$(option).text();
break;
}
}
return text;
};
var selectFixDiv=$('<div id="J_selectFix_'+select.attr("id")+'" class="selectFix" status="close">'+setFixDivText($(select).val())+'</div>');
select.after(selectFixDiv);
var selectWidth=$(select).innerWidth();
var selectFixDivWidth=$(selectFixDiv).innerWidth();
var left=$(select).offset().left;
var top=$(select).offset().top-1;
$(selectFixDiv).css({
"top" : top,
"left" : left,
"margin" : 0
});
$(select).bind("change click",function(){
$(selectFixDiv).text(setFixDivText($(this).val()));
});
}else{
var tasks = function(){
if(!$(select).is(":hidden")){
$(select).selectFix();
clearInterval(timer);
}
};
var timer=setInterval(tasks,500)
}
};
$.fn.selectFix=selectFix;
})(jQuery);
실행 코드는 원래 코드와 변경되지 않은 상태로 유지됩니다.