SQLの窓

2016年09月07日

jQuery UI の datepicker を使用した現在の日付文字列の取得 と 一般的な現在の日付文字列の加工取得処理

日付が必要な場合、既に jQuery UI が利用されているのならば、前者が簡単だと思います。jQuery UI が無い場合は、後者の処理で隠しフィールドにセットしておいて利用すると良いと思います。
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.2.2/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>

<input type="text" id="mydate">
<input type="text" id="mydate2">
<script>
	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'
	};

	// jQuery UI の datepicker を使用した現在の日付文字列の取得
	$( "#mydate" )
		.datepicker(datepicker_option)
		.datepicker("setDate", "0");

	// 一般的な現在の日付文字列の加工取得処理
	$( "#mydate2" )
		.val( 
			(new Date()).getFullYear() + "/" + 
			('0'+((new Date()).getMonth()+1)).slice(-2) + "/" + 
			('0'+(new Date()).getDate()).slice(-2) 
		);

</script>


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

2016年06月11日

geolocation を使用して『都道府県選択コンボボックス』の初期値を現在の緯度・経度から選択する

2016/06/10
2016年4月ごろから、Google Chrome の仕様変更により、全て https の環境でないと geolocation が動作しなくなりました。( 参考記事 / 注 : localhost は動作します )


なので、このブログ内では動作しないので、自分のサイトにデモサンプルを設置しました。

1) 各都道府県の頭に頭文字のアルファベット追加するだけでも楽になる。
2) 今時なんだから、緯度経度から選択

HTML ページ
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script>
$(function(){

	$("#action").on("click",function(){
		navigator.geolocation.getCurrentPosition(function(target){
			$.get("https://lightbox.sakura.ne.jp/toolbox/g_ken.php?lat="
				+target.coords.latitude
				+"&lng="+target.coords.longitude,
				function(data){
					console.dir(data);
					console.log( data.prefectureCode );
					$("select[name='ken']").val(data.prefectureCode);
				});
		});
	});


});
</script>
</head>
<body>
<select name="ken">
	<option value="1">h 北海道</option>
	<option value="2">a 青森県</option>
	<option value="3">i 岩手県</option>
	<option value="4">m 宮城県</option>
	<option value="5">a 秋田県</option>
	<option value="6">y 山形県</option>
	<option value="7">f 福島県</option>
	<option value="8">i 茨城県</option>
	<option value="9">t 栃木県</option>
	<option value="10">g 群馬県</option>
	<option value="11">s 埼玉県</option>
	<option value="12">c 千葉県</option>
	<option value="13">t 東京都</option>
	<option value="14">k 神奈川県</option>
	<option value="15">n 新潟県</option>
	<option value="16">t 富山県</option>
	<option value="17">i 石川県</option>
	<option value="18">f 福井県</option>
	<option value="19">y 山梨県</option>
	<option value="20">n 長野県</option>
	<option value="21">g 岐阜県</option>
	<option value="22">s 静岡県</option>
	<option value="23">a 愛知県</option>
	<option value="24">m 三重県</option>
	<option value="25">s 滋賀県</option>
	<option value="26">k 京都府</option>
	<option value="27">o 大阪府</option>
	<option value="28">h 兵庫県</option>
	<option value="29">n 奈良県</option>
	<option value="30">w 和歌山県</option>
	<option value="31">t 鳥取県</option>
	<option value="32">s 島根県</option>
	<option value="33">o 岡山県</option>
	<option value="34">h 広島県</option>
	<option value="35">y 山口県</option>
	<option value="36">t 徳島県</option>
	<option value="37">k 香川県</option>
	<option value="38">a 愛媛県</option>
	<option value="39">k 高知県</option>
	<option value="40">f 福岡県</option>
	<option value="41">s 佐賀県</option>
	<option value="42">n 長崎県</option>
	<option value="43">k 熊本県</option>
	<option value="44">o 大分県</option>
	<option value="45">m 宮崎県</option>
	<option value="46">k 鹿児島県</option>
	<option value="47">o 沖縄県</option>
</select>
<input id="action" type="button" value="ブラウザの緯度経度で選択">
</body>
</html>


PHP
<?php
header( "Content-Type: application/json; Charset=utf-8" );
header( "pragma: no-cache" );
header( "Expires: Wed, 31 May 2000 14:59:58 GMT" );
header( "Cache-control: no-cache" );
header( "Access-Control-Allow-Origin: *" );

mb_internal_encoding('UTF-8');

$LIB_DIR = realpath(dirname(__FILE__).'/dgmsrc/').'/';
require_once $LIB_DIR.'Dm/Geocoder.php';
require_once $LIB_DIR.'Dm/Geocoder/Address.php';
require_once $LIB_DIR.'Dm/Geocoder/Prefecture.php';
require_once $LIB_DIR.'Dm/Geocoder/Query.php';
require_once $LIB_DIR.'Dm/Geocoder/GISCSV.php';
require_once $LIB_DIR.'Dm/Geocoder/GISCSV/Finder.php';
require_once $LIB_DIR.'Dm/Geocoder/GISCSV/Reader.php';

$addresses = Dm_Geocoder::reverseGeocode($_GET['lat'],$_GET['lng']);
print json_encode($addresses[0]);
使用した PHP ライブラリ


タグ:PHP
posted by at 2016-06-11 01:13 | Comment(0) | JavaScript | このブログの読者になる | 更新情報をチェックする

2015年11月19日

雪を降らす snowstorm.js の 特定 DIV 内での実装

何故か、単純に指定するとズレるので、いろいろやってみました。が、どうも DIV の下で雪が止まってくれません。けっこう適当なライブラリですね。

と、思ったら snowStorm.flakeBottom = 500; を指定したらうまく行きました。

ページ全体でのデモ

ふふふふふ
雪のキャラクタを変更して、雪の結晶を使って CSS アニメーションで回転させています
<style>
@-webkit-keyframes snow-rotate {
  0% { -webkit-transform: rotate(0deg); }
  100% { -webkit-transform: rotate(360deg); }
}
@-moz-keyframes snow-rotate {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}
@-o-keyframes snow-rotate {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}
@keyframes snow-rotate {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}
.mysnow {
	color:#e0e0e0!important;
	-webkit-animation: 1.85s snow-rotate steps(8) infinite;
	-moz-animation: 1.85s snow-rotate steps(8) infinite;
	-o-animation: 1.85s snow-rotate steps(8) infinite;
	animation: 1.85s snow-rotate steps(8) infinite;

}
</style>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Snowstorm/20131208/snowstorm-min.js"></script>
<div style="width:500px;overflow:hidden; margin:60px auto">
<div id="snow_container" style="width:540px;overflow:hidden;position:relative;">
<img src="https://lh3.googleusercontent.com/-om6S8qEPmiQ/VZetF28tQnI/AAAAAAAAbPc/x1aQ7Uj2QVU/s500-Ic42/143594651057721985634.jpg">
</div>
ふふふふふ

</div>
<script>
snowStorm.excludeMobile = false;
snowStorm.animationInterval = 50;
snowStorm.flakesMax = 64;
snowStorm.className = "mysnow"
snowStorm.flakeWidth = 16;
snowStorm.flakeHeight = 16;
snowStorm.snowCharacter = '&#10052;';
snowStorm.targetElement = 'snow_container';
snowStorm.flakeBottom = 500;
</script>

snowstorm.js


タグ:javascript
posted by at 2015-11-19 17:06 | Comment(0) | JavaScript | このブログの読者になる | 更新情報をチェックする

2015年07月06日

IE や Firefox の開発者ツールのコンソールで簡単に localStorage を見る為の1行コード

Google Chrome では、Resources のタブで見る事も消す事もできますが、IE や Firefox ではコンソールから JavaScript を実行します

for( prop in localStorage ) { console.log( prop + ":" + localStorage[prop] ) }
但し、Firefox では、メソッドも表示されてしまうので注意して下さい。 ▼ Firefox の余分な部分
タグ:Firefox IE
posted by at 2015-07-06 23:02 | Comment(0) | JavaScript | このブログの読者になる | 更新情報をチェックする

2015年01月10日

JavaScript : ブックマークレットの作り方


<a href="javascript:var%20mylib=document.createElement('script');if(!window.NAME){mylib.setAttribute('src','URL');mylib.setAttribute('charset','shift_jis');document.body.appendChild(mylib);(function(){if(window.NAME){NAME.init();}else{setTimeout(arguments.callee);}})();}else{NAME.init();}void(mylib);"
onclick='
	alert('ブックマークバーにドロップして下さい(IEではお気に入りバー/右クリックからも可)'); 
	if (window.navigator.appName.toLowerCase().indexOf("microsoft") > -1) { 
		event.returnValue = false; 
	} 
	event.preventDefault(); 
	event.stopPropagation();
'
>ブックマークレットのスケルトン</a>

▼ JavaScript 部分を整形したもの
var mylib = document.createElement('script');
if (!window.NAME) {
    mylib.setAttribute('src', 'URL');
    mylib.setAttribute('charset', 'shift_jis');
    document.body.appendChild(mylib); 
    (function() {
        if (window.NAME) {
            NAME.init();
        } else {
            setTimeout(arguments.callee);
        }
    })();
} else {
    NAME.init();
}
void(mylib);

arguments.callee は無名関数自身なので、window.NAME がロードされるまで呼び続けられます。ロード済みの場合は、読み込まれた外部ライブラリの NAME.init(); が実行されます。ブックマークレットの二度目の実行では、既に読み込まれた外部ライブラリより実行されます

void(mylib); で、void の引数に mylib を使っているのに深い意味はありません。void(0) でもかまいません。最後に void(0) が無いと、画面が壊れてしまうから付加するのが通常です( alert 等のウインドウ処理が最後にある場合は付加しなくても動作します。)

▼ 外部スクリプト部分
if (!window.NAME) {
(
function() {
	window.NAME = 
	{
		// プロパティ
		version: 1.01
		,
		// メソッド
		init : function( ) {
			/* ここに処理を書きます */
			alert("この alert はテスト用です");
		}
	};
}
)();
}


仕込み方にもいくつかあって、ウインドウ開ける方法もありますし、IFRAME で埋め込んで配置する方法もあります。この方法は、ページの一部分を一回だけ JavaScript で変更してしまう比較的基本的な方法です。

要するに、スクリプトタグを BODY 要素の最後に追加して、そのスクリプトタグに外部の js ファイルを読み込ませてその中の処理を呼び出すものです。自分で一から書くと結構面倒で、専門知識も多く知っていないとなかなか完成まで時間がかかりますが、スケルトンを使うと必要最低限のコード追加と環境整備で実装環境を作る事ができます。

このスケルトンで注意するのは、呼び出す js ファイルは SHIFT_JIS で書くというところです(Window 環境では普通に作成する SHIFT_JIS になってしまうので)。これは、呼び出す方の記述で charset="shift_jis" を書いているからです。UTF-8 にしたい場合は、href 内のその記述部分も変更する必要があります。

後、一般的なデバッグで気を付けるのは、変更してアップロードする毎にキャッシュを削除する事です( 面倒ですけど、結局効率アップになります )。さらに、JavaScript の動的コンテンツは、ソースを単純に表示しても見る事ができないので、開発者ツールで結果を確認する必要もあります。

ブックマークレットは、表示されているページと同じセキュリティで参照されるのでたいていの事ができます。主な目的は、エンドユーザーの操作レベルでの効率を上げる事です。IE 拡張メニューや Firefox の拡張と似ていますが、後者は厳密にはセキュリティの壁があります。そのかわり、後者は OS のローカル情報にアクセスできるメリットがあります。


元来、サービス運営側はサーバーのシステムの管理上なかなかエンドユーザーの利便性にまで手をだせないものです。通常、少しの変更が多くのユーザに影響するので、慎重にならざるを得ません。ですから、この手のプラグイン的なツールは、エンドユーザ側で提案すべきものであり、サービスを提供する側とエンドユーザが、お互い利益を得るような形態が望まれます。


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

2015年01月08日

いまさらですが、JavaScript で、グローバル領域を汚さない変数宣言の使用方法

要するに無名関数で囲んで、それをその場で実行すれば、内部の変数はグローバルからは隔離されます。C 言語的に言うと、スタックに変数が定義された状態ですね。

▼ 無名関数
function(){}

▼ 無名関数をその場で実行
( function(){} )();

で、どこで使うかと言うと、ブックマークレットで、オリジナルページの邪魔をせずにこっそり作業したい時だとか・・・でしょうか。

というより、無名関数は jQuery 等で コールバックされる処理を関数名を使うのではなく、その場で全て書いてしまう( というかほとんどそうしているのが現状 )場合にバシバシ使われます
<script type="text/javascript">
var a = 0;

(function() {
	// ここで var を使わないと、グローバルを参照します
	var a;
	a = 2;
})();

alert(a)

</script>

関連する記事


タグ:javascript
posted by at 2015-01-08 13:38 | Comment(0) | JavaScript | このブログの読者になる | 更新情報をチェックする

2014年11月10日

二回目のロードは無視する、JavaScrip ライブラリの基本スケルトン

一般によく使われている、グローバル変数を作成しない実行として、(function(仮引数){処理})(実引数); という形になっています。

テストに、正規表現を使った置き換えを使用していますが、これを最初作った当時(2009年)は全角の空白は対象外だったと思いますが今は全部OK です。

※ 参考 / MDN : String.prototype.trim()

リンク先では、IE に関するバグ報告が、\u00A0 に関して書かれていますが、IE8 以前の問題でした。

▼ 漢字スペースと \u00A0 と 半角スペースを含めてテストしています
<script type="text/javascript">
// **************************************
// 無駄なグローバル変数を定義しない
// **************************************
(function(jslibname) {
	if (!window[jslibname]) {
		console.log("1回目の実行です");
		window[jslibname] = {
			// プロパティ
			version: 1.01
			,
			// メソッド
			trim : function( str ) {
				return str.replace(/^\s+|\s+$/g,'');
			}
		};
	}
})("mylib");

(function(jslibname) {
	if (!window[jslibname]) {
		window[jslibname] = {
			// プロパティ
			version: 1.01
			,
			// メソッド
			trim : function( str ) {
				return str.replace(/^\s+|\s+$/g,'');
			}
		};
	}
	else {
		console.log("2回目は実行されません");
	}
})("mylib");

</script>
<input 
	type="button" 
	value="trimメソッドの実行" 
	onClick='alert("|"+mylib.trim("\u00A0   abc   ")+"|");'>
<input 
	type="button" 
	value="純正trimメソッドの実行" 
	onClick='alert("|"+"\u00A0   abc   ".trim()+"|");'>


タグ:javascript
posted by at 2014-11-10 19:32 | JavaScript | このブログの読者になる | 更新情報をチェックする

2014年11月07日

ブックマークレットから、ページ中央に固定する IFRAME ウインドウを作成する

position = 'fixed'; 等 により、ページをスクロールしても、IFRAME が画面中央に留まります






これで何をするかというと、この IFRAME の中に SCRIPT 要素を document.write して、画面作成します。画面が出来たら、元々の親ページをコントロールする機能を実装します。

▼ ブックマークレット
ページ中央固定 IFRAME

<a href="javascript:if(!window['_bI']){window._bI={};(function(w,h,b,z,v,c){var%20wnd=document.createElement('iframe');with(wnd){width=w;height=h;with(style){border='solid%20'+b+'px%20#000000';position='fixed';left='50%';top='50%';zIndex=z;display=v;marginLeft=(((w/2)*-1)+'px');marginTop=(((h/2)*-1)+'px');borderRadius='8px';boxShadow='0%2015px%2010px%20-10px%20rgba(0,0,0,0.5),0%201px%204px%20rgba(0,0,0,0.3),0%200%2040px%20rgba(0,0,0,0.1)%20inset';}}document.body.appendChild(wnd);window._bI.wnd=wnd;wnd.contentWindow.document.write('<style>body{background-color:#'+c+';}</style>');wnd.contentWindow.document.close();})(400,200,1,1000,'','DDE8BE');}" onclick=" 
		alert('ブックマークバーにドロップか、IEでは右クリックでお気に入りに登録(お気に入りバー)が簡単です'); 
		if (window.navigator.appName.toLowerCase().indexOf('microsoft') > -1) { 
			event.returnValue = false; 
		} 
		event.preventDefault(); 
		event.stopPropagation();
	">ページ中央固定 IFRAME</a>
上のコードは、ブックマークレット登録用に作成されています。以下のコードは、内容を正しく確認する為に通常の整形をしたものです。
<script type="text/javascript">
if (!window['_bI']) {
    window._bI = {};
    (function(w, h, b, z, v, c) {
        var wnd = document.createElement('iframe');
        with(wnd) {
            width = w;
            height = h;
            with(style) {
                border = 'solid ' + b + 'px #000000';
                position = 'fixed';
                left = '50%';
                top = '50%';
                zIndex = z;
                display = v;
                marginLeft = (((w / 2) * -1) + 'px');
                marginTop = (((h / 2) * -1) + 'px');
                borderRadius = '8px';
                boxShadow = '0 15px 10px -10px rgba(0,0,0,0.5),0 1px 4px rgba(0,0,0,0.3),0 0 40px rgba(0,0,0,0.1) inset';
            }
        }
        document.body.appendChild(wnd);
        window._bI.wnd = wnd;
        wnd.contentWindow.document.write('<style>body{background-color:#' + c + ';}</style>');
        wnd.contentWindow.document.close();
    })(400, 200, 1, 1000, '', 'DDE8BE');
}
</script>

window['_bI']

window['_bI'] は、window._bI というプロパティが定義されていない場合にのみ処理を行うようにしたもので、処理が行われると、window._bI = {}; が実行されて、2回目以降はなにも実行されなくなります。
※ 最初は、window['_bI'] は undefined です。

IFRAME を作成

document.createElement で、動的に iframe 要素を作成して、その iframe の属性を設定する為に、with(wnd) ブロック内で iframe の プロパティを設定しています。document.createElement で作成された要素は、そのままでは有効にならず、document.body.appendChild(wnd); で本体の body に追加されて有効(表示される)になります。

※ 23行目で、window._bI に作成した iframe をセットしているので、後からプロパティの変更が可能です。

IFRAME の背景色を設定

wnd.contentWindow.document.write によって( 最後に wnd.contentWindow.document.close() が必要です )、自由に iframe 内にコンテンツを作成する事ができます。この時点では、まだ CSS だけですが、画面定義や外部参照ライブラリによって iframe 内を JavaScript だけで完成させる事ができます


関連する記事

親(parent) フレームに jQuery が無い場合に jQuery をインストールする。



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

2014年10月10日

JavaScript の全ての オブジェクトに同じ機能を持たせる

Object オブジェクトには、JavaScript のその他のすべてのオブジェクトが含まれます。このため、このオブジェクトのメソッドとプロパティのすべてを、その他のすべてのオブジェクトが使用できます。



ただ、これを実行してしまうと、あらゆる処理に影響が出るので、このページでも実行できませんでした。
<input onclick="test()" type="button" value="TEST">
<script type="text/javascript">

// 全ての JavaScript オブジェクトに プロパティを追加
Object.prototype.myVersion = "lightbox 1.1"

// 関数オブジェクトの定義
function MyFunc () {
	this.Version = "1.2"
}

function test() {

	console.log( "String:" + "全ての文字列".myVersion );

	// 引数
	console.log( "arguments:" + arguments.myVersion );

	// Boolean オブジェクト
	console.log( "Boolean:" + (1==1).myVersion );

	console.log日付オブジェクト
	var dateObj = new Date();
	console.log( "Date:" + dateObj.myVersion );

	// 関数オブジェクト
	console.log( "Function:" + test.myVersion );

	var f = new MyFunc();
	console.log( "Function:" + f.myVersion + " ,固有は " + f.Version + " です" );

	// Math オブジェクト
	console.log( "Math:" + Math.myVersion );

	// Number オブジェクト
	console.log( "Number:" + (1).myVersion );

	// RegExp オブジェクト
	console.log( "RegExp:" + RegExp.myVersion );

	// Regular Expression オブジェクト
	console.log( "Regular Expression:" + (/pattern/).myVersion )
}

</script>



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

2014年09月25日

JavaScript : コンボボックスの OPTION 部分の操作でたいていのテクニック

コンボボックスのリストを全て削除

▼ 実際の実行
<script type="text/javascript">
function resetCombo() {

	var combo = document.frm1.combo1
	combo.length = 0;

}
</script>
<form name="frm1">
	<select name="combo1"
		style='width:150px;'>
		<option value="1">データ1
		</option>
		<option value="2">データ2
		</option>
		<option value="3">データ3
		</option>
		<option value="4">データ4
		</option>
	</select>
</form>
<input type="button"
	value="全て削除"
	onclick='resetCombo();'>
一つづつ削除する場合は、combo.remove(index) です。


コンボボックスにリストを追加する

▼ 実際の実行
<script type="text/javascript">
function addCombo() {

	var combo = document.frm2.combo2;
	var option = null;

	for( i = 0; i < 4; i++ ) {
		option = document.createElement("option");
		option.value = i+1;
		option.text = "オプション"+(i+1);
		combo.appendChild(option)
	}

}
</script>
<form name="frm2">
	<select name="combo2"
		style='width:150px;'>
	</select>
</form>
<input type="button"
	value="データ追加"
	onclick='addCombo();'>
コンボボックスにリストを挿入する

▼ 実際の実行
<script type="text/javascript">
function insertOption() {

	var combo = document.frm3.combo3;
	var option = document.createElement("option");
	option.value = 1.5;
	option.text = "データ1.5";
	combo.insertBefore(option,combo.options[1]);
}
</script>
<form name="frm3">
	<select name="combo3"
		style='width:150px;'>
		<option value="1">データ1
		</option>
		<option value="2">データ2
		</option>
		<option value="3">データ3
		</option>
		<option value="4">データ4
		</option>
	</select>
</form>
<input type="button"
	value="リスト挿入"
	onclick='insertOption();'>
コンボボックスのリスト移動する

▼ 実際の実行
<script type="text/javascript">
function moveOption() {

	var combo = document.frm4.combo4;
	combo.insertBefore(combo.options[1],combo.options[3]);
}
</script>
<form name="frm4">
	<select name="combo4"
		style='width:150px;'>
		<option value="1">データ1
		</option>
		<option value="2">データ2
		</option>
		<option value="3">データ3
		</option>
		<option value="4">データ4
		</option>
	</select>
</form>
<input type="button"
	value="リスト移動"
	onclick='moveOption();'>
コンボボックスのテキスト部分を取得

▼ 実際の実行
<script type="text/javascript">
function getOptionText() {

	var combo = document.frm5.combo5;
	alert( combo.options[2].text );

}
</script>
<form name="frm5">
	<select name="combo5"
		style='width:150px;'>
		<option value="1">データ1
		</option>
		<option value="2">データ2
		</option>
		<option value="3">データ3
		</option>
		<option value="4">データ4
		</option>
	</select>
</form>
<input type="button"
	value="リスト参照"
	onclick='getOptionText();'>
コンボボックスの選択状態を操作する

▼ 実際の実行
<script type="text/javascript">
function selectOption() {

	var combo = document.frm6.combo6;
	combo.selectedIndex = 2;

}
function noSelectOption() {

	var combo = document.frm6.combo6;
	combo.selectedIndex = -1;

}
</script>
<form name="frm6">
	<select name="combo6"
		style='width:150px;'>
		<option value="1">データ1
		</option>
		<option value="2">データ2
		</option>
		<option value="3">データ3
		</option>
		<option value="4">データ4
		</option>
	</select>
</form>
<input type="button"
	value="データ3を選択"
	onclick='selectOption();'>
<input type="button"
	value="未選択"
	onclick='noSelectOption();'>
昔はこの方法は使え無いブラウザがあったかもしれません。全て直感的な操作ですが、本来 options コレクションに対して実行するような内容が、コンボボックスに直接可能になっています。



タグ:javascript
posted by at 2014-09-25 23:54 | JavaScript | このブログの読者になる | 更新情報をチェックする
Seesaa の各ページの表示について
Seesaa の 記事がたまに全く表示されない場合があります。その場合は、設定> 詳細設定> ブログ設定 で 最新の情報に更新の『実行ボタン』で記事やアーカイブが最新にビルドされます。

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

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

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

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


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

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

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

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

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


Android SDK ポケットリファレンス
改訂版 Webデザイナーのための jQuery入門
今すぐ使えるかんたん ホームページ HTML&CSS入門
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX