XE 스킨 | 제로보드4 팁글 수 93
0
조회 수 : 251 신고 : 0
![title: [ani]깜빡이는 표정](http://web.webmini.net/./files/iconshop/74a37aadbde84c591808859b369e85e0.gif "title : [ani]깜빡이는 표정")
빽짱구| 출처 : |
|---|
XE에만 국한된 것이 아닌 모든 웹페이지에서 동작합니다.
간단히 설명드리자면, 웹사이트가 로딩될때 상단에 라인 로딩바가 지나간다고 보시면 됩니다. (페이지 속도와 거의 비례합니다.)
적용방법은 XE 기준으로 설명 드리겠습니다.
우선 저는 페이지 전체에 적용하기 위해서 XE > /common/tpl/common_layout.html 에 적용했습니다. (모바일도 적용하실려면 mobile_layout.html 에 동일한 방법으로 적용하시면 됩니다.
1. 먼저 첨부 파일을 풀고 css 는 XE > common/css 에, js 파일은 common/js 에 업로드 합니다.
(경로는 어디로 하든 상관없지만, 전페이지 공통에 적용할거라 저는 해당 위치에 업로드 했습니다.)
2. common/tpl/common_layout.html 을 여시고 <head>와 </head> 사이 적당한 곳에 아래 소스를 삽입합니다.
<link rel="stylesheet" href="../common/css/nprogress.css">
<script src="../common/js/nprogress.js"></script>
<script>
jQuery(function($){
// NProgress
$('body').show();
NProgress.start();
setTimeout(function() { NProgress.done(); $('.fade').removeClass('out'); }, 1000);
});
</script>
js와 css경로는 업로드한 위치로 수정해주세요~
3. nprogress.css 을 여시고 #nprogress .bar 를 찾으셔서 background 색상을 원하시는 색상으로 변경해주시면 됩니다. (첨부파일은 블루 색상입니다.)
소스 수정가능한 블로그, 회사 사이트 등에 적용해 보세요.
모바일에서 보면 앱스러움이 느껴집니다. ㅎ
미리보기 페이지 열때 웹미니 상단을 보시면 됩니다.
소스 출처 : http://ricostacruz.com/nprogress/
추가 : 애드온으로 제작이 되었습니다.
애드온 다운받기 : https://xetown.com/rxe_point/1070724
글쓴이 빽짱구
단점이 없는 사람은 장점도 거의 없다 - 에이브러햄 링컨
소중한 댓글 부탁드립니다.
추천수 10단위당 메달이 1개씩 노출되고, 추천수에 따라 배경색이 변하며, 일정수의 추천수를 받을시
아이콘이 붙게됩니다.
추천수 10단위당 메달이 1개씩 노출되고, 추천수에 따라 배경색이 변하며, 일정수의 추천수를 받을시
아이콘이 붙게됩니다.
첫번째 댓글을 남겨주세요!
- 추천수 50개이상
- 추천수 30개이상
- 추천수 20개이상
- 추천수 10개이상
- 추천수 3개이상
닫기