👨‍🔧 👕 😨 [選択フォーム]：jQueryとCSSを使用して選択リストを作成する 👩🏼‍🚀 🤦 🤘🏼

こんにちは、habrayuzeryとただ読んでいます。最近、スタイルをselectタグに適用する方法を知りました。誰もがフォームの様式をサイトのデザインに一致させることを望んでいますが、これまでのところ、すべてが純粋なCSSで記述できるわけではありません。この記事では、CSSとJavaScriptのjQueryライブラリーを使用して選択リストを作成する簡単な例を見ていきます。この資料は初心者にとって特に興味深いものになると思います。もちろん、ネイティブJSで記述する方が良いでしょうが、コード行が増えることは誰もが知っており、それはほとんど明確ではありません。

正直なところ、次の自転車の作成を始める前に、同様の解決策を見つけようとしましたが、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：この記事が、誰かがこの/同様の問題を解決するのに役立つことを願っています。

[選択フォーム]：jQueryとCSSを使用して選択リストを作成する

More articles: