Category: jQuery mobile / jQuery UI

[jQuery] マウスのhoverで写真表示を変える

amazonの様にマウスでホバーするとメイン画像の表示を切り替えたい

hoverしたらメイン画像のsrcをreplaceする。

<body>
	<img src="img/item1.jpg" class="item" width="610px" height="420px"><br>
	<img id="item1" src="img/item1.jpg" width="200px" height="140px">
	<img id="item2"src="img/item2.jpg" width="200px" height="140px">
	<img id="item3" src="img/item3.jpg" width="200px" height="140px">
	<script
  src="https://code.jquery.com/jquery-3.5.1.js"
  integrity="sha256-QWo7LDvxbWT2tbbQ97B53yJnYU3WhH/C8ycbRAkjPDc="
  crossorigin="anonymous"></script>
	<script>
		$('.item').each(function(){
			let img_off = $(this).attr('src');
			let img_on_2 = $(this).attr('src').replace('1', '2');
			let img_on_3 = $(this).attr('src').replace('1', '3');

			let item2 = document.getElementById('item2');
			let item3 = document.getElementById('item3');
			$(item2).hover(
				function(){
					$('.item').attr('src', img_on_2);
				},
				function(){
					$('.item').attr('src', img_off)
				});
			$(item3).hover(
				function(){
					$('.item').attr('src', img_on_3);
				},
				function(){
					$('.item').attr('src', img_off)
				});
		});
	</script>

</body>

ああ、これは作ってて面白いね。

datepickerを使う

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1/jquery-ui.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1/i18n/jquery.ui.datepicker-ja.min.js"></script>
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1/themes/redmond/jquery-ui.css" >
<input type="text" id="datepicker">
<script>
  $(function() {
    $("#datepicker").datepicker();
  });
</script>

このように書くと、下のフォームは動きません。

<input type="text" id="datepicker"><br>
<input type="text" id="datepicker">
<script>
  $(function() {
    $("#datepicker").datepicker();
  });
</script>

idを変えると両方動きます。

<input type="text" id="datepicker"> ～　<input type="text" id="datepicker2">
<script>
  $(function() {
    $("#datepicker").datepicker();
  });
  $(function() {
    $("#datepicker2").datepicker();
  });
</script>

今日と10日前の初期値を入れます。

<?php
$date1 = date("Y/m/d", strtotime("-10 days"));
$date2 = date("Y/m/d");

?>
<style>
input{
	width:90px;
}
</style>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1/jquery-ui.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1/i18n/jquery.ui.datepicker-ja.min.js"></script>
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1/themes/redmond/jquery-ui.css" >
<input type="text" id="datepicker" value="<?php echo $date1; ?>"> ～　<input type="text" id="datepicker2" value="<?php echo $date2; ?>">
<script>
  $(function() {
    $("#datepicker").datepicker();
  });
  $(function() {
    $("#datepicker2").datepicker();
  });
</script>

あれ、割と簡単に出来た

Y-m-dにして、date1、date2をgetで渡して、mongodbで読み取ればOKだと思います。

phpで予約システムを作くろう2 予約画面

jQueryのdatepickerで日付を取得します。

<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>
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1/themes/flick/jquery-ui.css">
<b>予約フォーム</b><br>
<form method="POST" action="">
1.カレンダーから日付を選択してください<br>
<input type="text" id="date_val"/><br>
<div id="datepicker"></div><br>
2.時間を選択してください<br>
	<select name="time">
	<option value=""> 選択してください</option>
	<option value="">9:00～10:00</option>
	<option value="">10:00～11:00</option>
	<option value="">11:00～12:00</option>
	<option value="">13:00～14:00</option>
	<option value="">14:00～15:00</option>
	<option value="">15:00～16:00</option>
	<option value="">16:00～17:00</option>
	<option value="">17:00～18:00</option>
	</select><br><br>
3.ご希望される弁護士を選択してください<br>
	<select name="lawyer">
	<option value=""> 選択してください</option>
	<option value="">松島</option>
	<option value="">小野</option>
	<option value="">草野</option>
	</select>
	<br><br>
	<input type="submit" value="予約する" class="submit">
</form>

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

あれ？かなり簡単にできたが大丈夫か？

画面遷移を以下のようにしたい。
1.今週のスケジュール表(view) -> 2.予約画面(form) -> 3.確認画面(重複チェック:validation) -> 4.ユーザー・担当者へ確認メール送信(mb_send_mail)　-> 5.管理者画面で予約を一覧表示

1.今週のスケジュールは、今日の日付と曜日を取得して、DBから予約を引き出す。
3.確認画面でのvalidation
-> 予約時間が全て1時間単位なら、問題なさそう
-> 予約時間が30分、1時間、1時間30分のように選択式にすると、計算が複雑になりそうだ

### PHPとMySQLの接続を解説をしている本
本屋で立ち読みでも良いが、作った後に本で確認すると頭の中が整理されて参考になります。

Tabs

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="utf-8">
    <title>jQuery UI</title>
    <link rel="stylesheet" href="jquery-ui.min.css">
    <script src="./external/jquery/jquery.js"></script>
    <script src="jquery-ui.min.js"></script>
    <style>
    .ui-selected {
      background: red;
    }
  </style>
  </head>
  <body>
  <div id="tabs">
  
  <ul>
    <li><a href="#menu1">Menu1</a></li>
    <li><a href="#menu2">Menu2</a></li>
    <li><a href="#menu3">Menu3</a></li>
  </ul>

  <div id="menu1">menu 1</div>
  <div id="menu2">menu 2</div>
  <div id="menu3">menu 3</div>
  </div>
  <script>
    $(function(){
      $('#tabs').tabs();
      });
  </script>
  </body>
</html>

Progressbar and slider

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="utf-8">
    <title>jQuery UI</title>
    <link rel="stylesheet" href="jquery-ui.min.css">
    <script src="./external/jquery/jquery.js"></script>
    <script src="jquery-ui.min.js"></script>
    <style>
    .ui-selected {
      background: red;
    }
  </style>
  </head>
  <body>
  <div id="bar" style="width:200px"></div>
  <div id="slider" style="width:200px; margin-top:20px"></div>

  <script>
    $(function(){
      $('#bar').progressbar({
          value: 0
      });
      $('#slider').slider({
        slide: function(event, ui){
          console.log(ui.value);
          $('#bar').progressbar('option', 'value', ui.value);
        }
      });
      });
  </script>
  </body>
</html>

Datepicker

Datepickerは表示する日付を制限できます。例:上の動画のように、本日から1カ月先まで
minDate:0,
maxDate: “+1M”

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="utf-8">
    <title>jQuery UI</title>
    <link rel="stylesheet" href="jquery-ui.min.css">
    <script src="./external/jquery/jquery.js"></script>
    <script src="jquery-ui.min.js"></script>
    <style>
    .ui-selected {
      background: red;
    }
  </style>
  </head>
  <body>
  <input type="text" id="datepicker">

  <script>
    $(function(){
        $('#datepicker').datepicker({
          dateFormat: "yy-mm-dd",
          minDate:0,
          maxDate: "+1M"
        });
      });
  </script>
  </body>
</html>

dialog

<body>
  <button>open!</button>
  <div id="msg">こんにちは。
  </div>

  <script>
    $(function(){
        $('button').click(function(){
          $('#msg').dialog('open');
        });
        $('#msg').dialog({
          autoOpen: false,
          buttons: {
            "ok": function (){
              $(this).dialog('close');
            }
          },
          title: "title",
          modal: true
        });
      });
  </script>
  </body>

Accordion

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="utf-8">
    <title>jQuery UI</title>
    <link rel="stylesheet" href="jquery-ui.min.css">
    <script src="./external/jquery/jquery.js"></script>
    <script src="jquery-ui.min.js"></script>
    <style>
    .ui-selected {
      background: red;
    }
  </style>
  </head>
  <body>
  <div id="accordion">
  <h3><a href="">title</a></h3>
  <div>こんにちは。</div>
  <h3><a href="">title</a></h3>
  <div>こんにちは。</div>
  <h3><a href="">title</a></h3>
  <div>こんにちは。</div>
  <h3><a href="">title</a></h3>
  <div>こんにちは。</div>
  </div>
  <script>
    $(function(){
        $('#accordion').accordion();
      });
  </script>
  </body>
</html>

autocomplete

 <script>
    $(function(){
        var langs = ["ja", "en", "cn", "fr", "sp"];
        $('#langs').autocomplete({
            source: langs
        });
      });
  </script>

Sortable

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="utf-8">
    <title>jQuery UI</title>
    <link rel="stylesheet" href="jquery-ui.min.css">
    <script src="./external/jquery/jquery.js"></script>
    <script src="jquery-ui.min.js"></script>
    <style>
    .ui-selected {
      background: red;
    }
  </style>
  </head>
  <body>
  <ul id="sortable">
  <li id="item_1">item1</li>
  <li id="item_2">item2</li>
  <li id="item_3">item3</li>
  <li id="item_4">item4</li>
  <li id="item_5">item5</li>
  </ul>
  <script>
    $(function(){
       $('#sortable').sortable({
        cursor: 'move',
        opacity: 0.5,
        update: function(event, ui){
          $(this).sortable("serialize");
        }
       });
      });
  </script>
  </body>
</html>

Resizable

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="utf-8">
    <title>jQuery UI</title>
    <link rel="stylesheet" href="jquery-ui.min.css">
    <script src="./external/jquery/jquery.js"></script>
    <script src="jquery-ui.min.js"></script>
    <style>
    .box {
    width: 100px;
    height: 100px;
    background: red;
    }
  </style>
  </head>
  <body>
  <div class="box">box</div>
  <script>
    $(function(){
      $('.box').draggable().resizable({
        handles: 'all',
        //aspectRatio: true
        stop: function (event, ui){
          console.log(ui.size.hight, ui.size.width);
        }
         });
      });
  </script>
  </body>
</html>

Selected

<script>
    $(function(){
       var selected = new Array();
       $('#selectable').selectable({
         selected: function(event, ui){
          selected.push(ui.selected.id);
          console.log(selected);
         },
         unselected: function(event, ui){
           var id = ui.unselected.id;
           selected.splice(selected.indexOf(id), 1);
           console.log(selected);
         }
       });
      });
  </script>

Droppable

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="utf-8">
    <title>jQuery UI</title>
    <link rel="stylesheet" href="jquery-ui.min.css">
    <script src="./external/jquery/jquery.js"></script>
    <script src="jquery-ui.min.js"></script>
    <style>
    .box {
    width: 50px;
    height: 50px;
    background: #ccc;
    margin-bottom: 20px;
    }
    .target {
      width: 100px;
      height: 100px;
      background: pink;
    }
  </style>
  </head>
  <body>
  <div class="box">box</div>
  <div class="target">target</div>
  <script>
    $(function(){
      $('.box').draggable();
      $('.target').droppable({
        accept: '.box',
        drop: function(event, ui){
          console.log('dropped!');
        }
      });
      });
  </script>
  </body>
</html>

ui追加

    $(function(){
      $('.box').draggable({
        helper: 'clone'
      });
      $('.target').droppable({
        accept: '.box',
        hoverClass: 'hover',
        tolerance: 'fit',
        drop: function(event, ui){
          ui.draggable.clone().appendTo(this);
          console.log('dropped!');
        }
      });
      });