2011-06-13 14 views
12

का उपयोग कर वेब ऐप पर पूर्ण स्क्रीन स्वागत छवि को कैसे जोड़ना है, मुझे लगता है कि यह जेक्यू टच में है लेकिन मैं jQueryMobile का उपयोग करके विकसित अपने आईफोन वेब ऐप के लिए एक पूर्ण स्क्रीन स्वागत छवि कैसे जोड़ूं?jquerymobile

ऐप एक पूर्ण स्क्रीन वेब ऐप है और यह पहले से ही आईफोन होमस्क्रीन में जोड़ा गया है।

उत्तर

16

यह सिर्फ एक अवधारणा है, लेकिन आप कुछ इस तरह की कोशिश कर सकते:

लाइव उदाहरण: http://jsfiddle.net/yzvWy/14/

जे एस

$(function() { 
    setTimeout(hideSplash, 2000); 
}); 

function hideSplash() { 
    $.mobile.changePage("#home", "fade"); 
} 

एचटीएमएल

<div data-role="page" data-theme="b" id="splash" style="background-color: #fff;"> 
    <div class="splash"> 
     <img src="http://jquerymobile.com/demos/1.0a4.1/docs/_assets/images/jquery-logo.png" alt="splash" /> 
    </div> 
</div> 
<div data-role="page" data-theme="b" id="home"> 
    <div data-role="content"> 
     <div data-role="content"> 
      <ul data-role="listview" data-inset="true" data-theme="c" data-dividertheme="b"> 
       <li data-role="list-divider">Overview</li> 
       <li><a href="docs/about/intro.html">Intro to jQuery Mobile</a></li> 
       <li><a href="docs/about/features.html">Features</a></li> 
       <li><a href="docs/about/accessibility.html">Accessibility</a></li> 
       <li><a href="docs/about/platforms.html">Supported platforms</a></li> 
      </ul> 
     </div> 
    </div> 
</div> 
3

अपने propertiary सामान आईओएस है ऐप लोड करते समय एक स्पलैश प्रदर्शित करने के लिए। मैं अभी तक इसका इस्तेमाल नहीं किया (मुझे लगता है कि जरूरत नहीं थी) लेकिन यहाँ वे कैसे कहते हैं कि यह किया जा सकता है है:

<link rel="apple-touch-startup-image" href="img/splash.png" /> 

आप यह भी देख सकते हैं:

<link rel="apple-touch-icon" href="./apple-touch-icon.png" /> 

यहाँ और अधिक के लिए देखें: http://matt.might.net/articles/how-to-native-iphone-ipad-apps-in-javascript/

+0

जानकारीपूर्ण, धन्यवाद +1 –

0

सहायता के लिए धन्यवाद। यह Jquery मोबाइल की वर्तमान स्थिर रिलीज के साथ काम नहीं करता है, क्योंकि यह अभी तक 1.7 का समर्थन नहीं करता है। मैं इस मामले पर एक और समाधान गठबंधन करने में कामयाब रहा और इसके साथ आया:

$ (function(){ 
setTimeout(function(){ 
    $.mobile.changePage("#home", "fade"); 
}, 3000); 
}); 

धन्यवाद!

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