jQuery – ソフトウェアエンジニアの技術ブログ：Software engineer tech blog

[jQuery3.5.1]最新版のバージョン

公式サイトを確認すると、最新版のバージョンは3.5.1となっています。

フロントを構築する場合は、最新の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.

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.

Category: jQuery

[jQuery3.5.1] 文字の大・中・小を制御する