2011-05-23 18 views
14

मैं Jquery mobile के साथ एक संवाद बनाने की कोशिश कर रहा हूं। मैंने स्वीकृत उत्तर in this SO question को संदर्भित करने का प्रयास किया है लेकिन यह मेरे लिए काम नहीं करता है।एक संवाद बनाना JQuery मोबाइल

<div data-role="page" id="first"> 
    <!-- Code --> 
    <div id = "dialog" data-rel="dialog"> 
     <div id = "errorText"></div> 
     <button id = "closeDialog">OK</button> 
    </div> 
</div> 

और यहाँ बनाने के लिए यह (एक समारोह के अंदर) जे एस है:

//Nothing checked. Cannot continue. Add error message to div 
$('#errorText').html("You must check the checkbox next to \"I Agree\" to continue"); 
//Open Dialog 
$('#dialog').dialog(); 

जब संवाद बनाने के लिए कोड में कुछ भी नहीं पहुँच जाता है तब होता है

यहाँ मेरी कोड है। सुझाव?

उत्तर

14

संवाद पर

$('#errorText').html("You must check the checkbox next to \"I Agree\" to continue"); 
$.mobile.changePage('dialog', 'slide', false, false); 

और जानकारी का उपयोग एक अलग पृष्ठ div आप अजाक्स के माध्यम से लोड करने या अपने HTML में शामिल कर सकते हैं जो होना चाहिए सकता है। यहाँ एक उदाहरण है।

<!DOCTYPE html> 
<html> 
    <head> 
    <title>Page Title</title> 
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0a4.1/jquery.mobile-1.0a4.1.min.css" /> 
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.5.2.min.js"></script> 
    <script type="text/javascript" src="http://code.jquery.com/mobile/1.0a4.1/jquery.mobile-1.0a4.1.min.js"></script> 
</head> 
<body> 
<div data-role="page"> 
    <div data-role="header"> 
     <h1>Sample</h1> 
    </div> 
    <div data-role="content"> 
     <p></p> 
     <p><a href="dialog.html" data-rel="dialog" data-role="button">Is this a question?</a></p> 
    </div> 
</div> 
<div data-role="page" data-url="dialog.html"> 
    <div data-role="header"> 
     <h1>Dialog</h1> 
    </div> 
    <div data-role="content"> 
     <p>Is this an answer?</p> 
    </div> 
</div> 
</body> 
</html> 
+3

यह मेरे लिए काम नहीं करता है बीटा संस्करण का उपयोग कर। – Homer

11

यह http://jquerymobile.com/demos/1.0b1/#/demos/1.0b1/docs/pages/docs-pages.html

http://jsfiddle.net/homer2/ra7Hv/

<div data-role="page" id="foo"> 
    <div data-role="header"> 
     <h1> 
      Foo 
     </h1> 
    </div><!-- /header --> 
    <div data-role="content"> 
     <p> 
      I'm first in the source order so I'm shown as the page. 
     </p> 
     <p> 
      View internal page called <a href="#bar" data-rel="dialog">bar</a> 
     </p> 
    </div><!-- /content --> 
    <div data-role="footer"> 
     <h4> 
      Page Footer 
     </h4> 
    </div><!-- /footer --> 
</div><!-- /page --> 

<!-- Start of second page --> 
<div data-role="page" id="bar"> 
    <div data-role="header"> 
     <h1> 
      Bar 
     </h1> 
    </div><!-- /header --> 
    <div data-role="content"> 
     <p> 
      I'm second in the source order so I'm not shown as the page initally. 
     </p> 
     <p> 
      <a href="#foo">Back to foo</a> 
     </p> 
    </div><!-- /content --> 
    <div data-role="footer"> 
     <h4> 
      Page Footer 
     </h4> 
    </div><!-- /footer --> 
</div><!-- /page --> 
+6

यदि संवाद पृष्ठ एक ही HTML फ़ाइल में मुख्य पृष्ठ के रूप में एम्बेड किया गया है, तो आपको बटन के एंकर href के लिए संवाद की आईडी (इस मामले में: #bar) का उपयोग करने की आवश्यकता है। अन्यथा यदि आप एक यूआरएल का उपयोग करते हैं, तो जेक्यूएम AJAX का उपयोग करके संवाद को पुनः प्राप्त करने का प्रयास करेगा - जो उस यूआरएल द्वारा प्रदर्शित फ़ाइल में डायलॉग नहीं है तो विफल होगा। –

2

बस इस का मेरे लिए काम किया, "स्थानीय, आंतरिक जुड़ा हुआ" पन्नों से "खंड",

<div data-role="popup" id="popupDialog" data-overlay-theme="a"> 
       Hello world 
</div> 

$('#popupDialog').popup('open'); 
1

मैंने किया जावास्क्रिप्ट से खुलने वाला एक सामान्य संवाद। उम्मीद है इससे आपको मदद मिलेगी।

HTML कोड:

<div data-role="page" id="genericDialog"> 
    <div data-role="header" ><h3 id="genericDialogHeader"></h3></div> 
    <div data-role="content" id="genericDialogContent"></div> 
</div> 

और JavaScript कोड:

function openDialog (title,body) { 
    //Setting values 
    $("#genericDialogHeader").html(title); 
    $("#genericDialogContent").html(body); 
    //Showing the generic dialog 
    $.mobile.changePage("#genericDialog", { role: "dialog" }); 
} 
संबंधित मुद्दे