SQLの窓

2017年11月06日


jQuery のプラグインで動的なコントロールの処理を作成 : add_button / set_event / set_link

add_button : 対象の直後にボタンを追加
set_event : 対象にイベントを登録
set_link : 対象のテキストをリンクに変更

set_link における p1 と p2 のオプションは、URL 内に %1 と %2 という文字列を含ませて、それぞれ p1 と p2 で置換するオプションです。Query String  として WEB アプリケーションのパラメータとして利用する事を想定していますが、URL エンコードは自分で行う必要があります

プラグインのソースコード

$.fn.extend({

	add_button : function(option){

		var input = $("<input type='button'>")
			.val( option.val )
			.insertAfter($(this))
			.on("click", option.click )
		;

		if ( typeof option.id !==  'undefined' ) {
			input.prop("id", option.id);
		}
		if ( typeof option.class !==  'undefined' ) {
			input.addClass(option.class);
		}
		if ( typeof option.css !==  'undefined' ) {
			input.css( option.css );
		}
		return $(this);

	},

	set_event : function(option){

		$(this).on(option.event, option.action );

		if ( typeof option.id !==  'undefined' ) {
			$(this).prop("id", option.id);
		}
		if ( typeof option.class !==  'undefined' ) {
			$(this).addClass(option.class);
		}
		if ( typeof option.css !==  'undefined' ) {
			$(this).css( option.css );
		}
		return $(this);

	},

	set_link : function(option){

		if ( typeof option.target ===  'undefined' ) {
			option.target = "_blank";
		}

		var text = $(this).text();
		$(this).html("");

		if ( typeof option.p1 !==  'undefined' ) {
			option.url = option.url.replace("%1", option.p1 );
		}
		if ( typeof option.p2 !==  'undefined' ) {
			option.url = option.url.replace("%2", option.p2 );
		}

		var a = $("<a>")
			.prop("href", option.url)
			.prop("target", option.target)
			.text( text );
		;

		if ( typeof option.class !==  'undefined' ) {
			a.addClass(option.class);
		}

		if ( typeof option.css !==  'undefined' ) {
			a.css( option.css );
		}

		$(this).append(a);
		return $(this);

	}
});


add_button のサンプルコード
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://lightbox.sakura.ne.jp/demo/template/lightbox-env/helper.js"></script>
<script>

$(function(){

	// ボタン追加
	$("#target").add_button({
		"id" : "new_button",
		"val" : "追加されたボタン",
		"class" : "btn btn-primary ml-5",
		"css" : { "background-color" : "navy", "color" : "white"  },
		"click" : function(){
			alert("クリックされました");
		}
	});
	

});

</script>

<span id="target">テキスト表示</span>

add_button で作成された HTML
<input type="button" value="追加されたボタン" id="new_button" class="btn btn-primary ml-5" style="background-color: navy; color: white;">

set_event のサンプルコード

このサンプルは、テーブルの表示を JSON から作成している処理の一部です。obj["所属"] には4桁の数字文字列が入っています。
		col_data = $("<td></td>").appendTo( row_data );
		col_data.text( obj["所属"] );
		col_data.set_event({
			"css" : { "text-decoration": "underline", "cursor": "pointer" },
			"event" : "click",
			"action" : function(){
				window.open("../syozoku-upd/syozoku.php?code=" + obj["所属"] );
			}
		});



set_link のサンプルコード

このサンプルも、テーブルの表示を JSON から作成している処理の一部です。
		col_data = $("<td></td>").appendTo( row_data );
		col_data.text( obj["社員コード"] );
		col_data.set_link({
			"url" : "../syain-upd/syain.php?code=%1",
			"p1" : obj["社員コード"]
		});




posted by lightbox at 2017-11-06 11:18 | Comment(0) | プラグイン作成(jQuery) | このブログの読者になる | 更新情報をチェックする
バッチ処理

Microsoft Office
container 終わり

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

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