jQuery mobile Datebox CSS가 제대로로드되지 않습니다.

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 탭을 바닥 글 네비게이션 바을 사용하여 두 번째 페이지로 이동하는 경우,이 얻을 이상한 아이콘 배치 :

오해 여기에 무슨 일이 일어나고 있는지 알아내는 데 도움이 바랍니다.

출처

2017-04-09 user3889963

은 머리에 못을 명중 user3889963.

Datebox 용 JQM 용 소스 파일을 다운로드 한 다음 머리 속에 직접 호출하십시오.

<script src="../jtsage-datebox.min.js" type="text/javascript"></script> 
<link href="../jtsage-datebox.min.css" rel="stylesheet">

이 이전 질문은 직접 설치 파일과 협력 여기에 CDN Jquery Mobile DateBox plugin only working when linked directly to page

를 통해 플러그인을 사용에 문제가 표시됩니다.

출처

2017-04-09 15:42:33

이 답변은 참고 용으로 만 추가되었습니다. –

고유 이름 지정이 문제입니다.

두 페이지 모두에서 동일한 이름으로 datebox 항목을 호출하므로 첫 번째 페이지 상자 만 올바르게 스타일이 지정됩니다.

두 번째 페이지의 이름을 datebox2로 변경하면 문제가 해결됩니다. 첫 번째 고유 ID 인 "datebox"를 검색하기위한 레이블로 그 스타일을 지정합니다. 이 페이지에 걸쳐 datebox 플러그인을 사용하는 대신 머리에 CDN 링크의 로컬 파일을 저를 활성화하여 불과하다 왜

<div data-role="main" class="ui-content"> 
      <div class="ui-field-contain"> 
       <label for="datebox2">Time (seconds)</label> 
       <input type="text" data-role="datebox" data-options='{"mode":"calbox"}'> 
      </div> 
     </div>

출처

2017-04-09 14:28:22

문제가없는 것 같습니다. 나는 여전히 dateBox2에 대한 라벨을 변경 한 후에 같은 결과를 얻었습니다. – user3889963

@ user3889963이 답변은 잘못되었지만 곧 Datebox 필드에 대한 고유 한 이름 지정을 권장합니다. 곧 JQM과 함께 datebox의 값을 타겟팅하려고 할 때 문제가 발생할 것입니다. . –

흠, 나는 확실하지 않다. 파일은 여기에있는 다운로드 빌더를 사용하여 생성 된 :

http://dev.jtsage.com/DateBox/builder/

출처

2017-04-09 14:59:11 user3889963

jQuery mobile Datebox CSS가 제대로로드되지 않습니다.

답변

관련 문제