2019-02-06

jQueryでプルダウンの変更を取り消す

JavaScript

業務でプルダウン変更時に変更するかどうか確認メッセージを出したいと言われてjQuery使って実装した時のサンプル

サンプル

<!DOCTYPE html>
<html lang="jp">
<head>
	<meta charset="utf-8">
	<title>プルダウンの変更を取り消す</title>
	<meta name="description" content="">
	<meta name="author" content="">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<script src="./jquery-3.3.1.min.js"></script>
	<script>
	    $(document).ready(function(){
                var changePulldown = function() {
		    var value = $("#pulldown").val();
		    console.log("プルダウン初期化:value = " + value);
		    return function() {
		        if (confirm("プルダウンの変更を取り消しますか？")) {
                            $("#pulldown").val(value);
                        } else {
                            value = $("#pulldown").val();
                            console.log("プルダウン変更:value = " + value);
                        }
                    };
                };
                $("#pulldown").on("change", changePulldown());
           });
		
	</script>
</head>
<body>
<select id="pulldown">
	<option value="1">選択項目1</option>
	<option value="2">選択項目2</option>
	<option value="3">選択項目3</option>
</select>
</body>
</html>

画面読み込んだ時にプルダウン変更時のイベントにchangePulldown ()で返された関数をバインドします。

changePulldown ()実行時にvalueに選択してる値が保持され、

プルダウン変更時に確認ダイアログが表示され、変更を取り消す場合はvalueの値を再設定。

変更を有効にする場合はvalueに現在選択している値を設定します。

ちなみにval()で値を設定した時にchangeイベントは発生しません。

サンプル

2018-04-10

cssフレームワーク skeletonで雛型作成

css

趣味のサイト作成にcss フレームワークのskeletonを使ってみることにしました

Bootstrapも触ってみたいなと思いつつ個人のサイトでは持て余しそうなので・・・

skeletonは非常にシンプルで必要最小限の機能だけ提供してくれます

構成はヘッダ、メニュー、メインコンテンツ、サイドメニュー、フッターという定番のやつ

サンプル

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>サンプルページ</title>
  <meta name="description" content="">
  <meta name="author" content="">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link href="http://fonts.googleapis.com/css?family=Raleway:400,300,600" rel="stylesheet" type="text/css">
  <link rel="stylesheet" href="./css/normalize.css">
  <link rel="stylesheet" href="./css/skeleton.css">
</head>
<body>
  <div class="container">
    <div class="row">
      <div class="eight columns"><h1>サイト名</h1></div>
      <div class="two columns">atom</div>
      <div class="two columns">rss</div>
    </div>
    <div class="row">
      <ul>
        <li style="display:inline-block;padding:5px;">メニュー1</li>
        <li style="display:inline-block;padding:5px;">メニュー2</li>
        <li style="display:inline-block;padding:5px;">メニュー3</li>
        <li style="display:inline-block;padding:5px;">メニュー4</li>
      </ul>
    </div>
    <div class="row">
      <div class="nine columns">
        <section>
          <div>
            <h5>タイトル</h5>
            <div>あいうえおかきくけこさしすせそたちつてとなにぬねのはひふへほまみむめもやゆよらりるれろわをん・・・</div>
          </div>
          <div>
            <h5>タイトル</h5>
            <div>あいうえおかきくけこさしすせそたちつてとなにぬねのはひふへほまみむめもやゆよらりるれろわをん・・・</div>
          </div>  
        </section>
      </div>
      <div class="three columns">
        <aside>
          <h5>サイドメニュー</h5>
          <div>
             <ul>
              <li>サイドメニュー1</li>
              <li>サイドメニュー2</li>
              <li>サイドメニュー3</li>
             </ul>
          </div>
        </aside>
        <aside>
          <h5>スポンサーリンク</h5>
          <div>
             
          </div>
        </aside>
      </div>
    </div>
    <div>
      <div class="twelve columns">フッター</div>
    </div>
  </div>
</body>
</html>

サンプル
http://retro.kansai-fan.com/sample1.html

サンプル(ボーダー付)
http://retro.kansai-fan.com/sample2.html

normalize.cssとskeleton.cssを読み込めばあとはルールに従ってマークアップするだけ

グリッドは12カラムの構成

全体のdivのclassに”container”を指定、その子要素のdivに”row”を指定

その子要素を3カラムと9カラムにしたいならclassに"three columns"と"nine columns"を指定したdivを追加するだけ

グリッドレイアウトが非常に簡単に作成できました

サイト特有の装飾は独自のcssを作ればよいかと

2018-04-04

Apache Commons StringUtilsのisEmptyとisBlankの違いをふと調べてみた

Java

長年使い続けているStringUtilsのisEmptyとisBlankの違いを今更ながら調べてみました

Apache Commonsのサイトからソースをダウンロードして確認したところ

isEmpty

public static boolean isEmpty(final CharSequence cs) {
    return cs == null || cs.length() == 0;
}

引数の文字列がnullか長さが0なら空と判定されます
trimしてないのでスペースが含まれる場合等は空と判定されません

isBlank

public static boolean isBlank(final CharSequence cs) {
    int strLen;
    if (cs == null || (strLen = cs.length()) == 0) {
        return true;
    }
    for (int i = 0; i < strLen; i++) {
        if (!Character.isWhitespace(cs.charAt(i))) {
            return false;
        }
    }
    return true;
}