SQLの窓

2016年01月15日


SyntaxHighlighter 2.0.296 用 貼り付けコード作成(2)





ブラシ     幅を固定 TAB幅 Font size
SyntaxHighlighter.all()を使う   単独記事で動作するようにする
ハイライト行 a-b と指定できます
※ ,と併用はできません




posted by at 22:12 | JavaScript | このブログの読者になる | 更新情報をチェックする


2014年12月24日


jQuery の .add メソッド

.add()

既に jQuery で選択されたオブジェクトのコレクションに対して、さらにセレクタを使ってそのコレクションに別のコレクションを追加します。

.add の引数としては、一つの場合は セレクタか HTML 文字列か jQuery または DOM のコレクションです。引数が二つの場合は、一つ目でセレクタを設定して、二つ目の引数でセレクタの対象を指定します。



posted by at 16:18 | JavaScript | このブログの読者になる | 更新情報をチェックする


2013年12月08日


Panoramio の表示

wapi.js の hl=ja_JP は、日本語指定で必ず必要です。指定しないと英語表記になります。(キャラクタセットは自動判定するようです)

ユーザーID と フォトID は、写真のページから取得可能ですが、表にはっきり表示しているわけではありません。とても美しい写真が、こちらのページで堪能できます
<script>
if ( window[window.location.hostname+'.panoramio'] !== true ) {
	window[window.location.hostname+'.panoramio'] = true;
	if ( !window.CPWA ) {
		document.write("<"+"script src=\"http://www.panoramio.com/wapi/wapi.js?v=1&hl=ja_JP\"></"+"script>");
	}
	(function(){
	var str;
	str="";
	str+="<style type=\"text/css\">  \n";
	str+=".panoramio-wapi-photo .panoramio-wapi-images {  \n";
	str+="	background-color: #ffffff;  \n";
	str+="}  \n";
	str+="</style>  ";
	document.write(str);
	})();
}
</script>
<div id="p85021932"></div>
<script>
(function() { 
var wapiblock = document.getElementById('p85021932');
var myOptions = {
	'width': 600,
	'height': 450,
	'openLinksInNewWindow': true
};
var photoRequestOptions = {
	ids: [{
		'photoId': 85021932,
		'userId': 2296867
	}]
};
var widget = new panoramio.PhotoWidget(wapiblock, photoRequestOptions, myOptions);
widget.setPosition(0);
})(); 
</script>

ちなみに、IE8 以前ではエラーが出ます。回避方法はありますが、もう切り捨てていいと思います。


posted by at 21:55 | JavaScript | このブログの読者になる | 更新情報をチェックする


2013年11月18日


prototype.js の Browser メソッドを転用して jQueryの名前空間へ投入。IE バージョンも含めてブラウザ(仕様)判定

prototype.js の最終更新は、August 8, 2012 ですし、最新の jQuery では、IE8 より前は動かないでしようし、どこまでするかは非常に疑問ですが、方法として、こんな方法もあるという事です。

結局 jQuery の 名前空間内に変数追加している形です。チェックは変数を使って判断します。(変数追加も簡単だと思います)
<script>
if ( window[window.location.hostname+'.loadjQuery'] !== true ) {
	window[window.location.hostname+'.loadjQuery'] = true;
	if ( !window.jQuery ) {
		document.write("<"+"script src=\"//ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js\"></"+"script>");
	}
}
</script>
<script>
$.extend({
	_ua: $(navigator)[0].userAgent,
	_app: $(navigator)[0].appVersion});
$.extend({
	Browser: (function(){
		var app = $._app.toLowerCase();
		var isOpera = Object.prototype.toString.call(window.opera) == '[object Opera]';
		var IE = $._ua.toLowerCase().indexOf("msie") > -1 && !isOpera;
		IE = IE || (app.indexOf("trident/") > -1);
		return {
			IE: IE,
			Opera: isOpera,
			WebKit: $._ua.indexOf('AppleWebKit/') > -1,
			Gecko: !IE && $._ua.indexOf('Gecko') > -1 && $._ua.indexOf('KHTML') === -1,
			MobileSafari: /Apple.*Mobile/.test($._ua),
			IE6: IE && app.indexOf("msie 6.0") > -1,
			IE7: IE && app.indexOf("msie 7.0") > -1,
			IE8: IE && app.indexOf("msie 8.0") > -1,
			IE9: IE && app.indexOf("msie 9.0") > -1,
			IE10: IE && app.indexOf("msie 10.0") > -1,
			IE11: app.indexOf("trident/7.0") > -1
		}
	})()
});

console.log($.Browser.Opera);
console.log($.Browser.WebKit);
console.log($.Browser.Gecko);
console.log($.Browser.MobileSafari);
console.log($.Browser.IE);
console.log($.Browser.IE6);
console.log($.Browser.IE7);
console.log($.Browser.IE8);
console.log($.Browser.IE9);
console.log($.Browser.IE10);
console.log($.Browser.IE11);
</script>
関連する記事

JS : ブラウザ判定( IE11 対応 )



posted by at 15:36 | JavaScript | このブログの読者になる | 更新情報をチェックする


2013年11月15日


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

具体的には、jQuery の要素のインスタンスのメソッドとしてプラグインを作成した場合、そのメソッドの引数を無名 function と想定した場合の処理です。

もっと言えば、プラグイン内の this は要素自身ですから、その this を外部の無名 function の this として使用できるようにする記述です。

bind メソッド

以下がプラグインの定義です。
if ( window[window.location.hostname+'.loadjQuery'] !== true ) {
	window[window.location.hostname+'.loadjQuery'] = true;
	$.extend( {_nav: $(navigator)[0].userAgent.toLowerCase()});
	$.fn.extend({
		StreetView : function(a,b){
			var pos = new google.maps.LatLng(a,b);
			$( this ).data( "pano", new google.maps.StreetViewPanorama($(this)[0],{ position: pos }) );
			return this;
		}, 
		StreetViewPov : function(a,b){
			var pov = {
				heading: a,  
				pitch: b 
			}
			$( this ).data( "pano" ).setPov(pov);
			return this;
		},
		_sh: function( callback ) {
			if ( $._nav.indexOf("iphone") > -1 || $._nav.indexOf("android") > -1 ) {
				(callback.bind(this))();
			}
			return this;
		},
		_pc: function( callback ) {
			if ( $._nav.indexOf("iphone") <= -1 && $._nav.indexOf("android") <= -1 ) {
				(callback.bind(this))();
			}
			return this;
		}
	});
}

_pc 内の this は、自分自身で、return する事によって、連鎖可能な jQuery のオブジェクトになります。これを、引数の callback の内部でも使えるように、(callback.bind(this))(); としています。

利用方法は以下のようになります。
<script src="http://winofsql.jp/jquery/plugins/street_view.js"></script>
<script>
$(function(){
	var pano = $('#pano')
	.StreetView(47.615471,1.518008)
	.StreetViewPov(-42.14,9.13)
	// スマホの処理
	._sh(function(){
		this.css("cssText","width:290px!important;height:290px!important");
	})
	// PC の処理
	._pc(function(){
		this
		.css("width","600px")
		.css("height","450px");
	});
});
</script>
<div id="pano"></div>

関連する記事

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



posted by at 19:59 | JavaScript | このブログの読者になる | 更新情報をチェックする