2012-01-26 13 views
0

私のフォームには、7つの値を持つフィールドがあります。ドロップダウンメニューやチェックボックスを使用する代わりに、Quirky.comのアプリケーションフォームに類似したボタンのデータを表示したいと思います。具体的には、「カテゴリを選択」フィールド(https://www.quirky.com/ideas/new) 。ドロップダウンメニュー/ラジオボタン/チェックボックスの代わりにフィールド入力としてボタンを使用します。

これはjqueryプラグインですか?ここ

スクリーンショット:私の知る限りhttp://i.stack.imgur.com/qwVEX.png

答えて

0

は、しかし、jQueryを使って行うことは非常に簡単だろう、この特定の機能のための特定のプラグインがありません。送信したい値を保持するフィールド(テキストフィールドは正常)を作成してから、7つのボタンを作成します。単純なjavascript関数を作成して、どのボタンがクリックされたかに基づいてテキストフィールドの値を設定します。ビオラ!

関数は次のようになります。

<script type="text/javascript"> 
function setValue(button){ 
$('#idOfTextBox').val(button.attr('name')); 

$('.classOfButton').removeClass('selected'); 
button.addClass('selected'); 

return false; 
} 
<script> 

編集:スクリプトは、あなたが、私はボタンとそれの仲間のボタンからクラスを追加および削除がわかります 変更します。こうすることで、どちらを選択するかを指定できます。さらに、ボタンの「名前」属性をテキストボックスの値として使用します。

0

標準のHTMLフォームタグを使用し、ボタンに変換します。これは、JavaScriptが無効になっている場合でも、ユーザーはフォームを使用できるため、より優れています。これは「優雅な劣化」です。

オプションが相互に排他的な場合は、ラジオボタンを使用します。そうでない場合は、チェックボックスを使用します。

このような手法のコードはhttp://msdn.microsoft.com/en-us/scriptjunkie/ff756526http://theodin.co.uk/blog/design/fancy-radio-buttons-jquery.htmlです。

関連する問題