코스모스팜 스레드
탭메뉴 팝업창 모바일화면에서적용 문의
안녕하세요...
워드프레스하고는 관련이 없는데 혹시 도움받을수 있는지 몰라 문의드립니다.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>세중아 소식</title>
<link href="jQueryAssets/jquery.ui.core.min.css" rel="stylesheet" type="text/css">
<link href="jQueryAssets/jquery.ui.theme.min.css" rel="stylesheet" type="text/css">
<link href="jQueryAssets/jquery.ui.tabs.min.css" rel="stylesheet" type="text/css">
<script src="jQueryAssets/jquery-1.8.3.min.js" type="text/javascript"></script>
<script src="jQueryAssets/jquery-ui-1.9.2.tabs.custom.min.js" type="text/javascript"></script>
</head>
<body>
<div id="Tabs1">
<ul>
<li><a href="#tabs-1">10월</a></li>
<li><a href="#tabs-2">10월</a></li>
<li><a href="#tabs-3">11월</a></li>
<li><a href="#tabs-4">11월</a></li>
<li><a href="#tabs-5">12월</a></li>
<li><a href="#tabs-6">원아모집</a></li>
</ul>
<div id="tabs-1">
<p><img src="http://www.sejoonga.co.kr/main/sejoonga_e_01.jpg"></p>
</div>
<div id="tabs-2">
<p><img src="http://www.sejoonga.co.kr/main/sejoonga_e_02.jpg"></p>
</div>
<div id="tabs-3">
<p><img src="http://www.sejoonga.co.kr/main/sejoonga_e_03.jpg"></p>
</div>
<div id="tabs-4">
<p><img src="http://www.sejoonga.co.kr/main/sejoonga_e_04.jpg"></p>
</div>
<div id="tabs-5">
<p><img src="http://www.sejoonga.co.kr/main/sejoonga_e_05.jpg"></p>
</div>
<div id="tabs-6">
<p><img src="http://www.sejoonga.co.kr/main/sejoonga_e_06.jpg"></p>
</div>
</div>
<script type="text/javascript">
$(function() {
$( "#Tabs1" ).tabs();
});
</script>
</body>
</html>
제가 팝업창을 위 형식처럼 html로 탭메뉴를 만들어 올렸는데 모바일에서는 탭메뉴 적용이 안되서요. 모바일에서도 탭메뉴 적용이 되게 보이게 하려면 어떻게 하면 좋을지 조언부탁드립니다...
-
스레드봇 (31056 Point)ㆍ2019.09.23 10:31
안녕하세요~^^
jQuery UI Tabs가 모바일에서만 동작하지 않는다는 말씀이신지요?
올려주신 코드만으로는 저희 쪽에서 도움을 드리는 데 한계가 있습니다.
jQuery 코드가 정상적으로 동작하지 않는다면
브라우저의 개발자 도구(F12) Console 창에 에러 메시지가 표시되는지 확인해보시겠어요?
jQuery UI Tabs 관련해서는
아래의 링크를 참고해보세요.
실제 확인 가능한 페이지 주소 알려주시면 살펴보겠습니다.
고맙습니다.
-
에키 (190 Point)ㆍ2019.09.23 10:36
-
스레드봇 (31056 Point)ㆍ2019.09.23 13:42
올려주신 페이지 주소로 확인해보니
PC 화면에서는 팝업창이 정상적으로 로드되며 표시되는 것을 확인했습니다.
크롬 브라우저의 개발자 도구에 있는 Toggle device toolbar를 활용하여
페이지 소스보기 해서 로드되는 HTML 코드를 보니 팝업창 레이아웃이 표시되지 않고 있습니다.
드림위버 쪽에 관련 설정이 있는지 확인해보시겠어요?
고맙습니다.
-
에키 (190 Point)ㆍ2019.09.24 11:48
고맙습니다.
드림위버에서 모바일 적용 페이지를 찾아서 모바일에서도 잘 보이게 했는데,
<div data-role="page" id="page" style="min-height: 480px;"></div>
이 부분이 모바일 적용부분인데 모바일에서는 팝업창이 잘 보이는데 데스크탑에서는 이 적용부분때문에 팝업창 아래로 길게 화면이 나와서 크롬 도구로 소스 찾아서 style="min-height: 480p 이렇게 삽입했는데 적용이 안되네요.
http://www.sejoonga.co.kr/news_2019
보시고 맞는 적용코드 알려주시면 감사하겠습니다...
-
스레드봇 (31056 Point)ㆍ2019.09.24 13:30
안녕하세요.
올려주신 페이지 주소로 확인해보니
현재 min-height 속성이 937px로 설정되어 있는 듯합니다.
min-height 속성을 지우시거나
min-height 속성을 auto로 설정해서도 확인해보시겠어요?
고맙습니다.
