Category: jQuery

remodalを実装

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<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が上手く動かない。。。と思ったら

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
<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が効いてない。

1
2
3
4
<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で使ってみましょう。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<!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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
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にする

今日以前の日付にする

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
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になる。

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
<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 アコーディオン

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
<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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
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

javascript lang:’ja’を追加

1
2
3
4
5
6
7
8
9
10
11
$(function() {
    var dateFormat = 'yy年mm月dd日';
    $("#datepicker").datepicker({
        lang:'ja',
        dateFormat: dateFormat,
        minDate: 0,
        onSelect: function(dateText, inst) {
                    $("#date_val").val(dateText);
        }
    });
});

view -> OK!

土日選択不可

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
$(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

1
2
3
4
5
6
var navList, firstItem, link;
 
navList = $('.nav-list');
firstItem = navList.children().first();
link = firstItem.find('a');
link.attr('href','#');
1
2
3
4
var articleItems;
 
articleItems = $('.article-item');
articleItems.css('font-size','20px');
1
2
3
4
5
6
$('#input').on('change', function(){
  var val;
  var = $('#input').val();
  h1 = $('.articles').children('h1');
  h1.text(val);
});
1
2
3
4
5
var articleItems;
 
articleItems = $('.article-item');
ul = articleItems.find('ul');
ul.remove();
1
2
3
4
5
6
7
8
9
10
11
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);
1
2
3
4
5
6
7
8
function numberAdder(){
    var text, number;
    text = $(this).text();
    number = text.length;
 
    $(this).text(text + "" + number);
}
$('p').each(numberAdder);
1
2
3
$('#my-input').on('keypress', function(){
  $('button').remove();
});