正直なところ、次の自転車の作成を始める前に、同様の解決策を見つけようとしましたが、selectタグの壮大なdivラッパーを除けば、何も見つかりませんでした。 そして、私はシンプルで必要なものを書くのがいいと思った。 それでは、始めましょう！
3つのファイルがプラスチシンモデリングマグに参加しています。
- selectbox.html
- selectbox.css
- selectbox.js
それらを順番に検討します。 まず、この例で最も単純なものに注意してください-リストまたはselectbox.htmlファイルのレイアウト：
selectbox.html
<!-- /////////////////////////////////////////////////////////////////////////////////////////// -... --> <!-- --> <div id=selectBox> <!-- , , div- --> <img src="arrow.png" alt="" width='15px' class=arrow /> <!-- , --> <p class=valueTag name=select></p> <!-- --> <ul id=selectMenuBox> <li class=option></li> <li class=option></li> <li class=option></li> <li class=option></li> <li class=option></li> <li class=option></li> <li class=option></li> <li class=option></li> <li class=option></li> <li class=option></li> <li class=option></li> <li class=option></li> </ul> </div> <!-- --> </body> </html>
ソースhtmlコードからわかるように、リストから月を選択することができます。 次に、 selectbox.cssファイルを検討します。
selectbox.css
div#selectBox { width: 250px; position: relative; height: 50px; border-radius: 3px; border: solid 1px lightgrey; background-color: #fff; color: #333; cursor: pointer; overflow: hidden; transition: .3s; } div#selectBox p.valueTag { padding: 15px; cursor: pointer; transition: .2s; height: 40px; } div#selectBox > img.arrow { position: absolute; right: 0; width: 50px; padding: 15px; } /* Safari, Chrome Opera — -. */ ::-webkit-scrollbar { background: transparent; width: 0.5em; position: absolute; } ::-webkit-scrollbar-track { background: transparent; position: absolute; z-index: -2; } ::-webkit-scrollbar-thumb { border-radius: 100px; background: #888; } ul#selectMenuBox { background: #fff; transition: .3s; width: 100%; height: 200px; overflow-y: auto; overflow-x: hidden !important; position: absolute; margin-top: 00px; display: block; } ul#selectMenuBox > li { display: block; padding: 10px; border-radius: 00px; cursor: pointer; } ul#selectMenuBox > li.option { color: gray; padding: 10px; } ul#selectMenuBox > li.option:hover { color: #333; background: #e1e1e1; transition: .2s; }
HTMLとCSS3をそれぞれ使用してレイアウトとマークアップの基本を知っていれば、特に問題はありません。
そして今、グッズのために！ jboxのselectbox（）プラグインのソースコード、 selectbox.jsファイルを検討してください。
selectbox.js
(function( $ ) { $.fn.selectbox = function() { // // div'a. var selectDefaultHeight = $('#selectBox').height(); // div'e var rotateDefault = "rotate(0deg)"; // , // div'a. // (, ) $('#selectBox > p.valueTag').click(function() { // height() var currentHeight = $('#selectBox').height(); // / , // . . if (currentHeight < 100 || currentHeight == selectDefaultHeight) { // , , // . $('#selectBox').height("250px"); // « » // CSS3 $('img.arrow').css({borderRadius: "1000px", transition: ".2s", transform: "rotate(180deg)"}); } // ( 250 ), // valueTag, // + if (currentHeight >= 250) { $('#selectBox').height(selectDefaultHeight); $('img.arrow').css({transform: rotateDefault}); } }); // // $('li.option').click(function() { $('#selectBox').height(selectDefaultHeight); $('img.arrow').css({transform: rotateDefault}); $('p.valueTag').text($(this).text()); }); }; })( jQuery );
より多くのコードがありましたが、css（）およびheight（）メソッドのおかげで圧縮できました。 利便性と再利用のためのプラグインとして設計されています。 うまく機能していれば、好きなようにできるので、誰かが私の松葉杖を最適化しても気になりません。 呼び出すには、外部スクリプトファイルを接続し、次のようにプラグインを呼び出します。
$('selector').selectbox();
まず、ドキュメントが完全にロードされた後にプラグインがロードされるように、ドキュメントオブジェクトのready（）メソッドへの呼び出しを含めることにより。 jQueryプラグインの詳細については、 こちらをご覧ください 。
次のような結果になりました。
ご清聴ありがとうございました！ シンプルでスタイリッシュなレイアウト！
PS：この記事が、誰かがこの/同様の問題を解決するのに役立つことを願っています。