728x90
반응형
리스트 더보기 기능 구현
.html
<html lang="ko">
<head>
<meta charset="utf-8"/>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!--[if lt IE 9]>
<script src="../common/js/html5shiv.js"></script>
<![endif]-->
<meta name="viewport" content="width=device-width, maximum-scale=1, minimum-scale=1, user-scalable=no" />
<meta name="format-detection" content="telephone=no">
<title>더보기(MORE) 버튼을 눌러 일정갯수의 리스트 더 보기</title>
<link type="text/css" rel="stylesheet" href="css/reset.css" media="screen" />
<link type="text/css" rel="stylesheet" href="css/js-load.css" media="screen" />
<script type="text/javascript" src="js/jquery-1.11.2.min.js"></script>
<script type="text/javascript" src="js/js-load.js"></script>
</head>
<body>
<header>
<h1>더보기(MORE) 버튼을 눌러 일정갯수의 리스트 더 보기</h1>
</header>
<div id="contents">
<div id="js-load" class="main">
<ul class="lists">
<li class="lists__item js-load">test1</li>
<li class="lists__item js-load">txttxttxttxttxttxt</li>
<li class="lists__item js-load">test2</li>
<li class="lists__item js-load">txttxttxttxttxttxt</li>
<li class="lists__item js-load">test3</li>
<li class="lists__item js-load">txttxttxttxttxttxt</li>
<li class="lists__item js-load">test4</li>
<li class="lists__item js-load">txttxttxttxttxttxt</li>
<li class="lists__item js-load">test5</li>
<li class="lists__item js-load">txttxttxttxttxttxt</li>
<li class="lists__item js-load">test6</li>
<li class="lists__item js-load">txttxttxttxttxttxt</li>
<li class="lists__item js-load">test7</li>
<li class="lists__item js-load">txttxttxttxttxttxt</li>
<li class="lists__item js-load">test8</li>
<li class="lists__item js-load">txttxttxttxttxttxt</li>
<li class="lists__item js-load">test9</li>
<li class="lists__item js-load">txttxttxttxttxttxt</li>
<li class="lists__item js-load">test10</li>
<li class="lists__item js-load">txttxttxttxttxttxt</li>
<li class="lists__item js-load">test11</li>
<li class="lists__item js-load">txttxttxttxttxttxt</li>
<li class="lists__item js-load">test12</li>
<li class="lists__item js-load">txttxttxttxttxttxt</li>
<li class="lists__item js-load">test13</li>
<li class="lists__item js-load">txttxttxttxttxttxt</li>
<li class="lists__item js-load">test14</li>
<li class="lists__item js-load">txttxttxttxttxttxt</li>
<li class="lists__item js-load">test15</li>
<li class="lists__item js-load">txttxttxttxttxttxt</li>
<li class="lists__item js-load">test16</li>
<li class="lists__item js-load">txttxttxttxttxttxt</li>
<li class="lists__item js-load">test17</li>
<li class="lists__item js-load">txttxttxttxttxttxt</li>
<li class="lists__item js-load">test18</li>
<li class="lists__item js-load">txttxttxttxttxttxt</li>
<li class="lists__item js-load">test19</li>
<li class="lists__item js-load">txttxttxttxttxttxt</li>
<li class="lists__item js-load">test20</li>
<li class="lists__item js-load">txttxttxttxttxttxt</li>
<li class="lists__item js-load">test21</li>
<li class="lists__item js-load">txttxttxttxttxttxt</li>
<li class="lists__item js-load">test22</li>
<li class="lists__item js-load">txttxttxttxttxttxt</li>
<li class="lists__item js-load">test23</li>
<li class="lists__item js-load">txttxttxttxttxttxt</li>
<li class="lists__item js-load">test24</li>
<li class="lists__item js-load">txttxttxttxttxttxt</li>
<li class="lists__item js-load">test25</li>
<li class="lists__item js-load">txttxttxttxttxttxt</li>
</ul>
<div id="js-btn-wrap" class="btn-wrap"> <a href="javascript:;" class="button">더보기</a> </div>
</div>
<footer>
<p>(C) <a href="https://nanati.me/">nanati.me</a> by nanati</p>
</footer>
</div>
</body>
</html>
CSS
.js-load {
display: none;
}
.js-load.active {
display: block;
}
.is_comp.js-load:after {
display: none;
}
.btn-wrap, .lists, .main {
display: block;
}
.main {
max-width: 640px;
margin: 0 auto;
}
.lists {
margin-bottom: 4rem;
}
.lists__item {
padding: 20px;
background: #EEE;
}
.lists__item:nth-child(2n) {
background: #59b1eb;
color: #fff;
}
.btn-wrap {
text-align: center;
}js
$(window).on('load', function () {
load('#js-load', '4');
$("#js-btn-wrap .button").on("click", function () {
load('#js-load', '4', '#js-btn-wrap');
})
});
function load(id, cnt, btn) {
var girls_list = id + " .js-load:not(.active)";
var girls_length = $(girls_list).length;
var girls_total_cnt;
if (cnt < girls_length) {
girls_total_cnt = cnt;
} else {
girls_total_cnt = girls_length;
$(button).hide();
}
$(girls_list + ":lt(" + girls_total_cnt + ")").addClass("active");
}이렇게 3가지를 제작하게되면, 리스트가 아예없는 상태에서 더보는 기능이 구현된다.
하지만 기존에 일정 갯수를 보이게하려면,
.js-load:nth-child(n+6) {
display: none;
}이런식으로 하게되면 6번쨰까지는 보일 것이다.
728x90
반응형
'외부 라이브러리' 카테고리의 다른 글
| [JavaScript/JS] 이미지 로딩, 로드 속도 개선 라이브러리 (0) | 2018.04.23 |
|---|---|
| [레이더 표현] Nwagon 활용 [스프링, jsp 적용 sample] (0) | 2017.12.04 |
| 구글 애널리틱스(GA) 통계 사용법 (0) | 2017.12.01 |
| [JavaScript/JS] 카카오스토리 공유기능 만들기 (0) | 2017.11.14 |