10

現在取り組んでいるプロジェクトでは、フォーム要素 ( 、<input>など) に非標準の「ルック アンド フィール」が必要です。<select><textarea>

これには、どのライブラリまたはプラグイン (jQuery) をお勧めできますか?

利用可能なライブラリをいくつか検索しましたが、自分のニーズに合ったライブラリが見つかりませんでした。それらのすべてには、「本物」-「偽物」の要素のアイデアが隠されています。このプロジェクトには、オンザフライで作成され、DOM に注入された多くのフォーム要素があります。

主な要件は次のとおりです。

  • その場での「偽の」要素の作成。
  • 1 つのノードまたは CSS セレクタ (ページ全体ではなく) にスタイルを適用する機能。
  • 偽の要素と実際の要素の間の非侵入型イベント伝播。(偽の要素は、実際の要素の変更に応答し、それに発生するイベントを、対応する実際の要素 (blur、フォーカス、変更、クリックなど) に送信する必要があります。ライブラリは、コードではなく、イベントの伝播に注意する必要があります)
  • IE7以降と互換性があるはずです。
  • 優れたドキュメントと柔軟なパブリック API が必要です

私は 1 つのライブラリに苦労しており、それを要件にほぼ「適合」させましたが、ドキュメントがなく、変更できるかどうかについてライセンスが不明です。

助けてくれてどうもありがとう！

敬具。

4

6 に答える 6

5

あなたはそれらを調べたいと思うかもしれません（2014年2月）：

uniformjs.com - フォーム要素のスタイリング (IE7+、chrome、safari、firefox)

github.com/emblematiq/Niceforms - フォーム要素のスタイリング - (たぶん?) コミュニティがなく、コミッターが 1 人しかいないので危険に思えます (IE7+、Firefox2+、Safari3+、Opera9+、Chrome0.3+)

github.com/harvesthq/chosenおよびHarvethq.github.io/chosen - フォームの選択/ドロップダウン ボックス

ivaynberg.github.io/select2 - ドロップダウン ボックス (IE8+)。Chosen.js に由来するようです (再確認する必要があります)。

github.com/Robdel12/DropKickおよびrobdel12.github.io/DropKick - フォーム選択/ドロップダウン ボックス

github.com/gfranko/jQuery.selectBoxIt.js - フォーム選択/ドロップダウン ボックス

brianreavis.github.io/selectize.jsまたはgithub.com/brianreavis/selectize.js - テキストボックスとボックスのハイブリッド - タグ付け、連絡先リスト、国セレクターなどに役立ちます

arthurgouveia.com/prettyCheckable - フォームのチェックボックスとラジオ ボタンのスタイリング (IE7+、Chrome、Firefox、Safari、モバイル ブラウザー)

http://xoxco.com/projects/code/tagsinput/またはhttps://github.com/xoxco/jQuery-Tags-Input - タグ

Twitter Bootstrapも良いオプションかもしれません -カスタマイザーを使用して、ライブラリの必要な部分だけをロードします。Twitter ブートストラップ コンポーネントのカスタマイズの詳細をお読みください。

于 2014-03-04T12:35:51.343 に答える
4

あなたはこれを見ることができます！

http://twitter.github.com/bootstrap/base-css.html#forms

Bootstrapには、あなたを助けることができる非常に実用的なものがあります!!

于 2012-07-24T23:48:59.647 に答える
3

Twitter Bootstrapを見たことがあるかもしれません。CSS を使用してほとんどのトリックを実行しているため、もう少し洗練されたルック アンド フィールを得るためにデリゲート コンポーネント (本物/偽物) の概念は必要ありません。

于 2012-07-24T23:49:01.840 に答える
2

私は本当にjQtransformが好きです: jQuery ライブラリとプラグイン jqtransform を含めるだけです

//required
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/jquery.jqtransform.min.js"></script>

次に、変換をすべてのフォームに適用します

<script type="text/javascript">
$(function() {
    //find all form with class jqtransform and apply the plugin
    $("form").jqTransform();
});
</script>

または特定のフォームに

<script type="text/javascript">
$(function() {
    //find all form with class jqtransform and apply the plugin
    $("form.jqtransform").jqTransform();
});
</script>
于 2012-12-22T15:09:34.320 に答える
0

入力、選択、およびテキストエリアのスタイルを設定したいだけの場合は、それを行うためにjavascriptは必要ありません。これはすべて、通常の css を使用して簡単に実行できます (境界線、色、背景、角の丸みなどを変更します)。古い (IE) ブラウザーのみが、(フォーム) 要素で丸みを帯びた角を使用できません。

選択要素のドロップダウンのスタイルも設定できるようにしたい場合は、CSS では機能しないため、javascript が必要になる場合があります。

私が調べたすべての既存のライブラリから、フォーム要素の「最もクリーンな」HTML 置換を提供するため、(前述のように) jqTransform が最も操作しやすいことがわかりました。css で簡単にスタイルを設定できます。

しかし、jqTransform にはいくつか問題があります。手始めに、select 要素の onchance イベントが発生しない原因となるバグが含まれており、破棄/更新オプションもありません。したがって、既にスタイル設定されたフォームに挿入された新しい要素をスタイル設定することはできません。これらの問題の両方について、私はそれを機能させるための回避策を作成しました。onchange イベント (stackoverflow のどこか) の修正を見つけ、jqTransform 要素を更新する追加の関数も作成しました。

しかし、これらの問題と、jqTransform が 2009 年以降更新されていないという事実のため、約 1 か月前に、この機能を処理する独自の jQuery プラグインを作成することにしました。

これは「jQuery Mighty Form Styler」と呼ばれ、jQuery 1.7 以降で正常に動作するはずです。他のフォーム要素は css でスタイルを設定できるため、この時点では select 要素のみをスタイル設定します。では、不要な JavaScript を使用してページに読み込み時間を追加する必要はありません。cssだけでスタイリングするのは簡単ではないので、ラジオとチェックボックスも追加する予定です（多くのブラウザーでは機能しません）。

偽の要素を削除したり、偽の要素のコンテンツを更新したりするための更新および破棄機能が既に備わっています。

http://www.binkje.nl/mfsで入手できます。ドキュメントもここにあります。どなたでも無料でご利用いただけます。私はあなたがjavascriptで何かをスタイルするべきではないと信じています. これは、CSS でのみ行うべきことです。

于 2013-01-07T10:30:57.200 に答える
0

デスクトップ Web とモバイルの両方のスタイリング (レスポンシブ ソリューション) を探している場合は、Mobiscroll Formsをご覧ください。

テキスト入力からアラート、通知、カスタマイズ可能なスライダーまで、13 の特徴的なコントロールが付属しています。基本的なフォームのニーズ以上のものをカバーする必要があります。

もう 1 つ注意すべき点は、要素は組み込みのテーマ (iOS、Material、Windows、Web 用) でスタイルを設定でき、もちろんその上に CSS を使用してスタイルを設定できることです。

于 2017-05-31T08:39:17.993 に答える