SQLの窓

2014年02月15日


jQuery UI の slider と Google のホスティング

jQuery や jQuery UI のライブラリは、Google がホスティングしているものを使ってまずテストしてからそれをダウンロードして使うのが間違い無いと思います。Google は、API でホスティングしているので、その立場上動作確認は相当されていると思います。

ただ、実際問題として、jquery-ui.css は、API では出力されないので(あるバージョンまではカタログはされているようですが)バグのような気もします。いずれにしても、jquery.min.js が前提で、jquery-ui.css と jquery-ui.min.js が必要になります。

Google でホスティングされている最新バージョンは、Google Hosted Libraries で確認します。
指定率 :
<script>
if ( !window.jQuery ) {
	if ( typeof window[window.location.hostname+'.loadjQuery'] === 'undefined' ) {
		if ( window.addEventListener ) {
			window[window.location.hostname+'.loadjQuery'] = '//ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js';
		}
		else {
			window[window.location.hostname+'.loadjQuery'] = '//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js';
		}
	}
	document.write("<"+"script src=\"" + window[window.location.hostname+'.loadjQuery'] + "\"></"+"script>");
}
if ( window[window.location.hostname+'.loadjQueryUI'] !== true ) {
	window[window.location.hostname+'.loadjQueryUI'] = true;
	if ( typeof window[window.location.hostname+'.loadjQueryUIcode'] === 'undefined' ) {
		window[window.location.hostname+'.loadjQueryUIcode'] = '//ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js';
		window[window.location.hostname+'.loadjQueryUIcss'] = '//ajax.googleapis.com/ajax/libs/jqueryui/1.10.1/themes/base/jquery-ui.css';
	}
	document.write("<"+"link rel=\"stylesheet\" href=\""+ window[window.location.hostname+'.loadjQueryUIcss'] + "\">");
	document.write("<"+"script src=\"" + window[window.location.hostname+'.loadjQueryUIcode'] + "\"></"+"script>");
}
</script>

<div style='margin: 0 0 5px 0;'>指定率 :
<input type="text" id="amount" style="border:0; color:#f6931f; font-weight:bold;">
</div>
<div style='height:50px;'>
<div id="slider-range-min" style='width:200px;'></div>
</div>
<script type="text/javascript">
$( "#slider-range-min" ).slider({
	range: "min",
	value: 60,
	min: 0,
	max: 100,
	slide: function( event, ui ) {
		$( "#amount" ).val( ui.value + "%" );
	}
});
// 初回の値
$( "#amount" ).val( $( "#slider-range-min" ).slider( "value" ) + "%" );
</script>

このコードは、ブログの記事で単独で貼り付けて動作する事を想定しており、複数記事が表示されるページでも、先頭の記事のものしか実行されません。また、ページのヘッダに jQuery の定義を固定ですれば記事中のロードはされません。

さらに、変数を事前に変更する事によって、バージョンを意図的に変更する事も想定しています。IE の古いバージョンは、jQuery の新しいバージョンで動作しないので一応対処はしています。

※ 実運用は、「ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js」をヘッダに一つだけ書くのがおすすめです。

ただ、UI は常に使用するとは限らないので記事内指定でもいいかもしれません。UIも常にヘッダに定義する場合は、window[window.location.hostname+'.loadjQueryUI'] = true; をヘッダ部分で同時に実行しておけば、記事内ではロードされません。





posted by lightbox at 2014-02-15 14:52 | jQuery UI | このブログの読者になる | 更新情報をチェックする
container 終わり



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

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