メモ的な日記

プログラミングについての個人的メモ日記。PHPとかjQueryとかがメイン。

[PR]

[PR]上記の広告は3ヶ月以上新規記事投稿のないブログに表示されています。新しい記事を書く事で広告が消えます。

SSL環境でGoogle Map APIの使用

SSL環境でのGoogle Map APIの使用について。

この間ちょっと引っかかったので一応メモっておきます。

こう書くところを

 
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>

↓

SSLだとこうなる。

 
<script type="text/javascript" src="https://maps-api-ssl.google.com/maps/api/js?sensor=false"></script>

おわり

テキストエリアでTabの有効化

テキストエリアでTabの入力を有効にする。
script書いてID指定するだけで出来るみたい。

フォルダツリー表示の時にも使った、interface.jsを使用します。

使い方

jQueryとファイルの組込み

 
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js"></script>
<script src="interface.js" type="text/javascript"></script>

scriptの記述

 
<script type="text/javascript">
$(function() {
	// 適用するテキストエリアのid指定
	$("#tabEnable").EnableTabs();
});
</script>

htmlの記述

 
<!-- 適用するテキストエリアにid属性をつけておく -->
<textarea id="tabEnable" cols="50" rows="5">Tabキー入力有効です。</textarea>

サンプルはこちら

おわり。

連動プルダウンを選択した状態で表示

ページ遷移時に、連動プルダウンを選択された状態で表示する。
前回の連動プルダウンの応用。

こちらのサイトのコメント欄を参考にさせていただきました。

前回使ったConnectedSelect.jsにスクリプトを追加するだけ。

使い方

以下のようにConnectedSelect.jsにスクリプトを追加します。

4行目あたり

 
var obj = document.getElementById(selIdList[i]);
obj.ConnectedSelectDefault = obj.options[obj.selectedIndex].value;
if(i){

関数を追加

 
function ConnectedSelectDefault(selIdList){
	for(var i=0;selIdList[i];i++) {
		if(i){
			var obj = document.getElementById(selIdList[i]);
			obj.disabled = true;
			var oSel = document.getElementById(selIdList[i-1])
			var oVal = oSel.ConnectedSelectDefault;
			for(var OG=obj.ConnectedSelect.node.firstChild;OG;OG=OG.nextSibling) {
				if(OG.label != oVal) { continue; }
				for(var OP=OG.firstChild;OP;OP=OP.nextSibling)
				obj.appendChild(OP.cloneNode(true));
				obj.disabled = false;
				break;
			}
		}
	}
}

プルダウン初期化前に追加した関数を呼び出す

 
<script type="text/javascript">
	ConnectedSelect(['SEL1','SEL2','SEL3']);
	ConnectedSelectDefault(['SEL1','SEL2','SEL3']);
</script>

おわり。

連動プルダウン

システムで連動プルダウンを使いたくなって、色々調べたので覚え書きを。

親カテゴリを選ぶと、対応した子カテゴリを表示し、さらに子カテゴリを選ぶと孫カテゴリが・・・
という風なプルダウン。

連動プルダウンのJavaScriptはいろいろあるようですが、個人的に使いやすそうなConnectedSelect.jsを使用します。

こちらのサイトを参考にさせていただきました。

使い方

jQueryとファイルの組込み

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js"></script>
<script type="text/javascript" src="ConnectedSelect.js"></script>

プルダウンメニューを作成

親カテゴリ<select id="SEL1">
	<option value="">---</option>
	<option value="fruits">果物</option>
	<option value="vegetable">野菜</option>
</select>
子カテゴリ<select id="SEL2">
	<option value="">---</option>
  <optgroup label="fruits">
	<option value="apple">りんご</option>
	<option value="melon">メロン</option>
  </optgroup>
  <optgroup label="vegetable">
	<option value="tomato">トマト</option>
	<option value="cabbage">キャベツ</option>
  </optgroup>
</select>
孫カテゴリ<select id="SEL3">
	<option value="">---</option>
  <optgroup label="apple">
	<option value="orin">王林</option>
	<option value="fuji">ふじ</option>
	<option value="kogyoku">紅玉</option>
  </optgroup>
  <optgroup label="melon">
	<option value="andes">アンデスメロン</option>
	<option value="yubari">夕張メロン</option>
	<option value="musk">マスクメロン</option>
  </optgroup>
  <optgroup label="tomato">
	<option value="momotaro">桃太郎</option>
	<option value="first">ファースト</option>
	<option value="furutica">フルティカ</option>
  </optgroup>
  <optgroup label="cabbage">
	<option value="murasaki">ムラサキキャベツ</option>
	<option value="saboi">サボイキャベツ</option>
	<option value="ha">ハキャベツ</option>
  </optgroup>
</select>

親カテゴリのoption valueと、子カテゴリのoptgroupのlabelを対応させておきます。

連動プルダウン初期化

<script type="text/javascript">
	ConnectedSelect(['SEL1','SEL2','SEL3']);
</script>

サンプルはこちら
valueとlabelを対応させるだけなので、DBとの連携も楽ですねー

おわり。

フォルダツリーの表示

フォルダツリーの表示をやってみた。

使用するファイルは3つです。
・interface.js
・treeview.js
・style.css

使い方

最初にjQueryとファイルの組込み

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js"></script>
<script src="interface.js" type="text/javascript"></script>
<script src="treeview.js" type="text/javascript"></script>

あとはul/liを使ってリストを作るだけです。

<ul class="myTree">
  <li class="treeItem"><img src="img/folder.png" class="folderImage" />
    <span class="textHolder">フォルダ1</span>
    <ul>
      <li class="treeItem"><img src="img/folder.png" class="folderImage" /><span class="textHolder">サブフォルダ1-1</span></li>
      <li class="treeItem"><img src="img/folder.png" class="folderImage" /><span class="textHolder">サブフォルダ1-2</span>
      <ul style="display: none;">
        <li class="treeItem"><img src="img/folder.png" class="folderImage" /><span class="textHolder">サブフォルダ1-2-1</span></li>
        <li class="treeItem"><img src="img/folder.png" class="folderImage" /><span class="textHolder">サブフォルダ1-2-2</span></li>
        <li class="treeItem"><img src="img/folder.png" class="folderImage" /><span class="textHolder">サブフォルダ1-2-3</span></li>
      </ul>
    </li>
  </ul>
</li>
  <li class="treeItem"><img src="img/folder.png" class="folderImage" /> <span class="textHolder">フォルダ2</span>
    <ul>
      <li class="treeItem"><img src="img/folder.png" class="folderImage" /> <span class="textHolder">サブフォルダ2-1</span></li>
      <li class="treeItem"><img src="img/folder.png" class="folderImage" /> <span class="textHolder">サブフォルダ2-2</span></li>
    </ul>
  </li>
</ul>

サンプルはこちら
ツリーの開閉も可能です。
組み込んでリスト構造を作るだけなので簡単。

おわり。

カレンダー

2026/09

S	M	T	W	T	F	S
		1	2	3	4	5
6	7	8	9	10	11	12
13	14	15	16	17	18	19
20	21	22	23	24	25	26
27	28	29	30

リンク

カテゴリー

HTML(1)

フリーエリア