SQLの窓

2015年07月30日


IE11 の 互換表示機能に関するいくつかの問題

右上の歯車アイコンで開くメニューの中に、『互換表示設定』という項目がありますが、これは意図的にある条件にあてはまるページを IE7 互換で表示するものですが、その条件が大きく分けて2通りあります。

1) 登録したサイト
2) イントラネット

この 2) の条件は、IE11 が導入された当時チェックされていなかったと思います。先日久しぶりに IE11 にかかわるメンテをやっていたら、何故か IE7 互換になっていたので確認するとそうなっていました。他の PC も確認したので、これは Windows Update のどこかのタイミングで強制的にチェックが付いたと思われます。

▼ 他の方法で IE8 互換でテストしているのでチェックを外してあります


で、実はこのチェックをするかしないかで、サーバー側で受け取るユーザーエージェント文字列が違うという事実を確認しました。

X-UA-Compatible META要素 による設定



この設定は、HTML で指定する方法ですが、IE11 が IE8 コンパチブルにもかかわらず、サーバー側は IE11 扱いです。( POST しても同じ )
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<meta http-equiv="x-ua-compatible" content="IE=8">
</head>
<body>
<form>
<input type="submit" name="send" value="送信">
</form>
<img src="server.png" style='display:block;margin-top:10px;'>
<?php
print $_SERVER["HTTP_USER_AGENT"];
?>
<hr>
<img src="client.png" style='display:block'>
<script>
document.write(window.navigator.userAgent);
</script>
</body>
</html>

▲ デモページ

最初、こういう仕様なんだろうと思ったんですが、『互換表示設定』を行うと以下のようになります。



おそらく、IE11 移行時に想定していた対応策が、Microsoft 側で足並みが取れずにかつ後フォローもできていないとしか思え無いです。

結局、これ以外の方法は全てサーバー側では IE11 扱いになります。

X-UA-Compatible ヘッダーによる設定




F12 で手動変更




関連する Microsoft ドキュメント

F12 開発者ツール コンソール エラー メッセージ
X-UA-Compatible META タグをヘッダー内のできるだけ前の位置に移動します。"title" と charset の値の直後に配置することをお勧めします。
グループ ポリシーを使った Internet Explorer 11 の互換性の管理 ドキュメント互換性の定義 下の二つのドキュメントは、F12 で開く開発者ツールの『エミュレーション』タブのドキュメントモードの項目の右にある インフォメーションアイコンで開く英文ページから辿れる内容ですが、一つは英文でしか開かないという、適当対応が現状です。
タグ:IE トラブル
posted by lightbox at 2015-07-30 13:49 | IE | このブログの読者になる | 更新情報をチェックする

2015年07月29日


jQuery で、左右に並んだリストボックスの右側のデーターをダブルクリックしたら左へ転送してソートする処理

開発中です。旧システムの都合で、IE8 コンパチブルになっているので先頭の2行が必要になっていますが、最新の IEならば必要無いと思います( IE8 ではこれが無いと最初のダブルクリックが失敗する )

この後、左側のデータを全て送信する事になりますが、送信直前のイベント( onsubmit ) で、左のリストボックスを複数選択可に変更した後全て選択状態にします( PHP の場合は name="left[]" にしておきます )
<script>
// jQuery 初期処理
$(function() {

	// IE8 対応
	$("#right").focus();
	$("#right").prop("selectedIndex", 0);


	$("#right").on("dblclick", function(){

		var value = $(this).find(":selected").val();
		var text = $(this).find(":selected").text();

		$("#left").data("check",false);
		$("#left").find("option").each( function(){
			if ( $(this).val() == value ) {
				alert("既に登録されています");
				$("#left").data("check",true);
			}
		} );

		// 追加しない
		if ( $("#left").data("check" ) ) {
			return;
		}

		// ソートしない場合は、prependTo がベター
		$("<option>").val(value).text(text)
			.prependTo("#left");

		var selectList = $('#left option');

		selectList.sort(function(a,b){
			a = a.value;
			b = b.value;
			return a-b;
		});

		$('#left').html(selectList);
		
	});

});
</script>



タグ:jquery IE
posted by lightbox at 2015-07-29 17:23 | jQuery | このブログの読者になる | 更新情報をチェックする

2015年07月27日


スマホとPC で別の処理を記述できる jQuery のストリートビュープラグイン

スマホ対応をする為 userAgent の文字列を内部で使用していますが、StreetViewOnSh メソッドと StreetViewOnPc メソッドの引数としても再度渡しています。さらに、StreetView メソッドで作成した StreetViewPanorama クラスのインスタンスも引数として渡しているので、未実装の処理も追加で簡単に記述できます 
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>
<script>
$.fn.extend({
	StreetView : function(a,b){
		var pos = new google.maps.LatLng(a,b);
		// jQuery オブジェクトに StreetViewPanorama をセット(後で使用します)
		this
			.data( "pano", 
				new google.maps.StreetViewPanorama(
					this[0],
					{ position: pos }
				)
			);
		// プラグインの戻り値の無い処理の標準仕様として自分自身を返す
		return this;
	},
	// 向き	と 上下 の値をセットします
	StreetViewPov : function(a,b){
		var pov = {
			heading: a,  
			pitch: b 
		}
		// jQuery オブジェクトにセットした StreetViewPanorama を使用しています
		this.data( "pano" ).setPov(pov);
		// プラグインの戻り値の無い処理の標準仕様として自分自身を返す
		return this;
	}, 
	// 拡大率をセットします( 0 〜 5 / 小数以下あり )
	StreetViewZoom : function(a){
		// jQuery オブジェクトにセットした StreetViewPanorama を使用しています
		this.data( "pano" ).setZoom(a);
		// プラグインの戻り値の無い処理の標準仕様として自分自身を返す
		return this;
	},
	StreetViewOptions( a ) {
		// jQuery オブジェクトにセットした StreetViewPanorama を使用しています
		$( this ).data( "pano" ).setOptions(a);
		// プラグインの戻り値の無い処理の標準仕様として自分自身を返す
		return this;
	},
	StreetViewOnSh: function( callback ) {
		var ua = navigator.userAgent.toLowerCase();
		if ( ua.indexOf("iphone") > -1 || ua.indexOf("android") > -1 ) {
			(callback.bind(this,ua,this.data( "pano" )))();
		}
		return this;
	},
	StreetViewOnPc: function( callback ) {
		var ua = navigator.userAgent.toLowerCase();
		if ( ua.indexOf("iphone") <= -1 && ua.indexOf("android") <= -1 ) {
			(callback.bind(this,ua,this.data( "pano" )))();
		}
		return this;
	}
	

});

$(function(){
	$('#pano_40671578')
	.StreetView(40.671578,-73.962557)
	.StreetViewPov(-128,10)
	.StreetViewOnPc( function(userAgent,StreetViewPanorama){
		// PC の場合の処理
		this.css("width","600px");
		this.css("height","400px");

		// 追加のブラウザ判定に使用する
		console.log(userAgent);
		// 実装していない処理は、直接実行
		console.log(StreetViewPanorama.getPov())
	})
	.StreetViewOnSh( function(userAgent,StreetViewPanorama){
		// スマホ の場合の処理
		this.css("cssText","width:290px!important;height:290px!important");
		this.StreetViewZoom(2.5);

		// 追加のブラウザ判定に使用する
		console.log(userAgent);
		// 実装していない処理は、直接実行
		console.log(StreetViewPanorama.getZoom())
	})
	;

	// PC と スマホ 共通な場合
	$('#pano_40671578_b')
	.StreetView(40.671578,-73.962557)
	.StreetViewPov(-106.13,8.69)
	.StreetViewZoom(2.65)
	.StreetViewOptions({
		/* addressControl: false, */
		/* zoomControl: false, */
		/* panControl: false, */
		scrollwheel: false,
		disableDefaultUI: true
	})
	.css("width","600px")
	.css("height","480px")
	.css("margin-top","10px")
	;

});
</script>
<div id="pano_40671578"></div>
<div id="pano_40671578_b"></div>
スマホの処理として、表示サイズを強制的に変更する為に important を使用していますが、これは jQuery で important 設定する方法としてかなり前から公開されているもので、一度に全ての設定を行う必要があります。
	$('#pano_40671578')
	.StreetView(40.671578,-73.962557)
	.StreetViewPov(-128,10)
	.StreetViewOnPc( function(userAgent,StreetViewPanorama){
		// PC の場合の処理
		this.css("width","600px");
		this.css("height","400px");

		// 追加のブラウザ判定に使用する
		console.log(userAgent);
		// 実装していない処理は、直接実行
		console.log(StreetViewPanorama.getPov())
	})
	.StreetViewOnSh( function(userAgent,StreetViewPanorama){
		// スマホ の場合の処理
		this.css("cssText","width:290px!important;height:290px!important");
		this.StreetViewZoom(2.5);

		// 追加のブラウザ判定に使用する
		console.log(userAgent);
		// 実装していない処理は、直接実行
		console.log(StreetViewPanorama.getZoom())
	})
	;
実際問題スマホの環境では、さらに考慮すべき事項や、複雑なサイト環境によっては IFRAME を使わざるを得ない場合があり、簡単に行くとはかぎりませんが、場合を確実に分けて記述できるメリットはあると思います。


関連する記事
jQuery のプラグインとしてストリートビューを利用する

(callback.bind(this))(); で、無名 function で使用される this に this を引き継ぐ




posted by lightbox at 2015-07-27 15:08 | jQuery プラグイン作成 | このブログの読者になる | 更新情報をチェックする

2015年07月23日


jQuery のプラグインとしてストリートビューを利用する

とにかく、ストリートビューは何かと面倒な事が多いので、jQuery の簡潔さでどの程度表現できるかやってみました。
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>
<script>
$.fn.extend({
	StreetView : function(a,b){
		var pos = new google.maps.LatLng(a,b);
		// jQuery オブジェクトに StreetViewPanorama をセット(後で使用します)
		$( this )
			.data( "pano", 
				new google.maps.StreetViewPanorama(
					$(this)[0],
					{ position: pos }
				)
			);
		// プラグインの戻り値の無い処理の標準仕様として自分自身を返す
		return this;
	},
	// 向き	と 上下 の値をセットします
	StreetViewPov : function(a,b){
		var pov = {
			heading: a,  
			pitch: b 
		}
		// jQuery オブジェクトにセットした StreetViewPanorama を使用しています
		$( this ).data( "pano" ).setPov(pov);
		// プラグインの戻り値の無い処理の標準仕様として自分自身を返す
		return this;
	}, 
	// 拡大率をセットします( 0 〜 5 / 小数以下あり )
	StreetViewZoom : function(a){
		// jQuery オブジェクトにセットした StreetViewPanorama を使用しています
		$( this ).data( "pano" ).setZoom(a);
		// プラグインの戻り値の無い処理の標準仕様として自分自身を返す
		return this;
	},
	StreetViewOptions( a ) {
		// jQuery オブジェクトにセットした StreetViewPanorama を使用しています
		$( this ).data( "pano" ).setOptions(a);
		// プラグインの戻り値の無い処理の標準仕様として自分自身を返す
		return this;
	}
});

$(function(){
	$('#pano1')
	.StreetView(40.671578,-73.962557)
	.StreetViewPov(-128,10)
	.css("width","600px")
	.css("height","400px")
	.css("margin-bottom","10px")

	$('#pano2')
	.StreetView(40.671578,-73.962557)
	.StreetViewPov(-106.13,8.69)
	.StreetViewZoom(2.65)
	.StreetViewOptions({
		/* addressControl: false, */
		/* zoomControl: false, */
		/* panControl: false, */
		scrollwheel: false,
		disableDefaultUI: true
	})
	.css("width","600px")
	.css("height","480px")
;

});
</script>
<div id="pano1"></div>
<div id="pano2"></div>
Google のサンプルはやたらと、オプションを一括で渡したがるので、とても解りにくいと思っていましたし、固定的で汎用性が無いかもしれませんが、これで十分なのでこのほうがいいかもしれません。
▼ ストリートビュー上のコントロールを排除して、マウスホイールによるズームを出来ないようにしています。
StreetViewOptions メソッドは、使用可能なオプションを後から設定しますが、ここで試しているようにいろいろな UI をキャンセルする場合に使用します。

heading と pitch と zoom は、こちらで動かしながら取得できます。画像だけで良い場合もこちらで URL を取得できます( 最後に設定変更ボタン )。




Google の API リファレンス

StreetViewPanorama class
Google Street View Image API
StreetViewPanoramaOptions



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

2015年07月22日


jQuery の簡単なプラグインを $.fn.extend で作成( 0〜9のみ入力可能なフィールド )

プラグインとしては、一応 IE8、IE9、Chrome、Firefox、Opera、Safari で動作はしていますが、入力制限でうまく行かない場合があると洒落にならないので、実用としては考えていないコードです。

ただ、プラグインの考え方としては良く解りやすいと思います。対象となる入力フィールドに対して一括で jQuery で入力制限を行った上に、CSS で色とサイズと最大入力数も同時設定しています。

try 〜 catch が入って変な事になっているのは、IE8 に対応する為です。returnValue = false では、特にエラーになる事は無かったのですが(実際ではIEのみ実行にしたほうがよさそうです)、一応念のため。preventDefault は、IE8 以前ではエラーになるはずです。
<!-- 古いIE用に 1.9.1 を使用しています -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<input class="numField" type="text">
<input class="numField" type="text">
<input class="numField" type="text">
<script>

// プラグインの作成( fn.extend )
$.fn.extend({ 
	numField: function(){
		$(this).on('keydown', function(evt) {
			// *********************************
			// 以下入力を受け付けるキーの処理
			// *********************************
			// 数字( 0〜9 )
			if ( 48 <= evt.keyCode && evt.keyCode <= 57 ) {
				return;
			}
			// テンキー( 0〜9 )
			if ( 96 <= evt.keyCode && evt.keyCode <= 105 ) {
				return;
			}
			// 矢印
			if ( 37 <= evt.keyCode && evt.keyCode <= 40 ) {
				return;
			}
			// DEL
			if ( evt.keyCode == 46 ) {
				return;
			}
			// タブ
			if ( evt.keyCode == 9 ) {
				return;
			}
			// バックスペース
			if ( evt.keyCode == 8 ) {
				return;
			}
			// *********************************
			// 以下入力を受け付けないキーの処理
			// *********************************
			// 古い IE 用
			if (navigator.userAgent.toLowerCase().indexOf("msie") > -1) {
				try{
					evt.returnValue = false;
				}catch(ex){}
			}
			try{
				// イベントがキャンセル可能である場合、
				// 上位ノードへのイベントの 伝播 (propagation) を止めずに、
				// そのイベントをキャンセルします。
				evt.preventDefault();
			}catch(ex){}
		});
		// プラグインの標準仕様として実行後は自分自身を返す
		return this;
	}  
});

// プラグインの実行
$(".numField").numField()
	.css({
		"background-color":"pink",
		"width":"70px"
	})
	.attr("maxlength",6);

</script>



タグ:javascript jquery
posted by lightbox at 2015-07-22 13:22 | jQuery プラグイン作成 | このブログの読者になる | 更新情報をチェックする

2015年07月20日


jQuery でコンボボックスの選択されたオプションのテキストを取得する場合、optgroup を使っている場合は子孫選択でないと取得されないというお話 / find(子孫) と children(直近) の違い

要は、:selected Selector のお話です。

通常のコンボボックスですと、どちらでも正しく動きます。しかし、optgroup を使ってコンボボックス内に分類を作ってしまうと、option 要素の階層がが一つ深くなってしまうので選択した option 要素を取得できない事になります。

セレクタとして > を使う事はそもそもあまり無いですが、逆に必要な場合もあるので、メソッドの find(子孫) と children(直近) の違いとして覚えておくとイザという時に役に立つと思います

jQuery のコンボボックスの選択で調べると、たいていセレクタでのサンプルがヒットするのですが、.find で書いたほうが明確に意図を反映できると思うのです。(後々のメンテナンスの為に)

どうせ、onchange イベントでは $(this) から始まるので .find ですし 

<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<select id="font" name="font">
	<option value="jiyunotsubasa">自由の翼フォント</option>
	<option value="kirieji" >切絵字1.0</option>

	<optgroup label="手書き">
		<option value="TanukiMagic" >たぬき油性マジック</option>
		<option value="setofont" >瀬戸フォント</option>
	</optgroup>

	<optgroup label="正統派">
		<option value="VL-PGothic-Regular" >VLゴシックフォントファミリ</option>
		<option value="ume-pgo4" >梅Pゴシック</option>
	</optgroup>

	<optgroup label="変化正統派">
		<option value="nukamiso_yamiyo_beta07" >ぬかみそ闇夜</option>
		<option value="kagamimoji-pgoth-v" >鏡文字Pゴシック-V</option>
	</optgroup>
</select>
<input type="button" value="子孫選択1" id="get_selected_text1">
<input type="button" value="子孫選択2" id="get_selected_text2">
<input type="button" value="チャイルド選択1" id="get_selected_text_child1">
<input type="button" value="チャイルド選択2" id="get_selected_text_child2">
<div id="result" style='padding:10px;border:1px solid #000;width:200px;'>
</div>
<div id="result2" style='padding:10px;border:1px solid #000;width:200px;'>
</div>
<script>
// 子孫選択( 正しい方法 )
$("#get_selected_text1").click(function(){
	alert( $("#font option:selected").text() )
});

$("#get_selected_text2").click(function(){
	alert( $("#font").find("option:selected").text() )
});

$("#font").change(function(){
	$("#result").text( $(this).find("option:selected").text() )
});

// チャイルド選択( ダメな方法 )
$("#get_selected_text_child1").click(function(){
	alert( $("#font > option:selected").text() )
});

$("#get_selected_text_child2").click(function(){
	alert( $("#font").children("option:selected").text() )
});

$("#font").change(function(){
	$("#result2").text( $(this).children("option:selected").text() )
});


</script>
表現方法で混乱します。子孫や Children とか、親子と parent とか言われるとごちゃごちゃになりそうです。ですから、この場合 find というメソッドがとても光って見えます
タグ:jquery select
posted by lightbox at 2015-07-20 13:54 | 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.balloon.js を使用した簡単なバルーン( マウスオーバーで表示する追加説明用 )の作り方

オンラインで実行



画像を背景画像に使用する応用編もありますが、まずは title 属性 で試した後、contents オプションでバルーンをカスタマイズする方法から入るといいと思います。

※ サンプルの contents には、Google Chrome で動作する HTML5 のコンテンツを使用しています
※ ここでは、inline 要素の span に対して行っていますが、複数行になる場合は block 要素を使用すべきです( line-height が大きい場合、行間がイベントから外れます )

jquery.balloon.js ダウンロードページ

上のページにも使用説明があるのですが、英文で書かれているので、オプションは以下のページを参照するといいと思います。

日本語による詳しいオプションの説明があります

設置サンプルコード
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="http://winofsql.jp/js/jquery.balloon.min.051.js"></script>

<script>
$(function(){

	$('#target1').balloon({
		// 吹き出しを右に出すと画面の邪魔にならない場合が多いです
		position: "right",
		// 吹き出しの CSS 設定です
		css: {
			"color": "#0000ff",
			"font-size": "20px",
			"font-weight": "bold",
			"padding": "20px"
		}
	});

	$('#target2').balloon({
		// 吹き出しを右に出すと画面の邪魔にならない場合が多いです
		position: "right",
		// 吹き出し端に付く正三角形のサイズ(高さ)
		tipSize: 20,
		// 吹き出しの CSS 設定です
		css: {
			"height": "270px",
			"opacity": "1",
			"color": "#000",
			"font-size": "16px",
			"border-radius": "10px",
			"border": "solid 2px #A63814",
			"padding": "10px"
		},
		// CSS の対象となる、吹き出しの内部コンテンツを定義します
		contents: '<img src="http://winofsql.jp/image/sab.gif"> ここには HTML を記述できます<br>▼ Google Chrome だと日付コントロール<br><input type="date">'
	});

});
</script>
<pre>


▼ HTML の title 属性内を使用するシンプルなバルーン

<span
	id="target1"
	 title="日本語表示あいうえお"
>この要素内の title 属性を使う</span>

▼ プラグイン側で、HTML の コンテンツを文字列を作成する応用編

<span
	id="target2"
>contents オプションで HTML をバルーン内に表示</span>


</pre>



▼ HTML の title 属性内を使用するシンプルなバルーン

この要素内の title 属性を使う

▼ プラグイン側で、HTML の コンテンツを文字列で作成する応用編

contents オプションで HTML をバルーン内に表示

関連する記事



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年07月16日


Google がホスティングしている jQuery UI の CSS のテーマのチェックをする jQuery UI ボタン

オンライン実行

ボタンクリックすると、テーマを差し替えてそれぞれのテーマでのボタン表示になります。

Google では、スクリプトのほうは全てのバージョンをホスティングしていますが、CSS のほうは 1.10.1 以前でないと base テーマが存在しません( 他のテーマはあるようなのですが・・・ )

▼ こんな感じです


ここでは、1.10.1 のテーマを使って表示しています。
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<link id="link" rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.1/themes/base/jquery-ui.css">
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
<script type="text/javascript">

$(function(){

	var css_type = [
		"base","ui-lightness","ui-darkness","smoothness","start","redmond",
		"sunny","overcast","le-frog","flick","pepper-grinder","eggplant",
		"dark-hive","cupertino","south-street","blitzer","humanity","hot-sneaks",
		"excite-bike","vader","dot-luv","mint-choc","black-tie","trontastic","swanky-purse"
	]
	var cnt = 0;
	// ボタン
	$("#button_control")
		.button()
		.val("base")
		.click(function(){
			if ( cnt >= css_type.length-1 ) {
				cnt = -1;
			}
			cnt++;
			css_target = "//ajax.googleapis.com/ajax/libs/jqueryui/1.10.1/themes/";
			css_target += css_type[cnt];
			css_target += "/jquery-ui.css";
			$("#link").prop("href", css_target );
			$(this).val(css_type[cnt]);
		});

});

</script>

<input id="button_control">



posted by lightbox at 2015-07-16 17:17 | jQuery UI | このブログの読者になる | 更新情報をチェックする
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 ドロップシャドウの参考デモ
Google Hosted Libraries
cdnjs
BUTTONS (CSS でボタン)
イラストAC
ぱくたそ
写真素材 足成
フリーフォント一覧
utf8 文字ツール
右サイド 終わり
base 終わり