ソフトウェアエンジニアの技術ブログ：Software engineer tech blog – Page 366 – 随机应变 ABCD: Always Be Coding and … : хороший

mermaidでシーケンス図

<!Doctype html>
<html>
<head>
    <meta charset="UTF-8">
</head>
<body>
    <div class="mermaid">
      sequenceDiagram
        A ->> B :要求
        B -->> A: 返答
    </div>
    <script src="https://unpkg.com/mermaid/dist/mermaid.min.js"></script>
    <script>
      mermaid.initialize({
        startOnLoad:true
      });
    </script>
</body>
</html>

よくできてんなー

Brabio

WBS、ガントチャートにbrabioというツールを使ってみます。

なんだこれ、ガント作成が超絶楽だ。

tinymceのpタグ無効化

tinymce.initを編集
force_br_newlines : true,　force_p_newlines : false,forced_root_block : ”,　とします。

tinymce.init({
        
        mode : "specific_textareas",
        editor_selector : "mceEditor",
        language: 'ja',
        force_br_newlines : true,
        force_p_newlines : false,
        forced_root_block : '',
        branding: false,
        init_instance_callback: function (editor) {
        editor.on('change', function (e) {
          $('#preview_area').html(editor.getContent());
      });
    }
    });

おお、おもったよりいいっすね。

ではコードをはめ込んでいきます。
プレビューがイマイチだなー。。

border-radiusでごまかしますw
うん、こんな感じかな。

smtp周りだな。
CSSでステップバーを作りたい。あああああああああああああああああ、先がなげーーーーーー

tinymceの日本語を使う

以下のURLからJapaneseを選択
https://www.tiny.cloud/get-tiny/language-packages/

downloadすると、ja.jsが出てくる。

js/tinymce/langs 配下に配置する。

tinymce.initにlanguage: ‘ja’を追加

<script src="asset/js/tinymce/tinymce.min.js"></script>
    <script>
    tinymce.init({
        selector: 'textarea',
        language: 'ja'
    });
    </script>

おお、これはすげーな。

1画面で複数のdatepickerを使用

formではidを変えます。

javascript側

<script>
  $('#datepicker, #update').datepicker({
    dateFormat: 'yy/mm/dd',
  });
</script>

idが同じだと動かないのでご注意を！

datepickerのUI

デフォルトのデザイン

<head>
	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/themes/base/jquery-ui.min.css">
</head>
<body>
<input type="text" id="datepicker">
<script
      src="https://code.jquery.com/jquery-3.3.1.min.js"
      integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
      crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<script>
	$('#datepicker').datepicker();
</script>
</body>

date形式は yy/mm/ddがいいかな。

<script>
	$('#datepicker').datepicker({
    dateFormat: 'yy/mm/dd',
  });
</script>

remodalを実装

<div class="button_wrapper remodal-bg">
         <button type="submit" value="送信" id="square_btn" onClick="location.href='#modal'">登録</button>
      </div>
      </form>

      <!-- remodal -->
      <div class="remodal" data-remodal-id="modal">
        <button data-remodal-action="close" class="remodal-close"></button>
        <h1>登録しますか</h1>
        <p>
          入力した内容で宜しいでしょうか？
        </p>
        <br>
        <button data-remodal-action="cancel" class="remodal-cancel">Cancel</button>
        <button data-remodal-action="confirm" class="remodal-confirm">OK</button>
      </div>
      <!-- /remodal -->

なるほどなるほど、フロント側の技術は大体OKかな。

remodalが上手く動かない。。。と思ったら

<head>
<link href="asset/css/remodal.css" rel="stylesheet">
<link href="asset/css/remodal-default-theme.css" rel="sytlesheet">
</head>
<body>
<div class="remodal-bg">
　 <a href="#modal">モーダル1</a>
</div>

<div class="remodal" data-remodal-id="modal">
  <button data-remodal-action="close" class="remodal-close"></button>
  <h1>Remodal</h1>
  <p>
    Responsive, lightweight, fast, synchronized with CSS animations, fully customizable modal window plugin with declarative configuration and hash tracking.
  </p>
  <br>
  <button data-remodal-action="cancel" class="remodal-cancel">Cancel</button>
  <button data-remodal-action="confirm" class="remodal-confirm">OK</button>
</div>

<script
  src="https://code.jquery.com/jquery-3.3.1.min.js"
  integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
  crossorigin="anonymous"></script>
<script src="asset/js/remodal.js"></script>
<script>
	$('[data-remodal-id=modal]').remodal();
</script>
</body>

ん、上手くいってない！？　何故？

色々試した挙句
よくみたら、rel=”sytlesheet”ってなってる。
cssが効いてない。

<head>
	<link href="asset/css/remodal.css" rel="stylesheet">
	<link href="asset/css/remodal-default-theme.css" rel="stylesheet">
</head>

逆説的だが、エラーを出すと、プラグインの理解が深まるという。。。なんちゅーこっちゃ。

さて、これを実装していきます。

remodal

公式
http://vodkabears.github.io/remodal/

github
https://github.com/VodkaBears/Remodal/

remodal.css、remodal-default-theme.css、remodal.jsをダウンロードします。githubだとminifyされてないですね。まーいいか。

jQuery 1.x系、2.x系、3.x系の違い

-IE8以前をサポートするかどうか
-2.X系と3.X系ではサポートしているブラウザに違いはなし。設計が見直し

3系
非推奨になっていたAPIが削除
IE9 以降
Chrome、Edge、Firefox、Safari の最新版とそのひとつ前のバージョン
Operaの最新版
iOS 7 以上のモバイルSafari
Android 4.0以上

ほう～