<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title>InfiniteGridService Basic</title>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<link rel='stylesheet prefetch' href='http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css'>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">InfiniteGridService</a>
</div>
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="active"><a href="#">Link <span class="sr-only">(current)</span></a></li>
<li><a href="#">Link</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">Separated link</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">One more separated link</a></li>
</ul>
</li>
</ul>
<form class="navbar-form navbar-left" role="search">
<div class="form-group">
<input type="text" class="form-control" placeholder="Search">
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
<ul class="nav navbar-nav navbar-right">
<li><a href="#">Link</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">Separated link</a></li>
</ul>
</li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
<div class="jumbotron">
<div class="container">
<h1>Hello, InfiniteGridService!</h1>
<p>This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.</p>
</div>
</div>
<div class="container">
<div class="row">
<div id="prepend-loading-bar" class="alert alert-info" role="alert" style="display:none"><span class="glyphicon glyphicon-refresh" aria-hidden="true"> prepending...</span></div>
<div id="grid" class="col-md-12"></div>
<div class="cf"></div>
<div id="append-loading-bar" class="alert alert-info" role="alert" style="display:none"><span class="glyphicon glyphicon-refresh" aria-hidden="true"> appending...</span></div>
</div>
</div>
<script src='http://code.jquery.com/jquery-1.7.0.min.js'></script>
<script src='http://jindo.nhncorp.com/eg/archive/0.0.2-rc/bower_components/get-style-property/get-style-property.js'></script>
<script src='http://jindo.nhncorp.com/eg/archive/0.0.2-rc/bower_components/get-size/get-size.js'></script>
<script src='http://jindo.nhncorp.com/eg/archive/0.0.2-rc/bower_components/matches-selector/matches-selector.js'></script>
<script src='http://jindo.nhncorp.com/eg/archive/0.0.2-rc/bower_components/eventEmitter/EventEmitter.js'></script>
<script src='http://jindo.nhncorp.com/eg/archive/0.0.2-rc/bower_components/eventie/eventie.js'></script>
<script src='http://jindo.nhncorp.com/eg/archive/0.0.2-rc/bower_components/doc-ready/doc-ready.js'></script>
<script src='http://jindo.nhncorp.com/eg/archive/0.0.2-rc/bower_components/fizzy-ui-utils/utils.js'></script>
<script src='http://jindo.nhncorp.com/eg/archive/0.0.2-rc/bower_components/outlayer/item.js'></script>
<script src='http://jindo.nhncorp.com/eg/archive/0.0.2-rc/bower_components/outlayer/outlayer.js'></script>
<script src='https://preview.c9.io/dev_auplatform/files/eg.js'></script>
<script src='http://jindo.nhncorp.com/eg/archive/0.0.2-rc/src/plugin/persist.js'></script>
<script src="js/index.js"></script>
</body>
</html>
/*Downloaded from https://www.codeseek.co/egjs/infinitegridservice-basic-LpNmVM */
.cf:before,.cf:after{content:" ";display:table;}
.cf:after{clear:both;}
/*Downloaded from https://www.codeseek.co/egjs/infinitegridservice-basic-LpNmVM */
var contents;
var limit = 80;
var SERVER_URL = "https://fakeserver-dev-auplatform-1.c9.io/infiniteGrid/items";
/**
* Grid 내부 아이템의 offset 인덱스 리턴
* @param {String} pos "first"일 경우 첫 아이템의 data-offset 리턴. "last"일 경우 마지막 아이템의 data-offset 리턴
* @return {Number} offset
*/
function getOffset(pos) {
var offset;
if (pos === "first") {
offset = $("#grid").children("div").first().data("offset");
} else if (pos === "last") {
offset = $("#grid").children("div").last().data("offset");
} else
offset = parseInt(offset, 10);
return offset;
};
/*
eg.InfiniteGrideService 인스턴스 생성
InfiniteGridService 대상인 엘리먼트 셀렉터 지정
옵션 설정
*/
var infiniteGridService = new eg.InfiniteGridService("#grid");
/*
"append" 이벤트 핸들러
스크롤 다운 중 최하단 아이템이 화면에 보여질 때(threshold로 보정 가능)
threshold가 300이면 최하단 아이템이 화면에 보여지기 300px 전에 이벤트 발생
로딩바를 보이고 appendAjax 메소드를 호출해 서버에 데이터를 요청함.
응답데이터가 #grid에 append 됨
*/
infiniteGridService.on("append", function() {
var offset = getOffset("last");
$("#append-loading-bar").show();
var url = SERVER_URL + "?offset=" + (offset + 1) + "&limit=" + limit;
infiniteGridService.appendAjax(url);
});
/*
"preppend" 이벤트 핸들러
스크롤 업 중 최상단 아이템이 화면에 보여질 때(threshold로 보정 가능)
threshold가 300이면 최하단 아이템이 화면에 보여지기 300px 전에 이벤트 발생
로딩바를 보이고 prependAjax 메소드를 호출해 서버에 데이터를 요청
응답데이터가 #grid에 preppend 되고 스크롤 위치가 보정
*/
infiniteGridService.on("prepend", function() {
var offset = getOffset("first");
offset = offset - limit;
if( offset > 0) {
$("#prepend-loading-bar").show();
var url = SERVER_URL + "?offset=" + offset + "&limit=" + limit;
infiniteGridService.prependAjax(url, function(data) {
return $(data);
});
}
});
/*
"layoutComplete" 이벤트 핸들러
append, preppend가 완료되면 발생
이벤트 파라미터를 통해 append인지 prepend인지 확인 가능
로딩바 감춤
*/
infiniteGridService.on("layoutComplete", function(e) {
if(e.isAppend) {
$("#append-loading-bar").hide();
} else {
$("#prepend-loading-bar").hide();
}
});
/*
아이템의 <a> 클릭시 persist 데이터를 저장
*/
$("#grid").on("click", "a", function() {
alert("store");
infiniteGridService.store();
});
/*
persist 데이터를 복원함
복원이 되지 않았다면 새로운 데이터를 요청함
*/
if (!infiniteGridService.restore()) {
var url = SERVER_URL + "?offset=1&limit=" + limit;
infiniteGridService.appendAjax(url);
}
Bootstrap
Angular
ReactJS
jQuery
VueJS
HTML
CSS
JavaScript
Twitter Bootstrap
jQuery
v1.7.0
