SQLの窓

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 | Comment(0) | jQuery + プラグイン | このブログの読者になる | 更新情報をチェックする

2016年03月21日


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

スマホ等で動かない場合はこちら(アルバム内の画像表示まで実装しています)


▼ 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 2016-03-21 18:03 | Comment(0) | jQuery + プラグイン | このブログの読者になる | 更新情報をチェックする

2015年07月17日


jquery.balloon.js + Google ドライブの webViewLink(仮想ディレクトリ) + Google ストートビュー画像

▼ Google ドライブに以下のような img 要素による HTML 記述を書いた、.txt ファイルを置いています
<img src="http://maps.googleapis.com/maps/api/streetview?size=300x200&location=48.873321%2C2.295613&fov=90&heading=-40.96&pitch=18.1&sensor=false" style="border: solid 1px #000000">
これは、Google の API を使用して、ストリートビューの一場面を画像化したものです。


jQuery + jquery.balloon.js + jQuery UI のエフェクトを使用してバルーンにアニメーション効果を適用しています。バルーンの中の HTML データは、Google ドライブの WEB ホステング機能を使ってテキストとして置いて、ajax で呼び出しています。

関係するページ
jquery.balloon.js のダウンロードと使い方のページ

jQuery プラグイン jquery.balloon.js で、画像吹き出しを使って吹き出しの中央に文章を配置する

Google Street View Image API
( Google Street View Image API では、JavaScript を使用せずに、静的(非インタラクティブ)なストリートビューのパノラマ画像やサムネイルをウェブページに埋め込むことができます。)

ストリートビュー内で移動しながらリアルタイムで画像 URL を取得するサービス
Google ドライブの 『webViewLink』という仮想ディレクトリは、access-control-allow-origin:* を返してくれるので、一般ブログ内からでも利用する事ができます。 アニメーションに関しては、slide では二回目以降に失敗する事があり、Firefox で顕著でした。これはテキストコンテンツではあまり起きなかったので、画像を使っている事が影響していると思います。jQuery のアニメーションは、特殊なものは環境や大きさ等が原因で失敗するものもあるようです。 凱旋門のストリートビュー写真が右から アニメーションするバルーンの中に表示 されます url の内容を ajax で取得して HTML としてバルーン内のコンテンツとして使用していまが、jquery.balloon.js では、url オプションの内容を ajax で読み込んで、バルーンの中身として使用してくれます 最初の スクリプトは、jQuery 関係のロードですが、ブログの記事毎に必要な場合のみロードする方法です
<script>
if ( !window.jQuery ) {
	document.write("<"+"script src=\"//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js\"></"+"script>");
}
</script>
<script>
if ( !window.jQuery.ui ) {
	document.write("<"+"link rel=\"stylesheet\" href=\"//ajax.googleapis.com/ajax/libs/jqueryui/1.10.1/themes/base/jquery-ui.css\">");
	document.write("<"+"script src=\"//ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js\"></"+"script>");
}
if ( !window.jQuery.balloon ) {
	document.write("<"+"script src=\"http://winofsql.jp/js/jquery.balloon.min.051.js\"></"+"script>");
}
</script>
<style>
.balloon_ajax {
	width: 300px;
	cursor: pointer;
}
</style>
<script>
$(function() {
	$( ".balloon_ajax" ).balloon(
		{
			url: "https://googledrive.com/host/0B9Jymqpro6gSVlB5Wm52U29wTlE/ajax/street_view_img.txt",
			showDuration: 400,
			showAnimation: function(d) {
				this.show( {
					effect: "slide", direction: "right",
					duration: d,
					easing: "swing" 
				}); 
			},
			hideAnimation: function(d) {
				this.hide( {
					effect: "slide", direction: "right",
					duration: d,
					easing: "swing" 
				}); 
			},
			position: "right",
			tipSize: 20,
			offsetY: 0,
			offsetX: 30,
			css: {
				width: "300px",
				height: "200px",
				opacity: "1",
				color: "#333",
				fontSize: "16px",
				borderRadius: "10px",
				border: "solid 2px #A63814",
				padding: "10px"
			}
		}
	);

});
</script>
<pre class=w6>



<div class="balloon_ajax" id="slide_right_386699574"><img src="https://lh4.googleusercontent.com/-0l8Fqu9YYeE/VGWSwZ65BLI/AAAAAAAAXi4/3FWfh92yL8M/s198/mouse_over.png" style="border: solid 1px #000000" />
<b>凱旋門のストリートビュー写真が右から
アニメーションするバルーンの中に表示
されます
</b></div>
</pre>
この JavaScript のコードは、リアルタイム HTML で実行できます

▼ GN-キルゴを使った画像は、フリーフォントで簡単ロゴ作成で作成できます。



関連する記事



posted by lightbox at 2015-07-17 18:22 | jQuery + プラグイン | このブログの読者になる | 更新情報をチェックする

jQuery プラグイン jquery.balloon.js で、画像吹き出しを使って吹き出しの中央に文章を配置する

オンラインで実行

jquery.balloon.js で画像のバルーンを使いたい場合、最新の(少なくともバージョンが 0.5.1)ライブラリが必要です。

※ それより古いバージョンでは、デフォルトのコンテンツ設定を透明にする為の css: null が新しい jQuery のライブラリで動作しなかったからです。 

画像を使用するので、文字列と共存する為に手動で調整が必要です。その為、実際に DIV 内にコンテンツを作成して調整終了後、display:none で非表示にします。そして、jQuery の .html() で HTML 定義を取得して、contents プロパティにセットします。

tipSize は、0 に設定しないと、吹き出し用の三角部分が表示されて動作がおかしくなる可能性があります。

その為プラグイン側の処理は単純になっており、殆どは CSS の定義に依存しています
▼ マウスオーバーでバルーンが表示されます
プラグインダウンロードページ












▼ コンテンツ用( 実際は display:none で非表示にしておく )
画像吹き出し内
の中央に文章を配置
しています
<script>
if ( !window.jQuery ) {
	document.write("<"+"script src='//ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js'></"+"script>");
}
if ( window[window.location.hostname+'.loadBalloon'] !== true ) {
	window[window.location.hostname+'.loadBalloon'] = true;
	document.write("<"+"script src='http://winofsql.jp/js/jquery.balloon.min.051.js'></"+"script>");
}
</script>
<style type="text/css">
/* 画像用のコンテナです */
.balloonbox {
	/* 背景画像のみ指定しています */
	background: url(http://winofsql.jp/js/balloon/orange_balloon.png) center center no-repeat;
	/* 画像サイズに合わせています */
	width: 323px;
	height: 278px;

	/* vertical-align を指定できるようにする為に必要 */
	display: table-cell;

	/* 内部文字列を縦方向に中央に表示する為 */
	vertical-align:middle;
}
/* 文字列部分のコンテナです  */
.ballooninbox {
	/* 幅を設定します。高さは文字列に依存します */
	width: 300px;

	/* border の太さを0にすると、点線が消えます */
	border: dashed 1px #B8561D;
	font-weight: bold;
	font-size: 24px;
}
/* 文字列部分の配置用クラスです  */
.balloonalign {
	/* 文字列を中央に */
	text-align: center;

	/* PRE 全体を DIV 内で中央にして、上下調整を 30px で行っています */
	margin: 30px auto 0;
}
</style>
<script type="text/javascript">
$(function() {
	$('#image_balloon').balloon(
		{
			contents: $("#balloon_contents").html(),
			position: "bottom",
			offsetX: 100,
			tipSize: 0,
			css: null
		}
	);
});
</script>
<pre>
▼ マウスオーバーでバルーンが表示されます
<a id="image_balloon" title="こんな感じ" href="http://urin.github.io/jquery.balloon.js/" target="_blank">プラグインダウンロードページ</a>






















▼ コンテンツ用( 実際は display:none で非表示にしておく )
<div id="balloon_contents" style='border:solid 1px #c0c0c0;width:323px;'>
	<div class='balloonbox'>
		<pre class='ballooninbox balloonalign'>画像吹き出し内<br>の中央に文章を配置<br>しています</pre>
	</div>
</div>






</pre>
上下配置の為に 『display:table-cell』 と 『vertical-align:middle』を使用しているのですが、本来の contents エリアは内部的に position:absolute の為、display:table-cell が適用されないので、ラッパーをコンテンツ内に配置し、文章はさらにその中の PRE 要素で設定しています。

上下位置の微調整の為、.balloonalign 内の margin でさらに調整して画像の中央に文字列を配置しています。

関連する記事

CSSの 『display:table-cell』 と 『margin:auto』 と 『vertical-align:middle』 を使用して、吹き出し画像の中央に文章を表示する



関連する記事



posted by lightbox at 2015-07-17 18:22 | jQuery + プラグイン | このブログの読者になる | 更新情報をチェックする

2015年03月01日


jQuery のプラグイン jquery-color を使って、『青黒』なのか『白金』なのか、と言う『錯視』を再現しました。

色コードはそもそも、単純な数値では無いので、いろいろテクニックを使っても無理がある為、素直に既存の jQuery の プラグインで色を変化させています。

右半分の縦の二つの正方形の中の色は変化していません

右半分に注目して実行して下さい。

実行コード
<script type="text/javascript" src="http://winofsql.jp/jquery/plugins/jquery.color.js"></script>
<style>
#back_left {
	display:inline-block;
	background-color:#949494;
	width:200px;
	height:400px;
}
#back_right{
	display:inline-block;
	background-color:#C7BEA8;
	width:200px;
	height:400px;
}
#left_blue {
	position:absolute;
	top:100px;
	left:100px;
	width:100px;
	height:100px;
	border:1px #000 solid;
	background-color:#3041AB;
}
#left_black {
	position:absolute;
	top:200px;
	left:100px;
	width:100px;
	height:100px;
	border:1px #000 solid;
	background-color:#262A40;
}
#right_blue {
	position:absolute;
	top:100px;
	left:200px;
	width:100px;
	height:100px;
	border:1px #000 solid;
	background-color:#928CBB;
}
#right_black {
	position:absolute;
	top:200px;
	left:200px;
	width:100px;
	height:100px;
	border:1px #000 solid;
	background-color:#8C7D63;
}
</style>
<div style='position:relative;height:400px;'>

<div id="back_left"></div><div id="back_right"></div>

<div id="left_blue"></div>
<div id="left_black"></div>
<div id="right_blue"></div>
<div id="right_black"></div>

</div>

</div>
<script>
function doAction() {
	$("#back_right").animate({
		"backgroundColor":"#55516C"
	});
	$("#left_blue").animate({
		"backgroundColor":"#FFFFFF"
	});
	$("#left_black").animate({
		"backgroundColor":"#F5E687"
	});
}
function doAction2() {
	$("#back_right").animate({
		"backgroundColor":"#C7BEA8"
	});
	$("#left_blue").animate({
		"backgroundColor":"#3041AB"
	});
	$("#left_black").animate({
		"backgroundColor":"#262A40"
	});
}
</script>
<input type="button" value="実行" onclick='doAction()'> <input type="button" value="戻す" onclick='doAction2()'>
関連するリンク

jquery-color
Twitter の元となった、色配置の投稿





posted by lightbox at 2015-03-01 20:38 | jQuery + プラグイン | このブログの読者になる | 更新情報をチェックする

2014年12月04日


テーブル要素内のデータよりグラフを作成する jQuery プラグイン『jQuery-Visualize』をもっと使いやすく改造しました



概要

オリジナルはもう2年くらい処理の更新が無いのですが、問題点がいくつかあるので改造しました。問題点は、付属の css が中途半端なのと、上限と下限を設定できないので、一番大きい値がグラフの上限になり見にくいです。その上、Y軸のラベルの数字の間が自動なので100区切りとかになりません。そのあたりをオプションに追加しました。

enhance.js について

IE7 のエミュレーションでもグラフそのものは動作したので削除しています。

追加オプションと仕様変更



1) tableDisplay : デフォルトは true で、false にすると、データ元のテーブルを表示しない
2) top: グラフの上限
3) bottom : グラフの下限
※ yLabelInterval のデフォルトを 100 にして、Y軸の区切りの単位として変更
12月 1月 2月 3月 4月 5月 6月 7月 8月 9月 10月 11月
2013 712 1144 938 972 714 771 515 641 1051 1018 658 681
2014 857 1219 927 947 709 674 495 537 900 758 536 550
▼ 棒グラフ( dark 色 )


colors は、オプションで指定する場合は、データの数ぶん色を設定する必要があります。
タイトルは、th で指定する必要があります。
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript"> 
if ( window[window.location.hostname+'.visualize'] !== true ) { 
	window[window.location.hostname+'.visualize'] = true; 
	(function(){
		var str="";
		str+="<link href=\"http://winofsql.jp/jquery/plugins/visualize/visualize-light.css\" type=\"text/css\" rel=\"stylesheet\"> \n";
		str+="<"+"script type=\"text/javascript\" src=\"http://winofsql.jp/jquery/plugins/visualize/excanvas.js\"></"+"script> \n";
		str+="<"+"script type=\"text/javascript\" src=\"http://winofsql.jp/jquery/plugins/visualize/visualize.jQuery.js\"></"+"script> \n";
		document.write(str);
	})();
} 
</script> 
<script type="text/javascript">
$(function(){
	$("#target_table").visualize({
		tableDisplay: true,
		type: "line",
		width: "400px",
		height: "200px",
		title: "電気使用量の推移",
		colors: ['#F5CE0A','#0AB2F5'],
		lineWeight: 2,
		top: 1300,
		bottom: 400,
		yLabelInterval: 100
	});
});
</script>
<style>
.visualize * {
	font-size: 12px!important;
	font-family: Arial,"メイリオ","MS Pゴシック";
}
.visualize .visualize-title {
	font-size: 24px!important;
	font-family: Arial,"メイリオ","MS Pゴシック";
}
.visualize { 
	margin: 20px 0 0 15px;
}
#target_table {
	border-collapse: collapse;
}
#target_table td, #target_table th {
	text-align: center;
	border: 1px solid #ddd;
	padding:2px 5px;
}
</style>
<table id="target_table">
<thead>
<tr>
	<td></td>
	<th>12月</th>
	<th>1月</th>
	<th>2月</th>
	<th>3月</th>
	<th>4月</th>
	<th>5月</th>
	<th>6月</th>
	<th>7月</th>
	<th>8月</th>
	<th>9月</th>
	<th>10月</th>
	<th>11月</th>
</tr>
</thead>
<tbody>
<tr>
	<th>2013</th>
	<td>712</td>
	<td>1144</td>
	<td>938</td>
	<td>972</td>
	<td>714</td>
	<td>771</td>
	<td>515</td>
	<td>641</td>
	<td>1051</td>
	<td>1018</td>
	<td>658</td>
	<td>681</td>
</tr>
<tr>
	<th>2014</th>
	<td>857</td>
	<td>1219</td>
	<td>927</td>
	<td>947</td>
	<td>709</td>
	<td>674</td>
	<td>495</td>
	<td>537</td>
	<td>900</td>
	<td>758</td>
	<td>536</td>
	<td>550</td>
</tr>
</tbody>
</table>


タグ:jquery
posted by lightbox at 2014-12-04 00:42 | jQuery + プラグイン | このブログの読者になる | 更新情報をチェックする

2014年11月26日


jQuery.selection(プラグイン) : テキストエリア内のカーソル位置や選択範囲に対して文字列を追加したり置き換えたりする。

2014/11/26 : jQuery.selection(プラグイン) のバグ対応。現在、Google Chrome のみ、選択後テキストエリアの最後までスクロールされています。中身を見ると、結局 Firefox でしか必要の無い処理の影響でした。以下の部分が変更内容です。
        setPos: function(element, toRange, caret) {
            caret = this._caretMode(caret);

            if (caret === 'start') {
                toRange.end = toRange.start;
            } else if (caret === 'end') {
                toRange.start = toRange.end;
            }

            var userAgent = window.navigator.userAgent.toLowerCase();
            if (userAgent.indexOf("firefox") > -1) {
                element.focus();
            }
            try {
                if (element.createTextRange) {
                    var range = element.createTextRange();

                    if (win.navigator.userAgent.toLowerCase().indexOf("msie") >= 0) {
                        toRange.start = element.value.substr(0, toRange.start).replace(/\r/g, '').length;
                        toRange.end = element.value.substr(0, toRange.end).replace(/\r/g, '').length;
                    }

                    range.collapse(true);
                    range.moveStart('character', toRange.start);
                    range.moveEnd('character', toRange.end - toRange.start);

                    range.select();
                } else if (element.setSelectionRange) {
                    element.setSelectionRange(toRange.start, toRange.end);
                }
            } catch (e) {
                /* give up */
            }
        },



テキストエリアで使う事が最も便利で有効ですが、通常の1行の入力フィールドでもかまいません。

使用可能なメソッドは 5つ

1) getPos
2) setPos
3) insert
4) replace
5) get

get は、一応メソッドとしての名前ですが、1〜4 以外の文字列を指定すると全て get となります。getPos と setPos は、選択位置の情報の取得と反映です。

insert では、サブメソッドがあって、before か after を使用し、最後のカーソルモードとして、keep か start か end を選べます。

ページ全体で使用可能 selection メソッド

こちらは、text か html かで選択部分の情報を取得します
ここを選択して html 取り出しすると

▼ テキストエリア内限定 ▼ ページ全体に対しての処理

<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<script src="https://googledrive.com/host/0B9Jymqpro6gSVlB5Wm52U29wTlE/jquery/jquery.selection.js"></script>
<script type="text/javascript">

$(function(){

	$("#text")
		.css({
			float: "left",
			width: "400px",
			height: "200px"
		});

	$("#insert1")
		.attr("type", "button")
		.val("前へ挿入")
		.css({
			display: "block"
		})
		.click(function(){
			$("#text").selection("insert",{ text: "文字列", mode: "before", caret: "keep" })
		});

	$("#insert2")
		.attr("type", "button")
		.val("後へ挿入")
		.css({
			display: "block"
		})
		.click(function(){
			$("#text").selection("insert",{ text: "文字列", mode: "after", caret: "keep" })
		});

	$("#replace")
		.attr("type", "button")
		.val("置き換え")
		.css({
			display: "block"
		})
		.click(function(){
			$("#text").selection("replace",{ text: "文字列", caret: "keep" })
		});

	$("#get")
		.attr("type", "button")
		.val("取り出し")
		.css({
			display: "block"
		})
		.click(function(){
			alert( $("#text").selection("get") )
		});

	$("#get_text")
		.attr("type", "button")
		.val("選択部分の text 取り出し")
		.css({
			display: "block"
		})
		.click(function(){
			alert( $.selection("text") )
		});

	$("#get_html")
		.attr("type", "button")
		.val("選択部分の html 取り出し")
		.css({
			display: "block"
		})
		.click(function(){
			alert( $.selection("html") )
		});

});

</script>
<b>ここを選択して <span>html</span> 取り出しすると</b><br><br>

<textarea id="text">aaa
bbb
ccc</textarea>
▼ テキストエリア内限定
<input id="insert1">
<input id="insert2">
<input id="replace">
<input id="get">
▼ ページ全体に対しての処理
<input id="get_text">
<input id="get_html">



IE11 のエミューレートテストでは、IE8 を含むそれより前は、.attr("type", "button") が動作せず、jQuery も 1.11.0 以前である必要があります( IE8 には addEventListener が無いので )

関連する記事

ノーマル JavaScript と比較。jQuery でクリックしたテキスト( SPAN 要素 と INPUT またはテキストエリア ) を選択状態にする


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

2014年11月08日


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

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


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

さらに、デフォルトでは選択するリストが左側と決まっていますが、これは float で作成されているので、左右を入れ替えるだけで右側を選択できるようにできます
<script type="text/javascript">
if ( window['loadjQuery'] !== true ) {
	window['loadjQuery'] = true;
	document.write("<"+"script type=\"text/javascript\" src=\"//ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js\"></"+"script>");
}
</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;
}
/* 左右入れ替え */
.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>
キーも割り当てられていて、左右の矢印キーでリスト間移動ができ、上下矢印キーでリスト内を移動できます。
選択はスペースキーです。

イベント内では、value が引数となっていますが、上のソースでは、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 2014-11-08 19:35 | jQuery + プラグイン | このブログの読者になる | 更新情報をチェックする

2013年10月25日


jQuery の Chosen プラグイン( 複数選択コンボボックス ) の使い方

Chosen

選択すると、ボタンが追加されて複数選択を右手のマウスだけで行う事ができます。
必要なファイルは、js と css と chosen-sprite.png の3つのファイルだけです。


<script>
if ( !window.jQuery ) {
	document.write("<"+"script src=\"//ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js\"></"+"script>");
}
if ( window[window.location.hostname+'.loadChosen'] !== true ) {
	window[window.location.hostname+'.loadChosen'] = true;
	document.write("<"+"link rel=\"stylesheet\" href=\"http://winofsql.jp/jquery/plugins/chosen/chosen.css\">");
	document.write("<"+"script src=\"http://winofsql.jp/jquery/plugins/chosen/chosen.jquery.min.js\"></"+"script>");
}
</script>
<script type="text/javascript">
$(function() {
	// セレクタ
	$(".chosen")
		// プラグイン
		.chosen({
			width: "550px",
			max_selected_options: 3
		})
		// 変更時のイベント
		.change(function(evt, params){
			console.log(evt.type);
			if ( params.selected ) {
				console.log(params.selected+" が選択されました");
			}
			if ( params.deselected ) {
				console.log(params.deselected+" が選択解除されました");
			}
		})
		// リストが開いた時のイベント
		.on('chosen:showing_dropdown', function(evt, params) {
			console.log(evt.type);
			console.log(params);
		})
		// リストが閉じた時のイベント
		.on('chosen:hiding_dropdown', function(evt, params) {
			console.log(evt.type);
			console.log(params);
		})
		// 最大値以上を選択した時に発生するイベント( リストは開かない )
		.on('chosen:maxselected', function(evt, params) {
			console.log("---------------");
		})
		;
	}
);


</script>

<form>
<input type="submit" value="送信"><br>
<select name="sel_01[]" data-placeholder="あなたの好きな色を選択して下さい" multiple class="chosen">
	<option value="0"></option>
	<option value="1">赤</option>
	<option value="2">緑</option>
	<option value="3">青</option>
	<option value="4">紫</option>
	<option value="5">ピンク</option>
	<option value="6">オレンジ</option>
	<option value="7">黄色</option>
	<option value="8">茶色</option>
</select>
<br><br>
<select name="sel_02" data-placeholder="あなたの好きな色を選択して下さい"class="chosen">
	<option value="0"></option>
	<option value="1">赤</option>
	<option value="2">緑</option>
	<option value="3">青</option>
	<option value="4">紫</option>
	<option value="5">ピンク</option>
	<option value="6">オレンジ</option>
	<option value="7">黄色</option>
	<option value="8">茶色</option>
</select>
</form>



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

2013年03月19日


使いどころが難しいですが、入力をコンボボックス化する jQuery プラグインの実装が不便だったので、modify しました。

https://github.com/dellsala/Combo-Box-jQuery-Plugin

オリジナルの実装では、作成する毎に、jQuery の 名前空間に作った配列に追加していたので、インスタンスに対する処理が対象となるエレメントからの参照では無く不自然だったので、本来の jQuery の使い方に近い実装に変更しました。後、CSS の指定で一つバグがあったので修正しています。
オリジナルでのオプション変更
        $('#option_changer').click(function (e) {
            jQuery.combobox.instances[0].setSelectOptions([
                'Apples',
                'Oranges',
                'Bananas'
            ]);
        });
修正後
        $('#option_changer').click(function (e) {
            $("#input1").comboget().setSelectOptions([
                'Apples',
                'Oranges',
                'Bananas'
            ]);
        });
http://homepage2.nifty.com/lightbox/jquery/combobox/css/jquery.combobox/style.css
http://homepage2.nifty.com/lightbox/jquery/combobox/js/jquery.combobox.js



ソースコードを見ると、他にもメソッドがあるのですが、使いどころがあまりありません。あと、キー操作があって、フォーカスがある時に下矢印でリストが開きます。


<script type="text/javascript">
if ( window['loadjQuery'] !== true ) {
	window['loadjQuery'] = true;
	document.write("<"+"script type=\"text/javascript\" src=\"//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js\"></"+"script>");
}
</script>
<link rel="stylesheet" type="text/css" href="http://homepage2.nifty.com/lightbox/jquery/combobox/css/jquery.combobox/style.css">
<script type="text/javascript" src="http://homepage2.nifty.com/lightbox/jquery/combobox/js/jquery.combobox.js"></script>

<script type="text/javascript">
$(function () {

	$('#input1').combobox([
		'青森',
		'岩手',
		'秋田',
		'山形',
		'宮城',
		'福島',
		'栃木',
		'群馬',
		'茨城',
		'東京'
	]);

	jQuery('#input2').combobox([
		'切絵字1.0',
		'モフ字1.3',
		'水面字1.1',
		'三次元切絵字1.0',
		'白舟篆書(教育漢字1006字)',
	]);
	
	jQuery('#option_changer1').click(function () {
		$("#input1").comboget().setSelectOptions([
			'三重','和歌山','奈良','滋賀','京都','大阪'
		]);
	});

	jQuery('#option_changer2').click(function () {
		$("#input2").comboget().setSelectOptions([
			'怨霊フォント',
			'下町の恐怖フォント',
			'しねきゃぷしょん',
			'たぬき油性マジック',
			'やさしさゴシックボールド'
		]);
	});

	jQuery('#test_show').click(function () {
		setTimeout( function() {$("#input1").comboget().selector.show();}, 1000 );
	});

	jQuery('#test_select').click(function () {
		setTimeout( function() {
			$("#input1").comboget().selector.show();
			$("#input1").comboget().selector.select(2);
		}, 1000 );
	});

	jQuery('#test_get').click(function () {
		$("#input1").comboget().selector.select(2);
		alert( $("#input1").comboget().selector.getSelectedValue() );
	});

 });
</script>

<div style='width:400px;height:200px'>
<table><tr>
<td><textarea id="input1"></textarea></td>
<td><input id="input2" type="text" value="アームド・バナナ" style='width:100px;'></td>
</tr></table>
<input id="option_changer1" type="button" value="内容変更1" />
<input id="option_changer2" type="button" value="内容変更2" />
<input id="test_show" type="button" value="1秒後表示" />
<input id="test_select" type="button" value="1秒後表示して選択" />
<input id="test_get" type="button" value="3番目の文字列を取得" />
</div>


タグ:javascript jquery
posted by lightbox at 2013-03-19 22:41 | jQuery + プラグイン | このブログの読者になる | 更新情報をチェックする

2013年03月04日


常に表示する事もできる jQuery プラグインカラッービッカーをカスタムタグ <colorpicker> で実装

<colorpicker></colorpicker>

実装にカスタムタグを使う必要は無いのですが、目立って解りやすいと思います。

ダウンロードはこちらになりますが、古いプラグインでもあり、説明も簡素すぎるのでちょっと解りにくいです。通常はやはり、入力フィールドにフォーカスが移った時に使えるのですが、その目的だと『ExColor (V 1.2)』が優れていると思います。こちらは、常に表示する場合に使えるのでテストしてみました。
問題点

一番の問題は、クリックで色が変わらないところ(少しでも動かすと変わる)ですが、目的によればそれはメリットになるかもしれません。あと、ダウンロードしたライブラリ内のファイルの配置が解らないというところ。必要無いファイルがたくさんあります(デモ用だと思うのですが)

結局以下のように配置し、必要なのは colorpicker.js と colorpicker.css と画像ファイルです。


<link rel="stylesheet" href="http://homepage2.nifty.com/lightbox/colorpicker/css/colorpicker.css" type="text/css" />
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript" src="http://homepage2.nifty.com/lightbox/colorpicker/colorpicker.js"></script>

<colorpicker></colorpicker>

<script type="text/javascript">
$('colorpicker').ColorPicker({
	flat: true,
	onSubmit: function(hsb, hex, rgb, el) {
		// 要素名は "COLORPICKER" になります
		console.log(el.tagName);
		// hex は文字列の16進文字列
		console.log(parseInt("0x"+hex));
		// オブジェクト
		console.dir(rgb);
		// オブジェクト
		console.dir(hsb);
		// エレメントより jQuery オブジェクトで id セット
		$(el).attr("id","target");
		// 正当 DOM 参照と el は一致
		if ( document.getElementById("target") == el ) {
			console.log("element");
		}
	}
});
</script>
関連する記事

jQuery plugin カラーピッカー : ExColor (V 1.2) とその『バグ』




タグ:jquery javascript
posted by lightbox at 2013-03-04 08:00 | jQuery + プラグイン | このブログの読者になる | 更新情報をチェックする

2013年02月23日


jQuery plugin カラーピッカー : ExColor (V 1.2) とその『バグ』

バグは、URL に大文字が含まれると、強制的に小文字にするようなので、部品の画像の参照が失敗します。

特徴

JavaScript 内から CSS を書き出しているので、外部 CSS が必要ありません。しかし、表示されるカラーピッカーは常に一つだけで、表示されている場合は BODY の最後にその時だけ追加されるため、常時表示する事はできないようです。

jsdo.it で実行
jsdo.it のサンプル実行コード公開ページ



ダウンロードページで、少しづつ見栄えを変える為のオプションを選択して、そのコードを見る事ができます。単純なアプリケーションなので、jQuery には 他にも多くのカラーピッカーがありますが、これで十分です。(サイトが消失していました) 違うものとなると、形状の違いで Farbtastic Color Picker を選ぶといいと思います。




その他のプラグイン

https://github.com/vanderlee/colorpicker 
http://www.digitalmagicpro.com/jPicker/
http://recurser.com/articles/2007/12/18/jquery-simplecolor-color-picker/
http://www.eyecon.ro/colorpicker/
http://www.syronex.com/software/jquery-color-picker
http://www.laktek.com/2008/10/27/really-simple-color-picker-in-jquery/

複数のフィールド

想像通り、INPUT 要素に class を指定して jQuery からセレクタで一回実行するだけで、全てのフィールドが Color Picker になります。


<script>
if ( !window.jQuery ) {
	document.write("<"+"script src=\"//ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js\"></"+"script>");
}
if ( window[window.location.hostname+'.loadModcoder'] !== true ) {
	window[window.location.hostname+'.loadModcoder'] = true;
	document.write("<"+"script src=\"http://homepage2.nifty.com/lightbox/modcoder_excolor/jquery.modcoder.excolor.js\"></"+"script>");
}
</script>
<style type="text/css">
.color_field {
	width: 80px;
}
</style>
<div style='height:200px;'>
<input class="color_field" type="text" name="color_code1" />
<input class="color_field" type="text" name="color_code2" />
<input class="color_field" type="text" name="color_code3" />
<input class="color_field" type="text" name="color_code4" />
</div>


<script type="text/javascript">
$(".color_field").modcoder_excolor();
</script>

イベントは、OK ボタンを押した時のみ用意されていますが、イベント内で this を参照すると、実行時に指定したオプションの一覧になりますが、使用しているフィールドの情報は無いようなので、直接取りに行く必要があります。ですから、class 指定した場合は少し面倒かもしれません
<script>
if ( !window.jQuery ) {
	document.write("<"+"script src=\"//ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js\"></"+"script>");
}
if ( window[window.location.hostname+'.loadModcoder'] !== true ) {
	window[window.location.hostname+'.loadModcoder'] = true;
	document.write("<"+"script src=\"http://homepage2.nifty.com/lightbox/modcoder_excolor/jquery.modcoder.excolor.js\"></"+"script>");
}
</script>
<style type="text/css">
.color_field {
	width: 80px;
}
</style>
<input id="color_field" type="text" name="color_code" />
<script type="text/javascript">
$("#color_field").modcoder_excolor({
	color_box : false,
	callback_on_ok : function() {
		$("body").css("background-color",$("#color_field").val());
	}
});
</script>




タグ:jquery javascript
posted by lightbox at 2013-02-23 10:00 | jQuery + プラグイン | このブログの読者になる | 更新情報をチェックする
Seesaa の各ページの表示について
Seesaa の 記事がたまに全く表示されない場合があります。その場合は、設定> 詳細設定> ブログ設定 で 最新の情報に更新の『実行ボタン』で記事やアーカイブが最新にビルドされます。

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

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

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

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


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

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

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

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

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


Windows
container 終わり

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

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