SQLの窓

2015年08月11日


Google Picasa サービスの URL を使用して、jQuery のスライダーでリアルタイムにサイズの違った画像を表示する

これは、Picasa サービスの URL 部分を変更すると、Picasa 側でそのサイズの画像を作成してくれる事の確認プログラムです。最近、Picasa の URL の仕様が少し変わり、"s長辺のサイズ" の後ろに "-Ic42" が付くようになりましたが、意味は謎です。

スライダーを動かすと、画像サイズが変化しますが、これはそのサイズの画像を表示しています。ブラウザは縮小も拡大もしていません。

この仕様は正式な文書は無いかもしれませんが、Picasa のサービス内でユーザが利用する文字列なので、Picasa サービスが余程の変更されない限り利用が継続できるはずです。

"s長辺のサイズ" 以外にも、"w横幅" と "h高さ" も使えますが、これは以前 Google+ の画像に使用されていたもので、現在も使えますが、この二つはいつ使えなくなってもおかしくない仕様です。(そもそも、Picasa も Google+ の画像も元は同じようです)

活用方法

この仕様と、正規表現の置換を用いれば、一つの URL から複数サイズの画像の URL を動的に作成できるので、簡単な使い方の例としては、表示画像(サムネイル)と目的画像というコンテンツを一度での用意です。




<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.4/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>
var url = "https://lh3.googleusercontent.com/-CuiK3fGTUAw/Vak2SZiXCXI/AAAAAAAAbJM/RpiEqBN0hmw/s100-Ic42/56ce94dfc3fc6f3df8240e7b6cbbadc6.png"

$(function(){

	// 初期画像
	$("#picasa_img").prop("src", url);

	// スライダー
	$("#slider1").slider({
		range: "min",	// 左側を着色する
		step: 50,	// 50 づつ変更
		min: 50,	// 最小50
		max: 600,	// 最大600
		value: 100,	// 初期値
		// スライダーが変化した時のイベント
		slide: function (event, ui) {
			// src に無名関数の戻り値を設定する
			$("#picasa_img").prop("src", function(){
				// s100 部分の 100 を変更する為の正規表現を使った replace
				return url.replace(/\/s\d+\-Ic42\//, "/s"+ui.value+"-Ic42/");
			});
		}
	})
	.css("width", "400px")
	
});

</script>
<div id="slider1"></div>
<br><br>
<img id="picasa_img">



posted by lightbox at 2015-08-11 22:51 | Comment(0) | jQuery UI | このブログの読者になる | 更新情報をチェックする

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 | このブログの読者になる | 更新情報をチェックする

jQuery UI の Spinner のボタン部分だけを利用して、マウスでクリックしたままでイベントが継続する増減ボタンを作成する

オンライン実行

元の INPUT 要素は使用しないので、style='display:none' を指定しておきます。個別に jQuery の css メソッドで調整を行います。
	.css({ 
		width: "0px",
		"font-size": "0px",
		height: "30px"
	 })

▼ 以下は実行サンプルですが、スタイルとして『base』を使用しているのでボタン部分がグレーになっています。
x / y



x y
x y
横向きになっているのは、jQuery からの CSS 設定で回転させています
	// コントロールを横にしたい場合
	// ※ コントロールのサイズや左右の余白を調整します
	$(".rotate_wrap").css({
		display: "inline-block",
		transform: "rotate(90deg) scale(1.5)",
		"margin":"0 15px 0 18px",
	});

以下の部分は、ボタンとは関係無く、テキストフィールドに対して結果を表示する際に、parseInt($(this).val()) が失敗する場合は 0 をセットし、そこから値を減らしています。
$(this).val( (parseInt($(this).val())||0)-1 );
▼が全体のソースコードですが、ボタンを回転させたり、サイズや配置を調整する為にはラッパーが必要なのが解ります。
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<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.10.1/jquery-ui.min.js"></script>
<script>

$(function(){

	// コントロールを横にしたい場合
	// ※ コントロールのサイズや左右の余白を調整します
	$(".rotate_wrap").css({
		display: "inline-block",
		transform: "rotate(90deg) scale(1.5)",
		"margin":"0 15px 0 18px",
	});
	// 通常は縦です
	$(".normal_wrap").css({
		display: "inline-block",
		transform: "scale(1.5)",
		"margin":"0 15px 0 7px",
	});

	$( "#spinner_x" ).spinner({
		spin: function( event, ui ) {
			var val = $(this).val()-ui.value;
			// ▲ をクリックするか押し続けると処理されます
			if ( val < 0 ) {
				$( ".x" ).each(function(){
					// 数字以外が設定されているフィールドは 0 にリセットする
					$(this).val( (parseInt($(this).val())||0)+1 );
				});
			}
			// ▼ をクリックするか押し続けると処理されます
			else {
				$( ".x" ).each(function(){
					// 数字以外が設定されているフィールドは 0 にリセットする
					$(this).val( (parseInt($(this).val())||0)-1 );
				});
			}
		}
	})
	// 入力部分を使わないので、最小のサイズにして、高さをセット
	.css({ 
		width: "0px",
		"font-size": "0px",
		height: "30px"
	 })
	// いったん表示して
	.show()
	// spinner のラッパーを調整します
	.parent().css({width:"16px",border:"1px solid #808080"});

	$( "#spinner_y" ).spinner({
		spin: function( event, ui ) {
			var val = $(this).val()-ui.value;
			// ▲ をクリックするか押し続けると処理されます
			if ( val < 0 ) {
				$( ".y" ).each(function(){
					// 数字以外が設定されているフィールドは 0 にリセットする
					$(this).val( (parseInt($(this).val())||0)+1 );
				});

			}
			// ▼ をクリックするか押し続けると処理されます
			else {
				$( ".y" ).each(function(){
					// 数字以外が設定されているフィールドは 0 にリセットする
					$(this).val( (parseInt($(this).val())||0)-1 );
				});
			}
		}
	})
	// 入力部分を使わないので、最小のサイズにして、高さをセット
	.css({ 
		width: "0px",
		"font-size": "0px",
		height: "30px"
	 })
	// いったん表示して
	.show()
	// spinner のラッパーを調整します
	.parent().css({width:"16px",border:"1px solid #808080"});



});


</script>

<div id="spinner_box">
x
<input id="xnum" type="text" size="3" class="x">
<span class="rotate_wrap"><input id="spinner_x" style='display:none;'></span>
/ 
y
<input id="ynum" type="text" size="3" class="y">
<span class="normal_wrap"><input id="spinner_y" style='display:none'></span>

<br><br><br><br>
x <input type="text" size="3" class="x">
y <input type="text" size="3" class="y">
<br>
x <input type="text" size="3" class="x">
y <input type="text" size="3" class="y">

</div>




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

2014年11月24日


jQuery UI の Accordion Widget(アコーディオン)で、タイトルとコンテンツの指定方法

タイトルとコンテンツ

指定方法は3種類ありますが、基本はアコーディオンを指定したブロックの子要素の偶数番号がタイトルになり、その直後の要素がコンテンツになります。
Content panels must be the sibling immediately after their associated headers.

コンテンツパネルは、ヘッダの直後の兄弟要素でなければなりません。
但し例外があって、子要素の中に LI 要素が並ぶ場合( 通常親要素は UL )は、LI 内の最初の子要素がタイトルになり、それに続く要素がコンテンツになります。( セレクタ : > li > :first-child ) もう一つ、header オプションでタイトルとする要素を指定する事ができます。これは、無条件に偶数をタイトルにすると、非表示要素が対象になってしまいます。そのような事を避ける為に header オプションがあります コンテンツはブロック要素で heightStyle というオプション( 規定値は auto )があり、fill、auto、content が指定できます。いずれも、正しく表示する為にコンテンツの高さが必要になってくるので、コンテンツ部分はブロック要素で指定します。 注意するのは、fill の場合で、アコーディオンを指定した親要素の高さいっぱいに広がるようになります。レイアウトが変化しては困る場合に親要素の指定は有用ですが、その為に親要素を正しくレイアウトする必要があります。 auto は、複数コンテンツがある場合、そのコンテンツの中で一番高さが大きいものにあわせられます。順に内容を読んで行くようなコンテンツに適しています。 content は、コンテンツ毎の高さで表示されるので、オプション表示等に向いています
  • 最初の要素が li の場合、li の child の最初の要素がタイトルとなります
    コンテンツは高さのコントロールがあるので、
    ブロック要素が望ましいようです
  • heightStyle が fill の場合は
    親要素の高さいっぱいに広がります
  • ヘッダは通常は偶数で、コンテンツは奇数です
    header オプションで要素を指定も可能です
  • ▲ いっぱいいっぱいまで使用しているので、親要素の bottom と重なっています
    active オプションで最初に開くコンテンツを指定できます
    この内容を localStorage に保存しておけば、次回に開く処理を実装できます
    heightStyle が auto の場合は
    コンテンツの中で
    一番大きな高さにあわせます
    このアコーディオンのヘッダは
    偶数要素が使われています
    ▼ ヘッダ部分の輪郭のスタイルが違うのは、このブログ内の H3 に対するスタイルです

    ヘッダを強制的に指定しています

    コンテンツはその次のみで、複数が続くと、2つ目以降は正しく表示されません

    heightStyle が content の場合は

    コンテンツのの
    高さにあわせます

    UI の基本スタイルを変更したい場合は

    新しいクラスを定義し、追加して上書きします
    
    
    
    ▼ ソースコードサンプル
    
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
    <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.10.1/jquery-ui.min.js"></script>
    <script>
    $(function(){
    	$( ".wrap" ).css( { height: "250px", border: "solid 2px #000", "margin-bottom": "20px" } );
    	$( "#accordion1" ).accordion({
    		heightStyle: "fill"
    	});
    
    	$( "#accordion2" ).accordion({
    		heightStyle: "auto",
    		active: 1
    	});
    
    	$( "#accordion3" ).accordion({
    		heightStyle: "content",
    		header: "h3"
    	})
    	.addClass( "accordion3_style" );
    
    });
    </script>
    <style type="text/css">
    .accordion3_style {
    	font-size: 14px;
    	font-family: "メイリオ","MS ゴシック";
    }
    </style>
    <div class="wrap">
    <div id="accordion1">
    	<li><span>最初の要素が li の場合、li の child の最初の要素がタイトルとなります</span><div>コンテンツは高さのコントロールがあるので、<br>ブロック要素が望ましいようです</div></li>
    	<li><span>heightStyle が fill の場合は</span><div>親要素の高さいっぱいに広がります</div></li>
    	<li><span>ヘッダは通常は偶数で、コンテンツは奇数です</span><div>header オプションで要素を指定も可能です</div></li>
    </div>
    </div>
    
    <div class="wrap">
    <div id="accordion2">
    	<span>active オプションで最初に開くコンテンツを指定できます</span>
    	<div>この内容を localStorage に保存しておけば、次回に開く処理を実装できます</div>
    
    	<b>heightStyle が auto の場合は</b>
    	<div>コンテンツの中で<br>一番大きな高さにあわせます</div>
    
    	<div>このアコーディオンのヘッダは</div>
    	<div>偶数要素が使われています</div>
    </div>
    </div>
    
    <div class="wrap">
    <div id="accordion3">
    	<h3>ヘッダを強制的に指定しています</h3>
    	<div>コンテンツはその次のみで、複数が続くと、2つ目以降は正しく表示されません</div>
    
    	<h3>heightStyle が content の場合は</h3>
    	<div>コンテンツのの<br>高さにあわせます</div>
    
    	<h3>UI の基本スタイルを変更したい場合は</h3>
    	<div>新しいクラスを定義し、追加して上書きします</div>
    </div>
    </div>
    
    
    
    
    
    posted by lightbox at 2014-11-24 12:51 | jQuery UI | このブログの読者になる | 更新情報をチェックする

    2014年10月21日


    jQuery : table の行をクリックして、jQuery UI のダイアログを表示し、行データをダイアログ内で変更して table の列にデータを戻す

    
    
    だいたい想定される、table データを jQuery で行単位で処理する方法です。ダイアログを表示する位置は、デバイスによって調整する必要があると思いますが、殆どの目的はこんな感じで対処できると思います。
    
    table の行をクリック( タップ ) すると、モーダルダイアログ( 実際は DIV )を開いて、行のデータをダイアログ内に転送して処理します。
    
    数値入力は、モバイルを想定して type="tel" にして、iPhone4S で動作確認しました。
    
    001 りんご 500
    002 いちご 300
    
    ▼ ソースコード
    
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
    <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.10.1/jquery-ui.min.js"></script>
    
    <style type="text/css">
    #data {
    	border-collapse: collapse;
    	border: solid #000000 1px;
    }
    #data tr {
    	cursor: pointer;
    }
    #data td {
    	padding: 5px;
    	border: solid #000000 1px;
    }
    </style>
    <script type="text/javascript">
    $(function(){
    	$("#data tr").each(function(index){
    		$(this).click(function(){
    			$( "#code" ).text( $(this).children( "td" ).eq(0).text() );
    			$( "#namae" ).text( $(this).children( "td" ).eq(1).text() );
    			$( "#kingaku" ).val( $(this).children( "td" ).eq(2).text() );
    			var jq = $(this);
    			$( "#dialog-message" ).dialog({
    				modal: true,
    				title: "ダイアログのタイトルです",
    				close: function() {
    					console.log("x ボタンがクリックされました");
    				},
    				buttons: [
    					{ 
    						text: "確認",
    						click: function() {
    							jq.children( "td" ).eq(2).text( $( "#kingaku" ).val() );
    							$( this ).dialog( "close" );
    							console.log("確認 ボタンがクリックされました");
    						}
    					},
    					{
    						text: "キャンセル",
    						click: function() {
    							$( this ).dialog( "close" );
    							console.log("キャンセル ボタンがクリックされました");
    						}
    					}
    				]
    			});
    		});
    	});
    });
    </script>
    <table id="data">
    <tr>
    	<td class="code">001</td>
    	<td class="name">りんご</td>
    	<td class="value">500</td>
    </tr>
    <tr>
    	<td class="code">002</td>
    	<td class="name">いちご</td>
    	<td class="value">300</td>
    </tr>
    </table>
    
    <div id="dialog-message" title="" style='display:none;'>
    コード <span id="code"></span><br>
    名称 <span id="namae"></span><br>
    金額 <input id="kingaku" type="tel" size="6">
    </div>
    
    jq は、クリック( またはタップ )された jQuery の行(tr) オブジェクトです。この保存しておいた(25行)オブジェクトを使用して、入力したデータを行に戻しています(36行)。
    
    
    
    
    posted by lightbox at 2014-10-21 21:05 | jQuery UI | このブログの読者になる | 更新情報をチェックする

    2014年10月01日


    jQuery UI の datepicker の基本オプションとダイアログ(datepicker)の利用

    ダイアログの初期値をフィールドから取得し、変更した日付をフィールドへ戻しています
    
    ダイアログの表示では、オプション引数の後(datepicker_option の次)に [150, 80] というような、x,y 座標を指定できます。指定しなければ画面中央に表示されます。指定した場合は、画面の左上からの座標になります。
    
    Date:
    
    
    <script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
    <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.10.1/jquery-ui.min.js"></script>
    <script type="text/javascript">
    var datepicker_option = {
    	dateFormat: 'yy/mm/dd',
    	dayNamesMin: ['日', '月', '火', '水', '木', '金', '土'],
    	monthNames:  ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
    	showMonthAfterYear: true,
    	yearSuffix: '年',
    	changeYear: true,
    	showAnim: 'fadeIn',
    	yearRange: "c-70:c"
    }
    $(function() {
    	$( "#datepicker" ).datepicker(datepicker_option);
    	$( "#datetDialog" ).click(
    		function() {
    			$( "#datepicker" ).datepicker(
    				"dialog",
    				$("#datepicker").val(),
    				function(sdate) {
    					$("#datepicker").val( sdate );
    				},
    				datepicker_option
    			);
    		}
    	);
    });
    
    </script>
    
    Date: <input type="text" id="datepicker">
    <br />
    <input
    	id="datetDialog"
    	type="button"
    	value="dialog">
    
    
    関連する記事
    
    ブログで jQuery を使用するのに、全ての記事で使うわけでは無いので、記事毎でロードする
    
    
    
    
    posted by lightbox at 2014-10-01 22:25 | jQuery UI | このブログの読者になる | 更新情報をチェックする

    2014年04月04日


    jQuery UI(tabs) の内部コードを書き換えて、タブ上でのキーボード処理をキャンセルする

    jQuery UI のタブでは、タブ部分とパネル部分でイベントが登録されており、特に、タブ部分では矢印キーなどが専用に処理されるので、それらをキャンセルする為、上書きで function を定義します。
    
    _tabKeydown を書き換えるだけでいいのですが、全体像が解るように、_setupEvents と _tabKeydown を書き換えました。
    
    ここでは、キーを使うと、キーコードを alert するように変更しています。
    
    <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+'.loadjQueryUI'] !== true ) {
    	window[window.location.hostname+'.loadjQueryUI'] = true;
    	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.1/jquery-ui.min.js\"></"+"script>");
    }
    </script>
    <script>
    $.ui.tabs.prototype._setupEvents = function( event ) {
    		var events = {
    			click: function( event ) {
    				event.preventDefault();
    			}
    		};
    		if ( event ) {
    			$.each( event.split(" "), function( index, eventName ) {
    				events[ eventName ] = "_eventHandler";
    			});
    		}
    
    		this._off( this.anchors.add( this.tabs ).add( this.panels ) );
    		this._on( this.anchors, events );
    		this._on( this.tabs, { keydown: "_tabKeydown" } );
    //		this._on( this.panels, { keydown: "_panelKeydown" } );
    
    		this._focusable( this.tabs );
    		this._hoverable( this.tabs );
    };
    $.ui.tabs.prototype._tabKeydown= function( event ) {
    	alert(event.keyCode)
    };
    
    
    
    $(function() {
    	var target_tab = 0;
    	if ( typeof(localStorage["old_active"]) != 'undefined' ) {
    		target_tab = localStorage["old_active"];
    	}
    	$( "#mytabs" ).tabs({
    		active: target_tab,
    		activate: function( event, ui ) {
    			localStorage["old_active"] = $( this ).tabs( "option", "active" );
    		}
    	});
    });
    </script>
    
    <div id="mytabs">
    
    	<ul>
    		<li><a href="#tabs-1">潮時</a></li>
    		<li><a href="#tabs-2">確信犯</a></li>
    		<li><a href="#tabs-3">おもむろに</a></li>
    	</ul>
    	<div id="tabs-1">
    物事を始めたり終えたりするのに、適当な時機
    	</div>
    	<div id="tabs-2">
    1 本人が悪いことでないと確信してなされる犯罪
    2 《1から転じて》悪いことだとわかっていながら行われた犯罪や行為
    ◆犯罪というほど重大な行為でない場合にも用いる。2の意はもともと誤用とされていたが、文化庁が発表した平成14年度「国語に関する世論調査」では、50パーセント以上の人が1ではなく2の意で用いると回答した。
    	</div>
    	<div id="tabs-3">
    【徐に】落ち着いて、ゆっくりと行動するさま
    	</div>
    </div>
    
    
    
    
    物事を始めたり終えたりするのに、適当な時機
    1 本人が悪いことでないと確信してなされる犯罪 2 《1から転じて》悪いことだとわかっていながら行われた犯罪や行為 ◆犯罪というほど重大な行為でない場合にも用いる。2の意はもともと誤用とされていたが、文化庁が発表した平成14年度「国語に関する世論調査」では、50パーセント以上の人が1ではなく2の意で用いると回答した。
    【徐に】落ち着いて、ゆっくりと行動するさま
    
    
    
    posted by lightbox at 2014-04-04 18:09 | jQuery UI | このブログの読者になる | 更新情報をチェックする

    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 | このブログの読者になる | 更新情報をチェックする

    2014年01月02日


    jQuery UI の タブの表示切替でのアニメーション方法

    インターネットで探すと、古い fx オプションが沢山ヒットしますが、fx オプションは、1.10.x で削除されているはずです。show と hide を使うように jQuery UI 1.9 Upgrade Guide で書かれています。
    
    The fx option has been deprecated in favor of new show and hide options. The show and hide options provide more customization over animations. See below, in the Widget section, for more details about the show and hide options. You should replace all uses of the fx option with show and hide.
    
    The fx option will be removed in 1.10.
    
    オプション設定で行います。show と hide に対して、アニメーションタイプ( effect ) のオブシェクトを設定する事によって、それぞれの effect の細かいオプションも設定可能になります。
    $( "#mytabs" ).tabs( "option", "show", { effect: $("#show_animate").val() } );
    
    effect: の後ろに、effect の内容特有のオプションが設定できます。 ▼(例)
    $( "#mytabs" ).tabs( "option", "show", { effect: "blind", direction: "right" } );
    
    一般設定としての delay, duration, easing も指定できます
    表示(show)のアニメーション 消える時(hide)のアニメーション
    物事を始めたり終えたりするのに、適当な時機

    1 本人が悪いことでないと確信してなされる犯罪 2 《1から転じて》悪いことだとわかっていながら行われた犯罪や行為 ◆犯罪というほど重大な行為でない場合にも用いる。2の意はもともと誤用とされていたが、文化庁が発表した平成14年度「国語に関する世論調査」では、50パーセント以上の人が1ではなく2の意で用いると回答した。
    【徐に】落ち着いて、ゆっくりと行動するさま

    fade fadeIn・fadeOut
    slide 左右
    blind 上下
    bounce 縦ゆれ
    clip 上下
    drop fade+左右
    explode 分割
    fold 上下
    highlight 最初明るく
    puff 斜め?細かく揺れる?
    pulsate 点滅
    scale 拡大・縮小
    shake 横ゆれ
    size 拡大・縮小
    
    ▼ ソースコード
    
    <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+'.loadjQueryUI'] !== true ) {
    	window[window.location.hostname+'.loadjQueryUI'] = true;
    	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>");
    }
    </script>
    <script>
    $(function(){
    	var target_tab = 0;
    	if ( typeof(localStorage["old_active"]) != 'undefined' ) {
    		target_tab = parseInt(localStorage["old_active"]);
    	}
    	$( "#mytabs" ).tabs({
    		show: false,
    		hide: false,
    		active: target_tab,
    		activate: function( event, ui ) {
    			localStorage["old_active"] = $( this ).tabs( "option", "active" );
    		}
    	});
    
    });
    function setAnimate() {
    
    	if ( $("#show_animate").val() == 'false' ) {
    		$( "#mytabs" ).tabs( "option", "show", false );
    	}
    	else {
    		$( "#mytabs" ).tabs( "option", "show", { effect: $("#show_animate").val() } );
    	}
    
    	if ( $("#hide_animate").val() == 'false' ) {
    		$( "#mytabs" ).tabs( "option", "hide", false );
    	}
    	else {
    		$( "#mytabs" ).tabs( "option", "hide", { effect: $("#hide_animate").val() } );
    	}
    
    }
    </script>
    <b style='color:#f00'>表示(show)</b>のアニメーション <select id="show_animate" onchange='setAnimate();'>
    <option value="false">なし</option>
    <option value="fade">fade</option>
    <option value="slide">slide</option>
    <option value="blind">blind</option>
    <option value="bounce">bounce</option>
    <option value="clip">clip</option>
    <option value="drop">drop</option>
    <option value="explode">explode</option>
    <option value="fold">fold</option>
    <option value="highlight">highlight</option>
    <option value="puff">puff</option>
    <option value="pulsate">pulsate</option>
    <option value="scale">scale</option>
    <option value="shake">shake</option>
    <option value="size">size</option>
    </select>
     / <b style='color:#f00'>消える時(hide)</b>のアニメーション <select id="hide_animate" onchange='setAnimate();'>
    <option value="false">なし</option>
    <option value="fade">fade</option>
    <option value="slide">slide</option>
    <option value="blind">blind</option>
    <option value="bounce">bounce</option>
    <option value="clip">clip</option>
    <option value="drop">drop</option>
    <option value="explode">explode</option>
    <option value="fold">fold</option>
    <option value="highlight">highlight</option>
    <option value="puff">puff</option>
    <option value="pulsate">pulsate</option>
    <option value="scale">scale</option>
    <option value="shake">shake</option>
    <option value="size">size</option>
    </select>
    
    <div id="mytabs">
    
    	<ul>
    		<li><a href="#tabs-1">潮時</a></li>
    		<li><a href="#tabs-2">確信犯</a></li>
    		<li><a href="#tabs-3">おもむろに</a></li>
    	</ul>
    	<div id="tabs-1">
    物事を始めたり終えたりするのに、適当な時機
    <br><br>
    <img src="https://lh6.googleusercontent.com/-mSGJDelHAQE/UsSRAO-dFlI/AAAAAAAAR5g/eT8coExLq6s/s481/_img.jpg" style="border: solid 1px #c0c0c0" />
    	</div>
    	<div id="tabs-2">
    1 本人が悪いことでないと確信してなされる犯罪
    2 《1から転じて》悪いことだとわかっていながら行われた犯罪や行為
    ◆犯罪というほど重大な行為でない場合にも用いる。2の意はもともと誤用とされていたが、文化庁が発表した平成14年度「国語に関する世論調査」では、50パーセント以上の人が1ではなく2の意で用いると回答した。
    	</div>
    	<div id="tabs-3">
    【徐に】落ち着いて、ゆっくりと行動するさま
    <br><br>
    <img src="https://lh5.googleusercontent.com/-ltSbzuO5HOg/UsSP6V5TFAI/AAAAAAAAR5Y/0ffEgL44z9o/s481/_img.jpg" style="border: solid 0px #000000;border-radius:10px;" />
    	</div>
    </div>
    
    jQuery のバグだと思いますが、何かの組み合わせかタイミングでコンテンツが消えたままになる時があるので、あまりテストされていないと思われる複雑なアニメーションは使用しないほうがいいと思います。
    
    また、最も簡単なアニメーションは fade を使った以下の設定です
    
    $( "#mytabs" ).tabs( "option", "show", true } );
    
    posted by lightbox at 2014-01-02 08:36 | jQuery UI | このブログの読者になる | 更新情報をチェックする

    2013年12月07日


    jQuery UI のタブを使用時に、前回開いたタブを localStorage に保存して、次回の表示に使用する

    タブやアコーディオンや、限られた視野の範囲で効率良く表示するコンテンツは、最後に表示したものを記憶しておくのが良いと思います。
    
    物事を始めたり終えたりするのに、適当な時機
    1 本人が悪いことでないと確信してなされる犯罪 2 《1から転じて》悪いことだとわかっていながら行われた犯罪や行為 ◆犯罪というほど重大な行為でない場合にも用いる。2の意はもともと誤用とされていたが、文化庁が発表した平成14年度「国語に関する世論調査」では、50パーセント以上の人が1ではなく2の意で用いると回答した。
    【徐に】落ち着いて、ゆっくりと行動するさま
    <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+'.loadjQueryUI'] !== true ) {
    	window[window.location.hostname+'.loadjQueryUI'] = true;
    	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.1/jquery-ui.min.js\"></"+"script>");
    }
    </script>
    <script>
    $(function() {
    	var target_tab = 0;
    	if ( typeof(localStorage["old_active"]) != 'undefined' ) {
    		target_tab = localStorage["old_active"];
    	}
    	$( "#mytabs" ).tabs({
    		active: target_tab,
    		activate: function( event, ui ) {
    			localStorage["old_active"] = $( this ).tabs( "option", "active" );
    		}
    	});
    });
    </script>
    
    <div id="mytabs">
    
    	<ul>
    		<li><a href="#tabs-1">潮時</a></li>
    		<li><a href="#tabs-2">確信犯</a></li>
    		<li><a href="#tabs-3">おもむろに</a></li>
    	</ul>
    	<div id="tabs-1">
    物事を始めたり終えたりするのに、適当な時機
    	</div>
    	<div id="tabs-2">
    1 本人が悪いことでないと確信してなされる犯罪
    2 《1から転じて》悪いことだとわかっていながら行われた犯罪や行為
    ◆犯罪というほど重大な行為でない場合にも用いる。2の意はもともと誤用とされていたが、文化庁が発表した平成14年度「国語に関する世論調査」では、50パーセント以上の人が1ではなく2の意で用いると回答した。
    	</div>
    	<div id="tabs-3">
    【徐に】落ち着いて、ゆっくりと行動するさま
    	</div>
    </div>
    
    jQuery 部分は全て Google のホスティングを使用しています。
    
    
    
    
    posted by lightbox at 2013-12-07 02:11 | jQuery UI | このブログの読者になる | 更新情報をチェックする

    2013年02月17日


    jQuery のスライダーで box-shadow の影分身の効果をリアルタイムに確認する

    CSS3 の効果というのは、いきなり発動するのでどのような経緯でそうなっているかが解りにくいと思います。特に、この box-shadow では、本体から『影』をほぼ無制限に作成できるのですが、多ければ多いほど読みずらいものです。
    
    JavaScript なら動かしながら・・・
    
    JavaScript ならば、コードをコメントにしたり変更したりしながら、CSS の効果を確かめる事ができますし、実際どのようなバリエーションで変化するかを見る事ができるので、いろいろその他の結果も想像しやすくなると思います。
    
    jsdo.it で実行
    
    こんな画面で『スライダー』を使って変化を見る事ができます。
    
    
    
    jQuery のスライダーを使っているので、以下のコード内では Google の API ホスティングと Google ドライブに置いた CSS を使っているのでレスポンスはあまり良く無いかもしれません。ですが、jsdo.it ならば、全てのライブラリをホスティングしてくれているので比較的安心して使えると思います。
    
    numBox ファンクションが影分身部分
    
    ここでスライダーで動かしたぶんの影分身を量産しています。box-shadow そのものの意味合いは、『CSS3 : box-shadow の影分身の解説』を参照して下さい。
    
    <link rel="stylesheet" href="https://googledrive.com/host/0B9Jymqpro6gSVlB5Wm52U29wTlE/jquery/jqcss/black-tie/jquery-ui-1.8.20.custom.css" type="text/css" />
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
    <script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.0/jquery-ui.min.js"></script>
    
    <style type="text/css">
    td {
        padding: 5px;
    }
    
    #slider1, #slider2, #slider3 {
    	width: 200px;
    	margin: 0 0 0 20px;
    }
    #target {
    	margin: 0 0 0 60px;
    	width: 20px;
    	height: 20px;
    	border-radius: 20px;
    	border: solid 5px #909090;
    }
    </style></head>
    <body>
    <table>
    <tr>
    <td style='width:50px;'>大きさ</td><td></td><td><div id="slider1"></div></td>
    </tr><tr>
    <td>数</td><td><input id="nn" size="1"></td><td><div id="slider2"></div></td>
    </tr><tr>
    <td>角度</td><td><input id="nn2" size="2"></td><td><div id="slider3"></div></td>
    </tr>
    </table>
    <div id="target"></div>
    
    <script type="javascript">
        $("#nn").val(num+1);
    </script>
    
    <script type="text/javascript">
    var num = 0;
    function numBox(val) {
    	$("#target").css("width", val+"px");
    	$("#target").css("height", val+"px");
    
    	var sd = "";
    	var cs1 = " 0px -5px rgba(255,255,255,1)";
    	var cs2 = " 0px 0px rgba(144,144,144,1)";
    	for( var j = 0; j < num; j++ ) {
    		for( var i = 0; i < num; i++ ) {
    			if ( j != 0 || i != 0 ) {
    				sd += ",";
    			}
    			sd += (val+10)*(i+1)+"px "+(val+10)*(j)+"px"+cs1;
    			sd += ","+(val+10)*(i+1)+"px "+(val+10)*(j)+"px"+cs2;
    			if ( j != 0 ) {
    				sd += ","+(val+10)*(i)+"px "+(val+10)*(j)+"px"+cs1;
    				sd += ","+(val+10)*(i)+"px "+(val+10)*(j)+"px"+cs2;
    			}
    		}
    	}
    	$("#target").css("box-shadow", sd);
    }
    
    // *************************************
    // 大きさ変更
    // *************************************
    $(function () {
    	$("#slider1").slider({
    		range: "min",
    		step: 1,
    		min: 20,
    		max: 100,
    		value: 20,
    		slide: function (event, ui) {
    			numBox(ui.value);
    		}
    	});
    });
    // *************************************
    // 数の変更
    // *************************************
    $(function () {
    	$("#slider2").slider({
    		range: "min",
    		step: 1,
    		min: 0,
    		max: 20,
    		value: 0,
    		slide: function (event, ui) {
    			num = ui.value;
    			$("#nn").val(ui.value+1);
    			numBox(($( "#slider1" ).slider( "value" ))+0);
    		}
    	});
    });
    
    // *************************************
    // 角度変更
    // *************************************
    $(function () {
    	$("#slider3").slider({
    		range: "min",
    		step: 1,
    		min: -80,
    		max: 80,
    		value: 0,
    		slide: function (event, ui) {
    			$("#nn2").val(ui.value);
    
    			$("#target").css("-moz-transform", "skew("+ui.value+"deg)");
    			$("#target").css("-webkit-transform", "skew("+ui.value+"deg)");
    			$("#target").css("-o-transform", "skew("+ui.value+"deg)");
    			$("#target").css("-ms-transform", "skew("+ui.value+"deg)");
    		}
    	});
    });
    
    
    </script>
    
    余談ですが、jQuery の css メソッドで css を適用すると、クロスブラウジングしやすいです。CSS の記述だったらおそらく煩雑になってかつ後々のメンテナンスに差が出ると思います。
    
    JavaScript のほうが使えるのならいいと思うのですが・・・
    
    
    
    
    posted by lightbox at 2013-02-17 10:00 | 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 ドロップシャドウの参考デモ
    PHP正規表現チェッカー
    Google Hosted Libraries
    cdnjs
    BUTTONS (CSS でボタン)
    イラストAC
    ぱくたそ
    写真素材 足成
    フリーフォント一覧
    utf8 文字ツール
    右サイド 終わり
    base 終わり