<div class="mermaid">
graph TD
ST[Start] --> IF{通信できる?}
IF1 -->|できる| PC1[処理]
IF1 -->|できない| ED[End]
PC1 --> ED
</div>
なるほど！？
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されてないですね。まーいいか。