頭の中は異空間

ものづくり中心

【CSS, JavaScript】ちょっとしたネタや知ってると便利な知識

HTML CSS JavaScript

どうも。

 

知っておくことでちょっとした落とし穴を回避出来そうな知識と少しだけ便利なテクニックをば。

 

divの中身を敷き詰める

divはそのままmarginなしで並べても微妙に空白の感覚が空いてしまいます。それを無くしたい場合に。

<div class="xx"></div><div class="yy"></div><div class="zz"></div>

のように1列に並べればいいです。SRPGでマップチップを並べるためにviewを書きたいなら、例えばRailsのERBでは

<% for i in (1..10) %>
  <div class="xxxx"><% for j in (1..10) %><img src="img_path" width="" height="" alt="" /><% end %></div>
<% end %>

とすれば良し。赤字の部分がそうです。これを改行して見やすくすると...空白が出現しますｗ

上記は画像などを敷き詰める場合に利用出来ます。

 

JSのイベント発火

イベントを登録してそれを発火させるとき、普通はクリックしたら～とかマウスオーバーしたら～という条件で発火させますが、他のイベントを発火させた時にそれに連鎖して他のイベントを発火させたい、という場合

イベントを発火させるためのアクションを行うのではなく、他の何かしらのアクションをした時にそれ用の関数を利用する(.click()など)。

例えばaタグでファイルダウンロードさせたいけど、aタグに好みのスタイルを当てられない場合。view上はボタンで代用して、動作はaタグのものを利用したい場合のことです。

→aタグにイベント登録してそれを直接呼び出すのでなく、他の例えばボタンクリックした際に、イベント発火用の関数を呼び出す。

// 目的のイベント
・JS
$("a.xx").on('click', function() {
  ...
});

// こっちがボタンを押したら発火するイベント
$("button.yy").on('click', function() {
  // この1行で上記aタグに紐付けたイベントを発火
  $("a.xx").click();
});

・CSS
a.xx {
  display: none;
}
button.yy {
  buttonへのスタイルを当てる
}

上記で、buttonクリック時にaについたイベントを実行できる。回りくどい説明になってしまった。。

 

特定の処理をするためのイベントが複数ある場合

 DRYを貫き通すために、コードはなるべく共通化したいところ。JSなら、ファンクタを使います。この呼名はC++からきています。

var hoge = function() {
  ...
};

$("#xxxx,#yyyy").on('click', function() {
  hoge();
});
$("#zzzz").on('change', function() {
  hoge();
});

最初のvar hoge = function()で関数を変数hogeとして保存し、それを特定のイベント発火時に呼び出すだけ。これを利用すれば、関数定義は一度きり、呼び出すのは好きなときに何度でも。コード量を増やさずに複数のイベントに紐付けられることになります。

 

ちょっとしたことですが知っておくと開発するときに必ず役に立ちます。