2011-04-26 11 views
7

मैं jQuery मोबाइल में काम कर रहा हूं, जो कि बढ़िया है। मेरे पास एक यूआरएल के हैश हिस्से के अंदर पैरामीटर की आपूर्ति करने के बारे में एक सवाल है।jQuery मोबाइल: हैश यूआरएल में आपूर्ति पैरामीटर?

यहां कुछ उदाहरण कोड है। होम पेज के content भाग में, मैं एक पृष्ठ से लिंक करने में सक्षम होना चाहता हूं उदा। '# फोटो-123' और इसे नीचे 'फोटो' पृष्ठ लोड करें। मैं तो URL से फोटो नंबर निकालने चाहते हैं, और छवि 123.

<!-- Home page --> 
    <div data-role="page" id="home"> 
     <div data-role="header"> 
      <h1>Home</h1> 
     </div> 
     <div data-role="content">  
      <p><a href="#photo" data-role="button">Photo ###</a></p> 
     </div> 
    </div> 
    <!-- Photo page --> 
    <div data-role="page" id="photo"> 
     <div data-role="header"> 
      <h1>Photo ###</h1> 
     </div> 
     <div data-role="content"> 
       <img id="myphoto" src="" /> 
     </div> 
    </div> 

यह तो मैं यूआरएल का पुन: उपयोग कर सकते हैं, यानी कि उपयोगकर्ता सीधे उस पृष्ठ को फिर से लोड कर सकते हैं लोड करते हैं।

क्या jQuery मोबाइल के साथ हैश यूआरएल के अंदर पैरामीटर पास करना संभव है? (या वास्तव में एचटीएमएल आम तौर पर साथ - मुझे पता है यह बीबीक्यू प्लगइन जैसे के साथ संभव है, लेकिन मैं नहीं बल्कि प्लगइन्स से बचने के हैं तो संभव)

+0

वैसे, यूआरएल का वह हिस्सा "खंड" है। –

+0

यह सुनिश्चित नहीं है कि आप अभी भी इसका समाधान ढूंढ रहे हैं, लेकिन इसके लिए मैंने एक [प्लग-इन] (https://github.com/CameronAskew/jquery.mobile.paramsHandler) बनाया है। –

उत्तर

0

आप .changPage() समारोह का उपयोग करने के

$("[name=button_name]").click(function() { 
    $.mobile.changePage('anotherPage.php?parm=123','slide',false,true); 
}); 
+0

तो, जीईटी पैरामीटर का उपयोग करना एकमात्र तरीका है? कुछ भी चालाक मैं हैश के साथ कर सकते हैं? – simon

+0

ऐसा नहीं है कि मुझे पता है कि एक बार जब मैं आरसी आउट करता हूं तो नई चीजें हो सकती हैं .. आप शायद यह देखना चाहें कि क्या दूसरों में यहां झुकना मुश्किल है, यह अभी भी मेरे लिए बहुत नया है – mcgrailm

0

आप कुछ इस तरह कर सकता है चाहता हूँ :

$('#photo').ready(function() { 
    var photoId = window.location.hash.replace("#photo", ""); 
    $("#myphoto").attr("src", "http://dummyimage.com/600x400/000/" + photoId); 
    window.location.hash = "#photo"; 
}); 

यह, #photo पेज में संक्रमण के लिए jQuery के लिए बाध्य करेगा लेकिन #photofff पहले लोड करने के लिए कोशिश कर रहा से jQuery मोबाइल को रोकने के लिए की जरूरत है। यह पृष्ठ पर एक त्वरित फ्लैश उत्पन्न करता है कि पृष्ठ लोड करने में त्रुटि हुई थी और फिर #hash टैग को सही करने के लिए रीडायरेक्ट किया गया था।

अद्यतन
आप हैश उस पृष्ठ पर ट्रैकिंग अक्षम यदि आप त्रुटि संदेश प्रदर्शन को दूर करने में सक्षम होना चाहिए।

<script type="text/javascript"> 
    $.mobile.hashListeningEnabled = false; 
</script> 

$('#photo').ready(function() { 
    var photoId = window.location.hash.replace("#photo", ""); 
    $("#myphoto").attr("src", "http://dummyimage.com/600x400/000/" + photoId); 
    $.mobile.changePage("#photo"); 
}); 
4

आप आंतरिक के लिए वैश्विक घटना हुक और डेटा- टैग कार्रवाई करने के लिए और दुकान पैरामीटर का उपयोग कर सकते हैं (यानी #blah के बीच -> # blah2) संक्रमण:

  1. अपने HTML में आप

    जा सकते हैं

    < एक href = "# तस्वीर" डेटा-पैरामीटर = "id = 123"> .... </a>

  2. अवरोधन सभी लिंक पर क्लिक करता है और एक विशिष्ट देखने के लिए डेटा- तत्व, कहते हैं, डेटा पैरामीटर:

    $('a').live('click', 
        function(e) { 
         params = $(e.target).jqmData("params") 
        } 
    ) 
    

इस मामले में आप एक वैश्विक पैरामीटर वस्तु है, जो आप अपने सभी कोड से एक समान तरीके से उपयोग करने में सक्षम होना चाहिए बना रहे हैं।

+1

धन्यवाद। डर है यह मेरे लिए काम नहीं करता है क्योंकि मैं लिंक को बुकमार्क करने में सक्षम होना चाहता हूं, इसलिए मुझे यूआरएल में पैरामीटर चाहिए। – Richard

1

यदि आप अपने हैंश को #photo की तरह बना सकते हैं?आईडी = 123, कुछ इस तरह काम कर सकते हैं:

$("#page").live("pageinit", function(e) { 
    var id = $(e.target).attr("data-url").replace(/.*id=/, ""); 
    //now you have the id, do page-rendering logic 
}); 

और प्रत्यक्ष-लिंक को पकड़ने के लिए:

if (window.location.hash && window.location.hash.indexOf("?") !== -1) { 
    var pageID = window.location.hash.split("?")[0]; 
    $(pageID).trigger("pageinit"); 
} 
0

चेक इस बाहर ठीक:

https://github.com/flodev/jquery-mobile/commit/f3b2e5d84493f3b8b27f9f423863cab2a416007a

ने वही समस्या थी लेकिन jquery.mobile जेएस फ़ाइल में कोड की एक पंक्ति को जोड़ने से मुझे प्लगइन और जेएस रूटिंग समाधान जोड़ने के बिना यूआरएल में पैरामीटर पास करने की इजाजत मिली।

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