2
jQuery 모바일 프레임 워크를 사용하여 개발 한 간단한 2 페이지 웹 사이트가 있습니다. 시간 선택을 위해 Datebox 플러그인을 사용할 필요가있었습니다. 내 웹 사이트의 두 페이지 모두 똑같은 .php 파일에 있으며 div로 구분되어 data-role="page"으로 적절하게 구분됩니다.jQuery mobile Datebox CSS가 제대로로드되지 않습니다.
내 유일한 문제는 웹 페이지의 첫 번째 페이지에 날짜 상자가 있으면 제대로로드되지만 다른 페이지에서는 아이콘이 엉망입니다.
<!DOCTYPE html>
<html>
<head>
<title>Home</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
<script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
<link href="http://cdn.jtsage.com/jtsage-datebox/4.1.1/jtsage-datebox-4.1.1.jqm.min.css" rel="stylesheet" type="text/css">
<script src="http://cdn.jtsage.com/jtsage-datebox/4.1.1/jtsage-datebox-4.1.1.jqm.min.js" type="text/javascript"></script>
</head>
<body>
<div data-role="page" id="index">
<header data-role="header" data-position="fixed">
<h1>Home</h1>
</header>
<div data-role="main" class="ui-content">
<div class="ui-field-contain">
<label for="datebox">Time (seconds)</label>
<input type="text" data-role="datebox" data-options='{"mode":"calbox"}'>
</div>
</div>
<footer data-role="footer" data-position="fixed" style="text-align:center;" class="ui-body-a">
<div data-role="navbar">
<ul>
<li><a href="#index" data-direction="reverse" class="ui-btn ui-icon-plus ui-btn-icon-left ui-btn-active ui-state-persist">Home</a></li>
<li><a href="#onoff" class="ui-btn ui-icon-plus ui-btn-icon-left">ON/OFF</a></li>
<li><a href="#timer" class="ui-btn ui-icon-plus ui-btn-icon-left">Timer</a></li>
<li><a href="#" class="ui-btn ui-icon-plus ui-btn-icon-left">Scheduler</a></li>
</ul>
</div>
</footer>
</div>
<div data-role="page" id="onoff">
<header data-role="header" data-position="fixed">
<h1>ONOFF</h1>
</header>
<div data-role="main" class="ui-content">
<div class="ui-field-contain">
<label for="datebox">Time (seconds)</label>
<input type="text" data-role="datebox" data-options='{"mode":"calbox"}'>
</div>
</div>
<footer data-role="footer" data-position="fixed" style="text-align:center;" class="ui-body-a">
<div data-role="navbar">
<ul>
<li><a href="#index" class="ui-btn ui-icon-plus ui-btn-icon-left">Home</a></li>
<li><a href="#onoff" data-direction="reverse" class="ui-btn ui-icon-plus ui-btn-icon-left ui-btn-active ui-state-persist">ON/OFF</a></li>
<li><a href="#timer" class="ui-btn ui-icon-plus ui-btn-icon-left">Timer</a></li>
<li><a href="#" class="ui-btn ui-icon-plus ui-btn-icon-left">Scheduler</a></li>
</ul>
</div>
</footer>
</div>
</body>
</html>
다음 이미지는 문제를 보여줍니다. 페이지로드에서 page-role="page" 및 id="index" 가진 첫번째 DIV로드되고 datebox 아이콘이 의도 한대로 작동합니다
을하지만 ON/OFF 탭을 바닥 글 네비게이션 바을 사용하여 두 번째 페이지로 이동하는 경우,이 얻을 이상한 아이콘 배치 :
오해 여기에 무슨 일이 일어나고 있는지 알아내는 데 도움이 바랍니다.
이 답변은 참고 용으로 만 추가되었습니다. –