カテゴリー: JavaScript/JQuery

(32) 【JQuery】 document.readyでページ表示時に処理を起動

よく忘れるので備忘録。

(1) WEBブラウザで「HTMLのロード完了時」に処理を起動する。

$(document).ready(function() {
  // do something
});

これは以下のように「(document).ready」の部分を省略して書ける。どちらも同じこと。

$(function() {
  // do something
});

(2) WEBブラウザで「HTML+その他のロード完了時」に処理を起動する。

その他: css, imgなど

$(window).load(function() {
  // do something
});

※JavaScriptで画像サイズなどの情報を使用する場合、document.ready ではなく window.load のタイミングで実行するべき。


(31) 【JQuery】 disabled状態をON/OFF

よく忘れるので備忘録。

(1) 現在のdisabled状態を取得する。

var val = $('xxxxx').attr('disabled');

(2) 任意のコントロールの disabled状態を設定する。

// disabledにする。
var val = $('xxxxx').attr('disabled', true);

// disabledを解除する。
var val = $('xxxxx').attr('disabled', false);

(30) 【JQuery】 radioボタンの状態を取得/変更

よく忘れるので備忘録。

(1) 選択されているradioの値を取得する。

セレクタの後ろに :checked を付けると選択中の radioボタンにアクセスできる。

var val = $('xxxxx:checked').val();

(2) 任意のradioを選択状態にする。

※Nは value属性値

$('xxxxx').val(['N']);

(27) 【JQuery】 チェックボックスの状態を取得/変更

よく忘れるので備忘録。

(1) checkboxのチェック状態を取得する。

1) チェック状態を取得する。

var chk = $('xxxxx').prop('checked');

2) チェックON/OFFを捕捉する。

$(function(){
  $('xxxxx').on('click', function(){
    var chk = $(this).prop('checked');
  });
});

(2) checkboxのチェック状態を設定する。

1) チェックを付ける。

$('xxxxx').prop('checked', true);

2) チェックを外す。

$('xxxxx').prop('checked', false);

(26) ページトップに戻るボタン

(1) やりたいこと

ホームページが縦に長くなってしまったとき、一気にページ先頭に戻りたい時がある。

パソコンでの閲覧時にはキー操作で一気に戻れたりするので必要に感じることは少ないが、
携帯やスマホでは操作手段が限られるため、一押しで先頭に戻れるボタンがあると便利だ。

今回は以下の仕様で「ページトップに戻るボタン」を実装してみる。
1) ある程度下方向にスクロールしたときにボタンが出現すること。
2) ボタンは常に画面の右下に表示すること。
3) ボタン押下時はスクロールしながらページトップに戻ること。

(2) 実現方法

実装したサンプルページはこちら。
https://hp.dogrow.net/sample/00026/

自分の頭の中を整理するために、HTML, CSS, JSの 3ファイルに分けて実装する。

1) index.html

17行目:「ページ先頭に戻るボタン」を配置している。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="./style.css" />
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script type="text/javascript" src="./script.js"></script>
</head>
<body>

<h1>ページ先頭です。</h1>

<div style="height:2000px;padding:10px;border:2px #000 solid;background-color:#eee;text-align:center;">
長いコンテンツ
</div>

<div class="pagetop_button">↑戻る↑</div>

</body>
</html>

2) style.css

4行目: 他の要素に隠れることなく常に表示させるため。
5行目: ページ表示の初期状態では非表示。スクロール時にjsで表示に切り替えている。
6行目~8行目: ページ上での表示位置を固定にする。
11行目以下は見た目を飾っただけなので、機能を実現する上では不要なもの。

@charset "UTF-8";

div.pagetop_button{
  z-index: 9999;
  display: none;
  position: fixed;
  bottom: 20px;
  right:  20px;
}

/* 以下、別になくてもよい装飾 */
div.pagetop_button{
  padding: 5px;
  background-color: #fff;
  border: 1px #f00 solid;
  border-radius: 5px;
  cursor:pointer;
}

3) script.js

5行目: 300ピクセルを超えて下方向にスクロールしたならばボタンを表示
7行目: 300ピクセル以下ならばボタンを非表示
13行目: ボタンが押されたならば、1000msの時間をかけてスクロール量0の位置まで移動する。

$(function(){
  var pagetop_button = $('.pagetop_button');
  /////////////////////////////////////////////////////////////////////
  $(window).scroll(function(){
    if ($(this).scrollTop() > 300){
      pagetop_button.fadeIn();
    }else{
      pagetop_button.fadeOut();
    }
  });
  /////////////////////////////////////////////////////////////////////
  pagetop_button.click(function(){
    $('html').animate({scrollTop:0}, 1000);
  });
});

(23) CREATEJSでアニメーション (#2) ボールがマウスに追従

前回の (22) CREATEJSでアニメーション (#1) を改造し、マウスの動きにボールを追従させてみる。



実行サンプルはこちらです。

■プログラム

プログラムの変更箇所は1関数だけ。

test.js

CjTest::moveBall()内に記述している移動先座標の算出処理をまるまる変更する。
便利なことに、stage内に入ったカーソルポインタの座標が stage.mouseX, stage.mouseY に格納されている。ボールはこの座標を目指して1回のtick関数実行時に
 カーソルポインタまでの距離 x 0.1 [pixel]
だけ移動させる。カーソルポインタまでの距離が短くなると 1回の移動距離も短くなり、まるで加速度がついているように見える。

moveBall: function(){
  this.sprite.x += (this.stage.mouseX - this.sprite.x) * 0.1;
  this.sprite.y += (this.stage.mouseY - this.sprite.y) * 0.1;
  this.stage.update();
}

実行サンプルはこちらです。
何だかペットのようでかわいいw


(21) JavaScriptファイルのサイズ削減

やりたいこと

JavaScriptファイルのダウンロード負荷を減らすために文字数を少なくしたい。
すなわち minified file にしたい。

実現方法

sedコマンドで以下のテキスト変換を行う。
1) 行頭の空白文字を削除
2) コメント削除
3) 改行文字削除
4) 空行削除
5) 連続した空白文字を一つにまとめる

上記の5つを以下のコマンドで行う。

TRG=xxxxxx.js
sed -i -r -e "s/^\s+//g" $TRG
sed -i -e "s%//.*$%%g" $TRG
sed -i -e "/^$/d" $TRG
sed -i -e ':loop; N; $!b loop; s/\n//g'  $TRG
sed -i -r -e "s/\s+/ /g" $TRG