hyuki/README.md Secret

## README.md

      
    Raw
  

              README.md
            
          
    toast-it


画面の左上に通知を5秒だけ出す、いわゆるtoastの単純な実装です。


## index.html
<!doctype html>
<html>
  <head>
    <meta charset="utf-8">
    <title>toast-it</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@exampledev/new.css@1.1.2/new.min.css">
  </head>
  <body>

    <button type="button" id="TOAST-BUTTON" href="#">showToast</button>

    <script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>

    <script src="toast-it.js"></script>

    <script>
      $(function() {
        $('#TOAST-BUTTON').click(function() {
          showToast('HELLO!');
        });
      });
    </script>

  </body>
</html>

## toast-it.js
// toast-it.js

function initToast() {
  const e = `<div id="TOAST-IT">TOAST-IT</div>`;
  const o = $(e);
  o.prependTo('body');
  o.css("position", "fixed");
  o.css("z-index", "5000");
  o.css("top", "0px");
  o.css("left", "0px");
  o.css("padding", "10px");
  o.css("margin", "10px");
  o.css("border-radius", "5px");
  o.css("display", "none");
  o.css("color", "white");
  o.css("background-color", "#1976D2");
}

function showToast(s) {
  $('#TOAST-IT').text(s);
  $('#TOAST-IT').show();
  setTimeout(function() {
    $('#TOAST-IT').hide();
  }, 5000);
}

initToast();
	<!doctype html>
	<html>
	<head>
	<meta charset="utf-8">
	<title>toast-it</title>
	<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@exampledev/new.css@1.1.2/new.min.css">
	</head>
	<body>

	<button type="button" id="TOAST-BUTTON" href="#">showToast</button>

	<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>

	<script src="toast-it.js"></script>

	<script>
	$(function() {
	$('#TOAST-BUTTON').click(function() {
	showToast('HELLO!');
	});
	});
	</script>

	</body>
	</html>
	// toast-it.js

	function initToast() {
	const e = `<div id="TOAST-IT">TOAST-IT</div>`;
	const o = $(e);
	o.prependTo('body');
	o.css("position", "fixed");
	o.css("z-index", "5000");
	o.css("top", "0px");
	o.css("left", "0px");
	o.css("padding", "10px");
	o.css("margin", "10px");
	o.css("border-radius", "5px");
	o.css("display", "none");
	o.css("color", "white");
	o.css("background-color", "#1976D2");
	}

	function showToast(s) {
	$('#TOAST-IT').text(s);
	$('#TOAST-IT').show();
	setTimeout(function() {
	$('#TOAST-IT').hide();
	}, 5000);
	}

	initToast();