スタイリング選択用のWordPressプラグイン。 セレクターをスタイル設定するための JQuery プラグイン。 選択のデザインに使用できる CSS クラス

ゴロヴナ / グーグルプレイ
ソルダトフ・ニコライ
選択のスタイリング サードパーティのライブラリや JavaScript コードを使用せず、純粋な CSS を使用して選択をスタイリングします。 さらに、追加の JavaScript と jQuery を使用して選択オプションをスタイルする方法を見ていきます。

構造は標準的なものになります

ゾウ カバ キリン

そのため、選択では値 1 の size 属性を使用して行 1 が表示されます。

当店セレクトのスタイリング

-webkit の外観: なし。 -moz-外観: なし。 -ms-外観: なし。 外観：なし。 背景: url ("path/img.png" ) 繰り返しなし、右中央; 概要: 0;

オットリモモ

ゾウ カバ キリン

アプリケーションでは、電源がすべてのブラウザで同じように動作するように、ベンダー プレフィックスを使用して ccs 電源の外観を複数行記述しました。 電力については以下をお読みください。

すべての折り畳み可能性は、標準の矢印を長方形の矢印に置き換え、代わりに背景を実装したことによるものです。 このように画像を挿入することができます。 追加の背景サイズボックスのサイズも調整する必要があります

外観CSS

css3 パワーアピアランスがデザインの実装に役立ちました

この機能により、要素の外観をボタン、チェックボックス、ラジオ、フィールド、アイコンなどに変更できます。 私たちのエピソードでは、要素「vikoristuyuchi none」を叫び、追加の背景として写真を追加しました。

スタイル選択オプション

選択オプションのスタイルを設定するには JavaScript が必要です

Vibrati HTML JavaScript PHP .select (表示: ブロック ; 最大幅: 215px ; 幅: 100% ; 位置: 相対; )。 相対的 ; ) .new-select__list (ボーダー : 1px ソリッド #ced4da ; カーソル : ポインタ ; 位置 : 絶対 ; 上部 : 45px ; 左 : 0 ; 幅 : 100% ; ) .new-select__list.on (表示 : .new-select__item スパン(表示: ブロック; パディング: 10px 15px;) .new-select__item scan:hover (color: #12b223;) .new-select :after (content: ""; : 25px; 位置: 絶対; 右: 9px; 上: 9px ; -out 、 -o-transition : すべての .27 のイーズインアウト、トランジション : すべての .27 のイーズインアウト、 -webkit-transform : 回転 (0 度 ); -ms-transform : 回転 (0 度 ); - o-transform : 回転 (0 度); 変換 : 回転 (0 度); ) .new-select.on :after ( -webkit-transform : 回転 (180 度); -ms-transform : 回転 (180 度); -o-transform : 回転 (180 度 ); 変換 : 回転 (180 度 ); )

JavaScript コードの前に jQuery 接続があります

$(".select")。 each (function () ( const _this = $ (this), selectOption = _this . find ( "option "), selectOptionLength = selectOption . length , selectedOption = selectOption . filter ( " :selected " ), period = 45 アニメーション _this . Hide (); _this .wrap ( " " ); $ ( " " , ( class : " new-select " , text : _this .children ( " option:disabled " ). text () )). _this ); const selectHead = _this . next ( " . new-select " ); select__list " ); for (let i = 1; i< selectOptionLength ; i ++ ) { $ (" " , { class : " new-select__item " , html : $ (" " , { text : selectOption . eq (i ). text () }) }) . attr (" data-value "、オプションを選択します。 式(i)。 val())。 appendTo(selectList); ) const selectItem = selectList。 探す （" .new-select__item " ); selectList . slideUp (0 ); selectHead . on (" click " , function () { if ( ! $ (this ). hasClass (" on " ) ) { $ (this ). addClass (" on " ); selectList . slideDown (duration ); selectItem . on (" click " , function () { let chooseItem = $ (this ). data (" value " ); $ (" select " ). val (chooseItem ). attr (" selected " , " selected " ); selectHead . text ( $ (this ). find (" span " ). text () ); selectList . slideUp (duration ); selectHead . removeClass (" on " ); }); } else { $ (this ). removeClass (" on " ); selectList . slideUp (duration ); } }); });

最近では、デザイナーが HTML 2.0 のスタイルで小さな HTML フォームを描画することが増えてきており、この傾向はますます重要になってきており、丸みを帯びたエッジと影を備えた美しいデータ入力フィールドと選択フィールドの重要性がますます高まっています。 CSS3 はすでに多くの点で勝利を収めており、フォーム、フィールド、セレクターに優れた外観を与えることができます。 残念ですが、すべてをバラ色にしないでください。

すべての最新のブラウザーが HTML5 と CSS3 をサポートしているという事実にもかかわらず、誰もがそれらを使用しているわけではありません。統計によると、以前と同様にインターネット全体のユーザーの半数が古いバージョンのブラウザーを使用しており、その多くは完全に楽しむことができません。ワールドまたは CSS3 を使用します。 したがって、表示されるリスト (選択) のスタイル設定は、jQuery (js) と PNG または GIF 画像を使用する古き良き方法で行われることがよくあります。 その方法の一つについてお話したいと思います。


以下は、RuNet サイトで突然見つけたスクリプトです。残念ながら、アドレスも作成者の名前も覚えていませんでした。 ただあなたに多大な敬意を表します。

コードのレビュー JS

(function($)( $.fn.extend((customStyle1: function(options) (if(!$.browser.msie || ($.browser.msie&&$.browser.version>6))) (これを返します。 each (function() ( var currentSelected = $(this).find(":selected"); $(this).after(""+currentSelected.text()+")).css((position:"absolute") 、不透明度:0,fontSize:$(this).next().css("font-size")));var selectBoxSpan = $(this).next();var selectBoxWidth = parseInt($(this).width ( )) - parseInt(selectBoxSpan.css("padding-left")) -parseInt(selectBoxSpan.css("padding-right"));var selectBoxSpanInner = selectBoxSpan.find(":first-child"); selectBoxSpan.css ( (display:"inline-block")); selectBoxSpanInner.css((width:selectBoxWidth, display:"inline-block")); -top")) + parseInt(selectBoxSpan.css("padding-bottom")) ; $(this).height(selectBoxHeight).change(function())( selectBoxSpanInner.text($("option:selected",this).text()).parent().addClass("changed"); ) ) ; )); ) ))); )) (jQuery);

「Selectu」をスタイリングするためのスクリプトをクリックします。

コードのレビュー JS

$(document).ready(function() ( $(".select1").customStyle1(); ));

HTML コード「select」、スタイル化されます

コードのレビュー HTML

オプション 1 オプション 2 オプション 3 オプション 4 オプション 5 オプション 6

選択するまでスタイルはzastosovanoになります

コードのレビュー CSS

.select1 ( width : 410px ; height : 32px ; color : #909090 ; font : 12px Arial、Tahoma、Helvetica、Verdana; text-align : left ; background : URL (images/sel1.png) で選択 * / 行をデザインします- 高さ : 30px ; ホワイトスペース : nowrap ; / * 転送によって保護されています * / パディング : 0 22px 0 12px ; / * IE6 矢印による右手アクセス * / マージン : 3px 0 5px 0 ; )

背景画像を置き換えることにより、選択内容を好きなようにスタイル設定でき、この例は最も古いブラウザなど、ほとんどのブラウザで使用できます)。

私はよく、優れた Web サイトでフォーム オブジェクトを様式化するという同様の原則を使用します。また、その逆も同様です。そこから新しいアイデアを生み出すことができます。そのため、ほとんどの Web マスターはそのような単純ではないソリューションを停滞させることに消極的ですが、文化を促進するためです。古いブラウザの場合。

こんにちは、habrauser さん、あとは読んでください。 Porivnyano さんは最近、select タグにスタイルを設定する方法を質問しました。 フォームのスタイルをサイトのデザインと一致させることは誰もが望んでいることですが、これまでのところ、すべてを純粋な CSS で記述できるわけではありません。 この記事では、CSS と JavaScript 言語ライブラリである jQuery を使用して、独自の選択リストを作成する簡単な例を見ていきます。 特に初心者にはこの教材が役立つと思います。 もちろん、ネイティブ JS で記述した方が良いでしょうが、コードの行数が増えることは誰もが知っており、よりインテリジェントになる可能性は低いです。

正直に言うと、私も同様の解決策を見つけようとしましたが、select タグの効果的な div ラッパー以外は何も知りませんでした。 そして、シンプルで必要なことを書くのは悪いだろうと思いました。 まあ、それだけです！

3 つのファイルは、粘土成形と同じ運命を共有します。

  • セレクトボックス.html
  • セレクトボックス.css
  • セレクトボックス.js
一つずつ見ていきましょう。 まず第一に、このアプリケーションの最もシンプルなアプローチ、つまりリストまたは selectbox.html ファイルのレイアウトに本当に感謝しています。

セレクトボックス.html

月

  • シチェン
  • ルティウス
  • ベレゼン
  • クビテン
  • トラベン
  • チェルヴェン
  • リペン
  • 蛇
  • ヴェレセン
  • ゾフテン
  • 落葉
  • 胸


出力された HTML コードからわかるように、リストは 1 か月以内に表示されます。 次に、selectbox.css ファイルを見てみましょう。

セレクトボックス.css

div#selectBox (幅: 250px; 位置: 相対; 高さ: 50px; 境界線の半径: 3px; 境界線: 実線 1px ライトグレー; 背景色: #fff; カラー: #333; カーソル: ポインター; オーバーフロー: 非表示; 遷移: .3s; ) div#selectBox p.valueTag ( パディング: 15px; カーソル: ポインタ; トランジション: .2s; 高さ: 40px; ) div#selectBox > img.arrow ( 位置: 絶対; 右: 0; 幅: 50px; パディング: 15px; ) /* Safari、Chrome、Opera のユーザーにとっては、嬉しいボーナス - 様式化されたスクロール バー。 */ ::-webkit-scrollbar (背景: 透明; 幅: 0.5em; 位置: 絶対; ) ::-webkit-scrollbar-track (背景: 透明; 位置: 絶対; z-index: -2; ) :: -webkit-scrollbar-thumb (ボーダー半径: 100px; 背景: #888; ) ul#selectMenuBox (背景: #fff; トランジション: .3s; 幅: 100%; 高さ: 200px; オーバーフロー-y: 自動; オーバーフロー- x: 非表示 !重要; 位置: 絶対; マージントップ: 00px; 表示: ブロック; ) ul#selectMenuBox > li ( 表示: ブロック; li.option ( カラー: グレー; パディング: 10px; ) ul#selectMenuBox > li.オプション:ホバー (カラー: #333; 背景: #e1e1e1; トランジション: .2s; )


HTMLとCSS3を使ったレイアウトの基本を扱うので、特に難しいことはありません。

そしていよいよお楽しみです！ プラグインの出力コードを見てみましょう セレクトボックス() jQuery の場合、selectbox.js ファイル:

セレクトボックス.js

(function($) ( $.fn.selectbox = function() ( // cob パラメータ // div の標準の高さを設定します "a. var selectDefaultHeight = $("#selectBox").height(); // 回転画像を div"e varrotateDefault = "rotate(0deg)"; // ボタンを押した後、特別な関数が使用され、 // div"a の出力の高さを計算します。 // 位置合わせは簡単です。入力パラメータ (スクリプトで指定されているパラメータ) $("#selectBox > p.valueTag").click(function() ( // height() メソッドを使用してオブジェクトの高さを計算します var currentHeight = $("# selectBox").height(); // 精神が所定の頭の高さから脱出するかどうかをチェックし、 // 次に何をすべきかを理解するため (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() メソッドを詰め込むことができました。 使いやすさと大規模なヴィコリスタンを目的としたプラグインを発行しました。 必要な方法でお金を稼ぐことができるので、それが警察力を最適化することに私は驚かないでしょう。 クリックするには、次のように外部ファイルをスクリプトに接続し、プラグインをクリックするだけです。

$("セレクター").selectbox();
まず、ドキュメント オブジェクトの ready() メソッドの呼び出しを有効にして、ドキュメントが完全にロードされた後にプラグインがロードされるようにします。 この jQuery プラグインが何であるかを確認できます。

ページ レイアウトに真剣に取り組んでいる人なら誰でも、CSS でのスタイル選択の可能性が大幅に向上していることを知っています。 標準の選択はデザインに適合しないことがよくありますが、JavaScript を介して選択のスタイルを操作する必要があります。 実際、この記事では JavaScript を使用して独自の選択を作成できます。

jQuery など、あらゆることを可能にする既製のプラグインが多数あります。 複雑な構造が必要ない場合は、純粋な JavaScript を使用してすべてを最初から構築する方が簡単です。

まず最初に、新しい select の HTML 構造を作成しましょう。




要素 1
要素 2
要素 3



要素 1


要素 2


要素 3




ご存知のとおり、ここには select タグがほとんどありません。 これで、追加の CSS を使用して選択内容を簡単にスタイル設定できるようになりました。

選択する （
背景色: #0ee;
境界半径: 10px;
パディング: 10px 0;
幅: 200ピクセル;
}
.select p(
カーソル: ポインタ;
マージン: 0;
パディング: 5px 20px;
}
.select p.active (
背景色: #ee0;
}

めちゃくちゃ、好きなものは何でも稼げます。 そして、デカールとフォーム管理から同時に 1 つ未満の要素を選択して強調表示できるように、 select の機能の外観を変更する必要があると判断しました。 誰のための JavaScript の高速化:

関数選択(要素) (
var value = element.getAttribute("データ値"); // 選択した要素の値を読み取ります
var ノード = element.parentNode.childNodes; // 他の要素をすべて削除します
for (var i = 0; i< nodes.length; i++) {
/* フィルタリング可能なサードパーティ要素のテキストと入力 */
if (nodes[i] HTMLParagraphElement のインスタンス) (
/* 選択した要素に active を追加し、このクラスを他のすべての要素から削除します */
if (value == ノード[i].getAttribute("データ値")) ノード[i].className = "アクティブ";
else ノード[i].className = "";
}
}
document.getElementById("my_select").value = 値; // 隠しフィールドの値を設定します
}

選択機能を実装する際の重要なポイントは、選択の値が記録される隠しフィールドです。 フォーム送信時にも同様の情報が送信されます。

選択した JavaScript の様式化であっても、このような単純な方法での軸はまったく臆病です。 jQuery を使用すると、コードはさらに簡単になります。

驚くべきことに、標準の選択にはさらに多くの機能があります。 たとえば、タブに反応するため、キーボードの矢印キーを使用して要素間を移動することもできます。 ただし、必要に応じて、これらすべてを JavaScript で実装することもできます。

最初の推奨事項。 コードには noscript タグがあり、明確ではありません。 誰もが JavaScript を有効にしているわけではないため、そのようなユーザーに対してフォームが機能するには、標準の選択を入力する必要があります。 JavaScript を有効にしている皆様は、選択ツールをご利用ください。

尊敬！ 現在のプラグインに関連するプラグインのさらなる開発とサポートは部分的です。

Web 開発において最も受け入れられない (つまり貪欲な) スピーチの 1 つは、一連の HTML フォームです。 残念ながら、ブラウザやオペレーティング システムに関係なく、フォーム要素を表示するための統一標準はなく、これらの要素、vikoryst、およびカスケード スタイル シートからアクションを適切に設計する機能もありません。

次の HTML フォーム要素は、さらにスタイル化することはできません。

  • 開くもののリスト。
  • 少尉;
  • ペレミカッハ。
  • ファイルをアップロードするためのフィールド。

投稿のタイトルからすでにわかるように、選択性についてはさらに言いたいことがあります。

開くリストをスタイル設定するための jQuery プラグインの形式の既製のソリューションが多数あります。 しかし、私は（これらの理由やその他の理由を考慮せずに、プラグインから得たものを通じて）車輪の出口への道を選択し、パワープラグインを作成しました。それをこの記事で共有します。

このプラグインは、選択が停滞する可能性のあるすべての状況に適しているわけではないことを指摘しておきます (いくつか読んでください)。

ロボットプラグインのデモンストレーション

追加のプラグインを使用したセレクターのスタイルの例を確認できます。 このデザインはヴィコリスタンを使用せずに作成しました。

利点
  • JavaScript が有効になっている場合、標準の選択項目が表示されます。
  • スクリプトのサイズは小さく、約 4 キロバイトです。
  • IE6 以降および現在のすべてのデスクトップ ブラウザで動作します。
  • 社内で導入予定。
  • CSSで簡単にカスタマイズ可能。
  • リストの最大高さを設定できます (CSS power max-height)。
  • 幅を指定しない場合は自動的に調整されます。
  • マウスホイールのスクロールをサポートします。
  • つまり、「合理的なポジショニング」がある可能性があります。 リストを開いたときは、ページの表示部分を超えて移動しないでください。
  • Tab キーの圧力を「キャッチ」して、キーボード上の矢印を動かすことができます。
  • 「無効」属性をサポートします。
  • 動的に追加/変更されるセレクターで動作します。
ネドリキ
  • したがって、複数の属性はサポートされていません。 複数の項目を選択することはできません (複数選択)。
  • リスト要素 (タグ) のグループ化はサポートされません。
  • マウスクリックのリストが開いている場合は、キーボード上の矢印を移動することはお勧めできません。
誘惑する

プラグインは利用できないため、 VIN は電流ではありません。

jQueryプラグイン「SelectBox Styler」

バージョン: 1.0.1 | ザヴァンタジェン: 11103 | サイズ: 7 KB | 最終更新日: 2012 年 10 月 7 日

2012 年 9 月 22 日更新 プラグインのスクリプトを再加工し (最小化オプションの作成など)、また選択項目の動的な追加/変更のサポートを追加しました。 2012/10/07 タグの onchange メソッドが変更されたときのスクリプトの動作を修正しました。 プラグイン接続

サイトで jQuery がまだ有効になっていない場合は、タグの前に先頭行を追加します。

jQuery の直後に、ファイルをスクリプトに接続します。

(function($) ( $(function() ( $("select").selectbox(); )) ))(jQuery)

このコードは、指定したファイルの後のタグの前に配置する必要があります。

セレクターを動的に変更する場合は、次のように更新トリガーを起動する必要があります。

(function($) ( $(function() ( $("button").click(function() ( $("select").find("option:nth-child(5))).attr("selected ", true); $("select").trigger("refresh"); )) )) ))(jQuery)

プラグインインストール後のHTMLコード

その構造は次のようになります。

- 選択する -

  • - 選択する -
  • 段落1
  • ポイント2
  • ポイント3
-- 選択 -- 項目 1 項目 2 項目 3

選択のデザインに使用できる CSS クラス

追加の CSS の選択性を作成するには、次のクラスを使用します。

.selectboxすべての選択のための父親のコンテナ
.selectbox .select燃えるキャンプから選択
.selectbox.focused .selectTabキーを押すと選択にフォーカスします
.selectbox .select .text「ドアを開ける」手法を使用して背景画像を挿入するための、選択したオプションの添付ファイル タグ
.selectbox .trigger焼き付けられた選択の一部に対する権利 (スマート リミキサー)
.selectbox .trigger .arrowリミックス用添付タグ（矢印）
.セレクトボックス .ドロップダウンリスト用のバーナー
.selectbox .dropdown ulランダムリスト
.selectbox li項目（オプション）選択
.selectbox li.selectedヴィブラニウムセレクトアイテム
.selectbox li.disabledvimkneny (選択不可) 項目を選択
ヴィシュノヴォク

このようなスクリプトを作成するだけでも、さまざまな作業に対処する必要があるため、十分に忙しくなります。 これ以上深刻なバグは出ないと確信しています。 こんにちは、コメント欄でお知らせください。

編集者の選択

© 2024 androidas.ru - Android のすべて