jQuery3 – CakePHP3 Tips

2017/12/04 -jQuery3
Ajax, JavaScript, jQuery UI, サンプルコード, モーダル

jQuery UI モーダル(modal)でダイアログを開くサンプルコードです。 ※ jQuery 3.1 / jQuery UI 1.12 [crayon-6 …

2017/12/04 -jQuery3
JavaScript, サンプルコード, 関数

JavaScript　数字の先頭に0を追加する関数のサンプルコードです。

<script>
console.log(digitFormat(1,3)); // 出力ログ:001
// 数字の先頭に0を追加してdigitで指定された桁数に変換する
function digitFormat(num, digit) {
var len = String(num).length;
if(digit > len) {
return (new Array((digit - len) + 1).join(0)) + num;
} else {
return num;
}
}
</script>

1

2

3

4

5

6

7

8

9

10

11

12

13

console.log(digitFormat(1,3)); // 出力ログ:001

// 数字の先頭に0を追加してdigitで指定された桁数に変換する

function digitFormat(num, digit) {

var len = String(num).length;

if(digit > len) {

return (new Array((digit - len) + 1).join(0)) + num;

} else {

return num;

}

</script>

JavaScript 日付と時刻チェック(YmdHi)関数のサンプルコード

2017/12/04 -jQuery3
date, JavaScript, サンプルコード, 関数

JavaScript 日付と時刻チェック(YmdHi)関数のサンプルコードです。

// 日付と時刻チェックのサンプルコード
<script>
console.log(checkDate(2017,12,04));
console.log(checkTime(10,11));
// 日付チェック(戻り値: true or false)
// ex) Y:2017, m:12, d:04
function checkDate(Y, m, d) {
var m = parseInt(m, 10);
var d = parseInt(d, 10);
var check_date = Y+'/'+m+'/'+d;
var date = new Date(check_date);
if (　check_date == (date.getFullYear()+'/'+(date.getMonth()+1)+'/'+date.getDate())　)　{
return true;
} else {
return false;
}
}
// 時刻チェック(戻り値: true or false)
// ex) H:10, i:11
function checkTime(H, i) {
var H = parseInt(H, 10);
var i = parseInt(i, 10);
if (0 <= H && H <= 23 && 0 <= i && i <= 59) {
return true;
} else {
return false;
}
}
</script>

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

// 日付と時刻チェックのサンプルコード

console.log(checkDate(2017,12,04));

console.log(checkTime(10,11));

// 日付チェック(戻り値: true or false)

// ex) Y:2017, m:12, d:04

function checkDate(Y, m, d) {

var m = parseInt(m, 10);

var d = parseInt(d, 10);

var check_date = Y+'/'+m+'/'+d;

var date = new Date(check_date);

if (　check_date == (date.getFullYear()+'/'+(date.getMonth()+1)+'/'+date.getDate())　)　{

return true;

} else {

return false;

}

// 時刻チェック(戻り値: true or false)

// ex) H:10, i:11

function checkTime(H, i) {

var H = parseInt(H, 10);

var i = parseInt(i, 10);

if (0 <= H && H <= 23 && 0 <= i && i <= 59) {

return true;

} else {

return false;

}

</script>

jQuery3 animateで指定位置まで移動するサンプルコード

2017/12/04 -jQuery3
animate, サンプルコード

jQuery3 animateで指定位置まで移動するサンプルコードです。

<div id="test"></div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script>
animate_scroll($('#test'));
// targetまでanimateにて移動
function animate_scroll(target) {
if (!target) {
return false;
}
var target_position = target.offset().top; // 移動位置取得
var adjustment_num = 20; // 位置調整(targetから上に20px)
target_position　= ((target_position - adjustment_num) > 0) ? (target_position - adjustment_num) : 0;
$('html, body').animate({scrollTop: target_position}, 400, 'linear');
}
</script>

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

animate_scroll($('#test'));

// targetまでanimateにて移動

function animate_scroll(target) {

if (!target) {

return false;

}

var target_position = target.offset().top; // 移動位置取得

var adjustment_num = 20; // 位置調整(targetから上に20px)

target_position　= ((target_position - adjustment_num) > 0) ? (target_position - adjustment_num) : 0;

$('html, body').animate({scrollTop: target_position}, 400, 'linear');

}

</script>

jQuery3 Ajax通信のサンプルコード

2017/12/01 -jQuery3
Ajax, cache, response, timeout, サンプルコード

jQuery3 Ajax通信のサンプルコードです。

// ex) カテゴリ追加
$(function(){
$.ajax({
url: '/add',  // リクエスト送信先URL
type: 'POST', // get or postメソッド
timeout: 2000, // タイムアウト時間をミリ秒で設定
cache: false,  // キャッシュ無効
data: {'category_name': category_name}, // サーバーに送信する値
dataType: 'json' // サーバーから返されるデータ型
}).done(function (response, textStatus, jqXHR) {
// サーバー側[php] echo json_encode(['status' => true or false]);
if (response.status) {
// 追加成功
alert('success.');
} else {
// 追加失敗
alert('error.');
}
}).fail(function (jqXHR, textStatus, errorThrown) {
// 通信失敗
alert('error.');
});
});

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

// ex) カテゴリ追加

$(function(){

$.ajax({

url: '/add', // リクエスト送信先URL

type: 'POST', // get or postメソッド

timeout: 2000, // タイムアウト時間をミリ秒で設定

cache: false, // キャッシュ無効

data: {'category_name': category_name}, // サーバーに送信する値

dataType: 'json' // サーバーから返されるデータ型

}).done(function (response, textStatus, jqXHR) {

// サーバー側[php] echo json_encode(['status' => true or false]);

if (response.status) {

// 追加成功

alert('success.');

} else {

// 追加失敗

alert('error.');

}

}).fail(function (jqXHR, textStatus, errorThrown) {

// 通信失敗

alert('error.');

});

「 jQuery3 」 一覧

「 jQuery3 」一覧