2011-06-02 14 views
6

यह तीसरा जून 2011 है और मैं JQuery मोबाइल के नवीनतम संस्करण का उपयोग कर रहा हूं।JQuery मोबाइल नवीनतम 03 जून 2011 संस्करण - कोई बैक बटन

मेरी समस्या यह है कि बैक बटन चला गया है।

कृपया मुझे दिखाने के लिए बैक बटन कैसे प्राप्त किया जा सकता है?

अद्यतन:

मैं इस की कोशिश की है, लेकिन अभी भी वापस जाएं बटन का नहीं।

<body> 
<div data-role="page" data-theme="a" data-iscroll="enable" data-add-back-btn="true"> 

    <div data-role="header" data-theme="a" data-backbtn="true"> 
     <h1>title here</h1> 

     <a href="index.php" data-icon="home" data-iconpos="notext" data-direction="reverse" class="ui-btn-left jqm-home">Home</a> 
     <a href="view.php" data-icon="arrow-r" data-theme="a" data-iconpos="right">Events</a> 
    </div><!-- /header --> 

    <div data-role="content"> 

उत्तर

14

आप jQuery mobile blog post in may को देखें, तो वापस बटन डिफ़ॉल्ट रूप से अभी बंद है।

को पुन: सक्षम करने के लिए वापस बटन बस पृष्ठ कंटेनर के लिए data-add-back-btn="true" जोड़ें:

<div data-role="page" id="page1"> 
    <div data-role="header"> 
     <h1>First page</h1> 
    </div> 
    <div data-role="content"> 
     <p><a href="#page2">page2</a></p> 
    </div> 
    <div data-role="footer"> 
     <h4>Optional footer</h4> 
    </div> 
</div> 
<div data-role="page" id="page2" data-add-back-btn="true"> 
    <div data-role="header"> 
     <h1>Second Page</h1> 
    </div> 
    <div data-role="content"> 
     <p><a href="#page1">page1</a></p> 
    </div> 
    <div data-role="footer"> 
     <h4>Optional footer</h4> 
    </div> 
</div> 

Example of the back button on jsfiddle

+0

अद्यतन देखें कृपया प्रश्न – Satch3000

+1

अद्यतन उत्तर और पहेली देखें, जोड़ा गया डेटा- * आपको वापस दूसरे बटन पर नेविगेट करने वाले बैक बटन को जोड़ना चाहिए। –

+0

साथ ही, सुनिश्चित करें कि आप jQuery का नवीनतम संस्करण शामिल कर रहे हैं। मैं 1.5.2 सहित था और यह प्रदर्शित नहीं हो रहा था। 1.6.1 तक बढ़ रहा है (और 'डेटा-एड-बैक-बीटीएन' विशेषता का उपयोग करके) चाल चल रही है। पिछली संगतता के लिए –

7

आप अभी भी इसे नहीं देख रहे हैं और अपने मार्कअप ठीक हो, तो मार्क टिप्पणी उपयोगी है :

मानते हुए कि आप किसी अन्य पृष्ठ पर नेविगेट करते हैं

मैं पेज जब विशेषता जोड़ने मैं परीक्षण किया गया था पर एक वापस बटन नहीं देख रहा था:

data-add-back-btn="true" 

यह था क्योंकि वहाँ अपने ब्राउज़र की उस टैब पर कोई ब्राउज़र इतिहास था, इस प्रकार की कोई संभावना नहीं एक बैक बटन। अगर मैं पेज पर नेविगेट करता हूं तो मैं दूसरे पेज से परीक्षण कर रहा था, तो मुझे बैक बटन दिखाई देगा।

2

मुझे एक ही समस्या थी हालांकि मैंने ऊपर दिए गए सभी चरणों का प्रयास किया है। मुझे मुद्दों और समाधान भी मिले।

मुद्दे: बैक बटन शीर्षलेख के बाईं ओर है और इस स्थिति में पहले से ही बटन हो सकते हैं।

समाधान: वर्ग जोड़कर शीर्षलेख की दाईं ओर ले जाएं बटन = बटन

3

के रूप में वापस बटन अब डिफ़ॉल्ट रूप से बंद कर दिया है करने के लिए "ui-btn-सही", आप jQuery लोड करने से पहले इसे चालू करने के की जरूरत है मोबाइल (और jQuery लोड करने के बाद): पेज कंटेनरों को एक पर

data-add-back-btn="false" 

:

<script type="text/javascript"> 
$(document).bind("mobileinit", function() { 
     $.mobile.page.prototype.options.addBackBtn = true; 
});  
</script> 

इसके अलावा, पीठ को रोकने के लिए बटन का कभी-कभी पॉपिंग जहां यह नहीं होना चाहिए, यह डाल वे पृष्ठ होंगे जहां आप कभी भी वापस बटन नहीं देखना चाहते हैं।

2

इस कोड

<script> 
    $(document).bind("mobileinit", function() { 
      $.mobile.page.prototype.options.addBackBtn = true; 
    }); 
</script> 

जोड़े से पहले आप को परिभाषित

<script type="text/javascript" src="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.js"></script> 
3

शामिल डेटा-एड-बैक-btn = "true" शीर्ष लेख div टैग में

<div data-role="page" id="page1"> 
    <div data-role="header"> 
     <h1>First page</h1> 
    </div> 
    <div data-role="content"> 
     <p><a href="#page2">page2</a></p> 
    </div> 
    <div data-role="footer"> 
     <h4>Optional footer</h4> 
    </div> 
</div> 
<div data-role="page" id="page2"> 
    <div data-role="header" data-add-back-btn="true"> 
     <h1>Second Page</h1> 
    </div> 
    <div data-role="content"> 
     <p><a href="#page1">page1</a></p> 
    </div> 
    <div data-role="footer"> 
     <h4>Optional footer</h4> 
    </div> 
</div> 
संबंधित मुद्दे