XE(XpressEngine)와 관련된 유용한 정보를 공유하는 곳입니다.

관련메뉴 XE 스킨 | 제로보드4 팁
  • 웹미니 한줄 전광판 영역 입니다.
글 수 91

0

조회 수 : 96 신고 : 0

profile
작성자 : title: [ani]깜빡이는 표정빽짱구
포인트 : 56575 | 레벨 : 25
출처 :  

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

profile 글쓴이 빽짱구

단점이 없는 사람은 장점도 거의 없다 - 에이브러햄 링컨

엮인글 :
https://www.webmini.net/xe/632464/ee0/trackback
소중한 댓글 부탁드립니다.
추천수 10단위당 메달이 1개씩 노출되고, 추천수에 따라 배경색이 변하며, 일정수의 추천수를 받을시 BEST 아이콘이 붙게됩니다.
추천수에 따른 배경색 보기 본문으로 바로가기
  • 추천수 50개이상
  • 추천수 30개이상
  • 추천수 20개이상
  • 추천수 10개이상
  • 추천수 3개이상
닫기

첫번째 댓글을 남겨주세요!

List of Articles
번호 제목 글쓴이 날짜 추천 수 조회 수
71 게시판에 인기,베오베 아이콘 출력하기 file [1] title: [ani]깜빡이는 표정빽짱구 2018-09-22   136
70 사이트내 Nprogress 적용 file title: [ani]깜빡이는 표정빽짱구 2018-09-17   96
69 SEO 모듈 동작이 안될때 title: [ani]깜빡이는 표정빽짱구 2018-09-16   88
68 관리자 '잘못된 요청입니다' 출력시 title: [ani]깜빡이는 표정빽짱구 2018-09-15   100
67 xe 설치된 사이트 네이버 웹마스터 도구 등록이 제대로 안될때 title: [ani]깜빡이는 표정빽짱구 2017-06-22   304
66 웹미니 로그인 위젯 카운트다운 삭제법 좀 알려주세요. 롱코트 2016-12-26   321
65 XE 유용한 함수들 title: [ani]깜빡이는 표정빽짱구 2016-09-02   260
64 XE 관리자로 로그인시 관리자 페이지 500에러 발생할때 title: [ani]깜빡이는 표정빽짱구 2016-02-28   301
63 XE 관리자 사이트 메뉴 편집에 내용이 안나올때 title: [ani]깜빡이는 표정빽짱구 2016-02-28   358
62 XE 1.5.x 사용자들 중에 IE9에서 셀렉트박스 목록이 안보일때 title: [ani]깜빡이는 표정빽짱구 2012-06-30   1669
61 댓글 역순으로 출력하기 오니기리죠 2012-06-10   1452
60 1.5.1에서 파일업로드가 안 되는 분 보세요. 오니기리죠 2012-06-10   1341
59 XE 속도 개선 팁 [1] 오니기리죠 2012-06-10 1 1702
58 스마트폰이 없을때 모바일 페이지를 봐야될경우 오니기리죠 2012-06-10   1345
57 관리자에서 그룹검색을 이용한 회원목록 제대로 안 보일때.. 오니기리죠 2012-06-10   1326
56 모바일 첨부,댓글,댓글쓰기 항상 열어놓기 오니기리죠 2012-06-10 1 1426
55 제로보드 1.5 이상 게시판에 페이스북 댓글 플러그인 설치법 오니기리죠 2012-06-10   1481
54 nginx 에서 minify 쓰기 오니기리죠 2012-06-10   1808
53 조회수 클릭때마다 올라가기 - 송동우님 오니기리죠 2012-06-10   1432
52 xe1.4.*에서 1.5로 업데이트하는 방법 title: [ani]깜빡이는 표정빽짱구 2012-06-04   1705