jQuery मोबाइल में लगातार शीर्षलेख

मेरे पुराने प्रश्न पर बक्षीस डालने का कोई तरीका नहीं पता था, इसलिए मैं इसे दोबारा पोस्ट कर रहा हूं क्योंकि शायद यह एक बग था।jQuery मोबाइल में लगातार शीर्षलेख

लघु संस्करण: मैं एक फोनगैप + जेक्यूएम एप्लिकेशन में लगातार हेडर चाहता हूं जो पेजर संक्रमणों के बीच जगह (कभी नहीं चलता) में रहता है जैसे कि फ़ूटर को करने के लिए डिज़ाइन किया जा सकता है।

लांग संस्करण: सबसे पहले, मैं पूरी तरह jQuery और JQM के लिए नया हूँ, इसलिए किसी भी newb गलतियों मैं बनाया है का कहना है कृपया।

मैं एक शीर्ष लेख है कि आवेदन में विभिन्न पृष्ठों के बीच बनी रहती है पाने के लिए कोशिश कर रहा हूँ। यह लगातार फूटर की तरह होना होगा जो उपयोगकर्ता जब भी पृष्ठों के बीच संक्रमण कर रहा हो तब भी रहता है। लगातार पाद लेख डेटा-भूमिका = "पाद लेख" डेटा-आईडी = "(कुछ संगत आईडी)" डेटा-स्थिति = "निश्चित" का उपयोग करके हासिल किया गया था। यह काफी अच्छी तरह से काम करता है (यादृच्छिक glitches इसके साथ गलत जगह हो रही है तो स्वचालित रूप से कुछ सेकंड के बाद खुद को ठीक कर रहा है)। मैं के लिए क्या देख रहा हूँ के बारे में अधिक जानकारी के लिए, "लगातार पाद" यहाँ: http://jquerymobile.com/test/docs/#/test/docs/toolbars/docs-footers.html

और नीचे दिए गए लिंक पर लगातार पाद लेख का उदाहरण देखें। देखें कैसे एक पूरी तरह से नए पृष्ठ पर पाद लेख संक्रमण में एक आइटम का चयन, फिर भी पाद लेख के लिए कदम नहीं करता है: http://jquerymobile.com/test/docs/#/test/docs/toolbars/footer-persist-a.html

अब मैं एक ही बात करने के लिए कोशिश कर रहा हूँ, लेकिन मैं इसे के शीर्ष पर होना चाहता हूँ नीचे की बजाय आवेदन। मैं निम्नलिखित बातें की कोशिश की है:

पृष्ठ के शीर्ष पर पाद लेख स्थानांतरण (क्या टैग jQuery में पकड़ने के लिए पता नहीं की कोशिश की div (jQuery वर्ग) कई jQuery वर्गों का उपयोग, लेकिन कोई भी काम करते हैं।। । मैं इसे "टॉप" सीएसएस विशेषता को बदलने की आवश्यकता है यह निर्धारित करने के लिए प्रयोग किया जाता FireBug

प्रत्येक पृष्ठ पर HTML:।

<div data-role="footer" data-position="fixed" data-id="header"> 
<img src="images/bgheader.png" /> 
</div>

जावास्क्रिप्ट:

$('div.ui-footer').css('top', '0px'); 
$('div.ui-footer-fixed').css('top', '0px'); 
$('div.fade').css('top', '0px'); 
$('div.ui-fixed-overlay').css('top', '0px'); 
$('div.ui-bar-a').css('top', '0px');

डेटा-भूमिका = "हेडर" का उपयोग करना (पाद लेख की तरह जारी नहीं है)। यह विधि वह शीर्षलेख बनाएगी जो मैं चाहता हूं (क्योंकि मैं कुछ सीएसएस को ओवरराइड करता हूं), लेकिन जब मैं पृष्ठों के बीच संक्रमण करता हूं, तो यह शीर्ष पर शीर्षलेख को बनाए रखेगा। JQM प्रलेखन में यह भी बताया नहीं है कि वे लगातार हेडर का समर्थन करते हुए इसे करता है राज्य है कि यह लगातार पाद का समर्थन करता है:

प्रत्येक पृष्ठ पर HTML:

<div data-role="header" data-position="fixed" data-id="header" id="header" data-backbtn="false"> 
<img src="images/bgheader.png" /> 
</div>

स्रोत

2011-06-06 Jon

-1

चेक this उदाहरण, पाद और हेडर लगातार बनाना तहत ।

स्रोत

2011-06-14 11:20:33 CristiC

दुर्भाग्यवश, यह काम नहीं करता है क्योंकि अगर मैं उस उदाहरण के रूप में करता हूं तो हेडर इस सुविधा को प्राप्त नहीं करेगा: 'पेज संक्रमण के बीच जगह में रहता है (कभी नहीं चलता) जैसे कि फूटर को – Jon

अपने पृष्ठ के लिए या

कृपया ध्यान दें मैं मोबाइल उपकरणों पर इस कोड का परीक्षण नहीं किया सीएसएस फ़ाइल के नीचे करने के लिए निम्न सीएसएस जोड़े ..

<style type="text/css"> 
    .ui-header { 
     position: fixed !important; 
     top: 0 !important; 
     z-index: 99; 
    } 
    .ui-content { 
     margin-top: 35px; 
    } 
</style>

स्रोत

2011-06-16 13:29:40 Blowsie

करने के लिए डिज़ाइन किया जा सकता है, यह या तो काम नहीं करता है। मुझे लगता है कि ओपी की समस्या यह है कि हेडर पेज संक्रमण के दौरान तय नहीं रहता है। मुझे भी वही समस्या है ... अगर मैं कामकाज का पता लगाता हूं तो पोस्ट करूंगा। – dojosto

jQuery का एक छोटा सा करना होगा चाल

<script type="text/javascript"> 
    $(document).ready(function() { 
     $('#lpage1:first').addClass('ui-btn-active'); //set the first tab as active 
     firstContent=$('#content1'); //defining selectors 
     secondContent=$('#content2'); 
     secondContent.hide(); //hide the second content division 
    }); 

    // show only the first content div 
    function showContent1() { 
     firstContent.show(); 
     secondContent.hide(); 
    } 
    function showContent2() { 
     firstContent.hide(); 
     secondContent.show(); 
    } 

    //clicking on tab 2 
    $('#lpage2').live('tap',function(event){ 
     //alert("click"); 
     showContent2(); 
    }); 
</script> 
<body> 
<!-- Start of first page --> 
<div data-role="page" id="page1"> 

    <div data-role="header" data-position="fixed"> 
     <h1>Foo</h1> 
     <div data-role="navbar"> 
      <ul> 
       <li><a href="#" id="lpage1" data-transition="pop">Home<br/>&nbsp;</a></li> 
       <li><a href="#" id="lpage2" data-transition="pop">My<br/>Profile</a></li> 
      </ul> 
     </div><!-- /navbar --> 
    </div><!-- /header --> 

    <!-- page1 --> 
    <div data-role="content" id="content1"> 
     <p>I'm first in the source order so I'm shown as the page.</p>  
     <p>View internal page called <a href="#bar">bar</a></p> 
    </div><!-- /content --> 

    <!-- page2 --> 
    <div data-role="content" id="content2"> 
     <p>I'm second in the source order so I'm shown as the page.</p>  
     <p>View internal page called <a href="#bar">bar</a></p> 
    </div><!-- /content --> 

    <div data-role="footer"> 
     <h4>Page Footer</h4> 
    </div><!-- /footer --> 
</div><!-- /page -->

स्रोत

2011-08-25 02:26:38

लेकिन मैं अभी भी यह पता लगा रहा हूं कि इस प्रकार के ट्रांजिस्टियन में एनिमेशन कैसे उत्पन्न करें –

1) jquery.js, jquerymobile.js और .css फ़ाइलों इसके अलावा डाउनलोड करने और शामिल हैं: jquery.easing.1.3.js, jQuery।mobile.scrollview.js, और scrollview.js। (गूगल)

2) मानक हेडर, सूचीदृश्य, और नीचे शैली attribue साथ पाद लेख:

<div id="home" data-role="page">...</div> 
<div data-role="content"><ul data-role="listview"><li>List item 1</li></ul></div> 
<div data-role="footer" style="position: fixed;bottom: 0px;">...</div>

described in detail here के रूप में।

स्रोत

2011-09-16 18:05:56

मैं कई दिनों से इस समस्या के खिलाफ अपने सिर को टक्कर लगी हूं, और एक बार Google की कोई मदद नहीं थी। मैं अंत में निम्नलिखित समाधान के साथ आया था। यह संक्रमण शुरू होने से पहले हेडर एचटीएमएल को एक नए पेज पर कॉपी करता है, फिर संक्रमण पूरा होने के बाद पिछले पृष्ठ से कोड हटा देता है। शीर्षलेख और पाद लेख अभी भी पृष्ठ संक्रमण के साथ आगे बढ़ेगा, लेकिन वे नेस्टेड सूचियों को नेविगेट करते समय भी बने रहेंगे।

// dynamically move the header and footer between pages on load events 
$('div.ui-page').live('pagebeforeshow', function(event, ui) { 
    // avoid duplicating the header on the first page load 
    if (ui.prevPage.length == 0) return; 

    // remove the jQuery Mobile-generated header 
    $('.ui-header').addClass('to-remove-now'); 
    $('#header').removeClass('to-remove-now'); 
    $('.to-remove-now').remove(); 

    // grab the code from the current header and footer 
    header = $('#header')[0].outerHTML; 
    footer = $('#footer')[0].outerHTML; 

    // mark the existing header and footer for deletion 
    $('#header').addClass('to-remove'); 
    $('#footer').addClass('to-remove'); 

    // prepend the header and append the footer to the generated HTML 
    event.currentTarget.innerHTML = header + event.currentTarget.innerHTML + footer; 
}); 

// remove header from previous page 
$('div.ui-page').live('pagehide', function(event, ui) { 
    $('.to-remove').remove(); 
});

तो बस जोड़ने के हैडर div और id="footer" पाद लेख के लिए करने के लिए id="header", और उन्हें के रूप में आप सामान्य रूप से अपनी सामग्री में होगा जगह।

स्रोत

2011-10-19 18:58:19

एक पाद यहाँ के साथ ऐसा करने का एक उदाहरण है: http://jquerymobile.com/demos/1.0/docs/toolbars/footer-persist-a.html

मैं इसे आज़माने का मौका नहीं मिला है, लेकिन यह एक हेडर के साथ उसी तरह काम करना चाहिए।

स्रोत

2012-01-25 17:45:52

मैं jquery मोबाइल स्रोत को देखने का प्रयास करता हूं, लगातार पाद लेख का जादू यहां होता है, मुझे लगता है।

$(document).delegate(".ui-page", "pagebeforeshow", function(event, ui) { 
      var page = $(event.target), 
       footer = page.find(":jqmData(role='footer')"), 
       id = footer.data("id"), 
       prevPage = ui.prevPage, 
       prevFooter = prevPage && prevPage.find(":jqmData(role='footer')"), 
       prevFooterMatches = prevFooter.length && prevFooter.jqmData("id") === id; 

      if (id && prevFooterMatches) { 
       stickyFooter = footer; 
       setTop(stickyFooter.removeClass("fade in out").appendTo($.mobile.pageContainer)); 
      } 
     }) 
     .delegate(".ui-page", "pageshow", function(event, ui) { 
      var $this = $(this); 

      if (stickyFooter && stickyFooter.length) { 
       setTimeout(function() { 
        setTop(stickyFooter.appendTo($this).addClass("fade")); 
        stickyFooter = null; 
       }, 500); 
      } 

      $.mobile.fixedToolbars.show(true, this); 
     });

मैं इसे करने के लिए

setTop(page.find(":jqmData(role='header')").removeClass("fade in out").appendTo($.mobile.pageContainer));

जोड़ने की सोच रहा हूँ। मुझे शुभकामनाएं ...

स्रोत

2012-02-03 07:49:09 wizztjh

हाय यह देर हो सकती है लेकिन यह मेरे लिए काम करता है।

[data-role=page] 
{ 
    min-height: 100%; 
    height: auto !important; 
    height: 100%; 
    overflow: scroll; 
    margin: 0 auto -40px; 
} 
.footerPlaceHolder 
{ 
    height: 40px; 
} 
[data-role=footer]{height:40px; bottom:0; position:fixed !important; top: auto !important; width:100%; z-index: 9999;}

अपने HTML

<div data-role="page"> 
    ....Your content.... 
    <div class="footerPlaceHolder"></div> 
    <div data-role="footer"> 
     <a href="#" data-icon="arrow-l" class="ui-btn-left">Back</a> 
     <a href="#" onclick="settingsClicked(this);" data-icon="gear" class="ui-btn-right">Settings</a> 
    </div> 
</div>

पी.एस. कृपया ध्यान दें कि मैं इस चीजों पर विशेष रूप से सीएसएस नहीं हूं। सभी टिप्पणियों की सराहना की जाएगी।

धन्यवाद।

स्रोत

2012-05-21 21:55:33

आप एक ही साझा किए गए शीर्ष के साथ द्वारा प्राप्त कर सकते हैं, तो आप अपने मुख्य पृष्ठ में हेडर आपूर्ति कर सकते हैं: (ध्यान दें: कोई jQuery शामिल है, खेद "बस jQuery का उपयोग करें" लोग :-P)

<div class="header"> 
    <div class="logo"></div> 
    <div class="menu"></div> 
</div> 
<div data-role="page" class="page" id="loading"> 
    <div data-role="content"> 
     <h1>Your Page</h1> 
    </div> 
</div>

वहाँ में

.ui-page{ 
    top:64px !important; 
}

मुझे लगता है कि साथ खुश नहीं हूँ महत्वपूर्ण, लेकिन नियमों jQueryM सीएसएस में उपयोग कर रहा है उच्चतम विशिष्टता w/ओ है: तो फिर प्रत्येक पृष्ठ के शीर्ष नीचे पुश करने के लिए सीएसएस का उपयोग करें! एक आईडी का उपयोग कर। यदि आप अपनी सभी आईडी जानते हैं, तो आप शायद इसके बिना कर सकते हैं ... बेहतर नियमों का सुझाव देने के लिए स्वतंत्र महसूस करें .. मैंने अब तक लंबे समय तक देखभाल करने के लिए अपने सिर को हराया है।

स्रोत

2013-01-22 00:36:30

मुझे लगता है कि यह हाल ही में जेक्यूएम में जोड़ा गया है। http://view.jquerymobile.com/1.3.2/dist/demos/widgets/fixed-toolbars/footer-persist-a.html

यह लिंक स्पष्ट रूप से कहता है कि आप दोनों को डेटा-आईडी विशेषता जोड़ सकते हैं। शीर्ष लेख और पद लेख। लेकिन यह मेरे लिए काम नहीं करता है।

संपादित करें: मैंने देखा है कि आपको लगातार शीर्षलेख के लिए पृष्ठ संक्रमण चालू करना होगा। लेकिन संक्रमण ऐप को बहुत धीमा कर देता है ...

स्रोत

2013-08-16 07:11:55 m1crdy

jQuery मोबाइल में लगातार शीर्षलेख

उत्तर

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