jQuery मोबाइल

के साथ गतिशील पृष्ठ मैं थोड़ी देर के लिए jQuery का उपयोग कर रहा हूं, और jQuery मोबाइल के साथ अपना पहला कदम उठा रहा हूं।jQuery मोबाइल

मैं index.html का उपयोग अपने मोबाइल के jQuery मोबाइल & डिज़ाइन के रूप में करता हूं, जो सामग्री लोड होने पर सामग्री.php (सभी पृष्ठों का एक सूची दृश्य) से सामग्री को कॉल करता है।

मैं एक पृष्ठ की सामग्री टेम्पलेट, जो सामग्री एक चर पर निर्भर करता है, इसलिए की तरह प्रदर्शित करता है के लिए page.php का उपयोग?? page.php आईडी = 01 page.php आईडी = 02 page.php आईडी = 03 ... और इसी तरह।

मैं सोच रहा था कि यहां से जाने का सबसे अच्छा तरीका इंडेक्स.html पर दो जेक्यूएम 'पेज' होगा, एक ऐप के होमपेज के लिए, और जो गतिशील रूप से पेज.एचपी? आईडी = एक्सएक्स से सामग्री लोड करता है। जैसे ही मेरा ऐप लोड हो जाता है, वैसे ही मुझे अपनी सारी सामग्री लोड करने की ज़रूरत नहीं है।

यह कैसे किया जाना चाहिए? मैं सूची दृश्य आइटम को अगले पृष्ठ पर कैसे जा सकता हूं और इसमें सही सामग्री लोड कर सकता हूं?

स्रोत

2011-01-30 Adam Tal

कार्य उदाहरण टिप्पणी की:

एक खाली jqMobile पेज (उपयुक्त डेटा-भूमिका के साथ div, और आईडी = "dynamicPage" का एक आईडी)
अपना मेनू लिंक आईडी प्राप्त करें, और इसे खाली पृष्ठ के शीर्षक विशेषता के रूप में डालें।

तो जैसे

 
    $("#appMainMenu a").live("click", function(evt){ 
    var whatpageto = $(this).attr('id'); 
    $('#dynamicPage').attr('title', 'dpage-'+whatpageto); // the title would look like title="dpage-linksid" 
});

लोड डेटा:

 
    $('#dynamicPage').bind('pageshow', function() { 
     $('#dPage').html(''); // animate while we're loading data 
     var whatpage = $(this).attr('title'); // get the page's title we changed earlier 
     var whatpage1 = whatpage.replace("dpage-", ''); // remove the 'dpage-' part from the title, and we have our id. 
     var whatpage2 = 'path/to/pagewhereyourcontentis.html'; // where is the content coming from? url or path to file 
     $.get(whatpage2, function(data) { // load content from external file 
      $('#dynamicPage').html(data); // insert data to the jqMobile page (which is a div). 
      $('#dynamicPage').page(); // Re-render the page otherwise the dynamic content is not styled. 
     }); 
});

आशा इस मदद करता है। प्रशन?

स्रोत

2011-02-21 17:41:32

मैं जेक्यूएम बीटा 2, $ ('# गतिशील पेज') का उपयोग कर रहा हूं। पृष्ठ() पृष्ठ प्रस्तुत नहीं करता है। यूआई को $ ('# ... ") के साथ फिर से प्रस्तुत किया जा सकता है। सूचीदृश्य (' रीफ्रेश '), आदि। अधिक चर्चाएं [यहां] (https://forum.jquery.com/topic/page-no-longer-rerenders -थी-पेज) –

बस <a href="... के साथ लिंक बनाएं और यह काम करता है। जेक्यूएम उन्हें AJAX

जेक्यूएम के साथ बनाए गए ऐप को जावास्क्रिप्ट के बिना किसी भी पुराने ब्राउज़र में काम करना चाहिए। बाकी को जेक्यूएम द्वारा ही ख्याल रखा जाता है।

यूआरएल और उन्हें कहीं भी रख तुम सिर्फ सादे पुराने .load() या .get() jQuery शस्त्रागार से और जब आप एक div आप चाहते थे करने के लिए सामग्री प्राप्त का उपयोग करना चाहते हैं [संपादित करें] -

पदावनत: उपयोग .page() jQuery मोबाइल से

वर्तमान: फोन .trigger('create')

(यह घटना शैलियों और नियंत्रण जोड़ती है)। विस्तृत अनुदेश मेरी पूछे जाने वाले प्रश्न में है: http://jquerymobiledictionary.pl/faq.html

स्रोत

2011-01-31 08:07:04 naugtur

हालांकि यह आम तौर पर काम करता है, कोई स्टाइल के साथ पृष्ठ लोड। मैं जो करने की कोशिश कर रहा हूं वह है index.php? Id = 01 से सामग्री को मेरे index.html में मौजूदा

में लोड करें जो पहले से ही स्टाइल है। –

केवल वही चीज जिसे आप पूरा करेंगे, आपके द्वारा लोड किए गए पृष्ठों के लिए इतिहास कार्यक्षमता को तोड़ना होगा। लेकिन यह सिर्फ एक साधारण AJAX कॉल के साथ किया जा सकता है। मैं पोस्ट संपादित करूंगा। – naugtur

लेकिन इससे पहले कि आप इसका उपयोग करें ... कृपया देखें कि jquerymobile.com पर दस्तावेज़ कैसे बनाए जाते हैं। यह एक अच्छा उदाहरण है। इस तरह काम करने के लिए आपको jqm हैक नहीं करना चाहिए। बस एक पेज बनाएं और अन्य पेजों को लिंक करें। jqm उन्हें AJAX के साथ लोड करेगा और डोम में संलग्न होगा। प्रश्न के अंत में आप जो वर्णन करते हैं वह आपको मिलता है और बहुत कुछ। और केवल होमपेज पहले लोड किया गया है। आप किसी भी जावास्क्रिप्ट को लिखने के बिना पूरे पृष्ठ को (और वास्तव में करना चाहिए) बना सकते हैं। Jqm के साथ काम करते समय यह मुख्य विचार है। – naugtur

यहाँ है कि मैं क्या में आईडी के आधार पर मेरा पेज

$("#masterList").empty(); 
var listItems = ""; 
$.each(data.Messages, function (i, item) 
{ 
    listItems += "<li><div><a href='#messageData' onclick='$(" + // Use a click handler to set the attr of detailPage div 
      '"#detailPage").attr("detailId", "'+ item.Id +  // my JSON item has an ID 
      '")' + "'>";           // note the crazy quoting 

    listItems += "Test about the item</a></li>"; 

} 
$("#masterList").append(listItems);

के लिए इस को हल करने के detailPage लिए आया था मैं आईडी का उपयोग कर JSON ऑब्जेक्ट लाने के लिए pageshow ईवेंट हैंडलर का इस्तेमाल किया और लोड विस्तार मद है DetailId विशेषता - loadDetail ($ ("# detailPage") जैसे कुछ। attr ("detailId")) और मेरे लोड डेंट फ़ंक्शन बाकी ने किया।

दुर्भाग्यवश यह jQuery मोबाइल के लिए URL रणनीति को तोड़ देगा। चूंकि चयनित आइटम पृष्ठ में ही संग्रहीत है - यह कोई अच्छा नहीं है। मैं एक बाहरी लिंक का उपयोग करने जा रहा हूं जो एक HTML पृष्ठ है और आईडी को एक तर्क के रूप में पास कर रहा है।

स्रोत

2011-03-10 06:36:40

आमतौर पर jquery मोबाइल के साथ गड़बड़ करना अच्छा नहीं है। – naugtur

enter image description here

<!DOCTYPE html> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<meta name="viewport" content="width=device-width,height=device-height,user-scalable=no,initial-scale=1.0"/> 
<link rel="stylesheet" href="jquery.mobile-1.0.1.css" /> 
<title> Hello World </title> 

<script src="jquery.js"></script> 
<script src="jquery.mobile-1.0.1.min.js"></script> 

<script type="text/javascript"> 
$(document).ready(function(e) { 

$('#omtList').html('<ul data-role="listview" data-split-icon="delete" data-split-theme="d"> <li><a href="index.html"><h3>Broken Bells</h3><p>Broken Bells</p></a><a href="lists-split-purchase.html" data-rel="dialog" data-transition="slideup">Purchase album </a></ul>').trigger('create'); 
    }); 
</script> 
</head> 

<body> 
omt 
<div> 
    <div id="omtList"> 


    </div><!--/content-primary --> 
</body> 
</html>

स्रोत

2012-03-24 04:21:28

उत्तर

संबंधित मुद्दे