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以上
ほう～
tableのtrにv-ifを使って条件分岐
まず、質問1がある。
<div id="app">
<table>
<tr>
<th>質問1</th><td><input type="text" size="40" value="" v-model="message"></td>
</tr>
<tr v-if="message">
<th>質問2</th><td><input type="text" size="40" value=""></td>
</tr>
</table>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="asset/js/main.js"></script>
(function(){
'use strict';
var vm = new Vue({
el: '#app',
data: {
message: ""
}
});
})();
質問1に値を入力すると、質問2が表示される。
天才！
同様に、権限を入力すると、担当者名が表示される。
<div id="content">
<h2>アカウント登録</h2>
<hr>
<form action="" method="post" id="form1">
<table id="tbl">
<tr>
<th>ログインID</th><td><input type="text" name="login" size="40" value=""></td>
</tr>
<tr>
<th>権限</th><td><input type="text" name="password" size="40" value="" v-model="message"></td>
</tr>
<tr v-if="message">
<th>担当者名</th><td><div id="app"><input type="text" name="password" size="40" value="" ></div></td>
</tr>
</table>
おおおおおおおおおおおおおおお
おもろいやんけ！
OKOK!