メモ的な日記

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>

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

おわり。

ドロップダウン型メニューを垂直に並べる

前回のドロップダウン型メニューのコードを、ちょっと変更するだけでメニューを垂直に出来るみたいなので、やってみました。

使用するファイルは前回と同じく以下の５つです。
・jquery.jdMenu.css
・jquery.bgiframe.js
・jquery.dimensions.js
・jquery.jdMenu.js
・jquery.positionBy.js

使い方

ソースコードは前回やった水平のドロップダウン型メニューとほとんど同じです。

jQuery本体とjdMenu一式を組み込む

<link rel="stylesheet" href="jquery.jdMenu.css" type="text/css">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js"></script>
<script type="text/javascript" src="jquery.bgiframe.js"></script>
<script type="text/javascript" src="jquery.dimensions.js"></script>
<script type="text/javascript" src="jquery.jdMenu.js"></script>
<script type="text/javascript" src="jquery.positionBy.js"></script>

ul/li要素を使ってメニューを作る。

<ul class="jd_menu jd_menu_vertical">
   <li><a href="">Home</a></li>
   <li><a href="#">検索エンジン »</a>
      <ul>
         <li><a href="http://www.google.co.jp" target="_blank">Google</a></li>
         <li><a href="http://www.yahoo.co.jp" target="_blank">Yahoo!</a></li>
         <li><a href="http://jp.msn.com/" target="_blank">MSN</a></li>
      </ul>
   </li>

   <li><a href="#">Google »</a>
      <ul>
         <li><a href="#">検索項目 »</a>
            <ul>
               <li><a href="http://www.google.co.jp" target="_blank">Google 検索</a></li>
               <li><a href="http://images.google.com" target="_blank">Google 画像検索</a></li>
            </ul>
         </li>
         <li><a href="http://maps.google.co.jp" target="_blank">Google マップ</a></li>
         <li><a href="http://mail.google.com" target="_blank">Gmail</a></li>
      </ul>
   </li>
</ul>

前回のドロップダウンメニューとほぼ同じソースです。
異なる部分は、最上位のulタグの[class="jd_menu"]の部分が、[class="jd_menu jd_menu_vertical"]となっている点。

つまり、class要素を[class="jd_menu"]とすると水平に
[class="jd_menu jd_menu_vertical"]とすると垂直にメニューが並びます。

サンプルはこちら水平/垂直の変更も簡単にできますね。

おわり。

水平ドロップダウン型メニューの表示

水平方向のドロップダウン型メニュー表示が出来るプラグインを試してみました。

サンプルコード＆ダウンロードは以下から。
jdMenu公式ページ

使用するファイルは
・jquery.jdMenu.css
・jquery.bgiframe.js
・jquery.dimensions.js
・jquery.jdMenu.js
・jquery.positionBy.js
以上の5つです。

使い方

jQuery本体とjdMenu一式を組み込む

<link rel="stylesheet" href="jquery.jdMenu.css" type="text/css">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js"></script>
<script type="text/javascript" src="jquery.bgiframe.js"></script>
<script type="text/javascript" src="jquery.dimensions.js"></script>
<script type="text/javascript" src="jquery.jdMenu.js"></script>
<script type="text/javascript" src="jquery.positionBy.js"></script>

後はHTML部分でul/liを使ってメニューを作るだけです。
最上位のul要素には[class="jd_menu"]を記述します。

<ul class="jd_menu">
   <li><a href="">Home</a></li>
   <li><a href="#">検索エンジン »</a>
      <ul>
         <li><a href="http://www.google.co.jp" target="_blank">Google</a></li>
         <li><a href="http://www.yahoo.co.jp" target="_blank">Yahoo!</a></li>
         <li><a href="http://jp.msn.com/" target="_blank">MSN</a></li>
      </ul>
   </li>

   <li><a href="#">Google »</a>
      <ul>
         <li><a href="#">検索項目 »</a>
            <ul>
               <li><a href="http://www.google.co.jp" target="_blank">Google 検索</a></li>
               <li><a href="http://images.google.com" target="_blank">Google 画像検索</a></li>
            </ul>
         </li>
         <li><a href="http://maps.google.co.jp" target="_blank">Google マップ</a></li>
         <li><a href="http://mail.google.com" target="_blank">Gmail</a></li>
      </ul>
   </li>
</ul>

サンプルはこちら
簡単にドロップダウンメニューが作れて便利です。

おわり。

validateでフォーム入力チェック

簡単にフォームの入力チェックができるjquery.validate.jsプラグインです。

コードのダウンロードは下記サイトから。

bassistance.de » jQuery plugin: Validation

使うファイルは
・jquery.validate.min.js
・messages_ja.js
の2つ。

使い方

jQueryとダウンロードしたjquery.validateを組み込む

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

HTML部分はこんな風に

<form id="form">
	名前：
	<input id="name" name="name" size="25" class="required" minlength="4"><br>
	ニックネーム：
	<input id="Nname" name="Nname" size="25" class="required" rangelength="5 10"><br>
	URL：
	<input type="text" id="url" name="url" size="25"  class="url"><br>
	E-Mail：
	<input id="email" name="email" size="25"  class="required email"><br>
	<input type="submit" class="submit" id="form-host-submit" value="登録">
</form>

必須項目にはclass="required"
URLとして入力させたいならclass="url"
E-Mailとし入力させたいならclass="email"
E-Mailで必須入力ならclass="required email"
という風に記述するだけです。

また、minlenght="4"で最小値設定
rangelength="5 10"で入力文字数設定など、細かい設定もできます。

で、スクリプト部分でIDを指定。

<script type="text/javascript">
	$(document).ready(function(){
		$("#form").validate();
	});
</script>

簡単に入力チェックが出来て便利です。
サンプルはこんな感じ

おわり。

モーダルダイアログの表示

モーダルダイアログを表示するjqModalを使ってみました。
ソースコードのダウンロードはこちら

使い方

まずはjQueryとjqModalを組み込む

<link rel="stylesheet" href="jquery.powertip.css" type="text/css">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js"></script>
<script src="jqModal.js" type="text/javascript"></script>

JavaScriptの記述

<script type="text/javascript">
	$().ready(function() {
		$('#dialog').jqm();
	});
</script>

HTML部分の記述

<a href="#" class="jqModal">ダイアログ</a>

<div class="jqmWindow" id="dialog">  
	<a href="#" class="jqmClose">Close</a>  
	<hr>  
    <em>使い方</em> --> 左上のCloseをクリックすると、ダイアログを閉じます。
</div>

「ダイアログ」のリンクをクリックすると、id属性が"dialog"のdiv要素の内容がモーダルダイアログで表示されます。

サンプルはこちら

おわり。

PowerTipでツールチップを実装

簡単にツールチップを実装できるらしいPowerTipを使ってみました。
オプションでいろいろ弄れるようなので、自分好みのものを作れるみたいです。

ソースのダウンロードはこちら。

使い方

まずはjQueryと上記サイトからダウンロードしたPowerTipのjsとcssを読み込む。

<link rel="stylesheet" href="jquery.powertip.css" type="text/css">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js"></script>
<script type="text/javascript" src="jquery.powertip.js"></script>

JavaScriptの記述

<script type="text/javascript">
	$(function() {
		$('#north').powerTip({placement: 'n'});
		$('#south').powerTip({placement: 's'});
		$('#west').powerTip({placement: 'w'});
		$('#east').powerTip({placement: 'e'});
		$('#north-west').powerTip({placement: 'nw'});
		$('#north-east').powerTip({placement: 'ne'});
		$('#south-west').powerTip({placement: 'sw'});
		$('#south-east').powerTip({placement: 'se'});
		
		$('#input').powerTip({placement: 'e'});
	});
</script>

HTML部分はこんな感じ。titleにツールチップで表示させるテキストを記述します。

<div id="north" class="btn" title="サンプルメッセージ（北）">north</div>
<div id="south" class="btn" title="サンプルメッセージ（南）">south</div>
<div id="west" class="btn" title="サンプルメッセージ（西）">west</div>
<div id="east" class="btn" title="サンプルメッセージ（東）">east</div>
<div id="north-west" class="btn" title="サンプルメッセージ（北西）">north-west</div>
<div id="north-east" class="btn" title="サンプルメッセージ（北東）">north-east</div>
<div id="south-west" class="btn" title="サンプルメッセージ（南西）">south-west</div>
<div id="south-east" class="btn" title="サンプルメッセージ（南東）">south-east</div>

こんな感じになります→サンプル

最初のほうで触れたオプションを設定する場合は以下のような感じ。

$('#north').powerTip({
	placement: 'n',		// ツールチップの位置を指定（方角で指定）
	followMouse: false,	// マウス追従の有無
	mouseOnToPopup: false,	// ツールチップにポインタを合わせても消えない
	offset: 10,		// 表示させるツールチップの距離（要素からの距離）
	fadeInTime: 200,	// フェードイン速度
	fadeOutTime: 100	// フェードアウト速度
});

そのままでも十分使えますが、いろいろ弄ってみるのも面白いかもしれません。

おわり。