HTML CSS JavaScript

JavaScriptのイベントバブリングを視る。

2017年2月6日 Leave a comment

WebでJavaScriptを触っていると、イベントのバブリングという言葉に触れることがある。ざっくり説明すると、子要素で発生したイベントが親要素、その上の親要素と親のほうに(先祖要素)に伝達していく様子が、深海で出来… more →

ざっくりviewport

2017年1月18日 Leave a comment

スマートフォンサイトを作る際に避けて通れないのがmetaタグのviewport。適当に書いてたけど、ざっくり理解した。 viewportとは viewportは、スマートフォンやタブレット端末で、デバイスのサイズより大… more →

JavaScriptで日付と時間の操作はMoment.js

2016年11月29日 Leave a comment

JavaScriptで10日後を求めるときの計算が、以下の様な感じだった時に嫌悪感を覚えた方は何人いるだろうか。

var dt = new Date();
dt.setDate(dt.getDate() + 10);

1 2	var dt = new Date(); dt.setDate(dt.getDate() + 10);

インストール CDNにあったのでそのまま… more →

VisualStudio2015でSassを使う。

2016年6月21日 Leave a comment

Visual Studio 2015でSassファイルがサポートされた。 Sassとはなんぞや。詳しい情報は巷に結構あるので今回は割愛するが、簡単な例を出すと、以下のstyle.scssは、 [crayon-5df1… more →

テーブルの行()をクリックでinputをチェック

2015年9月30日 Leave a comment

テーブルで、行をクリックさせたら先頭のinputタグをチェックさせるような要望がちょこちょこあるので、備忘録。

<!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>

<!DOCTYPE html>

<html>

<head>

<title>trタグクリックでinputをチェック</title>

</head>

<body>

<h1>テーブルの行をクリックでinputをチェックさせる</h1>

<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>

$(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>

<!-- 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" />

$(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>

jQueryやjQuery… more →

HTML CSS JavaScript

JavaScriptのイベントバブリングを視る。

ざっくりviewport

JavaScriptで日付と時間の操作はMoment.js

VisualStudio2015でSassを使う。

テーブルの行()をクリックでinputをチェック

ざっくりとSelect2

TinyMCE jQuery (4.1.x) を、ざっくりと導入

IE8以前のaタグとbuttonタグの組み合わせは動かない

[Windows]NetBeansでSass(SCSS)を使う

jQuery UI の Datepicker (カレンダーから日付入力)