JavaScriptの覚書 | ワクガンス

ページネーション(Bootstrap4対応) | PaginationRain.js

Demo

HTML

<link href="bootstrap.min.css" rel="stylesheet">

<script src="jquery3.js"></script>	<!-- jquery-3.3.1.min.js -->
<script src="bootstrap.bundle.min.js"></script>
<script src="PaginationRain.js"></script>
<script src="script.js"></script>
～略～
	
<table id="tbl1" class="table">
	<thead>
		<tr><th>No</th><th>分類</th><th>種別</th><th>名前</th><th>学名</th><th>レッドデータ</th></tr>
	</thead>
	<tbody>
		<tr><td>2</td><td>両生類</td><td>サンショウウオ</td><td>アカイシサンショウウオ</td><td>Hynobius katoi</td><td>絶滅危惧IB類</td></tr>
		<tr><td>3</td><td>両生類</td><td>サンショウウオ</td><td>ハクバサンショウウオ</td><td>Hynobius hidamontanus</td><td>絶滅危惧IB類</td></tr>
		<tr><td>4</td><td>両生類</td><td>サンショウウオ</td><td>ホクリクサンショウウオ</td><td>Hynobius takedai</td><td>絶滅危惧IB類</td></tr>
		<tr><td>5</td><td>両生類</td><td>サンショウウオ</td><td>オオイタサンショウウオ</td><td>Hynobius dunni</td><td>絶滅危惧II類</td></tr>
		<tr><td>6</td><td>両生類</td><td>サンショウウオ</td><td>オオダイガハラサンショウウオ</td><td>Hynobius boulengeri</td><td>絶滅危惧II類</td></tr>
		<tr><td>7</td><td>両生類</td><td>サンショウウオ</td><td>オキサンショウウオ</td><td>Hynobius okiensis</td><td>絶滅危惧II類</td></tr>
		<tr><td>8</td><td>両生類</td><td>サンショウウオ</td><td>カスミサンショウウオ</td><td>Hynobius nebulosus</td><td>絶滅危惧II類</td></tr>
		<tr><td>9</td><td>両生類</td><td>サンショウウオ</td><td>トウキョウサンショウウオ</td><td>Hynobius tokyoensis</td><td>絶滅危惧II類</td></tr>
		<tr><td>10</td><td>両生類</td><td>サンショウウオ</td><td>ベッコウサンショウウオ</td><td>Hynobius stejnegeri</td><td>絶滅危惧II類</td></tr>
		<tr><td>11</td><td>両生類</td><td>サンショウウオ</td><td>キタサンショウウオ</td><td>Salamandrella keyserlingii</td><td>準絶滅危惧</td></tr>
		<tr><td>12</td><td>両生類</td><td>サンショウウオ</td><td>イシヅチサンショウウオ</td><td>Hynobius hirosei</td><td>準絶滅危惧</td></tr>
	</tbody>
</table>

<hr>

<button type="button" class="btn btn-warning btn-sm" onclick="remakeHtmlTbl()">テーブルを動的に作り直してからページネーションを再適用</button>

	

JavaScript

let paginationRain
$(() =>{
	paginationRain = new PaginationRain('tbl1',{cur_page_num:0, search_cols_str:'1,2,3'});
});


function remakeHtmlTbl(){
	let trs_html = '';
	for(let i=0;i<40;i++){
		trs_html += `
			<tr>
				<td>${i}</td>
				<td>テスト</td>
				<td>種別${i}</td>
				<td>テストネーム${i}</td>
				<td>Sample</td>
				<td>XXX</td>
			</tr>
			`;
	}
	$('#tbl1 tbody').html(trs_html);
	paginationRain.refresh();
}
	

PaginationRain.js


2022-1-21 | 2022-2-9

モーダル化ライブラリ | modal_cat.js

Demo GitHubソースコード

HTML

<div><button type="button" class="btn btn-success" onclick="openModal()">開く</button></div>
<div id="sample_modal">
	<h3>イエスが預言した終わりの日の前兆</h3>
	<ul>
		<li>世界大戦</li>
		<li>各地で起こる食料不足</li>
		<li>あちこちで起こる大地震</li>
		<li>世界的な流行病</li>
		<li>恐ろしい光景</li>
		<li>天からの大きなしるし</li>
	</ul>
	#預言　#予言
	<div><button type="button" class="btn btn-primary" onclick="closeModal()">閉じる</button></div>
</div>
	

JavaScript

var modalCat;
$(()=>{
	
	modalCat = new ModalCat();
	modalCat.modalize('sample_modal');
	
});

function openModal(){
	modalCat.open();
}

function closeModal(){
	modalCat.close();
}
	

modal_cat.js

/**
 * モーダル化ライブラリ
 * @since 2022-1-21
 * @version 1.0.0
 * @auther amaraimusi
 * @license MIT
 */
class ModalCat{
	
	modalize(xid){
		
		let main_xid = xid + '_js_main'; // xidで指定した要素のラップ要素（指定要素の親要素）
		let close_xid = xid + '_js_modal_close';// id属性名：背景クリックによる閉じる

		let content = jQuery('#' + xid);
		content.wrap(`<div id='${main_xid}'></div>`); // モーダル化制御のためmain要素でラッピング
		let main = jQuery('#' + main_xid);
		
		let bg_close_html = `<div id='${close_xid}'></div>`;
		main.prepend(bg_close_html);
		
		let bgClose = jQuery(main.find('#' + close_xid)); // 背景クリック閉じる用要素
		
		main.css({
			display: 'none',
			height: '100vh',
			position: 'fixed',
			top: '0',
			left: '0',
			width: '100vw',
		});
		
		bgClose.css({
			background: 'rgba(0,0,0,0.8)',
			height: '100vh',
			position: 'absolute',
			width: '100vw',
		});
		
		content.css({
			background: '#fff',
			left: '50%',
			padding: '40px',
			position: 'absolute',
			top: '50%',
			transform: 'translate(-50%,-50%)',
			width: '60%',
		});

		this.main = main;

		bgClose.on('click',()=>{
			this.main.fadeOut();
			return false;
		});
		
	}
	
	open(){
		this.main.fadeIn();
	}
	
	close(){
		this.main.fadeOut();
	}
}
	

2022-1-21

ポップアップ | PopupCat.js

Demo GitHub

HTML

	<script src="/note_prg/js/jquery.min.js"></script>	
	<script src="PopupCat.js"></script>
	<script src="script.js"></script>

	～略～
	
	<div  id="example1" style="width:25vw;height:20vh;background-color:#b5cffb">あいうえお</div>
	<button type="button" onclick="test1()">ポップアップを表示</button>
	

script.js

let g_popupCat;
$(()=>{

	g_popupCat = new PopupCat();
	g_popupCat.popupize('example1');
	
});

function test1(){
	
	g_popupCat.pop(()=>{
		alert('事後コールバック発動');
	});

}
	

2022-1-29

自身のクラス名を取得する | this.constructor.name

class Animal{
	test(){
		console.log(this.constructor.name);
	}
}
	

2022-2-2

時間差ポップアップ | ポップアップを追加してブラウザリロードした後、ポップアップを表示

Demo GitHub PopupLion.js

HTML

<script src="jquery.min.js"></script>	
<script src="PopupCat.js"></script>
<script src="PopupLion.js"></script>
	～ 略 ～
	
<div>
	<button type="button" onclick="addPopupCat('赤猫', 4)" class="btn btn-primary">赤猫</button>
	<button type="button" onclick="addPopupCat('灰猫', 2)" class="btn btn-primary">灰猫</button>
	<button type="button" onclick="addPopupCat('猫年寄り', 17)" class="btn btn-primary">猫年寄り</button>
	<button type="button" onclick="addPopupCat('茶白', 5)" class="btn btn-primary">茶白</button>
	<button type="button" onclick="addPopupDog('おじいさんの犬', '臭くない')" class="btn btn-primary">おじいさんの犬</button>
	<button type="button" onclick="addPopupDog('きれいな犬', '臭い')" class="btn btn-primary">きれいな犬</button>
</div>

<div style="margin-top:30px;">
	<button type="button" onclick="releasePopup()" class="btn btn-success">ポップアップを解放表示する</button>
</div>

<div  id="example1" style="padding:20px;width:25vw;height:25vh;background-color:#b5cffb;display:none">
	<div>猫名：<span id="cat_name"> - </span></div>
	<div>年齢：<span id="cat_age"> - </span></div>
</div>

<div  id="example2" style="padding:20px;width:30vw;height:20vh;background-color:#b0da98;display:none">
	<div>イヌ名：<span id="dog_name"> - </span></div>
	<div>臭さ：<span class="smell"> - </span><span class="smell text-primary"> - </span><span class="smell text-danger"> - </span></div>
</div>
	

JavaScript

let g_popupLion;
$(()=>{

	g_popupLion = new PopupLion();
	
	g_popupLion.releasePopup();
	
});

// ポップアップを追加する
function addPopupCat(cat_name, cat_age){
	let data = [
		{'jq_slt':'#cat_name','value':cat_name},
		{'jq_slt':'#cat_age','value':cat_age},
	];
	g_popupLion.addPopup('example1', data);
}


function addPopupDog(dog_name, smell){
	let data = [
		{'jq_slt':'#dog_name','value':dog_name},
		{'jq_slt':'.smell','value':smell},
	];

	g_popupLion.addPopup('example2', data);
}

// ポップアップをリリースする
function releasePopup(){
	g_popupLion.releasePopup();
	
}
	

20222-17

数値チェック | 数字チェック | 自然数を正規表現でチェックする

let str = '123';
if(/^([1-9]\d*|0)$/.test(str)){
	console.log('数値です');
}

2022-10-20

検索機能付きセレクトボックス | select2

Vue.jsとは併用ができない。Vue.jsのテンプレートとコンポーネントによる拡張機能を利用しなくてはならない。

Demo

HTML

		<link href="css/select2.min.css" rel="stylesheet">
		<script src="/note_prg/js/jquery.min.js"></script>	
		<script src="js/select2.min.js"></script>
	
		～略～
		
		<select name="" id="animal_select">
		<option >-- レッドデータブック --</option>
		<option value="1">アベサンショウウオ</option>
		<option value="2">アカイシサンショウウオ</option>
		<option value="42">リュウキュウアカガエル</option>
		<option value="43">アカウミガメ</option>
		<option value="44">タイマイ</option>
		<option value="45">アオウミガメ</option>
		<option value="47">リュウキュウヤマガメ</option>
	</select>
	

JavaScript

	$(()=>{
		
		$('#animal_select').select2({
	    width: '300px',
	    language: 'ja', // 言語
	    tags: true
	  });
	});
	

2022-10-25

datalistによるSELECTのような使い方 | サジェスト（入力候補）と実際の入力値が異なる場合

Demo

HTML

<input list="animal_dlist" onchange="change1(this)" >
<datalist id="animal_dlist" >
    <option value="イモリ">
    <option value="カエル">
    <option value="サンショウウオ">
    <option value="ヒキガエル">
</datalist>
	

JavaScript

let animalList = {};

$(()=>{

	animalList['imori'] = 'イモリ';
	animalList['kaeru'] = 'カエル';
	animalList['sanshou-uo'] = 'サンショウウオ';
	animalList['hiki-gaeru'] = 'ヒキガエル';
	
});

function change1(tb){
	
	let jqTb = jQuery(tb);
	let name1 = jqTb.val();
	
	name1 += '';
	name1 = name1.trim();

	let value = '';
	for(let key in animalList){
		let name2 = animalList[key];
		if(name1 == name2 || name1 == key){
			value = key;
		}
	}
	
	jqTb.val(value);

}
	

2022-11-7

xxx

2022-1-21