SQLの窓

2018年02月02日


JQuery-Snowfall で、ページや記事に花びらを舞い落ちるようにする

重要

特定の要素内のみで処理するには、その要素の中で position:absolute が作成されるので、position:relative を指定されたエリア内で行って下さい。

記事最後にこの記事内のみで舞うボタンがあります。
配布元は、Github ですがもう 2年くらい更新はされていないようですが、元々短いコードでとてもうまく動作します。 また、ダウンロードせずとも、cdnjs でホスティングされているのですぐ使えます。 使い方もシンプルですがオリジナルのデモページのソースを見れば、コードの読める方ならすぐ理解できると思います。ただ、deviceorientation に関しては、ソースのコメントにしか意味が書いて無かったようですが(On newer Macbooks Snowflakes will fall based on deviceorientation)、Macbook 専用の機能なのか、スマホ用なのか、ディスプレイが縦と横が変化する場合の対処モードのようです(未確認)。 以下が、一般的なWEBページ用の実装サンプルです(対象を document として、ページ全体に効果を反映させる) 元々は Snowfall なので画像なしで使えるのですが(そのほうがバリエーションも作成しやすい)、画像次第でいろいろなシチュエーションに使えると思います。 ここでは『花びら』ですが、画像の場合は2枚以上用意してそれぞれに対して snowfall を実行するといいです。また、場面によっては最初から実行したい場合もあるので、clear オプションで一旦無かった事にします。
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/JQuery-Snowfall/1.7.4/snowfall.jquery.min.js"></script>
<script>
$(function(){

	$(document).snowfall('clear');

	$(document).snowfall({
		image: "https://lightbox.sakura.ne.jp/image/h1.png",
		flakeCount:10,
		minSize: 15,
		maxSize: 22,
		minSpeed:0.5,
		maxSpeed:1.5
	});

	$(document).snowfall({
		image: "https://lightbox.sakura.ne.jp/image/h2.png",
		flakeCount:10,
		minSize: 15,
		maxSize: 22,
		minSpeed:0.5,
		maxSpeed:1.5
	});

});
</script>


このコードをリアルタイムでコードを変更しながら試して見たい場合は、右上ツールバーのコピーボタンでクリップボードへコピーして、こちら(Run Page : リアルタイム html)のテキストエリアに貼り付けて『ページ作成』ボタンをクリックして下さい

▼ 実行イメージ


▼ このボタンでこの記事に花びらを



posted by lightbox at 2018-02-02 14:44 | プラグイン:jQuery | このブログの読者になる | 更新情報をチェックする

2018年01月26日


jQuery プラグイン : multiselect.js の使用方法とカスタマイズ

multiselect.js のダウンロードページ

( js と css と画像を同じフォルダに置いて、css 内の 画像の位置を変更して使います )
.ms-container{
  background: transparent url('./switch.png') no-repeat 50% 50%;
  width: 370px;
}


設置が簡単な multiselect.js ですが、( select 要素を選択するだけで標準的なリストを左右二つ作成してくれます )実際使うとなると、横幅や高さやパディングの調整は必要です。

さらに、デフォルトでは選択するリストが左側と決まっていますが、これは float で作成されているので、左右を入れ替えるだけで右側を選択できるようにできます
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script type="text/javascript" src="http://winofsql.jp/jquery/plugins/multiselect/jquery.multi-select.js"></script>
<link rel="stylesheet" href="http://winofsql.jp/jquery/plugins/multiselect/multi-select.css" type="text/css" />
<script type="text/javascript">
$(function(){
	$('#select_item').multiSelect({
		keepOrder: true,
		selectableHeader: "<div class='header_item'>商品候補</div>",
		selectionHeader: "<div class='header_item'>対象商品</div>",
		afterSelect: function(values){
			console.log( values[0] )
			console.log( $( "#select_item").children( "option[value='"+values+"']" ).text() )
		},
		afterDeselect: function(values){
			console.log( values[0] )
			console.log( $( "#select_item").children( "option[value='"+values+"']" ).text() )
		}
})
});
</script>
<style>
.header_item {
	padding: 5px;
	text-align: center;
	border: solid 1px #ccc;
	margin-bottom:2px;
	background-color: #eee;
}
.ms-container {
	width: 600px;
}
.ms-container .ms-selectable li.ms-elem-selectable, .ms-container .ms-selection li.ms-elem-selection {
	padding: 10px;;
}
.ms-container ul.ms-list{
  height: 300px;
}
/* 
	以下は、左右入れ替える為の CSS
	以下を設定しなければ、デフォルト仕様として左が選択可能になります   
*/
.ms-container .ms-selectable {
	float: right;
}
.ms-container .ms-selection {
	float: left;
}

</style>
<form
	method="get"
	id="target_form"
	target="my_ferame"
	action="http://winofsql.jp/php_get.php"
	accept-charset="utf-8">

	<input
		type="submit"
		name="send"
		id="send_check"
		value="送信">

	<select 
		multiple
		id="select_item"
		name="select_item[]">

		<option value='0001'>りんご</option>
		<option value='0002'>トマト</option>
		<option value='0003'>いくら</option>
		<option value='0004'>醤油</option>
		<option value='0005'>鳥唐揚</option>
		<option value='0006'>みりん</option>
		<option value='0007'>さんま</option>
		<option value='0008'>海苔</option>
		<option value='0009'>おにぎり</option>
		<option value='0010'>コロッケ</option>

	</select>
</form>
<br>
<iframe
	name="my_ferame"
	frameborder="1"
	scrolling="yes"
	width="600"
	height="200"></iframe>
キーも割り当てられていて、左右の矢印キーでリスト間移動ができ、上下矢印キーでリスト内を移動できます。
選択はスペースキーです。

イベント内(afterSelect と afterDeselect)では、values が引数となっていますが、上のソースでは、jQuery の セレクタで再度 SELECT 要素内の選択された OPTION のテキストも取得しています。
values は配列で定義されているので、values[0] として値を取得していますが、文字列と連結する場合はオリジナルサンプルでも直接使っていました
真ん中の矢印は画像なので、自作のものと置き換え可能です。 cssClass オプションの使い方 このオプションは、個別にクラスを実際定義するのでは無くコンテナにクラスを追加して個別にスタイル設定を可能にできるという意味があります。デフォルトでは、スタイルは全て ms-container というクラス名を先頭にしてセレクタが作成されているので、コンテナにクラスを追加すると、以下のような設定で cssClass に設定したクラス名を使用して個別に見栄えを変更できます。 このページでは、ms-container でクラス設定するように記述しているので、全ての multiSelect コンテンツが対象になりますが、デモ先では cssClass オプションを設定した multiSelect コンテンツ のみが設定されるようにしています。 cssClassselect_item を設定
<style>
.select_item {
	width: 600px;
}
.select_item .ms-selectable li.ms-elem-selectable, .select_item .ms-selection li.ms-elem-selection {
	padding: 10px;;
}
.select_item ul.ms-list{
  height: 300px;
}
/* 左右入れ替え */
.select_item .ms-selectable {
	float: right;
}
.select_item .ms-selection {
	float: left;
}
</style>

refresh メソッドの使い方

オリジナルページの説明には無い、refresh メソッドの意味なのですが、ソースコードを読んでみると最初に設定したオプションの状態でコンテンツを再構築していました。但し、SELECT 要素の現在の状態で再構築するので、見た目は変化ありません。

本来、最初に設定したオプションを変更してから実行すべきメソッドなのですが、オプション内容を変更する為のメソッドが用意されていません。ですが、内部で保持されているオプションの参照として、jQuery の data() メソッドで参照できる内容を使用できました。

これを使用すると、後から動的にスタイル設定やその他の設定を変更する事ができます。デモ先では、見栄えのスタイル設定を交互に変更しています( ソースもページ下部にあります )


	// ************************
	// CSS の切り替え
	// ************************
	$('#change_css').click(function(){
		var item1 = $("#select_item").data().multiselect.options.cssClass;
		if ( item1 == "target_item" ) {
			$("#select_item").data().multiselect.options.cssClass = "";	
			$("#select_item2").data().multiselect.options.cssClass = "target_item";
		}
		else {
			$("#select_item").data().multiselect.options.cssClass = "target_item";	
			$("#select_item2").data().multiselect.options.cssClass = "";
		}
		$('#select_item').multiSelect("refresh");
		$('#select_item2').multiSelect("refresh");
	});


ライセンスについて

WTFPL は、とても下品なライセンスですが、とても自由に使えるライセンスなのであまり気にしないでいいと思います。



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

2017年12月05日


jQuery Columns を使って、Picasa API より アルバム一覧を表示する

Google+ のユーザID は、ログインした状態で、ブラウザに https://get.google.com/albumarchive を入力して Enter すれば URL の最後に付加されます。Picasa 時代に作成されたアルバムは、以下のリンクから表示してサイズを自由に指定できる画像 URL を手に入れる事ができます。

リンク先でユーザID を入力して一覧表示します


▼ アルバムリンクからギャラリー(画像をクリックすると拡大表示)


▼ リンクをクリックすると、HTML 取得画面



▼ PHP


▼ Shadowbox



▼ 以下、ブログ内でアルバムIDの一覧の表示
columns プラグインの環境の都合で、右下矢印画像が出ていませんが、動作に支障はありません

以下のフィールドにユーザID を入力して読み込みボタンを押すだけですが、ユーザID には数字以外の人も居るようでしたが、それでもちゃんと取得できました。

呼び出した JSON を読むには、整形が必要なので JSONLint を使用しました


<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>

<script src="http://winofsql.jp/if_skeleton/basic_06_columns/columns/js/jquery.columns.min.js"></script>
<link rel="stylesheet" href="http://winofsql.jp/if_skeleton/basic_06_columns/columns/css/classic.css">

<input type="text" id="target_user" value="101280392108947207617">
<input type="button" value="読み込み" onclick="get_album()">
<div id="columns"></div>

<script>

var example = null;
function get_album() {

	var user_id = $("#target_user").val();
	if ( example != null ) {
		example.destroy();
	}

	$.ajax({
		url:'https://picasaweb.google.com/data/feed/api/user/' + user_id + '?alt=json',
		dataType: 'json', 
		success: function(json) { 

			var target = [];
			for( i = 0; i < json.feed.entry.length; i++ ) {
				if ( !json.feed.entry[i].gphoto$albumType ) {
					target.push( 
						{
							 'title' : json.feed.entry[i].title.$t,
							'numphotos':  json.feed.entry[i].gphoto$numphotos.$t,
							'albumid' : json.feed.entry[i].gphoto$id.$t
						}
					);
				}
			} 

			example = $('#columns').columns({
				data:target, 
				schema: [
					{"header":"タイトル", "key":"title", "template":"{{title}}"},
					{"header":"画像数", "key":"numphotos" },
					{"header":"アルバムID", "key":"albumid" }

				],
				size: 100,showRows: [50,100,200]

			}); 
		}
	}); 

}
</script>

関連する記事

Picasa が終了するので、Google フォトで登録した画像の URL を Picasa の API で取得する手順

jQuery プラグイン : Columns と PHP の連携と、ドキュメントには書かれていないカスタマイズ方法




posted by lightbox at 2017-12-05 20:30 | プラグイン:jQuery | このブログの読者になる | 更新情報をチェックする

2017年06月10日


JSON 配列を WEB より読み出して jQuery のプラグイン『DYNATABLE』で動的にテーブルを作成して表示する


デモページ

配布サイト

DYNATABLE プラグインは、ドキュメント上では動的にテーブルを再ビルドするようには考えられていません。固定の JSON データをブラウザ側のみで処理する事を想定されています。そのサンプルは単純で、JSON データを即 TABLE 要素にセットしてくれる jQuery プラグイン『DYNATABLE』の利用 にあります。

しかしよくよく調べてみると、Stack Overflow で『動的に書き換える』方法が解答として紹介されています。その方法をもう少し進めて、整理したサンプルを作成しました。

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Dynatable/0.3.1/jquery.dynatable.min.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Dynatable/0.3.1/jquery.dynatable.min.js"></script>
<style>
body {
	padding: 10px 0 0 20px;
}
@media screen and ( max-width:479px )
{
	body {
		padding: 0px;
	}
}
#table_wrap {
	width:900px;

}
</style>
<script>
$(function(){

	// 最初にデータなしで作成してタイトルの CSS 有効にする
	window.dynatable = $('#syain').dynatable().data( "dynatable" );

	// データのみのクリア
	$("#btn2").on( "click", function(){
		
		dynatable.settings.dataset.originalRecords = [];
		dynatable.process();

	});

	$("#btn1").on( "click", function(){
	
		console.log("クリックされました");
		$.ajax({
			url: "https://lightbox.sakura.ne.jp/demo/json/syain_api_bind.php",
			cache: false,
			data: { "name" : $("#cond").val() }
		})
		.done(function( data, textStatus ){
			console.log( "status:" + textStatus );
			console.log( "data:" + JSON.stringify(data, null, "    ") );

			// この部分で新しいデータが反映されます
			dynatable.settings.dataset.originalRecords = data;
			dynatable.process();
			
		})
		// 失敗
		.fail(function(jqXHR, textStatus, errorThrown ){
			console.log( "status:" + textStatus );
			console.log( "errorThrown:" + errorThrown );
		})
		// 常に実行
		.always(function() {
			console.log("常に実行");
		})
		;
	
	});
});
</script>
<h3>社員一覧</h3>

<input id="cond" type="text">
<input id="btn1" type="button" value="検索">
<input id="btn2" type="button" value="リセット">

<!-- dynatable ではタイトル部分のみ作成しておく -->
<div id="table_wrap" class="table-responsive">
<table id="syain" class="table table-bordered">
	<thead>
		<th>社員コード</th>
		<th>氏名</th>
		<th>フリガナ</th>
		<th>所属</th>
		<th>性別</th>
		<th>給与</th>
		<th>手当</th>
		<th>管理者</th>
	</thead>
	<tbody></tbody>
</table>
</div>




posted by lightbox at 2017-06-10 01:21 | プラグイン:jQuery | このブログの読者になる | 更新情報をチェックする

2017年04月15日


JSON データを即 TABLE 要素にセットしてくれる jQuery プラグイン『DYNATABLE』の利用


デモページ

いろいろしっかりした API を揃えている優秀そうなプラグインなんですが、何故かさっぱり日本語のページがヒットせず、サンプルコードも見つかりません。なので、基本的なコードのみで即動作するコードの紹介です。

そもそも、目的としては PHP で JSON の配列データは埋め込んでしまって、そのまま jQuery のプラグインを起動させるという単純なもので、PHP 部分は <?= $変数 ?> とかで実装して下さい。

それと、配布ページのデモは、bootstrap 前提で表示されているので、こちらからのデモページでは cdnjs で貼り付けています。

ソースコード
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Dynatable/0.3.1/jquery.dynatable.min.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Dynatable/0.3.1/jquery.dynatable.min.js"></script>

<script>
$(function(){
	$('#my-table').dynatable({
		dataset: {
			records: [ {
				  "code" : "0001",
				  "name" : "浦岡 友也"
				}, {
				  "code" : "0002",
				  "name" : "山村 洋代"
				}, {
				  "code" : "0003",
				  "name" : "多岡 冬行"
				} ]
		}
	});
});
</script>
<div style='width:500px;margin:100px auto;'>
<table id="my-table" class="table table-bordered">
	<thead>
		<th>code</th>
		<th>name</th>
	</thead>
	<tbody></tbody>
</table>
</div>




posted by lightbox at 2017-04-15 17:09 | プラグイン:jQuery | このブログの読者になる | 更新情報をチェックする

2016年11月21日


かつての FRAME のように画面下部に張り付く IFRAME を実装する jQuery プラグイン

デモページ


デモページでは、実装コードを解りやすくする為に、IFRAME 内には大きな画像を表示していますが、本来はヘッド部分で値を入力して送信の結果を IFRAME に表示する問い合わせ系アプリケーションに利用しやすくなっています。

プラグインを実装したテンプレートページ


プラグインのコード

https://lightbox.sakura.ne.jp/demo/template/static/pass1iframe/std/lboxiframe.js
$.fn.extend({ 
	lboxiframe: function(option){

		var parent = $(this);

		$("<iframe name=\""+ option.name +"\">").insertAfter($(this))
			.attr("src",option.src)
			.attr("id",option.id)
			.attr("frameborder", "0")
			.css("width", "100%" )
			;

		function control_page_iframe(iframe,parent) {
			var height = Math.max(document.documentElement.scrollHeight,document.body.scrollHeight);
			var head_height = parent.get(0).clientHeight;

			// -8 は、IE と Firefox 用。Google Chrome は 0 で正しくフィットするが、
			// IE と Firefox では、BODY のスクロールバーが表示されてしまうので調整
			iframe.css("height", (height - parseInt(head_height)-8) + "px");
		}

		$(window).on("resize", function(){
	
			$("#" + option.id ).hide();
			control_page_iframe( $("#" + option.id ), parent );
			$("#" + option.id ).show();
	
		});

		control_page_iframe( $("#" + option.id ), parent );

	}
});
Google Chrome では ブラウザにきっちり収まるのですが、Firefox と IE では、下部に多少の余白が発生します。クロスブラウジングは避けたかったのと、補正値が過去変化したのでこのようになってますが、簡単で一般的なアプリケーションであれば、特に問題は出ないと思います。

呼び出し

対象とした div の下に IFRAME を埋め込みます。
$(function(){
	$( "#wrapper" ).lboxiframe({
		src : "simple-image.html",
		id : "my_iframe",
		name : "my_iframe"
	});
});



posted by lightbox at 2016-11-21 21:05 | プラグイン: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 終わり