SQLの窓

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 | このブログの読者になる | 更新情報をチェックする
バッチ処理

Microsoft Office
container 終わり

フリーフォントで簡単ロゴ作成
フリーフォントでボタン素材作成
フリーフォントで吹き出し画像作成
フリーフォントではんこ画像作成
ほぼ自由に利用できるフリーフォント
フリーフォントの書体見本とサンプル
画像を大きく見る為のウインドウを開くボタンの作成

Android SDK ポケットリファレンス
改訂版 Webデザイナーのための jQuery入門
今すぐ使えるかんたん ホームページ HTML&CSS入門
CSS ドロップシャドウの参考デモ
PHP正規表現チェッカー
Google Hosted Libraries
cdnjs
BUTTONS (CSS でボタン)
イラストAC
ぱくたそ
写真素材 足成
フリーフォント一覧
utf8 文字ツール
右サイド 終わり
base 終わり