公式サイトを確認すると、最新版のバージョンは3.5.1となっています。
フロントを構築する場合は、最新のjQueryを使わないと駄目とのこと。
なるほど、勉強になりますね。
Category: jQuery
jQueryとCSSでタブメニューを切り替える
yahooトップのタブのように、クリックしてもページ遷移しないタブを作りたい。
### jQueryとCSSで作る場合
index.html
– jqueryの制御は後から書きます。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <link rel="stylesheet" href="styles.css" type="text/css"> <script src="https://code.jquery.com/jquery-3.5.1.js" integrity="sha256-QWo7LDvxbWT2tbbQ97B53yJnYU3WhH/C8ycbRAkjPDc=" crossorigin="anonymous"></script> </head> <body> <div class="tab"> <ul class="tab-menu"> <li class="tab-item active">タブ1</li> <li class="tab-item">タブ2</li> <li class="tab-item">タブ3</li> </ul> <div class="tab-box"> <div class="tab-content show">コンテンツ1</div> <div class="tab-content">コンテンツ2</div> <div class="tab-content">コンテンツ3</div> </div> </div> <script> </script> </body> </html>
styles.css
* {
box-sizing: border-box;
}
ul, li {
padding: 0;
margin: 0;
}
li {
list-style: none;
}
.tab {
width: 500px;
max-width: 100%;
margin: auto;
}
.tab-menu{
display: flex;
}
.tab-item {
text-align: center;
padding: 10px 0;
cursor: pointer;
flex-grow: 1;
border-top: 1px solid skyblue;
border-left: 1px solid skyblue;
border-right: 1px solid skyblue;
}
.tab-item:not(:first-child){
border-left: none;
}
.tab-item.active {
background: red;
color: white;
}
.tab-box {
height:200px;
display: flex;
justify-content: center;
align-items: center;
border: 1px solid skyblue;
}
.tab-content {
display: none;
font-size: 40px;
}
.tab-content.show {
display: block;
}
jquery
– タブclick時にactiveとshowのclassをremoveして、clickされたタブのindexと同じindexにcontentのclassにshowを追加する
– タブとコンテンツの数、順番を一致させる必要がある
<script>
$(function(){
$('.tab-item').click(function(){
$('.active').removeClass('active');
$(this).addClass('active');
$('.show').removeClass('show');
const index = $(this).index();
$('.tab-content').eq(index).addClass('show');
})
})
</script>
### CSSのみで作る場合
index.html
<div class="tab"> <input id="menu1" class="tab-input" name="menu" type="radio" checked="checked"> <label for="menu1" class="tab-item">タブ1</label> <div class="tab-content">コンテンツ1</div> <input id="menu2" class="tab-input" name="menu" type="radio"> <label for="menu2" class="tab-item">タブ2</label> <div class="tab-content">コンテンツ2</div> <input id="menu3" class="tab-input" name="menu" type="radio"> <label for="menu3" class="tab-item">タブ3</label> <div class="tab-content">コンテンツ3</div> </div>
* {
box-sizing: border-box;
}
input[type="radio"]{
display:none;
}
.tab {
width: 500px;
max-width: 100%;
margin: auto;
display: flex;
flex-flow: wrap;
}
.tab-item {
display: block;
flex-grow: 1;
text-align: center;
padding: 10px 0;
cursor: pointer;
order: -1;
border-top: 1px solid skyblue;
border-left: 1px solid skyblue;
border-right: 1px solid skyblue;
}
.tab-item:not(:first-of-type){
border-left: none;
}
.tab-input:checked + .tab-item {
background: red;
color: white;
}
.tab-content {
width: 100%;
height: 200px;
display: none;
justify-content: center;
align-items:center;
font-size: 40px;
border: 1px solid skyblue;
}
.tab-input:checked + .tab-item + .tab-content {
display: flex;
}
input formとradioボタンで切り替えるってなんか違和感あるけど、うまく表示されますね。
思ったより簡単でワロタ。
DatePickerでのstart〜endの制御
開始日を入力したら終了日は開始日以降にする
終了日を入力したら開始日は終了日以前しか入力できないようにする
<input type="text" name="start"> ~ <input type="text" name="end">
<script>
var format = 'yy/mm/dd';
var start = $("[name=start]").datepicker({
dateFormat: 'yy/mm/dd'
}).on("change", function(){
end.datepicker("option", "minDate", getDate(this));
});
var end = $("[name=end]").datepicker({
dateFormat: 'yy/mm/dd'
}).on("change", function(){
start.datepicker("option", "maxDate", getDate(this));
});
function getDate(element){
var date;
try {
date = $.datepicker.parseDate(format, element.value);
} catch(error){
date = null;
}
return date;
}
</script>
コントローラ(サーバ側)で制御するよりも、フロントで制御した方がユーザフレンドリーです。
TinyMCE5.xでtoolbarをbottomに変更する方法
<script>
tinymce.init({
//省略
toolbar_location : "bottom",
});
</script>
これこれ。結構探した。
https://github.com/tinymce/tinymce/issues/4618#issuecomment-586529196
TinyMCE 5.2.0 was released to the community earlier this week, which added a new toolbar_location setting that can be used to set where the toolbar should be rendered. The valid values are 'top' (default) or 'bottom'. Here's a fiddle to show how to use the new setting/feature: http://fiddle.tinymce.com/8bhaab/1. There is one issue we're aware of with the new feature when opening an inline dialog (eg search and replace) when sticky toolbars is also enabled. We'll include a fix for that in a future release. Please let us know if you have any further issues.
TinyMCE5.2.1を使おう
1. self-hostedよりjsファイル群をdownloadする
https://www.tiny.cloud/get-tiny/self-hosted/
2. 日本語をダウンロード
https://www.tiny.cloud/get-tiny/language-packages/
-> ja.jsをtinymce/langs配下に配置する
3. Tool Control
https://www.tiny.cloud/docs/advanced/editor-control-identifiers/#toolbarcontrols
– デフォルトでpタグが入るので、forced_root_blockをnullにする
– 必要最低限
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>TinyMCE</title>
<script src="js/tinymce/tinymce.min.js"></script>
<script>
tinymce.init({
selector: "#tiny",
language: "ja",
menubar: false,
plugins: "emoticons",
toolbar: "bold italic underline strikethrough emoticons",
forced_root_block : '',
statusbar: false,
});
</script>
</head>
<body>
<h1>TinyMCEテスト</h1>
<form method="post" action="confirm.php">
<textarea id="tiny" name="input"></textarea>
<input type="submit" value="送信">
</form>
</body>
</html>
emoticonsが前より大量に増えていて感動した。
stopPropagation();
$(document).on('dragover dragenter dragend drag drop', function(e){
e.stopPropagation();
e.preventDefault();
});
> stopPropagation
> 親要素への伝播をキャンセルする。
ん？
Drag&Dropを使ってみよう
<head>
<meta charset="utf-8">
<title>Document</title>
<style>
.dd {
line-height:300px;
text-align:center;
font-size:12px;
color:#ccc;
width:300px;
height:300px;
border:1px dotted #ccc;
}
</style>
</head>
<body>
<div class="dd">ファイルをドラッグ&ドロップしてください</div>
<script
src="https://code.jquery.com/jquery-3.4.1.min.js"
integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo="
crossorigin="anonymous"></script>
<script>
$(".dd").on("drop", function(e){
e.preventDefault();
console.log(e.originalEvent.dataTransfer.files);
});
$(".dd").on("dragover",function(e){
e.preventDefault();
});
</script>
</body>
うん。
＞ベントが明示的に処理されない場合に user agent に、そのデフォルトアクションを通常どおりに行うべきではないと伝えます。
え？何を言ってるのかさっぱりわからない。
デフォルトの操作をさせないって意味？
drag系のイベントに以下があるが、dragとdrop, dragenterは解るが、、、
dragover dragenter dragend drag drop
あ、mozillaに書いてありますね。
https://developer.mozilla.org/ja/docs/Web/API/HTML_Drag_and_Drop_API
> dragenter
ドラッグ中に、マウスポインタが要素の上に乗った最初の時点で発行されます。
> dragover
このイベントは、ドラッグ中にマウスポインタが要素の上で動いた時に発行されます。
> drag
このイベントは、ドラッグ操作が行われている間、ドラッグ元の要素（※ dragstart イベントが発行された要素）において定期的に発行されます。
> drop
drop イベントは、ドラッグ操作の最後に、ドロップされた位置の要素において発行されます。
> dragend
ドラッグ元の要素は、ドロップに成功したかどうかに関わらず、ドラッグ操作が完了した時に dragend イベントを受け取ります。
なんだこれ、”drag”って、定期的に発行されるって、意味不明だな。
Datepickerの範囲指定
まず、普通のdatepicker
<script src="http://code.jquery.com/jquery-3.2.1.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css">
<input type="text" name="date" value="">
<script>
$("[name=date]").datepicker({
// YYYY-MM-DD形式で入力されるように設定
dateFormat: 'yy-mm-dd'
});
</script>
特に問題ありません。
で、これを今日からにするには、minDateを0dに指定します。
<script>
$("[name=date]").datepicker({
// YYYY-MM-DD形式で入力されるように設定
dateFormat: 'yy-mm-dd',
minDate: '0d'
});
</script>
年末を指定するにはどうするかだな。
+1y -1dだと駄目みたい。
ちょっとあかんあー
let disable new line by jQuery
prevent a line break
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
<!--
<textarea name="sample" cols="50" rows="10" wrap="soft"></textarea> -->
<form>
<textarea name="sample" cols="50" rows="10" class="cancel"></textarea>
<input type="submit">
</form>
<script>
$('.cancel').bind('keydown', function(e){
if(e.which == 13){
return false;
}
}).bind('blur', function(){
var $textarea = $(this),
text = $textarea.val(),
new_text = text.replace(/\n/g, "");
if(new_text!= text){
$textarea.val(new_text);
}
});
</script>
I can no longer break line when I press enter key within the textarea.
jQueryを使ったアコーディオン
<!Doctype html>
<html>
<head>
<meta charset="UTF-8">
<style>
#acMenu dt {
display:block;
width:250px;
height:50px;
line-height: 50px;
text-align:center;
border:#666 1px solid;
cursor:pointer;
}
#acMenu dd{
background:#f2f2f2;
width:250px;
height:50px;
line-height:50px;
margin-left:0px;
text-align:center;
border:#666 1px solid;
display:none;
}
</style>
</head>
<body>
<h1>よくある質問</h1>
<dl id="acMenu">
<dt>Q1. アコーディオンメニュー</dt>
<dd>A1. アコーディオンメニュー</dd>
<dt>Q2. アコーディオンメニュー</dt>
<dd>A2. アコーディオンメニュー</dd>
<dt>Q3. アコーディオンメニュー</dt>
<dd>A3. アコーディオンメニュー</dd>
</dl>
<script
src="https://code.jquery.com/jquery-3.3.1.min.js"
integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
crossorigin="anonymous"></script>
<script>
$(function(){
$("#acMenu dt").on("click", function(){
$(this).next().slideToggle();
});
});
</script>
</body>
</html>
OK!
これをフロントに当てはめていきます。
さて～～～～～～～～～～～、front側の画面は全部できたので、いよいよlaravel構築をしていきます。
長かった、2週間位？
次は、laravelなんだが、まずはDBのtableを作って、中にデータを入れて、表示するところからかな。
あ、思い出した、40X系のページ、50X系のページ、メンテナンス中画面のページを作成しないと駄目ですね。