2015年05月02日


Google がホスティングしている jQuery を使用して、jQuery UI の Spinner のボタン部分だけを使う方法

Hosted Libraries( Google ) は、有名な JavaScript のライブラリの各バージョンをホスティングしてくれているので、いつでもどこでも好きな時に利用する事ができます。

以下は直訳ですが、Google の翻訳です。
Googleのホストされているライブラリは安定した、信頼性の高い、高速、JavaScriptのライブラリで最も人気のある、オープンソースのグローバル使用可能なコンテンツ配信ネットワークです。Googleは、各ライブラリの努力のための主要な利害関係者と直接連携し、それらがリリースされる最新バージョンを使用できます。
jQuery の場合便利なのは、CSS も同時に用意してくれているところです。以下でも利用(black-tie)していますが、テーマのタイプもそこにあれば使えるので試してみるといいと思います。 ※ Spinner は、押し続けても使えるのでとても便利なコントロールです 以下は実際の記事上でのデモ実行
▼ この下に、Spinner 用の テキストフィールドがありますが非表示にしています
y
Spinner は通常では上のように縦になります

▼ この下の Spinner 用のフィールドは SPAN 要素で挟んでいます
x
SPAN 要素に対して回転する CSS を適用して横表示にしています

x y
x y

以下は記事内にある実際のソースコードです
<script>
// jQuery が無い場合は、Google がホスティングしているライブラリをロードする
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.4/jquery.min.js';
		}
		// *************************************
		// 古い IE に気を使う
		// *************************************
		else {
			window[window.location.hostname+'.loadjQuery'] = '//ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js';
		}
	}
	document.write("<"+"script src=\"" + window[window.location.hostname+'.loadjQuery'] + "\"></"+"script>");
}
</script>
<script>
// jQuery UI が無い場合は、Google がホスティングしているライブラリをロードする
if ( !jQuery.ui ) {
	document.write("<"+"link rel=\"stylesheet\" href=\"//ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/black-tie/jquery-ui.css\">");
	document.write("<"+"script src=\"//ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js\"></"+"script>");
}
</script>
<script>
// *************************************
// jQuery の ページロード時の処理
// *************************************
$(function(){
	$( "#spinner1" ).spinner({
		spin: function( event, ui ) {
			// *************************************
			// $(this).val() は、変化する前の値
			// ui.value は変化した後の値
			// *************************************
			var val = $(this).val()-ui.value;
			// ▲ をクリックするか押し続けると処理されます
			if ( val < 0 ) {
				$( ".y" ).each(function(){
					// 数字以外が設定されているフィールドは 0 にリセットしてマイナス1
					$(this).val( (parseInt($(this).val())||0)-1 );
				});
			}
			// ▼ をクリックするか押し続けると処理されます
			else {
				$( ".y" ).each(function(){
					// 数字以外が設定されているフィールドは 0 にリセットしてプラス1
					$(this).val( (parseInt($(this).val())||0)+1 );
				});
			}
		}
	})
	// 入力部分を使わないので、最小のサイズにして、高さをセット
	.css({ 
		width: "0px",
		"font-size": "0px",
		height: "30px"
	 })
	.show();

	$( "#spinner2" ).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();

});

</script>
<style type="text/css">
/* 対象範囲内の Spinner の表示調整 */
#spinner_box .ui-spinner-button {
	width: 100%!important;
}
#spinner_box .ui-icon {
	left:4px!important;
}

/* 左右にアイコンの向きを配置する */
.rotate_wrap {
	display: inline-block;	/* 回転する為に行内ブロック化 */
	transform: rotate(90deg); /* 回転 */
	margin-left: 10px; /* 表示位置調整 */
}

/* 表示フィールド用 */
.x, .y {
	width:50px;
}
</style>
<div id="spinner_box">
▼ この下に、Spinner 用の テキストフィールドがありますが非表示にしています<br>
y <input id="spinner1" style='display:none;' value="0"><br>
Spinner は通常では上のように縦になります<br><br>

▼ この下の Spinner 用のフィールドは SPAN 要素で挟んでいます<br>
x<span class="rotate_wrap"><input id="spinner2" style='display:none' value="0"></span><br>
SPAN 要素に対して回転する CSS を適用して横表示にしています

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

</div>
ブログ記事で使うにあたって、jQuery を使う記事だけでロードするようにしてあります。



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


2009年05月24日


JavaScript : SHA256

ほぼ、使う事は全く無いと思われますが、何か本来とは別の利用方法があるかもしれません。

autosite( code.google.com )へ行って、SHA256 のコードを sha256.js として保存し、自分のサイトに保存します。

次に、以下のようなコードを書けば使用できます。
<script
	type="text/javascript"
	src="http://homepage2.nifty.com/lightbox/sha256.js"></script>
<input type=text id=sha256_base>
<input
	type=button
	value="実行"
	onClick='alert( SHA256(document.getElementById("sha256_base").value) );'>






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


Seesaa の各ページの表示について
Seesaa の 記事がたまに全く表示されない場合があります。その場合は、設定> 詳細設定> ブログ設定 で 最新の情報に更新の『実行ボタン』で記事やアーカイブが最新にビルドされます。

Seesaa のページで、アーカイブとタグページは要注意です。タグページはコンテンツが全く無い状態になりますし、アーカイブページも歯抜けページはコンテンツが存在しないのにページが表示されてしまいます。

また、カテゴリページもそういう意味では完全ではありません。『カテゴリID-番号』というフォーマットで表示されるページですが、実際存在するより大きな番号でも表示されてしまいます。

※ インデックスページのみ、実際の記事数を超えたページを指定しても最後のページが表示されるようです

対処としては、このようなヘルプ的な情報を固定でページの最後に表示するようにするといいでしょう。具体的には、メインの記事コンテンツの下に『自由形式』を追加し、アーカイブとカテゴリページでのみ表示するように設定し、コンテンツを用意するといいと思います。


※ エキスパートモードで表示しています

アーカイブとカテゴリページはこのように簡単に設定できますが、タグページは HTML 設定を直接変更して、以下の『タグページでのみ表示される内容』の記述方法で設定する必要があります

<% if:page_name eq 'archive' -%>
アーカイブページでのみ表示される内容
<% /if %>

<% if:page_name eq 'category' -%>
カテゴリページでのみ表示される内容
<% /if %>

<% if:page_name eq 'tag' -%>
タグページでのみ表示される内容
<% /if %>
この記述は、以下の場所で使用します