簡易的なアイテムソートできるアプリを実装してみましたので
記録しておきます。
成果物
ファーストビュー
ソートビュー
コア機能
○フィルターソート機能（jQuery）
|- カテゴリーボタンを押したらカテゴリーのアイテムのみ表示
○一部php化（v5.6）
|- 簡易アプリなのでデータベースは使用なし
|- データベースを利用してもできる形にしているつもりです（問題あったらこちらの記事下にリプください）
データダウンロード
こちらにパッケージ化してありますので、
下記コマンドでクローンし「/php_app/filter_search_php/」のフォルダを
Xamppまたはphpを動かせる場所に入れてください。
$ git clone https://d-mori-570415@bitbucket.org/d-mori-570415/webdesigntemplate.git
jQueryでフィルターソート実装/phpアプリ化
もともと作成していたWebデザインをベースに実装しています。
データはphp上で記述し、データベースは使っていません。
本来はデータベースを作成し、そちらからデータを取るようにしてください。
※コアな部分しか明記しませんので、ダウンロードして見てください。
php
<?php
/* db設計(Laravelの場合、id、timestampは自動で生成されるので省略)
* title
* comment
* category
* image
*/
$listItems = [
[ 'title'=>'food1', 'comment'=>'これはfood1の画像です', 'category'=>'food', 'image'=>'ph1.jpg' ],
[ 'title'=>'food2', 'comment'=>'これはfood2の画像です', 'category'=>'food', 'image'=>'ph2.jpg' ],
[ 'title'=>'view1', 'comment'=>'これはview1の画像です', 'category'=>'view', 'image'=>'ph3.jpg' ],
[ 'title'=>'view2', 'comment'=>'これはview2の画像です', 'category'=>'view', 'image'=>'ph4.jpg' ],
[ 'title'=>'sweets1', 'comment'=>'これはsweets1の画像です', 'category'=>'sweets', 'image'=>'ph5.jpg' ],
[ 'title'=>'sweets2', 'comment'=>'これはsweets2の画像です', 'category'=>'sweets', 'image'=>'ph6.jpg' ],
];
// アイテムの合計数を取得
$allListItemsCount = count($listItems);
?>
<!DOCTYPE HTML>
<html lang="ja">
<head>
<!--省略-->
<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
<script src="./js/jquery.min.js"></script>
<!--省略-->
</head>
<body>
<div class="container">
<div class="header">
<ul>
<li><a href="">Work</a></li>
<li><a href="">About</a></li>
<li><a href="">Contact</a></li>
</ul>
<div class="logo"><a href="">DesignWorks<span>®️</span></a></div>
</div>
<div class="navi">
<h1>Work: <?= $allListItemsCount; ?></h1>
<ul class="filter-button">
<li><a href="" class="allItem">ALL</a></li>
<li><a href="javascript:void(0)" class="food">FOOD</a></li>
<li><a href="javascript:void(0)" class="view">VIEW</a></li>
<li><a href="javascript:void(0)" class="sweets">SWEETS</a></li>
</ul>
</div>
<div class="contents">
<div class="items filter-list">
<?php foreach ($listItems as $listItem): ?>
<div class="item <?= $listItem['category']; ?>">
<img src="./img/<?= $listItem['image']; ?>">
<a href="">
<div class="mask">
<div class="caption">
<div class="caption-title"><?= $listItem['title']; ?></div>
<div class="caption-content"><?= $listItem['comment']; ?></div>
</div>
</div>
</a>
</div>
<?php endforeach; ?>
</div>
</div>
<div class="footer">
<p>Copyright© 2019 Sample Example All rights reserved.</p>
</div>
</div>
<script>
$(function(){
// filter
let setFilter = $('.filter-button'),
filterBtn = setFilter.find('a'),
setList = $('.filter-list'),
filterList = setList.find('.item'),
listWidth = filterList.outerWidth();
filterBtn.on('click', function(){
if(!($(this).hasClass('active'))){
let filterClass = $(this).attr('class');
filterList.each(function(){
if($(this).hasClass(filterClass)){
$(this).css({ display: 'block' })
.stop().animate({ width: listWidth }, 100);
$(this).find('*').stop().animate({ opacity: '1' }, 100);
} else {
$(this).find('*').stop().animate({ opacity: '0' }, 100);
$(this).stop().animate({ width: '0' }, 100, function(){
$(this).css({ display: 'none' });
});
}
});
filterBtn.removeClass('active');
$(this).addClass('active');
}
});
});
</script>
</body>
</html>