JavaScript を使用して HTML のドロップダウンリスト効果を美しくする select tag

ホームページ

ウェブフロントエンド

jsチュートリアル

JavaScript を使用して HTML のドロップダウンリスト効果を美しくする select tag_javascript スキル

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

May 16, 2016 pm 03:31 PM

html javascript select

まず、例を通して 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>

ログイン後にコピー

通常の効果は次のようになります:

20151117144635327.png (119×118)

美しさや醜さはひとまず置いておいて...select は、すべての HTML 要素の中で最も欺瞞的な要素の 1 つです。彼を夢中にさせる主なものは次のとおりです:

異なるブラウザで表示されるデフォルトのドロップダウンボックスはまったく同じではありません
IE では選択範囲の高さを手動で設定することはできません (これが最も面倒です!)。それをサポートするには font-size に依存するしかありません
選択の右側にあるドロップダウン矢印は背景を削除できないため、CSS を使用して美化することができなくなります
要約すると、主な解決策は次のとおりです:

選択を非表示にし、div を使用してシミュレートします
選択の透明度を 0 に設定し、相対位置を使用して、選択のように見え、

の下に美化された div を追加します。

隠蔽スキームの一般原則は次のとおりです:
ページ上で処理する必要がある選択範囲を見つけて非表示にします
選択したオプションに従って、li リスト (もちろん div にすることもできます) を作成し、それを非表示にします。
選択した位置に div を作成し、選択した値 (選択したオプション) を表示します。 CSS を使用してそれを選択のように美しくします
「選択」をクリックしたときにリストを表示するイベントを追加します。そして、相対位置を使用して、このリストを「選択」
の下に表示します。 li リストにイベントを追加して、ドロップダウンボックスの値選択プロセスをシミュレートします (クリックイベントとキーボード ↑↓ イベントをシミュレートする必要があります)
値の選択が完了すると、上の「選択」に選択した値が表示され、実際の選択値が設定されるはずです
もちろん、より複雑にしたい場合は、オプションの検索、複数選択、複数選択後のオプションの削除などを追加することもできます。当時の一般原則は上記と同様でした。インターネット上にはそのようなプラグインがたくさんあります。ただし、オンラインプラグインを使用する場合は、ブラウザの互換性テストに注意を払う必要があります。選択をシミュレートする機能が複雑になればなるほど、互換性を実現するのは難しくなります。

プログラムでそのような複雑な選択が必要ない場合は、透明度を設定する 2 番目のオプションが適している可能性があります。今日皆さんにお伝えしたいのもこの計画です。
その原理は次のとおりです:

現在のページの選択部分を見つけて、その透明度を 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. コンテナの表示または非表示がサードパーティのプラグインによって制御されており、それを変更するのが不便な場合は、次の解決策を検討できます:
美化プログラムでは、まず選択が非表示かどうかを判断し、非表示の場合はロジックを変更せずにタイマーを追加し、要素が表示されるかどうかを判断し、表示されたときに自動的に fix を呼び出して削除します。タイマー
コードは次のとおりです:

//加上隐藏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);

ログイン後にコピー

実行中のコードは元のコードから変更されていません。

このウェブサイトの声明

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。