XETOWN

안개 골목

최신 웹 개발에 대한 이야기들을 나눠보세요. XE개발에 대해서도 배워볼 수 있습니다.
?

단축키

Prev이전 문서

Next다음 문서

크게 작게 댓글로 가기 인쇄
?

단축키

Prev이전 문서

Next다음 문서

크게 작게 위로 아래로 댓글로 가기 인쇄

 jquery Infinite Scrolling 을 이용해 구현하려 관련 플러그인을 찾아 보았으나 ajax 와 연동해 다른 페이지를 로딩후 컨텐츠를 출력해 주는 방식만 보여서..

 

계속 검색하자니 시간만 걸릴거 같아 직접 구현해 봤습니다.

허접하지만 필요하신 분들에게는 팁이 되길..!

 

모바일,PC 작동은 확인했습니다.

아이템들은 li 태그이며 css class를 btm2_item 으로 정의했습니다.

 

데모 및 소스 참고 : https://www.xeyeyak.com/main/introduction  

 

<script>
var startHeightMin=788; //트리거 시작 스크롤 위치
var itemHeight=100; // 아이템별 높이
var itemMax=0; //현재 표시 아이템수
var itemLimit=0; // 모든 아이템 수
jQuery(window).scroll(function() {
itemLimit=jQuery('.btm2_item').length; // 모든 아이템수 btm2_item css class 가 표시될 객채 li
if(itemMax > itemLimit){ //표시 아이템 수가 모든 아이템수보다 높으면 작동 하지 말아야..
    return;
}
cehcksc();
});

function cehcksc(){
//#startdiv 는 해당 객채를 지나가면 작동을 한다 알맞게 변경 (트리거)
    if (jQuery(window).scrollTop() >= ((jQuery(document).height() - jQuery(window).height()) - jQuery('#startdiv').innerHeight())-100) {
          //console.log(jQuery(window).scrollTop()); // startHeightMin 찾기
        var docHeight=jQuery(window).scrollTop() - startHeightMin;
        var itemLength=Math.floor(docHeight/itemHeight); // 스크롤 위치에서 시작 스크롤 위치를 -,출력할 아이템수를 설정
        if(itemMax<itemLength){ // 수가 낮아 졌을때는 표시 안함
            itemMax=itemLength; // itemMax 갱신
            jQuery('.btm2_item').each(function(index,item){ //btm2_item
                if((itemMax-1) >= index){
                    if(jQuery(this).css("display") == "none"){
                        jQuery(this).fadeIn(2000);
                    }
                }
            });
        }
        
      }
}
</script>

 

<div id="intd_warp">
    <div class="t_left_img">
    <img src="/images/introduction/top_img1.png">
    </div>
    <div class="t_left_text">
    <p class="title_large">예약 하기 좋은 솔루션<br>
    XpressEngine 예약 모듈
    </p>
    <p class="title_msg">XE 예약 모듈은 국산 CMS인 XpressEngine 모듈로 개발이 되었습니다.
    <br>중복 예약 걱정 없이 다양한 기능으로 실시간 예약 업무를 지원합니다.
    </p>
    </div>
    <div class="sline">
    <a href="/main/demo_main" class="ct-btn blue large cfont_light">실시간 체험 하기</a>
    </div>
    
    <section id="sec1" class="bmt-section bmt-section--no-border">
    <div class="pt1">
    <p class="title_large">XE 예약 모듈의 특징</p>
    </div>
    <div class="pt2 ">
    <p class="p2_desc_text btm20">저렴한 비용으로 스마트한 실시간 예약 관리가 가능합니다.</p>
    <ul class="btm_list">
          <li class="btm_item">
            <img src="/images/introduction/ft01.png" class="btm_image">
            <h4 class="btm_head">모바일 완벽한 예약 지원</h4>
            <p class="btm_desc">모바일에 최적화된 예약 스킨 기능
              <br>모바일에서 카드 결제 및 예약,확인,취소</p>
          </li>
          <li class="btm_item">
            <img src="/images/introduction/ft02.png" class="btm_image">
            <h4 class="btm_head">친숙한 사용성</h4>
            <p class="btm_desc">누구라도 손쉽게 예약 가능한 
              <br>친숙함으로 고객에게 편리한 사용성 제공</p>
          </li>
          <li class="btm_item">
            <img src="/images/introduction/ft03.png" class="btm_image">
            <h4 class="btm_head">저렴한 운영 비용</h4>
            <p class="btm_desc">수수료,월,년간 이용료가 없는,
              <br>단한번 구매로 평생 소유형 솔루션</p>
          </li>
        </ul>

    </div>
    </section>
    
    <section class="bmt-section ">
    <div class="pt1">
    <p class="title_large">XE 예약 모듈 고객 서비스</p>
    </div>
    <div class="pt2">
    <p class="p2_desc_text">구입 부터 구입후 지원까지 빈틈 없는 서비스</p>
    </div>

    <div class="ss_left"  id="startdiv">
    <p class="ss_title">무료 업그레이드</p>
    <p class="ss_desc">고객님들의 건의 사항,기능 추가 업데이트를 꾸준하게 하고 있습니다.<br>
    최근 1년 약 20 차례의 버전 올림과 수십 가지의 기능 개선등이 이루어 졌습니다.<br>
    </p>

    <p class="ss_title mgt30">커스터 마이징 기술 지원</p>
    <p class="ss_desc">구매 고객사 대상으로 각 업체의 요청시 업체 특성에 맞게 스킨 수정 하실 수 있도록,<br>필요한 기술 지원을 해드리고 있습니다.
    </p>

    </div>

    <div class="ss_right">
    <img src="/images/introduction/ss01.png">
    </div>

    </section>

    <section class="bmt-section" id="sec4">
    <div class="pt1" >
    <p class="title_large">XE 예약 모듈의 기능 개요</p>
    </div>
    <div class="pt2 btm20">
    <p class="p2_desc_text">예약 업체에 최적화된 기능을 제공합니다.</p>
    </div>


    <ul id="ullist">
    <li class="btm2_item noshow">
    <img src="/images/introduction/icons/skins2.png"  class="btm2_image">
    <h4 class="btm2_head">다양한 스킨 </h4>
    <p class="btm2_desc">누구라도 손쉽게 예약 가능한 사용자 환경으로 제작된 스킨들이 제공
    <br>펜션,캠핑장,리조트,호텔,게스트하우스,병원,미용실등 다양한 업종에서 활용 가능합니다.</p>
    </li>


    <li class="btm2_item noshow">
    <img src="/images/introduction/icons/sms.png" class="btm2_image">
    <h4 class="btm2_head">문자 메세지</h4>
    <p class="btm2_desc">예약 현황에 따라 자동으로 사용자,관리자에게 발송되는 SMS 서비스<br>
    자동 발송 이외에도 고객에게 직접 관리자가 메세지를 발송 가능합니다.    </p>
    </li>

    <li class="btm2_item noshow">
    <img src="/images/introduction/icons/pg.png" class="btm2_image">
    <h4 class="btm2_head">PG(카드 결제) 지원</h4>
    <p class="btm2_desc">LG U+,NHN KCP,이니시스,카카오페이등 다양한 PG를 지원<br>
    PC,모바일 웹표준 결제를 완벽하게 지원합니다.
    </p>
    </li>

    <li class="btm2_item noshow">
    <img src="/images/introduction/icons/unlimhome.png" class="btm2_image">
    <h4 class="btm2_head">무제한 객실</h4>
    <p class="btm2_desc">객실을 제한 없이 추가할 수 있습니다.<br>
    추후 객실 확장을 하셔도 걱정하지 마세요. 제한 없이 객실을 추가 가능합니다.
    </p>
    </li>

    <li class="btm2_item noshow">
    <img src="/images/introduction/icons/clock.png" class="btm2_image">
    <h4 class="btm2_head">자동 취소</h4>
    <p class="btm2_desc">예약만 하고 결제하지 않는 노쇼(No Show) 방지<br>
    2중의 입금 안내,자동 취소 기능을 지원합니다.
    </p>
    </li>

    <li class="btm2_item noshow">
    <img src="/images/introduction/icons/cal.png" class="btm2_image">
    <h4 class="btm2_head">다중 성수기</h4>
    <p class="btm2_desc">여러 기간의 다중 성수기 기능을 지원<br>
    봄,여름,가을,겨울,휴가 기간등 다양한 성수기 할증 / 할인 설정이 가능합니다.
    </p>
    </li>

    <li class="btm2_item noshow">
    <img src="/images/introduction/icons/setday.png" class="btm2_image">
    <h4 class="btm2_head">영업일 설정</h4>
    <p class="btm2_desc">영업일 지정,업체 휴일 지정 가능<br>
    주간 요일별,지정 기간,오늘로 부터 몇일만 예약 가능하며 업체 휴일 지정이 가능합니다.
    </p>
    </li>

    <li class="btm2_item noshow">
    <img src="/images/introduction/icons/dateset.png" class="btm2_image">
    <h4 class="btm2_head">특정일 할증</h4>
    <p class="btm2_desc">지정일 설정 기능<br>
    성수기 이외에 특별한 하루,명절등의 지정일에 할증/할인 지원 합니다.
    </p>
    </li>

    <li class="btm2_item noshow">
    <img src="/images/introduction/icons/longdaydiscount.png" class="btm2_image">
    <h4 class="btm2_head">연박 할인</h4>
    <p class="btm2_desc">연박시 할인 기능<br>
    2박이상 예약시 각 객실별로 할인 설정이 가능합니다.
    </p>
    </li>

    <li class="btm2_item noshow">
    <img src="/images/introduction/icons/options.png" class="btm2_image">
    <h4 class="btm2_head">추가 옵션 판매</h4>
    <p class="btm2_desc">예약시 상품 판매 가능<br>
    바베큐,조식,침구류등의 추가 옵션 상품을 예약 단계에서 추가할 수 있습니다.
    </p>
    </li>


    <li class="btm2_item noshow">
    <img src="/images/introduction/icons/mileage.png" class="btm2_image">
    <h4 class="btm2_head">회원 마일리지</h4>
    <p class="btm2_desc">예약 고객의 마일리지 적립<br>
    단골 예약 고객을 만들어 보세요. 다양한 조건의 마일리지 적립 / 사용 기능이 있습니다.
    </p>
    </li>

    <li class="btm2_item noshow">
    <img src="/images/introduction/icons/notification.png" class="btm2_image">
    <h4 class="btm2_head">고객 문의 알림</h4>
    <p class="btm2_desc">고객님을 놓치지 마세요.<br>
    게시판에 문의/답변을 남길 경우 실시간으로 사용자/관리자에게 실시간 문자 알림을 보냅니다.
    </p>
    </li>

    <li class="btm2_item noshow">
    <img src="/images/introduction/icons/mxls.png" class="btm2_image">
    <h4 class="btm2_head">엑셀 변환</h4>
    <p class="btm2_desc">예약 현환 엑셀 변환 지원<br>
    별도의 고객,예약 데이터 베이스 구축을 위한 예약현황 엑셀 데이터 추출을 지원합니다.
    </p>
    </li>

    <li class="btm2_item noshow">
    <img src="/images/introduction/icons/setting.png" class="btm2_image">
    <h4 class="btm2_head">편리한 관리자</h4>
    <p class="btm2_desc">다양한 기능의 관리자 기능<br>
    달력형 예약 현황,관리자 전용 메모등 예약 업무를 편하게 볼 수 있도록 도와드립니다.
    </p>
    </li>


    <li class="btm2_item noshow">
    <img src="/images/introduction/icons/seo.png" class="btm2_image">
    <h4 class="btm2_head">검색 최적화</h4>
    <p class="btm2_desc">SEO 최적화 기능<br>
    XE의 SEO 모듈을 통해 네이버,구글등 검색 노출에 최적화된 사이트 구축이 가능합니다.
    </p>
    </li>



    <li class="btm2_item noshow">
    <img src="/images/introduction/icons/skins.png"  class="btm2_image">
    <h4 class="btm2_head">XE 기반의 확장성</h4>
    <p class="btm2_desc">추가 기능은 언제든 설치 가능
    <br>수백가지의 디자인 레이아웃,애드온,모듈을 통해 손 쉽게 개성있는 사이트 구축이 가능합니다.</p>
    </li>



    <li class="btm2_item noshow">
    <img src="/images/introduction/icons/server.png"  class="btm2_image">
    <h4 class="btm2_head">오픈 소스</h4>
    <p class="btm2_desc">사용자 예약 스킨,관리자 템플릿 소스를 100% 공개
    <br>업체 환경에 맞게 언제든 커스터 마이징 작업이 가능합니다.</p>
    </li>

    </div>
    </section>

</div>

 

#intd_warp{
clear:both;
width:100%
}
#intd_warp p,div,table,span{
font-family:'ng','나눔고딕','NanumGothic','맑은 고딕','Malgun Gothic','Trebuchet MS' ;-webkit-font-smoothing: antialiased
}

.t_left_img{
float:left;
height:228px;
}
.t_left_text{
float:left;
padding:30px 20px 20px 20px;
}

#intd_warp .title_large{
font-size:30px;
font-weight:500;
}

#intd_warp .title_msg{
font-family:'ng','나눔고딕','NanumGothic';
margin-top:20px;
font-size:14px;
font-weight: 400;
color:#6a6a6a;
line-height: 28px;
}

#intd_warp .sline{
clear:both;
width:100%;
margin: 0 auto;
background-color: #f7f7f7;
border-top: 1px solid #f1f0f0;
padding: 20px 0;
text-align: center;
height:60px;
}

.cfont_light{
font-weight:400 !important;
}

.pt1{
text-align:center;
}

.pt2{
margin-top:10px;
text-align:center;
}

.p2_desc_text{
font-size:14px;
font-weight: 400;
color:#6a6a6a;
line-height: 28px;
}

.btm_list{
    font-size: 0;
}

#sec1 ul{
list-style: none;
font-size: 0;
display: block;
list-style-type: disc;
-webkit-margin-before: 1em;
-webkit-margin-after: 1em;
-webkit-margin-start: 0px;
-webkit-margin-end: 0px;
-webkit-padding-start: 0px;
}

.btm_item:first-child {
    margin-left: 10px;
}

.btm_item{
    margin-left: 0;
    position: relative;
    display: inline-block;
    vertical-align: top;
    width: 310px;
    margin: 0 0 0 15px;
    padding: 228px 0 0;
    text-align: center;
}

.btm_image {
    position: absolute;
    width: 290px;
    top: 0;
    left: 0;
    margin: 0;
    padding: 0;
    vertical-align: middle;
    color: transparent;
}

.btm_head {
    position: relative;
    font-size: 20px;
    font-weight: 700;
    line-height: 28px;
    color: #ff5875;;
    text-align: center;
    margin-bottom: 10px;
    display: block;
}

.btm_desc {
    position: relative;
    font-size: 14px;
    font-weight: 400;
    line-height: 22px;
    color: #6a6a6a;
    text-align: center;
}

.bmt-section:before {
    content: '';
    position: relative;
    display: block;
    margin: 0 auto;
    height: 80px;
    width: 100%;
    border-top: 1px solid #e5e5e5;
}

.bmt-section{
    padding: 0 0 80px;
overflow: hidden
}


.bmt-section--no-border:before {
    border-top: none;
}

.ss_left{
float:left;
margin-top:20px;
padding:20px 0 0 40px;

}

.ss_right{
float:right;
margin-top:20px;
padding:20px 40px 0 0;
}

.ss_title{
font-size: 20px;
font-weight: 700;
line-height: 28px;
color: #ff5875;
}

.ss_desc{
margin-top:10px;
font-size:14px;
font-weight: 400;
color:#6a6a6a;
line-height: 28px;
}

.mgt25{
margin-top:25px;
}


.mgt30{
margin-top:30px;
}

.btm20{
margin-bottom:20px;
}


#sec4 ul{
list-style:none;
font-size: 0;
-webkit-margin-before: 10em;
-webkit-margin-after: 1em;
-webkit-margin-start: 0px;
-webkit-margin-end: 0px;
-webkit-padding-start: 40px;
}


.btm2_image {

    width: 100px;
    margin: 0;
    padding: 0;
    vertical-align: middle;
}

.btm2_head {
   position: absolute;
top:0;
left:110px;
    font-size: 20px;
    font-weight: 700;
    line-height: 28px;
    color: #ff5875;
    text-align: center;
    margin-bottom: 10px;
    display: block;
}

.btm2_desc {
    position: absolute;
top:35px;
left:110px;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.4em;
    color: #6a6a6a;
    text-align: left;
}

.btm2_item{
position: relative;
    vertical-align: top;
    margin: 0 0 40px 0;

}


.noshow{
    display: none;
}

.hidden{
    display: none;
}

 

 

Code Hightlight가 탭을 구분 안하는군요.

tab 을 space 4개로 replace 했습니다.

  • profile
    socialskyo 2016.12.05 13:56:54

    워우!! 멋집니다.

     

    ps. 계속 검색하자니 시간만 걸릴것 같아 직접 구현해봤습니다. --> bb !

  • profile
    구름이 2016.12.05 14:08:31
    감사합니다.
    요즘은 소스가 짧아야 멋져 보이는데 제건 그렇지가 않아서요 ㅎㅎ
  • ?
    SimpleCode 2016.12.05 14:00:16
    멋지게 만드셨네요!! 사이트 전체가 완성도 높은 것 같아요.
  • profile
    구름이 2016.12.05 14:09:10
    주말 내내 디자인 배웠네요.
    늘어 나는건 일러스트랑 포토샵 레이어 만지는 속도에요.
    감사합니다.
  • profile
    착한악마 2016.12.05 14:16:39
    오호 좋네요...^^ 추후 참고 할수 있는 좋은 자료입니다.
  • profile
    구름이 2016.12.05 14:45:12
    추후 참고 하실때 도움이 되길 바라겠습니다.
  • profile
    우성군 2016.12.05 16:06:16
    와우 뭔지 잘 모르겠지만 멋집니다.
  • profile
    구름이 2016.12.05 16:56:05
    제가 설명을 잘 못해서요;
    페이지 밑까지 스크롤 내리면 ... 추가로 컨텐츠가 출력 되는 기능에 대한 팁이에요.
    감사합니다!
  • ?
    팀9 2016.12.12 13:26:54
    한번 사용해보고 싶은데요.
    초보자의 경우 해당소스만 넣으면 되는지 CSS와는 어떻게 연동해야하는지
    어렵네요 ㅜ

    저같은 초보자를 위해서 풀어서 한번만 알려주실 수 있으실까요?
    죄송합니다.
  • ?
    Jack 2016.12.19 20:36:17
    seo측면에서는 문제가 없을까요?
  • ?
    SimpleCode 2016.12.19 20:59:57
    인피니트 스크롤 특성 상, 콘텐츠가 동적으로 변경되기 때문에 검색엔진이 크롤링하기가 어렵습니다.
    SEO는 따로 고려하셔야 되요.
  • profile
    구름이 2016.12.19 21:10:41
    페이지 모든 부분에 적용을 해두진 않았습니다.
    seo를 고려해서 말이죠.

List of Articles
번호 분류 제목 글쓴이 날짜 조회 수
264 최신 웹소식 클라우드플레어, 취약점으로 정보 유출 가능성 있어 3 new YJSoft 2017.02.24 176
263 소스공유 개발중이던 모듈 몇 가지를 공개합니다. 7 file SimpleCode 2017.02.22 208
262 XE 개발팁 최근게시물에서 alt 안에 html 소스가 먹힌 경우 이온디 2017.02.18 44
261 XE 개발팁 최근게시물 위젯에서 해당 게시판명 불러오는 함수 이온디 2017.02.18 29
260 최신 웹소식 Linode에서 5달러짜리 가상서버가 나왔네요. 10 기진곰 2017.02.15 154
259 XE 개발팁 그룹별로 게시물 보이게 하기 1 이온디 2017.02.15 67
258 소스공유 jquery를 이용하여 인풋에 기본값을 placeholder로 바꿔주는 소스 이온디 2017.02.11 55
257 XE 개발팁 HTML5 API 사용시 브라우저 지원 체크하기 file 후하니 2017.02.09 55
256 소스공유 APM 최신 Stable 소스 설치 4 아파치 2017.02.05 96
255 개발이야기 1년간 개발한 모듈의 관리자 페이지 디자인 변경 작업을 하면서.. 4 file 구름이 2017.01.24 159
254 XE 개발팁 동영상 삽입시 소스모드로 바꾸지 않아도 되도록 하기 8 기진곰 2017.01.09 186
253 소스공유 토렌트 정보 애드온 수정본 (트레커, 파일쪽 textarea처리) 3 file 우리아기 2017.01.07 128
252 XE 개발팁 애드온에서 변수 중복 방지하기 2 기진곰 2017.01.03 84
251 소스공유 APM 자동설치 스크립트... 28 file 아파치 2016.12.31 213
250 개발이야기 라이믹스가 한 살이 되었습니다. 15 file 기진곰 2016.12.18 282
249 개발이슈 php7 에서 xe 비정상 작동시 확인 구름이 2016.12.16 139
248 XE 개발팁 xe 템플릿에서 가변 변수 사용하기 2 구름이 2016.12.16 109
247 최신 웹소식 구글, 보이지 않는 reCAPTCHA 개발중 4 file 라르게덴 2016.12.12 254
» 소스공유 스크롤바를 아래로 내렸을때 숨겨둔 컨텐츠 표시하기( jquery Infinite Scrolling ) 12 구름이 2016.12.05 213
245 개발이야기 Nginx, Apache PageSpeed 모듈 7 우성군 2016.11.28 144
Board Pagination Prev 1 2 3 4 5 6 7 8 9 10 ... 14 Next
/ 14
위로
서버에 요청 중입니다. 잠시만 기다려 주십시오...