Web Tech/jQuery
include html with jQuery
jaiyah
2016. 11. 24. 00:30
HTML 인클루드하기
이 포스팅에서는 제이쿼리를 이용하여 html 파일을 인클루드 해보록 하겠습니다.(웹서버에서 동작)
HTML
html
<div id="wrap">
<p>#wrap</p>
<header role="header" data-include="include/header_inc.html"></header>
<!-- container -->
<div id="container">
<p>#container</p>
<!-- snb -->
<div class="snb">
<p>.snb</p>
</div>
<!-- //snb -->
<!-- content -->
<div id="content">
<p>#content</p>
</div>
<!-- //content -->
<!-- aside -->
<div class="aside">
<p>.aside</p>
</div>
<!-- //aside -->
<div class="clear">
</div>
</div>
<!-- //container -->
<footer role="footer" data-include="include/footer_inc.html"></footer>
</div>
header_inc.html
header
<!-- header -->
<div id="header">
<p>#Header Include</p>
<p>헤더 인클루드입니다.</p>
</div>
<!-- //header -->
footer_inc.html
footer
<!-- footer -->
<div id="footer">
<p>#Footer Include</p>
<p>푸터 인클루드입니다.</p>
</div>
<!-- //footer -->
Script
javascript
<script src="http://code.jquery.com/jquery.min.js"></script>
<script>
$(function(){
includeLayout();
});
function includeLayout(){
var includeArea = $('[data-include]');
var self, url;
$.each(includeArea, function() {
self = $(this);
url = self.data("include");
self.load(url, function() {
self.removeAttr("data-include");
});
});
}
</script>
스크립트는 body 하단에 위치시키는 것을 권장합니다.
test CSS
css
/* Common */
p,div {
margin:0;
padding:0;
}
/* 임시 비주얼 스타일 정의 */
div{margin-bottom:10px;padding:10px 0;color:#2d2c2d;font-family:Tahoma;font-size:14px;font-weight:bold}
#wrap{padding:10px;border:1px solid #bdbdbd;background:#f7f7f7}
#header{margin-top:10px;padding:10px;border:2px solid #bfbfbf;background:#e5e5e5}
#container{border:2px solid #bfbfbf;background:#e5e5e5}
.snb{margin-top:10px;border:1px solid #bdbdbd;background:#fff;text-align:center}
#content{height:200px;margin-top:10px;border:1px solid #bdbdbd;background:#fff;text-align:center}
.aside{margin-top:10px;border:1px solid #bdbdbd;background:#fff;text-align:center}
#footer{padding:10px;border:2px solid #bfbfbf;background:#e5e5e5}
/* Layout */
#container{
zoom:1;
padding:0 200px;
}
#container:after{
display:block;
clear:both;
content:''
}
.snb{
float:left;
margin-right:-180px;
position:relative;
left:-190px;
width:178px;
}
#content{
float:left;
width:100%
}
.aside{
float:left;
margin-left:-182px;
position:relative;
left:190px;
width:178px;
}
Jaehee's WebClub