JavaScriptのイベントバブリングを視る。
WebでJavaScriptを触っていると、イベントのバブリングという言葉に触れることがある。 ざっくり説明すると、子要素で発生したイベントが親要素、その上の親要素と親のほうに(先祖要素)に伝達していく様子が、深海で出来… more
WebでJavaScriptを触っていると、イベントのバブリングという言葉に触れることがある。 ざっくり説明すると、子要素で発生したイベントが親要素、その上の親要素と親のほうに(先祖要素)に伝達していく様子が、深海で出来… more
スマートフォンサイトを作る際に避けて通れないのがmetaタグのviewport。 適当に書いてたけど、ざっくり理解した。 viewportとは viewportは、スマートフォンやタブレット端末で、デバイスのサイズより大… more
JavaScriptで10日後を求めるときの計算が、以下の様な感じだった時に嫌悪感を覚えた方は何人いるだろうか。
1 2 |
var dt = new Date(); dt.setDate(dt.getDate() + 10); |
インストール CDNにあったのでそのまま… more
Visual Studio 2015でSassファイルがサポートされた。 Sassとはなんぞや。 詳しい情報は巷に結構あるので今回は割愛するが、簡単な例を出すと、 以下のstyle.scssは、 [crayon-6046… more
テーブルで、行をクリックさせたら先頭のinputタグをチェックさせるような要望がちょこちょこあるので、備忘録。
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 31 32 33 |
<!DOCTYPE html> <html> <head> <meta charset="utf-8"/> <title>trタグクリックでinputをチェック</title> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css"> </head> <body> <div class="container"> <h1>テーブルの行をクリックでinputをチェックさせる</h1> <table class="table table-bordered"> <tr> <td><input type="radio" name="rdo" value="a"></td> <td>これはaです</td> <td>DummyA</td></tr> <tr> <td><input type="radio" name="rdo" value="b"></td> <td>これはbです</td> <td>DummyB</td></tr> <tr> <td><input type="radio" name="rdo" value="c"></td> <td>これはcです</td> <td>DummyC</td></tr> <tr> <td><input type="radio" name="rdo" value="d"></td> <td>これはdです</td> <td>DummyD</td></tr> </table> </div> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <script type="text/javascript"> $(function(){ var $trList = $("tr:has(input)"); //trでinputタグをもつものを取得 $trList.each(function() { //取得したtrタグそれぞれに処理を行う var $input = $(this).find("input"); //trからinputタグを取得しておく。 $(this).click(function(){ $input.prop('checked',true); }); }); }); </script> </body> </html> |
使う機会は多いけど、少々物足りないHTMLのSelectタグことセレクトボックス。 項目数が多くなると、下に下にたどるめんどくささや、複数選択のUIのわかりにくさ等。 そんなSelectタグを簡単に使いやすく高機能にして… more
ざっくりとTinyMCEを導入する方法を記述する。 まずは、ココでTinyMCE4.1.6 jQuery packageをダウンロード。 落とした物を解凍し、任意のサイトのjsフォルダに、解凍したjsフォル… more
IE8 こと Internet Explorer 8 、もしくはそれ以前のIEでは、aタグとbuttonタグの組み合わせは動作しない。 今更、IE8を気にする必要もないかと思っていたが、未だにXPユーザーがいることと、古… more
Sassとは、CSSを書くためのメタ言語と呼ばれているもので、どうにもこうにも気が利かないCSSを便利にするために考えられたらしい。 しかし、少し特殊な書き方をするので、便利だがとっつきにくい感じだった模様。 そこで、S… more
jQuery UI のDatepickerで入力フォームでお手軽にカレンダーから入力できる。 コードはこんな感じ
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
<!-- jQuery UI テーマをCDNから読み込み --> <link rel="stylesheet" href="https://code.jquery.com/ui/1.11.4/themes/flick/jquery-ui.css"> <!-- jQuery, jQuery UI, jQuery UI Datepicker の 日本語化プラグイン をCDNから読み込み --> <script type="text/javascript" src="https://code.jquery.com/jquery-1.11.3.min.js"></script> <script type="text/javascript" src="https://code.jquery.com/ui/1.11.4/jquery-ui.min.js"></script> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1/i18n/jquery.ui.datepicker-ja.min.js"></script> <script type="text/javascript"> $(function(){ var t_date = $("#datepiek_test").val(); $("#datepick_test").datepicker(); $("#datepick_test").datepicker("option", "showOn", 'both'); $("#datepick_test").datepicker("option", "dateFormat", 'yy/mm/dd'); $("#datepick_test").val(t_date); }); </script> <input id="datepick_test" type="text" /> |
jQueryやjQuery… more