Categories
javascript(jQuery) PHP+MySQL その他

都道府県の配列

必要なときに探す時間を減らすため。。。

[1=>’北海道’,’青森県’,’岩手県’,’宮城県’,’秋田県’,’山形県’,’福島県’,’茨城県’,’栃木県’,’群馬県’,’埼玉県’,’千葉県’,’東京都’,’神奈川県’,’新潟県’,’富山県’,’石川県’,’福井県’,’山梨県’,’長野県’,’岐阜県’,’静岡県’,’愛知県’,’三重県’,’滋賀県’,’京都府’,’大阪府’,’兵庫県’,’奈良県’,’和歌山県’,’鳥取県’,’島根県’,’岡山県’,’広島県’,’山口県’,’徳島県’,’香川県’,’愛媛県’,’高知県’,’福岡県’,’佐賀県’,’長崎県’,’熊本県’,’大分県’,’宮崎県’,’鹿児島県’,’沖縄県’];

[‘北海道’=>’北海道’,’青森県’=>’青森県’,’岩手県’=>’岩手県’,’宮城県’=>’宮城県’,’秋田県’=>’秋田県’,’山形県’=>’山形県’,’福島県’=>’福島県’,’茨城県’=>’茨城県’,’栃木県’=>’栃木県’,’群馬県’=>’群馬県’,’埼玉県’=>’埼玉県’,’千葉県’=>’千葉県’,’東京都’=>’東京都’,’神奈川県’=>’神奈川県’,’新潟県’=>’新潟県’,’富山県’=>’富山県’,’石川県’=>’石川県’,’福井県’=>’福井県’,’山梨県’=>’山梨県’,’長野県’=>’長野県’,’岐阜県’=>’岐阜県’,’静岡県’=>’静岡県’,’愛知県’=>’愛知県’,’三重県’=>’三重県’,’滋賀県’=>’滋賀県’,’京都府’=>’京都府’,’大阪府’=>’大阪府’,’兵庫県’=>’兵庫県’,’奈良県’=>’奈良県’,’和歌山県’=>’和歌山県’,’鳥取県’=>’鳥取県’,’島根県’=>’島根県’,’岡山県’=>’岡山県’,’広島県’=>’広島県’,’山口県’=>’山口県’,’徳島県’=>’徳島県’,’香川県’=>’香川県’,’愛媛県’=>’愛媛県’,’高知県’=>’高知県’,’福岡県’=>’福岡県’,’佐賀県’=>’佐賀県’,’長崎県’=>’長崎県’,’熊本県’=>’熊本県’,’大分県’=>’大分県’,’宮崎県’=>’宮崎県’,’鹿児島県’=>’鹿児島県’,’沖縄県’=>’沖縄県’];

Categories
javascript(jQuery) ホームページ制作・作成

input[type=”range”] と jQuery

input[type=”range”] という出番が少ないタグですが、使う機会があったので、色々と忘れないように。

ローンのシミュレーションや自動見積もりなどで使うことがあるかと。

まずは HTML。

<ul>
	<li><input type="number" id="sampleView" name="sampleView" min="0" max="2000" value="50"></li>
	<li><input type="range" id="sampleRange" name="sampleRange" step="10" min="0" max="2000" value="50"></li>
</ul>

jQuery は次のように。

$(function(){
	const sampleView  = $('#sampleView');
	const sampleRange = $('#sampleRange');
	sampleRange.on('input change',function(){
		sampleView.val( $(this).val() );
	});
	sampleView.on('keyup',function(){
		sampleRange.val( $(this).val() );
	});
});

カンマ区切りにしたい場合、input[type=”number”] ではカンマ区切りができないので、input[type=”text”] として、次を使う。

<ul>
	<li><input type="text" id="sampleView" name="sampleView" value="50"></li>
	<li><input type="range" id="sampleRange" name="sampleRange" step="10" min="0" max="2000" value="50"></li>
</ul>
$(function(){
	const sampleView  = $('#sampleView');
	const sampleRange = $('#sampleRange');
	sampleRange.on('input change',function(){
		sampleView.val( addComma( $(this).val() ) );
	});
	sampleView.on('keyup',function(){
		sampleRange.val( $(this).val() );
	});

	function addComma(num)
	{
		return String(num).replace(/(\d)(?=(\d{3})+(?!\d))/g,'$1,');
	}
});
Categories
HTML+CSS javascript(jQuery) ホームページ制作・作成

ヘッダー固定でページ内リンク

検索すれば多数ヒットするのですが、自分がわすれないために。

ヘッダーなどをページ上部に固定させた場合、ページ内リンクを設けるとヘッダーの下に隠れてしまう現象。

アンカーがページの上部に移動し、その上に position:fixed; と z-index を指定したことが原因。

なので、ヘッダーの高さの分だけアンカーをずらせばよい。
方法は CSS と jQuery の2通り。

#anchorText{
margin-top:-100px; /* ヘッダーの高さ */
padding-top:100px; /* ヘッダーの高さ */
}

jQuery では、target.offset().top にヘッダーの高さ分を引けばよい。

position = target.offset().top - 100;
Categories
javascript(jQuery) ホームページ制作・作成

jQueryUI の datepicker で任意の日付を選択不可にする

予約などの日付を扱うフォームではご要望が多い detapicker ですが、定休日や臨時休業日(年末・年始やお盆など)も反映させたいとのご要望も多く、さらに、その日付設定も自分のところで行いたいとのことでして。。。

日付設定は、管理画面を設けて、データベースに保存させればよいわけですが、そのデータベースに保存された休日一覧を公開ページにある detapicker に反映させる方法を以下に載せます。

ファイル名はなんでもよいのですが、ここでは holidays.php として、直接アクセスすると休日のリストを javascript の配列として出力させるようにします。

var holiday = ["20151114", "20151128", "20151212", "20151226", "20151229", "20151230", "20151231"];

HTML上では、上記の php を読み込みます。

<script src="./holidays.php" type="text/javascript"></script>

あとは datepicker の指定で上記の配列を反映させます。

$(function(){
	var holidayList = holiday;
	$.datepicker.setDefaults( $.datepicker.regional['ja'] );
	$( '.datepicker' ).datepicker({
		numberOfMonths: 2,
		minDate: '+4d',
		maxDate: '+1y',
		dateFormat: 'yy/mm/dd',
		beforeShowDay: function(day){
			var result;
			var dtDay = $.format.date( day, "yyyyMMdd" );
			if( $.inArray( dtDay, holidayList ) != -1 ){
				result = [false];
			} else {
          			result = [true];
			}
			return result;
		}
	});
});
</script>

「var holidayList = holiday;」は、店舗(事務所)毎に異なるケースを踏まえての記述です。

上記は町田市と相模原市に事務所をもつまちだ・さがみ総合法律事務所さんの予約フォームで利用しています。

[mokurenCB]

Categories
javascript(jQuery) PHP+MySQL

プルダウンの選択で他の複数のプルダウンも選択させる

1つの select 文の選択で、他の複数の select 文も選択させる。

Ajax と PHP を JSON でつなげて実現。
まずは、HTML 部分

<p>
<select name="color" id="color">
<option value="0">▼選択</option>
<option value="blue">blue</option>
<option value="aqua">aqua</option>
<option value="lime">lime</option>
<option value="yellow">yellow</option>
<option value="red">red</option>
<option value="black">black</option>
<option value="white">white</option>
</select> <select name="hex" id="hex">
<option value="0">▼選択</option>
<option value="00f">00f</option>
<option value="0ff">0ff</option>
<option value="0f0">0f0</option>
<option value="ff0">ff0</option>
<option value="f00">f00</option>
<option value="000">000</option>
<option value="fff">fff</option>
</select> <select name="rgb" id="rgb">
<option value="0">▼選択</option>
<option value="0,0,255">0,0,255</option>
<option value="0,255,255">0,255,255</option>
<option value="0,255,0">0,255,0</option>
<option value="255,255,0">255,255,0</option>
<option value="255,0,0">255,0,0</option>
<option value="0,0,0">0,0,0</option>
<option value="255,255,255">255,255,255</option>
</select>
</p>

次に javascript(jQuery) 部分

$(function(){
	$('#color').change(function(){
		$.ajax({
			type:"GET",
			url:"./select.php",
			dataType:"json",
			data:{"color":$("#color").val()},
			success:function(data){
				$('#hex').val( data[0] );
				$('#rgb').val( data[1] );
			}
		});
	});
});

最後に Ajax から呼び出している select.php。

if( isset( $_GET['color'] ) ){
	switch( $_GET['color'] ){
		case 'blue':
			$array = array( '00f', '0,0,255' );
			break;
		case 'aqua':
			$array = array( '0ff', '0,255,255' );
			break;
		case 'lime':
			$array = array( '0f0', '0,255,0' );
			break;
		case 'yellow':
			$array = array( 'ff0', '255,255,0' );
			break;
		case 'red':
			$array = array( 'f00', '255,0,0' );
			break;
		case 'black':
			$array = array( '000', '0,0,0' );
			break;
		case 'white':
			$array = array( 'fff', '255,255,255' );
			break;
		default:
			$array = array( 0, 0 );
	}
} else $array = array( 0, 0 );
echo( json_encode( $array ) );

実際には、HTML の option に並べる値や php で配列にさせる値をデータベース化して使うことが多いでしょう。

[mokurenCB]