changePage 함수로 대화 상자를 표시하는 방법은 무엇입니까?

jQuery 모바일을 사용하여 간단한 위젯을 만들려고합니다. 버튼이 하나 있는데 그 버튼을 클릭하면 날짜 제출 양식을 표시하는 대화 상자가 나타납니다.changePage 함수로 대화 상자를 표시하는 방법은 무엇입니까?

$.mobile.changePage("#DatePage");

 <div data-role="dialog" id="DatePage" > 
     <div data-role="content"> 
     <form> 
       <input type="date" name="date" /> 
       <input type="submit"/> 
     </form> 
     </div> 
    </div>

지금, 나는이 버튼을 클릭하면이 대화 상자가 표시되도록하기 위해, 나는 다음 코드 줄을 사용하려고했습니다 :이처럼 내 HTML의 DIV를 정의

그러나 이렇게하면 아무 일도 일어나지 않습니다. 다른 인수를 추가하고 다른 변형을 사용하려고 시도했지만 아무 것도 작동하지 않습니다. 다른 곳에서 읽은 내용과 내가 본 예제에서이 줄은 대화를 보여줘야하지만 단순히 그렇지 않습니다. 내가 도대체 뭘 잘못하고있는 겁니까?

출처

2012-11-17 mobearette

사용이 조각

<button onClick="$.mobile.changePage('#DatePage', {transition: 'pop', role: 'dialog'});">Open Dialog</button>

버튼을 사용하여 대화 상자를 엽니 다, 나의 최종 솔루션에서 see working example

<!DOCTYPE html> 
<html> 
<head> 
    <meta charset="utf-8"> 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
    <title>Test</title> 
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" /> 
    <script src="http://code.jquery.com/jquery-1.8.2.min.js"></script> 
    <script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script> 
</head> 

<body> 
    <div data-role="page"> 
    <div data-role="header"> 
     <h1>Header</h1> 
    </div><!-- /header --> 

    <div data-role="content"> 
     <button onClick="$.mobile.changePage('#DatePage', {transition: 'pop', role: 'dialog'});">Open Dialog</button> 
    </div> 
    </div><!-- /page --> 

    <div data-role="page" id="DatePage"> 
    <div data-role="content"> 
     <h1>My Dialog</h1> 
     <form> 
     <input type="date" name="date" /> 
     <input type="submit"/> 
     <button data-rel="back">Close Dialog</button> 
     </form> 
    </div> 
    </div><!-- /page --> 

</body> 
</html>

출처

2012-11-17 20:24:49 Taifun

여전히 작동하지 않습니다. 나는 html에서 직접'onClick' 메서드로 시도해 보았고, 코드 스 니펫을 .js 파일에 넣으려고했으나 제대로 작동하지 않습니다. 디버그 출력을'onClick' 메쏘드에 넣었을 때 출력은 콘솔에 표시되지만'changePage' 부분은 여전히 무시됩니다. 또한 예제에서 단추를 클릭하면 처음 클릭 할 때만 작동합니다. 이것은 정상적인 행동입니까? – mobearette

코드로 http://jsfiddle.net을 준비하고 싶습니까? 당신은 맞습니다, 어쨌든 [내 jsfiddle] (http://jsfiddle.net/RSsRz/1/)이 한 번만 작동합니다, 이것은 아마도 jsfiddle 문제일까요? 때문에 내 코드를 HTML 페이지에 복사하고 예제로 사용하면 문제없이 작동합니다 ... – Taifun

대화 상자가 작동하지 않는 문제를 해결했습니다. 실제로, 나는 그것을 해결하지 않았다, 나는 방금 처음부터 단계적으로 HTML 단계를 재 작성하여 마침내 대화를 보여주기 시작했다. 그런 다음 이전 html과 비교하여 차이점을 발견하지 못했습니다. 한 번만 표시되는 대화 상자의 문제는 여전히 남아 있지만 적어도 표시되고 있습니다. "대화 없음"문제를 처리 한 후 실제로는 행복. 당신의 도움을 주셔서 대단히 감사합니다. 대화 상자가 한 번만 표시되는 이유를 파악하면 솔루션을 게시 할 것입니다. – mobearette

대화 상자가 다음 코드 조각에 의해 촉발되었다

$ .mobile.changePage ('# DatePage', {transition : 'pop'});

버튼을 처음 클릭했을 때 나타나는 대화 상자의 문제는 대화 상자가 처음 표시되고 두 개의 버튼 중 하나라도 클릭 한 후 대화 상자가 사라진 후에 다시 표시되지 않았기 때문에 나타났습니다. 대화의 배경이기 때문에 페이지를 볼 수는 있었지만 실제로는 없었습니다.

<!-- The popup dialog for date selection --> 
    <div data-role="page" id="DatePage"> 

     <div data-role="content">    
      <form id="DateSubmissionForm"> 
       <input type="date" name="date" /> 
       <a href="#FrontPage" input-type="submit" data-role="button" class="ui-btn-left">Submit</a> 
       <a href="#FrontPage" data-role="button"class="ui-btn-right">Cancel</a> 
      </form> 
     </div> 
    </div>

'제출'버튼은 실제로 첫 페이지로 다시 링크 '취소'문제를 방지하기 위해, 나는 다음과 같은 코드를 사용했다. 이 코드를 사용하면 첫 페이지가 다시 표시되고 버튼을 다시 클릭 할 수 있습니다.

출처

2012-11-19 12:38:30 mobearette

changePage 함수로 대화 상자를 표시하는 방법은 무엇입니까?

답변

관련 문제