カテゴリー: jQuery

TinyMCE

文章を見たまま編集(WYSIWYG。What you see is what you get)できるエディタのライブラリ

-プラグインなどによる機能が豊富
-WordPressに採用
-ツールバーの追加、ボタン位置の入替や削除、独自ボタンの追加などカスタマイズが柔軟

tinyMCEのself hostedからdownloadする
https://www.tiny.cloud/download/self-hosted/

4.8.2が最新版
CDNもあるようですが、今回は最新版パッケージをダウンロードします。

minifiedされた　jquery.tinymce.min.jsを使うようですな。
プラグインはthemesなどバリエーションが豊富ですね。

githubはこちら
https://github.com/tinymce/tinymce
とりあえずforkしておきましょう。

早速vagrantで使ってみましょう。

<!Doctype html>
<html>
<head>
	<meta charset="UTF-8">
	<script src="tinymce/js/tinymce/tinymce.min.js"></script>
	<script>
	tinymce.init({
		selector: "#foo",
	});
</script>
</head>
<body>
	<h1>TinyMCEの動作テスト</h1>
	<textarea id="foo" name="foo">最初に入力する文章</textarea>
	<h2>入力チェック</h2>
</body>
</html>

devtoolで見てるが、仕組みがようわからん。。。

datepicker

  var dateFormat = 'yy-mm-dd';
  var form = document.getElementById('datepicker').value;
  $(function() {
    $("#datepicker").datepicker({
    	onClose: function(dateText, inst){
    		$('#datepicker2').datepicker('option', 'minDate', dateText);
    		$('#datepicker').val(dateText);
    	}
    });
    $("#datepicker2").datepicker({
    	onClose: function(dateText, inst){
    		$('#datepicker').datepicker('option', 'maxDate', dateText);
    		$('#datepicker2').val(dateText);
    	}
    });
  });

onClose
->DatePickerが閉じた時に実行
:function( String dateText, Object inst )

1.datepicker1が閉じるときに、datepicker2のminDateをdateTextにして、datapickerのvalをdateTextにする
2.datepicker2が閉じるときに、datepicker2のminDateをdateTextにして、datapickerのvalをdateTextにする

今日以前の日付にする

  var dateFormat = 'yy-mm-dd';
  var form = document.getElementById('datepicker').value;
  $(function() {
    $("#datepicker").datepicker({
    	dateFormat: dateFormat,
    	maxDate:0,
    	onClose: function(dateText, inst){
    		$('#datepicker2').datepicker('option', 'minDate', dateText);
    		$('#datepicker').val(dateText);
    	}
    });
    $("#datepicker2").datepicker({
    	dateFormat: dateFormat,
    	maxDate:0,
    	onClose: function(dateText, inst){
    		$('#datepicker').datepicker('option', 'maxDate', dateText);
    		$('#datepicker2').val(dateText);
    	}
    });
  });

来た！
今日以前の日付で、datapicker1のdateTextがdatapicker2のminDate, datapicker2のdateTextがdatapicker2のmaxDateになる。

クリックで開閉するアコーディオン

<style>
	.child{
		display:none;
	}
</style>

<ul>
	<li>
		<a class="toggle">サービス別</a>
		<ul class="inner child">
			<li><a href="#demo01">ビッグデータBI</a></li>
			<li><a href="#demo01">クラウドコンピューティング</a></li>
			<li><a href="#demo01">決済</a></li>
			<li><a href="#demo01">CRM(顧客管理)</a></li>
			<li><a href="#demo01">オープンソースソフトウェア</a></li>
		</ul>
	</li>
	<li>
		<a class="toggle">業種別</a>
		<ul class="inner child">
			<li>官公庁・自治体</li>
			<li>教育</li>
			<li>医療・ヘルスケア</li>
			<li>金融</li>
			<li>製造</li>
			<li>流通</li>
		</ul>
	</li>
	<li>
		<a class="toggle">導入事例</a>
		<ul class="inner child">
			<li>NASA</li>
			<li>学校法人伊藤学園</li>
			<li>東京信用金庫</li>
			<li>橋梁モニタリングシステム</li>
			<li>充電管理システム</li>
		</ul>
	</li>
</ul>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script>
	function demo01(){
		$(this).next().slideToggle(300);
	}
	$(".toggle").click(demo01);
</script>

slide toggleで開閉します。

jQuery アコーディオン

<style>
pannel {
	width:500px;
}
#pannel > dt {
	border-bottom: solid 1px white;
	background-color: #00BCD4;
	color: white;
	cursor: pointer;
	padding: 10px;
	font-weight: bold;	
}
#pannel > dd {
	border: solid 1px Sliver;
	margin: 0px;
	padding: 10px;
}

</style>
<dl id="pannel">
	<dt>Real-Time</dt>
	<dd>active users on site</dd>
	<dt>Audience</dt>
	<dd>Users, New Users, Sessions</dd>
	<dt>Acquision</dt>
	<dd>Oorganic Search</dd>
</dl>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script>
$(function(){
	$('#pannel > dd').hide();
	$('#pannel > dt')
		.click(function(e){
			$('+dd', this).slideToggle(100);
		})
});
</script>

datepickerを日本語化する

asset/datepicker-ja.js

jQuery(function($){
    $.datepicker.regional['ja'] = {
        closeText: '閉じる',
        prevText: '<前',
        nextText: '次>',
        currentText: '今日',
        monthNames: ['1月','2月','3月','4月','5月','6月',
        '7月','8月','9月','10月','11月','12月'],
        monthNamesShort: ['1月','2月','3月','4月','5月','6月',
        '7月','8月','9月','10月','11月','12月'],
        dayNames: ['日曜日','月曜日','火曜日','水曜日','木曜日','金曜日','土曜日'],
        dayNamesShort: ['日','月','火','水','木','金','土'],
        dayNamesMin: ['日','月','火','水','木','金','土'],
        weekHeader: '週',
        dateFormat: 'yy/mm/dd',
        firstDay: 0,
        isRTL: false,
        showMonthAfterYear: true,
        yearSuffix: '年'};
    $.datepicker.setDefaults($.datepicker.regional['ja']);
});

index.phpのheader

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1/jquery-ui.min.js"></script>
<script src="asset/datepicker-ja.js"></script>
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1/themes/flick/jquery-ui.css">

javascript lang:’ja’を追加

$(function() {
	var dateFormat = 'yy年mm月dd日';
    $("#datepicker").datepicker({
    	lang:'ja',
        dateFormat: dateFormat,
        minDate: 0,
        onSelect: function(dateText, inst) {
                    $("#date_val").val(dateText);
        }
    });
});

view -> OK!

土日選択不可

$(function() {
	var dateFormat = 'yy年mm月dd日';
    $("#datepicker").datepicker({
    	lang:'ja',
        dateFormat: dateFormat,
        minDate: 0,
        onSelect: function(dateText, inst) {
                    $("#date_val").val(dateText);
        }
    });
    $( "#datepicker" ).datepicker('option','beforeShowDay',function(date){
	    var ret = [(date.getDay() != 0 && date.getDay() != 6)];
	    return ret;
	});
});

jQuery

var navList, firstItem, link;

navList = $('.nav-list');
firstItem = navList.children().first();
link = firstItem.find('a');
link.attr('href','#');

var articleItems;

articleItems = $('.article-item');
articleItems.css('font-size','20px');

$('#input').on('change', function(){
  var val;
  var = $('#input').val();
  h1 = $('.articles').children('h1');
  h1.text(val);
});

var articleItems;

articleItems = $('.article-item');
ul = articleItems.find('ul');
ul.remove();

var family1, family2, bruce, madison, hunter;

family1 = $('#family1');
family2 = $('<div id="family2"><h1>Family 2</h1></div>');
bruce = $('<div id="#bruce"><h2>Bruce</h2></div>');
madison = $('<div id="#madison"><h3>Madison</h2></div>');
hunter = $('<div id="#hunter"><h3>Hunter<h3></div>');
  family2.insertAfter(family1);
  family2.append(bruce);
  bruce.append(madison);
  bruce.append(hunter);

function numberAdder(){
    var text, number;
    text = $(this).text();
    number = text.length;

    $(this).text(text + "" + number);
}
$('p').each(numberAdder);

$('#my-input').on('keypress', function(){
  $('button').remove();
});

pinpongゲーム

canvasを使って、x座標、y座標で、setTime関数で動かしています。

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Pong Game</title>
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<link rel="stylesheet" href="styles.css">
	<style>
		body {
			margin: 0;
			font-family: "Century Gothic";
			font-size: 16px;
		}
		#container {
			text-align: center;
			margin: 5px auto;
		}
		#mycanvas {
			background: #AAEDFF;
		}
		#btn {
			margin: 3px auto;
			width: 200px;
			padding: 5px;
			background: #00AAFF;
			color: #FFFFFF;
			border-radius: 3px;
			cursor: pointer;
		}
		#btn:hover {
			opacity: 0.8;
		}
	</style>
</head>
<body>
	<div id="container">
		<canvas width="280" height="280" id="mycanvas">
			Canvasに対応したブラウザを用意してください。
		</canvas>
		<div id="btn">START</div>
		<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
	<script>
		$(function(){
			var ctx,
				myPaddle,
				myBall,
				mouseX,
				score,
				scoreLabel,
				isPlaying = false,
				timerId;

			var canvas = document.getElementById('mycanvas');
			if (!canvas|| !canvas.getContext) return false;
			ctx = canvas.getContext('2d');

			var Label = function(x, y){
				this.x = x;
				this.y = y;
				this.draw = function(text){
					ctx.font = 'bold 14px "Century Gothic"';
					ctx.fillStyle = '#00AAFF';
					ctx.textAlign = 'left';
					ctx.fillText(text, this.x, this.y);
				}
			}
			var Ball = function(x, y, vx, vy, r){
				this.x = x;
				this.y = y;
				this.vx = vx;
				this.vy = vy;
				this.r = r;
				this.draw = function(){
					ctx.beginPath();
					ctx.fillStyle = '#FF0088';
					ctx.arc(this.x, this.y, this.r, 0, 2*Math.PI, true);
					ctx.fill();
				};
				this.move = function(){
					this.x += this.vx;
					this.y += this.vy;
					if (this.x + this.r > canvas.width || this.x - this.r < 0){
						this.vx *= -1;
					}
					if (this.y - this.r < 0){
						this.vy *= -1;
					}
					if (this.y + this.r > canvas.height){
						// alert("game over");
						isPlaying = false;
						$('#btn').text('REPLAY?').fadeIn();
					}
				};
				this.checkCollision= function(paddle){
					if ((this.y + this.r > paddle.y && this.y + this.r < paddle.y + paddle.h) &&
						(this.x > paddle.x - paddle.w / 2 && this.x < paddle.x + paddle.w /2)){
						this.vy *= -1;
						score++;
						if (score % 2 === 0){
							this.vx *= 1.3;
							paddle.w *= 0.9;
						}
					}
				}
			}

			var Paddle = function(w, h){
				this.w = w;
				this.h = h;
				this.x = canvas.width / 2;
				this.y = canvas.height - 30;
				this.draw = function(){
					ctx.fillStyle = '#00AAFF';
					ctx.fillRect(this.x - this.w / 2, this.y, this.w, this.h);
				};
				this.move = function(){
					this.x = mouseX - $('#mycanvas').offset().left;
				}
			};

			function rand(min, max){
				return Math.floor(Math.random() * (max - min + 1)) + min;
			}

			function init(){
				score = 0;
				isPlaying = true;
				myPaddle = new Paddle(100, 10);
				myBall = new Ball(rand(50, 250), rand(10, 80), rand(3, 8), rand(3, 8), 6);
				scoreLabel = new Label(10, 25);
				scoreLabel.draw('SCORE: ' + score);
			}
			

			function clearStage(){
				ctx.fillStyle = '#AAEDFF';
				ctx.fillRect(0, 0, canvas.width, canvas.height);
			}

			function update(){
				clearStage();
				scoreLabel.draw('SCORE: ' + score);
				myPaddle.draw();
				myPaddle.move();
				myBall.draw();
				myBall.move();
				myBall.checkCollision(myPaddle);
				timerId =setTimeout(function(){
					update();
				}, 30);
				if(!isPlaying) clearTimeout(timerId);
			}

			$('#btn').click(function(){
				$(this).fadeOut();
				init();
				update();
			});


			$('body').mousemove(function(e){
				mouseX = e.pageX;
			});
		});
	</script>
</body>
</html>

jQuery plug-in 作成

jQueryのプラグイン作成に、fn.extend()を使います。
jQuery.fn.extend():Merge the contents of an object onto the jQuery prototype to provide new jQuery instance methods.
https://api.jquery.com/jquery.fn.extend/

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="utf-8">
    <title>jQuery plugin</title>
  </head>
  <body>
      <p><img src="image01.jpg"></p>
      <p><img src="image02.jpg"></p>
      <p><img src="image03.jpg"></p>
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
      <script src="jquery.showsize.js"></script>
      <script>
        $(function(){
          $('img').showsize({
            size: 22,
            opacity: 0.9
          });
        });
      </script>
  </body>
</html>

;(function($){
	$.fn.showsize = function(options){
		var elements = this;

		elements.each(function(){

			var opts = $.extend({}, $.fn.showsize.defaults, options, $(this).data());
			$(this).click(function(){
            var msg = $(this).width() + ' x ' + $(this).height();
            $(this).wrap('<div style="position:relative;"></div>');
            var div = $('<div>')
                    .text(msg)
                    .css('position', 'absolute')
                    .css('top', '0')
                    .css('padding', '2px')
                    .css('background', getRandomColor())
                    .css('font-size', opts.size +'px')
                    .css('color','white')
                    .css('opacity',opts.opacity);
            $(this).after(div);
          });

		});

		return this;
	};

	function getRandomColor(){
		var colors = ['red', 'pink', 'orange', 'green', 'blue'];
		return colors[Math.floor(Math.random()* colors.length)];
	}

	$.fn.showsize.defaults = {
		size: 10,
		opacity: 0.8
	};
})(jQuery);

画像作成アプリ

canvasで、ctx.moveTo(startX, startY);ctx.lineTo(x, y);ctx.stroke();で線を描画します。canvas.toDataURL().replace(‘image/png’,’application/octet-stream’)で、画像をダウンロードします。

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="utf-8">
    <title>Canvas</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
    <style>
    #mycanvas{
      border: 10px solid #999;
      cursor: crosshair;
    }
    .thumbnail{
      border: 2px solid #999;
      margin-right: 5px;
    }
    </style>
  </head>
  <body>
    <h1>Canvas</h1>
    <p>
      <select id="penColor">
        <option value="black">黒</option>
        <option value="red">赤</option>
        <option value="blue">青</option>
        <option value="white">白</option>
      </select>
      <select id="penWidth">
        <option value="1">細</option>
        <option value="3">中</option>
        <option value="5">太</option>
      </select>
        <input type="button" id="erase" value="消去">
        <input type="button" id="save" value="ギャラリーに追加">
    </p>
    <canvas id="mycanvas" width="400" height="200">
    Canvasの対応ブラウザを使用ください。</canvas>
    <div id="gallery"></div>
    <p>
    </p>
    <script>
      $(function(){
        var canvas = document.getElementById('mycanvas');
        if (!canvas || !canvas.getContext) return false;
        var ctx = canvas.getContext('2d');
        var startX,
            startY,
            x,
            y,
            borderWidth = 10,
            isDrawing = false;

        $('#mycanvas').mousedown(function(e){
            isDrawing = true;
            startX = e.pageX - $(this).offset().left - borderWidth;
            startY = e.pageY - $(this).offset().top - borderWidth;
        })
        .mousemove(function(e){
            if (!isDrawing) return;
            x = e.pageX - $(this).offset().left - borderWidth;
            y = e.pageY - $(this).offset().top - borderWidth;
            ctx.beginPath();
            ctx.moveTo(startX, startY);
            ctx.lineTo(x, y);
            ctx.stroke();
            startX = x;
            startY = y;
        })
        .mouseup(function() {
           isDrawing = false;
        })
        .mouseleave(function(){
           isDrawing = false;
        });

        $('#penColor').change(function(){
          ctx.strokeStyle = $(this).val();
        });
        $('#penWidth').change(function(){
          ctx.lineWidth = $(this).val();
        });
        $('#erase').click(function(){
            if(!confirm('本当に消去しますか？')) return;
            ctx.clearRect(0, 0, canvas.width, canvas.height);
        });
        $('#save').click(function(){
            var img = $('<img>').attr({
              width: 100,
              height: 50,
              src: canvas.toDataURL()
            });
            var link = $('<a>').attr({
              href: canvas.toDataURL().replace('image/png','application/octet-stream'),
              download: new Date().getTime() + '.png'
            });
            $('#gallery').append(link.append(img.addClass('thumbnail')));
            ctx.clearRect(0, 0, canvas.width, canvas.height);
        });

      });
    </script>
  </body>
</html>

日付カウントダウン

setTimeoutは、一定時間後に特定の処理をおこなう（繰り返さずに一度だけ）処理です。setTimeout(function(){
getResult();},200);で、0.2秒ごとに処理を繰り返します。new Date().getTime();から、Date.now()を引いた秒数で表示しています。

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="utf-8">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://fonts.googleapis.com/css?family=Bilbo" rel="stylesheet">
    <title>Web font</title>
    <style>
    body {
      font-family: 'Bilbo', cursive;
      background: #000;
      text-align: center;
      font-size:36px;
      color:red;
    }
    h1 {
      color: #fff;
      font-size: 128px;
      margin:0;
    }
    #remainingDays, #remainingTime {
      font-size: 64px;
    }
    </style>
  </head>
  <body>
    <h1>Q</h1>
    <p>
      <span id="remainingDays"></span>days <span id="remainingTime"></span> to go
    </p>
  <script>
  function getResult(){
    var target = new Date(2020, 04, 01, 10, 0, 0).getTime();
    var now = Date.now();
    var diff = (target - now) /1000;
    var d = Math.floor(diff / 60 / 60/ 24);
    diff = diff - 60 * 60 * 24 * d;
    var h = Math.floor(diff / 60 / 60);
    diff = diff - 60 * 60 * h;
    var m = Math.floor(diff / 60);
    diff = diff - 60 * m;
    var s = Math.floor(diff);

    document.getElementById('remainingDays').innerHTML = d;
    document.getElementById('remainingTime').innerHTML = padZero(h)  + ':' + padZero(m) + ':' + padZero(s);
    setTimeout(function(){
    getResult();
  },200);
  }
  getResult();

  function padZero(n){
    return (n < 10) ? '0'+n : n;
  }

  </script>
  </body>
</html>