SQLの窓

2015年12月05日


クリックしたコンテンツ以外を暗転する jQuery TOOLS の expose プラグイン

デモページ


jQuery TOOLS は、他にも沢山のプラグインが利用できるプラグインライブラリです。cdnjs でホスティングされているのでダウンロードも必要ありません。
※ 但し、jQuery は、1.7.1 が埋め込まれているので、他のバージョンの jQuery を使用するには cdnjs を使わずに 1.2.6 のライブラリのみを使用して特別な記述をする必要があります( 記事最後にあります )

配布サイト側で紹介されている 1.2.6 は古いのでバグがあり、そのままでは使用できないので注意して下さい、また、ドキュメントページからのダウンロードは壊れていてできないので GitHub からする必要があります

デモページでは、jQuery UI を使用していますが、jQuery TOOLS より後に jQuery UI を読み込まないと、jQuery UI が動作しないので注意して下さい。

ドキュメント
ダウンロードページ(GitHub)
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-tools/1.2.7/jquery.tools.min.js"></script>

<link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.1/themes/redmond/jquery-ui.css">
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.1/jquery-ui.min.js"></script>

<script>
// jQuery 初期処理
$(function() {

	// タブ
	$( "#mytabs" ).tabs({
		active: 0,
		show: { effect: "slide" },
		hide: { effect: "slide",direction: "right" }
	})
	.css({ margin: "30px 300px 0 30px" });

	// アコーディオン
	var target_acc = 0;
	if ( typeof(localStorage["old_active_acc"]) != 'undefined' ) {
		target_acc = parseInt(localStorage["old_active_acc"]);
	}
	$( "#acc" ).accordion({
		heightStyle: "content",
		active: target_acc,
		activate: function( event, ui ) {
			localStorage["old_active_acc"] = $( this ).accordion( "option", "active" );
		}
	});

	$(".expose").click(function() {
		$(this).expose({
			color: "#202020",
			opacity: 0.5,
			closeOnEsc: true
		});
	});

});
</script>




1.2.6 を使用した特別な記述
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>

<script>
$.extend({browser:{version: 11,msie: (window.navigator.userAgent.toLowerCase()).indexOf("msie")>-1}});
</script>
<script src="http://cdn.jquerytools.org/1.2.6/all/jquery.tools.min.js"></script>

<link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.1/themes/le-frog/jquery-ui.css">
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.1/jquery-ui.min.js"></script>


そもそも、1.2.6 の問題は、jQuery の新しいバージョンで廃止された、jQuery.browser を使用しているからなので、新しいバージョンでエラーにならないように、jQuery の名前空間に登録してから、1.2.6 を読み込みます。

使用されているのは、IE かどうかの判断と、IE が 6 より大きいかの判断なので、jQuery.browser.version には 11 をセットしています。

使用する jQuery に、jQuery.browser が存在するのであれば、この必要はありませんが、オリジナルは4年前で更新が止まっているので、jQuery TOOLS 全体を運用したいのであれば、jQuery 対応は自分でしたほうが賢明だと思います。

GitHub からダウンロードする場合は、個別にソースコードを編集して pack して使用するといいと思います。

▼ toolbox.expose.js
	/* one of the greatest headaches in the tool. finally made it */
	function viewport() {
				
		// the horror case
		if ((window.navigator.userAgent.toLowerCase()).indexOf("msie")>-1) {
			
			// if there are no scrollbars then use window.height
			var d = $(document).height(), w = $(window).height();
			
			return [
				window.innerWidth || 							// ie7+
				document.documentElement.clientWidth || 	// ie6  
				document.body.clientWidth, 					// ie6 quirks mode
				d - w < 20 ? w : d
			];
		} 
		
		// other well behaving browsers
		return [$(document).width(), $(document).height()]; 
	} 

ダウンロードして書き換えて単独で使用すると、jQuery UI の後に読み込んでも動作しました


【IFRAME パッケージの最新記事】
posted by lightbox at 2015-12-05 12:53 | IFRAME パッケージ | このブログの読者になる | 更新情報をチェックする
container 終わり



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

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