https://nate.blog.shinobi.jp/ プログラミングについての個人的メモ日記。PHPとかjQueryとかがメイン。 Wed, 09 Oct 2013 11:51:45 GMT ja © Ninja Tools Inc.
この間ちょっと引っかかったので一応メモっておきます。



こう書くところを <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>


おわり]]> HTML https://nate.blog.shinobi.jp/html/ssl%E7%92%B0%E5%A2%83%E3%81%A7google%20map%20api%E3%81%AE%E4%BD%BF%E7%94%A8 Wed, 09 Oct 2013 11:51:45 GMT nate.blog.shinobi.jp://entry/14 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>

サンプルはこちら

おわり。]]> jQuery https://nate.blog.shinobi.jp/jquery/%E3%83%86%E3%82%AD%E3%82%B9%E3%83%88%E3%82%A8%E3%83%AA%E3%82%A2%E3%81%A7tab%E3%81%AE%E6%9C%89%E5%8A%B9%E5%8C%96 Sat, 21 Sep 2013 13:07:16 GMT nate.blog.shinobi.jp://entry/13 前回の連動プルダウンの応用。


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

前回使った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>


おわり。]]> jQuery https://nate.blog.shinobi.jp/jquery/%E9%80%A3%E5%8B%95%E3%83%97%E3%83%AB%E3%83%80%E3%82%A6%E3%83%B3%E3%82%92%E9%81%B8%E6%8A%9E%E3%81%97%E3%81%9F%E7%8A%B6%E6%85%8B%E3%81%A7%E8%A1%A8%E7%A4%BA Sun, 15 Sep 2013 13:43:12 GMT nate.blog.shinobi.jp://entry/12
親カテゴリを選ぶと、対応した子カテゴリを表示し、さらに子カテゴリを選ぶと孫カテゴリが・・・
という風なプルダウン。

連動プルダウンの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との連携も楽ですねー

おわり。]]> jQuery https://nate.blog.shinobi.jp/jquery/%E9%80%A3%E5%8B%95%E3%83%97%E3%83%AB%E3%83%80%E3%82%A6%E3%83%B3 Wed, 04 Sep 2013 13:31:09 GMT nate.blog.shinobi.jp://entry/11
使用するファイルは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 https://nate.blog.shinobi.jp/jquery/%E3%83%95%E3%82%A9%E3%83%AB%E3%83%80%E3%83%84%E3%83%AA%E3%83%BC%E3%81%AE%E8%A1%A8%E7%A4%BA Sun, 07 Apr 2013 00:53:48 GMT nate.blog.shinobi.jp://entry/10
使用するファイルは前回と同じく以下の５つです。
・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"]とすると垂直にメニューが並びます。

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

おわり。 ]]> jQuery https://nate.blog.shinobi.jp/jquery/%E3%83%89%E3%83%AD%E3%83%83%E3%83%97%E3%83%80%E3%82%A6%E3%83%B3%E5%9E%8B%E3%83%A1%E3%83%8B%E3%83%A5%E3%83%BC%E3%82%92%E5%9E%82%E7%9B%B4%E3%81%AB%E4%B8%A6%E3%81%B9%E3%82%8B Wed, 20 Mar 2013 14:02:22 GMT nate.blog.shinobi.jp://entry/9
サンプルコード＆ダウンロードは以下から。
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>

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

おわり。]]> jQuery https://nate.blog.shinobi.jp/jquery/%E6%B0%B4%E5%B9%B3%E3%83%89%E3%83%AD%E3%83%83%E3%83%97%E3%83%80%E3%82%A6%E3%83%B3%E5%9E%8B%E3%83%A1%E3%83%8B%E3%83%A5%E3%83%BC%E3%81%AE%E8%A1%A8%E7%A4%BA Mon, 11 Mar 2013 17:37:43 GMT nate.blog.shinobi.jp://entry/8
コードのダウンロードは下記サイトから。

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>

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

おわり。 ]]> jQuery https://nate.blog.shinobi.jp/jquery/validate%E3%81%A7%E3%83%95%E3%82%A9%E3%83%BC%E3%83%A0%E5%85%A5%E5%8A%9B%E3%83%81%E3%82%A7%E3%83%83%E3%82%AF Wed, 06 Mar 2013 18:19:15 GMT nate.blog.shinobi.jp://entry/7 ソースコードのダウンロードはこちら

使い方

---

まずは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要素の内容がモーダルダイアログで表示されます。

サンプルはこちら

おわり。]]> jQuery https://nate.blog.shinobi.jp/jquery/%E3%83%A2%E3%83%BC%E3%83%80%E3%83%AB%E3%83%80%E3%82%A4%E3%82%A2%E3%83%AD%E3%82%B0%E3%81%AE%E8%A1%A8%E7%A4%BA Thu, 28 Feb 2013 04:58:39 GMT nate.blog.shinobi.jp://entry/6 オプションでいろいろ弄れるようなので、自分好みのものを作れるみたいです。

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

使い方

---

まずは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 // フェードアウト速度 });

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

おわり。]]> jQuery https://nate.blog.shinobi.jp/jquery/powertip%E3%81%A7%E3%83%84%E3%83%BC%E3%83%AB%E3%83%81%E3%83%83%E3%83%97%E3%82%92%E5%AE%9F%E8%A3%85 Thu, 21 Feb 2013 17:20:00 GMT nate.blog.shinobi.jp://entry/5