【フォーム】jQuery UIのButtonでフォーム部品等をボタン化

jQuery UIのButtonを利用して、buttonタグ、input type=”button”、input type=”submit”、aタグ、input type=”checkbox”、input type=”radio”をボタン化します。

anchor

htmlのコードは下記になります。
buttonsetを利用するチェックボックスとラジオボタンは、class=”group”を付与したdivタグで内包します。単独のチェックボックスにはclass=”only”を付与します。

<div>
	<button>button tag</button>
	<input type="button" value="input type button">
	<input type="submit" value="input type submit">
	<a href="#">anchor</a>
	<input id="check00" type="checkbox" class="only"><label for="check00">checkbox</label>
</div>
<div class="group">
	<input id="check01" type="checkbox"><label for="check01">check01</label>
	<input id="check02" type="checkbox"><label for="check02">check02</label>
	<input id="check03" type="checkbox"><label for="check03">check03</label>
</div>
<div class="group">
	<input id="radio01" type="radio" name="r"><label for="radio01">radio01</label>
	<input id="radio02" type="radio" name="r"><label for="radio02">radio02</label>
	<input id="radio03" type="radio" name="r"><label for="radio03">radio03</label>
</div>
<div>
	<button class="left">Mail</button>
	<button class="right">Cart</button>
	<button class="notext">Help</button>
	<input type="button" class="label" value="">
</div>

続いてjQuery UI導入用のCSSファイル、jsファイル読み込み部分のコードです。

<link rel="stylesheet" href="css/jquery-ui.min.css">
<script src="js/jquery-ui.min.js"></script>

最後にjQueryのコードです。
単独のボタンはbuttonメソッド、グループにまとめた複数のボタンはbuttonsetメソッドを利用して整形します。iconsのオプションを利用することでボタンにアイコンを付けることができます。text: falseを設定するとテキストは非表示になり、アイコンのみのボタンになります。また、labelを設定するとボタンのテキストが設定できます。

$(function() {
	$('button').button();
	$('input[type="button"]').button();
	$('input[type="submit"]').button();
	$('a').button();
	$('input.only').button();
	$('.group').buttonset();
	$('button.left').button({
		icons: {
			primary: 'ui-icon-mail-closed' //左アイコン
		}
	});
	$('button.right').button({
		icons: {
			secondary: 'ui-icon-cart' //右アイコン
		}
	});
	$('button.notext').button({
		icons: {
			primary: 'ui-icon-help'
		},
		text: false //テキスト非表示
	});
	$('input[type="button"].label').button({
		label: 'label name' //テキスト設定
	});
});
タイトルとURLをコピーしました