스크린샷 2018-02-23 오후 3.17.24.png

 

상단 탭바에 보면 탭바 개수가 4개이면 가로축 크기를 기준으로 4등분한 글씨가 영역으로 잡히게 되는데,

해당 가로축을 넘어서 글자가 숨겨져있다가 스와이핑 좌우로 할때 마다 하나씩 새로운 글씨가 나오게 못할까요?

okcasghbag 앱이나 다른것들 처럼..

 

혹시 소스의 어느부분을 고칠 수 있을지..

또는 해당 부분 간단하게 구현(알바비라도 드리도록 하겠습니다(투입 시간대비 충분히 많이 협의))할 수 있을지 확인 부탁드립니다

스크린샷 2018-02-23 오후 3.17.24.png

 

https://xe1.xpressengine.com/index.php?mid=download&package_id=22753542

Atachment
첨부
  • ?
    질문이 아니라 제작의뢰를 하시는건가요?
  • ? ?
    되는지 물으면서 해주실분을 찾는거 같으신... 글 내용을 분리해야 할듯
  • ? profile
    음 간단하게 할 수 있는 부분이라면 질문이겠군요...

    만약에 어려운 부분이라면 정식으로 의뢰를 드리는것이 맞다고 생각합니다.
  • ? profile
    음 간단하게 할 수 있는 부분이라면 질문이겠군요...

    만약에 어려운 부분이라면 정식으로 의뢰를 드리는것이 맞다고 생각합니다.
  • profile
    사용하는 것이 아니라서 설치를 해보았습니다.
    이미지만으로 예상해보기에는 본문타입을 사이트맵으로 설정했을때 레이아웃 설정에서 지정한 메뉴가 나오는 부분인가보네요.

    해당 li의 가로 길이100%로 늘리고, 슬라이딩 되게 하면 될 것 같은데요.
    예전에 슬라이딩 메뉴 만들때 jquery플러그인으로 만들었었는데 최근엔 만들어 본적이 없어서 어떤 걸 이용하는지는.....-0-;;;;;;;
  • profile profile

    앗 코드가 같이안올라갔나요. 코드를 같이 올리겠습니다. 혹시 조금 봐주실 수 있으실지..

    Atachment
    첨부
  • profile
    저위에 4개가 아니라 7개 10개 이렇게 하고 싶습니다. 그럼 칸이 모자르니, 오른쪽 화면 보이지 않는 영역까지 숨겨져있다가 스크롤 하면 나오게 하고 싶은데, 실상은 10개면 10개 저 보이는 영역 내에서 10등분해서 나오게 됩니다 ㅜ.ㅜ
  • profile
    지금보니 첨부파일 layout.html 안에 아래와 같은 코드가보입니다.

    <!--@if($layout_info->layout_type == 'main')-->
    <!--%import("js/mansonry/masonry.pkgd.min.js")-->
    <ul class="mainNavi" id="tsNavMenu">
    {@
    $_items = explode('@',$layout_info->main_slides_menu);
    $_width = 100 / count($_items);
    }
    <li loop="$_items => $mkey,$mval" onclick="tsM.pagination({$mkey})" class="pag_{$mkey} {$layout_info->layout_color}" style="width:{$_width}%;">{$mval}</li>
    </ul>
    </div>
    <div class="bodyMain">
    <div id = "tsM" class="swipe"|cond="!$act">
    {$content}
    </div>
    ======================
    $_width = 100 / count($_items);
    이줄이 핵심인것 같은데.. 혹시 방법이있을까요?
  • profile ?
    4개 고정을 하고 싶으시다면 25%로 고정시키고
    넘치는 영역 숨겨지는 것과 가로 스크롤은 검색하여..ㅎㅎ
  • profile profile

    악....
    긴 댓글 쓰던거 날라갔네요.
    장황하게 설명하던거 날라가서 핵심만 요약해봅니다.

     

    $_width변수는 100을 메뉴의 갯수로 나눈 값으로 메뉴 갯수에 따라서 가로 길이를 가변으로 적용하기 위한 변수입니다.
    길이를 고정하려면 $_width = 25; 이렇게 하면 됩니다.

     

    다음은 ul하위인 li를 슬라이딩 시켜야 하는데
    li는 float:left이어야 하구요. 
    이 부분은 css를 확인해보셔야 하는데.. 가로로 주욱 나열된 것을 보면 아마 이미 먹었을 것 같네요.

     

    http://touchslider.com/ 에서 받은 플러그인을 불러옵니다.
    <script src="jquery.touchslider.min.js"></script>

     

    그리고 ul 아이디 값에 터치슬라이더를 적용해줍니다.
    <script>
    jQuery(function($) {
        $("#tsNavMenu").touchSlider({
            view : 4
        });
    });
    </script>


    바꾸거나 추가해야 할 부분은 볼드체만 보시면 됩니다.

     

    테스트는 안해봤습니다. -0-;;;;;

     

    잘 되시면 커피한잔 사주세요~ 우히히

  • ? profile
    4개 고정을 하고 싶은건 아니구요.

    앞에 4개는 고정이되든 없어지든 상관없는데 어쨋거나 10개로 지정을 하면
    오른족에서 숨어있던 나머지 6개가 숙숙 들어왔으면 좋겠습니다.
    물론 가장 왼쪽에 있던 1개씩은 없어지게 되려나요?
    생각해보니 이게 단순히 수치 한두개 바꾼다고 될일이 아닐것 같네요. 슬라이더가 왼쪽은 사람지고 오른쪽은 나타나는 항목들이 있어야될것 같아서요..

    검색해도 답이안나오네요 ㅜ.ㅜ
  • profile profile
    자세한 설명 감사합니다! 주말에도 밤늦게까지 이렇게 상세하게 도움주신점 정말 정말 감사드려요!

    다만 읽어봤는데.. $_width 변수는, 탭바 항목 개수(ex:4개)를 100에서 나눈값, 25를 %로 변환시켜서 가로 행 width의 25%를 점유하라.. 라는 식이더라구요.
    따라서 $_width를 25로 해버리면 탭바가4개일때 6.25%;;가 되버립니다.. 그냥 고정가로값은 그대로구요, 위에 제가 생각한 부분과는 다르게 구현되더라구요 ㅜ.ㅜ

    그리고 터치슬라이더는... 음 터치슬라이더는 이미 구현되어있는 부분입니다. 이것은 제가 설명이 조금 부족했었던것 같습니다.
  • profile profile
    역시 전체 코드를 보고 수정하는게 아니라서 눈감고 코끼리 다리 만진 격인가보네요.-0-;;;;;
  • profile ?
    PHP가 코끼리를 내세우고 있으니 제대로 본게 아닐까요 역시 더블유님은 초고수신듯...
  • ? profile
    크하하하하 전 겨우 입에 풀칠만하는 허섭한 개발자이죠.. 크
  • profile profile
    <ul class="mainNavi" id="tsNavMenu">의 하위에 있는 li에 대한 css를 봐야 알 것 같아요.

    레이아웃 설정에서 본문타입은 메인이고, 위쪽 메뉴를 4개 고정크기에 슬라이딩이 되게 하고 싶다.
    요게 목적이신거죠?
  • profile profile
    제가 확인이 늦었습니다.
    '레이아웃 설정에서 본문타입은 메인이고,' <- 이부분을 이해못하였습니다...

    뒤에 말씀하신 4개를 고정크기에 슬라이딩이 이미 되고 있어요 위 사이트들어가보면 나옵니다.
    다만 그 고정크기에, 4개가 아닌 6개가 되어서, 2개는 오른쪽 화면 뒤에 숨어있다가,
    스와이프해서 2,3,4,5,6번으로 이동할시에 한칸씩 옆으로 이동 (반대로 1번은 왼쪽 화면 밖으로 이탈)을 하고 싶어요. .ok cashbag앱을 보시면 어떤말인지 바로 이해되실것 같습니다!