SQLの窓

2018年01月18日


jQuery の回転アニメーション / $({kakudo: 0}).animate(properties, options )

jQuery の animate メソッドに渡せるのは、数値表現のプロパティのみなので、既存の要素では使えるものはほとんどありません。例えば、回転処理なんかもそのうちの一つですが、この方法を使えばどんなものでもアニメーション化できます。

この方法を解説していたのは、stackoverflow( CSS rotation cross browser with jquery.animate() ) でした

このソースでちょっと解りにくいのが、$({kakudo: 0}) の部分ですが、なんの事は無く {kakudo: 0} という超シンプルなオブジェクトに対してアニメーション処理をしようというわけで、このオブジェクトは当然 kakudo プロパティ を持っているので、step イベントが 0 度から 指定角度までの間呼ばれ続けるわけです。

それを利用した単純な繰り返し処理です。

その結果、いとも簡単にページ全体の回転処理を作成する事ができました。





<script>
if ( !window.jQuery ) {
	if ( typeof window[window.location.hostname+'.loadjQuery'] === 'undefined' ) {
		if ( window.addEventListener ) {
			window[window.location.hostname+'.loadjQuery'] = 'https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js';
		}
		else {
			window[window.location.hostname+'.loadjQuery'] = 'https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js';
		}
	}
	document.write("<"+"script src=\"" + window[window.location.hostname+'.loadjQuery'] + "\"></"+"script>");
}
</script>
<script>
$.fn.extend({ 
	rotateAction: function(deg, duration, easing){
		var target = this;
		// ページ全体の回転の中心を作成する処理。(画像の場合は必要ありません)
		$(document.body).css({'transform-origin':'center '+($('html').scrollTop()+300) + 'px'});
		$({kakudo: 0}).animate(
			{kakudo: deg},
			{
				duration: duration,
				easing: easing,
				step: function(now) {
					target.css({
						transform: 'rotate(' + now + 'deg)'
					});
				}
			}
		);
	}  
});

</script>

<input type="button" value="画像回転" onclick='$("#target").rotateAction(360,1000,"swing");'>
<br>
<input type="button" value="全て回転" onclick='$(document.body).rotateAction(360,2000,"swing");'>
<br><br><br>

<img id="target" src="https://lh5.googleusercontent.com/-kCYTSmTrJXs/URvMQy9ClqI/AAAAAAAARuw/5BTKTk2c_sw/s128/_img.png" style="border: solid 0px #000000" />

関連する記事


posted by lightbox at 2018-01-18 15:49 | プラグイン作成(jQuery) | このブログの読者になる | 更新情報をチェックする

2017年11月13日


HTML 上のデータをローカルに保存する jQuery プラグイン

FileSaver.js が必要です。

保存タイプ

1) text 
    要素の内部テキストを取得( value または innerText )
    ※ nobom プロパティを true にすると UTF8N で保存されます
    ( nobom のデフォルトは false )

2) html
    要素の outerHTML を取得

3) table
    テーブル要素を csv データとして取得
    ※ nobom プロパティを false にして UTF8 で保存する事によって、Excel で読み込めます
    ( nobom のデフォルトは false )

4) image (URL で指定された画像の場合)
    そのままそのサーバーからダウンロード
    IE が、A 要素の download 属性をサポートしていないので IE は 不可
    ( ie プロパティでその際のエラーメッセージ指定できます )

5) image (base64 で指定された画像の場合)
    base64 をバイナリに変換して保存


所属コード所属名称作成日更新日
0001営業部第一2004/05/052004/05/05
0002営業部第二2004/05/052004/05/05
0003営業部第三2004/05/052004/05/05
1001総務部2008/04/022008/04/02

デモ用のコード
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/FileSaver.js/1.3.3/FileSaver.js"></script>
<script src="https://lightbox.sakura.ne.jp/demo/template/lightbox-env/saver.js"></script>
<script>
$(function(){

	$("#btn_text")
		.on( "click", function(){
			$("#textarea").save( {
				type : "text",
				name : "mydata.txt",
				nobom : true
			} );
		});

	$("#btn_tbl")
		.on( "click", function(){
			$("#tbl").save( {
				type : "table",
				name : "mydata.csv",
				nobom : false
			} );
		});

	$("#btn_html")
		.on( "click", function(){
			$("body").save( {
				type : "html",
				name : "mydata.html",
				nobom : true

			} );
		});

	// IE は対象外
	$("#btn_img")
		.on( "click", function(){
			$("#img").save( {
				type : "image",
				ie: "IE では画像を右クリックしてメニューから保存して下さい"			// IE 用メッセージ
			} );
		});

	// IE も OK
	$("#btn_base64")
		.on( "click", function(){
			$("#base64").save( {
				type : "image"
			} );
		});

	$("#btn_img,#btn_text,#img,#textarea,#base64,#btn_base64")
		.css({ "display": "inline-block", "vertical-align": "top" });

	$("#tbl")
		.css({ "margin-top": "15px" });


});


</script>
<div>
<input id="btn_text" type="button" value="textarea(テキスト)">
<input id="btn_tbl" type="button" value="テーブル(CSV)">
<input id="btn_html" type="button" value="BODY(HTML)">
<input id="btn_img" type="button" value="画像(URL)">
</div>
<div style='margin-top:10px'>
<input id="btn_base64" type="button" value="画像(base64)">
<img id="base64"  src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABkAAAAZCAYAAADE6YVjAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAASdSURBVEhLlVZ/TNRlGP/ccSRwcMkEhLWgVAItwDxysaWLVmKj8aN/GvRjiYFzyq9qE2uJILUkJhtji2BOc9ay1ejXGIOkBsEKuqSrtSRS2ik/5owxjsjweHre5/3CHcpN+YwP73PP+3nf5/3xvM8daCX4oYPo5aeIvvnUcNwebh1kdoboWBnRAyxNYNqZicyNzHf2cb/bEPoHK/2g50ui/CSiWJaoAEnMzaCT60060IPMZKbqf26z3qUfsMIHnut61WpCtepUZhrzIebJN+jj480EgBr3FxC9lqmDPWLWuvuYW5jNh4zJvOBlcaQFVOQCn38GRLI9H4Devz34MTgav2x/FiOXLsPZ14Mro5dhi1yLjWnbcNe1SWxynsVWmwlPhptgCZwHxtQ8h4HdlTKlQEIZmLkHVBYNWh0AWfFKucoEKo0CudXOfOD91Npw06Ds7Gyqra2ljo4OcrlchlBjfHycuru7qb6+XnQWi2XJWPq9z1D6HtcTVpi//kcUJSUlKC8vx9zcHOLj46VboaurC4GBgTCZTDCbzeCJ5bPVasXIyAgyMjJgZt2BNcBb+elAQ5ceKKGGBoniQb33e1fiS6fTSbGxscv23chT9khOBp42zntI2irdSZTCJqfkhUujiwNyc3OlTU5OJofDQTk5OZSXlye+sLAwSk9PFzslJYUSEhLE7u3p0e+IF0wnamR6HYQvXILU7CLHBZeIMzM5RRnKVrvwhfIlJSXR4OCg2E1NTVRVVSW2468xold4rHpDD3N6Kz2dadBR1zEnx+ls93ciLiws1AK24+LixB4eHqbi4mLx2Ww22rFjh9ipqakUEREh9sTkFJFrSI6fNjCHznEQ9ar5JdNOPksGX66ICwr4wTGUnZiYSKOj3mP0x6ioKBkj2MRzqtN5/Rky4+m9wBxL/rjC/xgBFt36ICQkBHV1dWKXlpZKyytHf38/2tvb0dbWhoGBAUxMTEgf+toAD7f/MbdlcXgFdSeqlLxbQV2On2VVvjux2+3EaS22SgDVxsTESP+yeGGLrm2q1DBUWgNZGZAEb34bXBvE5QvWge9A7KCgIGnHxlT9WAae68C3P+mdPL9LXDrI3jcBN7cm5nuHxOULFSQ4OFjs6elpcOaJXV1dLe0SNB4A7uR2irm/Vlw6SKIdiOYd8J+l8xNxzc9zsTOgXvbMzIzYHo8Hra2tYldWVqKlpUXsRbQc4wHcpm4AVkeISwdR2FMD/Au4SG0HCF2jBQput1suVoEfnZQSrmfyuaioSErP985fgYGvxIdZ5r6j2laQmzEwtd6bjsMfNYtv7br4Rd8Ncvrz4kXCKuuS/oMxoFm/VZixIMwPZ7d6sY+G0GDFi4v+Ex98aCh90Pk+NfHEAYZmgb5Y8qX1asVBhF1zo7K/EbjKjhDmHcARF9+FNRSHf+OMsoTypXJnfRlw+jSnG2usTH4T5yfZvTUHofcmoO4oZ+oCJNRy6DxD9Hi4LjcLX8PKfsymW/WuFFW1zbqbqO2UMfBmsOIWOH+OaM92/YNBTapKhaqy6jdAzW6iq+OG0D9YuQIcP0L0UhpR9xeG43ZA9D+D0zyeXYGzAwAAAABJRU5ErkJggg==">
<img id="img" src="http://toolbox.winofsql.jp/image/jquery.png">
<textarea id="textarea">あいうえお</textarea>
</div>

<table id="tbl">
<tbody><tr><th>所属コード</th><th>所属名称</th><th>作成日</th><th>更新日</th></tr>
<tr><td>0001</td><td>営業部第一</td><td>2004/05/05</td><td>2004/05/05</td></tr>
<tr><td>0002</td><td>営業部第二</td><td>2004/05/05</td><td>2004/05/05</td></tr>
<tr><td>0003</td><td>営業部第三</td><td>2004/05/05</td><td>2004/05/05</td></tr>
<tr><td>1001</td><td>総務部</td><td>2008/04/02</td><td>2008/04/02</td></tr>
</tbody></table>


saver.js

$.fn.extend({

	save : function(option){

		option = option || {};
		var type = option.type || "text";
		var mime = option.mime || "text/plain";
		var name = option.name || "save.txt";

		var charset = "utf-8";
		var nobom = option.nobom || false;

		if( type == "text" ) {
			var text = $(this).val();
			if ( text == "" ) {
				text = $(this).text();
			}
			saveAs(
				new Blob(
					[text]
					, {type: mime + ";charset=" + charset}
				)
				, name, nobom
			);

		}

		if( type == "html" ) {
			var text = $(this).prop("outerHTML");
			saveAs(
				new Blob(
					[text]
					, {type: mime + ";charset=" + charset}
				)
				, name, nobom
			);
		}

		if( type == "table" ) {
			var csv = "";
			var cnt = 0;
			$(this).find("tr").each( function(){

				$(this).find("td,th").each(function( col_cnt ){
					if ( col_cnt != 0 ) {
						csv += ",";
					}
					csv += "\"" + $(this).text() + "\"";
				});
				csv += "\n";
				cnt++;

			} );
			saveAs(
				new Blob(
					[csv]
					, {type: mime + ";charset=" + charset}
				)
				, name, nobom
			);
		}

		if( type == "image" ) {
			var src = $(this).prop("src");
			// base64 bin
			if ( src.substr(0,5) == "data:" ) {
				var bin = atob(src.split(',')[1]);
				var head = src.split(',')[0];
				var type = head.split(/[:;]/)[1];
				var buffer = new Uint8Array(bin.length);
				for (var i = 0; i < bin.length; i++) {
					buffer[i] = bin.charCodeAt(i);
				}
				var blob = new Blob([buffer.buffer], {type: type});
				if ( type == "image/jpeg" ) {
					name = "save" + (new Date()).getTime()+".jpg";
				}
				if ( type == "image/gif" ) {
					name = "save" + (new Date()).getTime()+".gif";
				}
				if ( type == "image/png" ) {
					name = "save" + (new Date()).getTime()+".png";
				}
				saveAs( blob, name );
			}
			// url
			else {
				var userAgent = window.navigator.userAgent.toLowerCase();
				// OLD IE
				if (userAgent.indexOf("msie") > -1) {
					if ( typeof option.ie !==  'undefined' ) {
						alert(option.ie);
					}
					else {
						alert("unsupported!");
					}
					return;
				}
				// IE11
				else if (userAgent.indexOf("trident/7.0") > -1) {
					if ( typeof option.ie !==  'undefined' ) {
						alert(option.ie);
					}
					else {
						alert("unsupported!");
					}
					return;
				}
				else {
					var work = src.split("/");
					var name = work[work.length-1];
					var download = $("<a></a>").css("display","none").appendTo("body");
					download.prop({"href" : src, "download": name });
					download.get(0).click();
					download.remove();
				}
			}

		}

		return $(this);

	}
});





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

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 | プラグイン作成(jQuery) | このブログの読者になる | 更新情報をチェックする
Seesaa の各ページの表示について
Seesaa の 記事がたまに全く表示されない場合があります。その場合は、設定> 詳細設定> ブログ設定 で 最新の情報に更新の『実行ボタン』で記事やアーカイブが最新にビルドされます。

Seesaa のページで、アーカイブとタグページは要注意です。タグページはコンテンツが全く無い状態になりますし、アーカイブページも歯抜けページはコンテンツが存在しないのにページが表示されてしまいます。

また、カテゴリページもそういう意味では完全ではありません。『カテゴリID-番号』というフォーマットで表示されるページですが、実際存在するより大きな番号でも表示されてしまいます。

※ インデックスページのみ、実際の記事数を超えたページを指定しても最後のページが表示されるようです

対処としては、このようなヘルプ的な情報を固定でページの最後に表示するようにするといいでしょう。具体的には、メインの記事コンテンツの下に『自由形式』を追加し、アーカイブとカテゴリページでのみ表示するように設定し、コンテンツを用意するといいと思います。


※ エキスパートモードで表示しています

アーカイブとカテゴリページはこのように簡単に設定できますが、タグページは HTML 設定を直接変更して、以下の『タグページでのみ表示される内容』の記述方法で設定する必要があります

<% if:page_name eq 'archive' -%>
アーカイブページでのみ表示される内容
<% /if %>

<% if:page_name eq 'category' -%>
カテゴリページでのみ表示される内容
<% /if %>

<% if:page_name eq 'tag' -%>
タグページでのみ表示される内容
<% /if %>
この記述は、以下の場所で使用します
container 終わり

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

CSS ドロップシャドウの参考デモ
BUTTONS (CSS でボタン)
イラストAC
ぱくたそ
写真素材 足成
フリーフォント一覧
utf8 文字ツール
右サイド 終わり
base 終わり