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["所属"] には４桁の数字文字列が入っています。
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["社員コード"]
});
|
|
【プラグイン作成(jQuery)の最新記事】
- jQuery の回転アニメーション / $({kakudo: 0}).animate(properties, options )
- HTML 上のデータをローカルに保存する jQuery プラグイン
- TD 内のテキストを入力可能にする tableinput.js / jQuery プラグイン
- スマホとPC で別の処理を記述できる jQuery のストリートビュープラグイン
- jQuery のプラグインとしてストリートビューを利用する
- jQuery の簡単なプラグインを $.fn.extend で作成( 0〜9のみ入力可能なフィールド )
- INPUT type="number" の振る舞いをブラウザ間で調整する jQuery プラグイン
- jQuery のプラグイン作成 : 要素のクリックイベントで、画像の実際の縦横サイズちょうどの大きさのウインドウを開いて表示する
- jQuery の回転アニメーションでくるくる回る『実行中アイコン』
- jQuery を使ったCSS 一括エフェクトアニメーション( rotate, skew, borderRadius, boxShadow )
- jQuery : IFRAME 作成プラグインと、アニメーションによる表示切替
- jQuery でかなり実用的かもしれない入力制限( 入力値復帰型 )
- jQuery で、指定文字集合のみ入力可能なプラグイン
- jQuery の fn.extend メソッドと extend メソッド の違いは $(セレクタ) のメソッドとして実行できるかどうか ( extend の仕様について )
