ＳＱＬの窓
<< Office Word で、セ… | TOP | jQuery/JavaScript … >>

2014年06月26日


input 要素と id 属性のみで、jQuery ボタンテンプレート

 
input 要素のみ決定しておいて、参照する為に id 属性だけセットしたものを、jQuery でボタンとして使う為のコードテンプレートです。

チェックボックスとラジオボタンが、label 要素を要求するようなので、.after() しているところ以外は全て通常の追加設定になっているはずです。

※ .buttonset() は、ボタンの形状をグルーブ化するだけで、ラジオボタンとしての機能は、name 属性でグループ化されます。
※ 最初のボタン以外には、jQuery UI が必要です

実際問題、チェックボックスとラジオボタンの性能には疑問が残ります。クリックに正しく反応しない場合があるようなのでお勧めできません(ラベルのテキスト部分で起こるようです)





<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.1/themes/base/jquery-ui.css">
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.1/jquery-ui.min.js"></script>

<script type="text/javascript">
// ***********************************************
// 画面初期化後のイベント( jQuery )
// ***********************************************
$(function() {

	$("#buttonContent1")
		.attr("type", "button")
		.val("ボタン1")
		.css({
			"font-size": "20px",
			"padding": "10px 40px 10px 40px",
			"background-color": "orange",
			"font-weight": "bold",
			"border-radius": "10px"
		})
		.click(function(){
			alert("ボタン1がクリックされました");
		});

	$("#buttonContent2")
		.attr("type", "button")
		.button()
		.val("ボタン2")
		.css({
			"font-size": "20px",
			"font-weight": "bold",
			"border-radius": "10px"
		})
		.click(function(){
			alert("ボタン2がクリックされました");
		});

	$("#buttonContent3")
		.attr("type", "checkbox")
		.after("<label for='buttonContent3'>")
		.button({ label: "トグルボタン" })
		.click(function(){
			alert( $(this).prop("checked") );
		});

	$("#radio1")
		.attr({ type: "radio", name: "my_radio" })
		.after("<label for='radio1'>")
		.button({ label: "選択1" })
	$("#radio2")
		.attr({ type: "radio", name: "my_radio" })
		.after("<label for='radio2'>")
		.button({ label: "選択2" })
	$("#radio3")
		.attr({ type: "radio", name: "my_radio" })
		.after("<label for='radio3'>")
		.button({ label: "選択3" })
	$("#radio").buttonset();


});
</script>

<input id="buttonContent1">
<input id="buttonContent2">
<input id="buttonContent3">

<br><br>

<div id="radio">
<input id="radio1">
<input id="radio2">
<input id="radio3">
</div>
【jQueryの最新記事】
posted by lightbox at 2014-06-26 00:15 | jQuery | このブログの読者になる | 更新情報をチェックする



Powered by Seesaa
container 終わり



✅ フリーフォントで簡単ロゴ作成
✅ フリーフォントでボタン素材作成
✅ フリーフォントで吹き出し画像作成
✅ フリーフォントではんこ画像作成
✅ ほぼ自由に利用できるフリーフォント
✅ フリーフォントの書体見本とサンプル
✅ 画像を大きく見る為のウインドウを開くボタンの作成
✅ CSS ドロップシャドウの参考デモ
✅ イラストAC
✅ ぱくたそ
✅ 写真素材 足成
✅ フリーフォント一覧
✅ utf8 文字ツール
右サイド 終わり
base 終わり