Category: jQuery

remodalを実装

<div class="button_wrapper remodal-bg">
         <button type="submit" value="送信" id="square_btn" onClick="location.href='#modal'">登録</button>
      </div>
      </form>

      <!-- remodal -->
      <div class="remodal" data-remodal-id="modal">
        <button data-remodal-action="close" class="remodal-close"></button>
        <h1>登録しますか</h1>
        <p>
          入力した内容で宜しいでしょうか？
        </p>
        <br>
        <button data-remodal-action="cancel" class="remodal-cancel">Cancel</button>
        <button data-remodal-action="confirm" class="remodal-confirm">OK</button>
      </div>
      <!-- /remodal -->

なるほどなるほど、フロント側の技術は大体OKかな。

remodalが上手く動かない。。。と思ったら

<head>
<link href="asset/css/remodal.css" rel="stylesheet">
<link href="asset/css/remodal-default-theme.css" rel="sytlesheet">
</head>
<body>
<div class="remodal-bg">
　 <a href="#modal">モーダル1</a>
</div>

<div class="remodal" data-remodal-id="modal">
  <button data-remodal-action="close" class="remodal-close"></button>
  <h1>Remodal</h1>
  <p>
    Responsive, lightweight, fast, synchronized with CSS animations, fully customizable modal window plugin with declarative configuration and hash tracking.
  </p>
  <br>
  <button data-remodal-action="cancel" class="remodal-cancel">Cancel</button>
  <button data-remodal-action="confirm" class="remodal-confirm">OK</button>
</div>

<script
  src="https://code.jquery.com/jquery-3.3.1.min.js"
  integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
  crossorigin="anonymous"></script>
<script src="asset/js/remodal.js"></script>
<script>
	$('[data-remodal-id=modal]').remodal();
</script>
</body>

ん、上手くいってない！？　何故？

色々試した挙句
よくみたら、rel=”sytlesheet”ってなってる。
cssが効いてない。

<head>
	<link href="asset/css/remodal.css" rel="stylesheet">
	<link href="asset/css/remodal-default-theme.css" rel="stylesheet">
</head>

逆説的だが、エラーを出すと、プラグインの理解が深まるという。。。なんちゅーこっちゃ。

さて、これを実装していきます。

remodal

公式
http://vodkabears.github.io/remodal/

github
https://github.com/VodkaBears/Remodal/

remodal.css、remodal-default-theme.css、remodal.jsをダウンロードします。githubだとminifyされてないですね。まーいいか。

jQuery 1.x系、2.x系、3.x系の違い

-IE8以前をサポートするかどうか
-2.X系と3.X系ではサポートしているブラウザに違いはなし。設計が見直し

3系
非推奨になっていたAPIが削除
IE9 以降
Chrome、Edge、Firefox、Safari の最新版とそのひとつ前のバージョン
Operaの最新版
iOS 7 以上のモバイルSafari
Android 4.0以上

ほう～

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();
});