2014-02-08 42 views
1

我有一個啓動畫面的WinJS應用程序,我們知道它在最後一段時間, 讓我們假設三秒鐘, 我需要做些什麼才能讓它持續五秒呢? ??如何延長啓動畫面的時間WinJS


編輯:要分享我的代碼

.HTML:剛添加此代碼,以我的,並通過添加隱藏我的內容股利或主div中「隱藏」屬性

<script src="js/extendedSplash.js"></script> 

<!--  SPLASH SCREEN DIV--> 
    <div id="extendedSplashScreen" class="extendedSplashScreen hidden"> 
     <img id="extendedSplashImage" src="images/splashscreen.png" alt="Splash screen image" /> 
      <progress id="extendedSplashProgress" style="color: white;" class="win-medium win-ring"></progress> 
    </div> 
<!--  END SPLASH SCREEN DIV--> 

.css文件:下面的代碼添加到您的樣式表文件

/*SPLASH SCREEN FORMAT*/ 
.extendedSplashScreen { 
    background-color:#ea0000; 
    height: 100%; 
    width: 100%; 
    position: absolute; 
    top: 0px; 
    left: 0px; 
    text-align: center; 
} 

.extendedSplashScreen.hidden { 
    display: none; 
} 

#extendedSplashImage { 
    position: absolute; 
} 

#extendedSplashDescription 
{ 
    position: absolute; 
    width: 100%; 
    top: calc(100% - 140px); 
    text-align: center; 
} 

#extendedSplashText 
{ 
    font-family: 'Segoe UI Semilight'; 
    font-size: 11pt; 
    text-align: center; 
    width: 75%; 
    color: #ffffff; 
} 
/*END SPLASH SCREEN FORMAT*/ 

.js文件(S) 創建一個JS文件(extendedSplash.js)

(function() { 
    "use strict"; 
    var splash  = null; // Variable to hold the splash screen object. 
    var dismissed = false; // Variable to track splash screen dismissal status. 
    var coordinates = { x: 0, y: 0, width: 0, height: 0 }; // Object to store splash screen image coordinates. It will be initialized during activation. 

    function loadSplashScreen(args) { 
     // Retrieve splash screen object 
     splash = args.detail.splashScreen; 

     // Listen for window resize events to reposition the extended splash screen image accordingly. 
     // This is important to ensure that the extended splash screen is formatted properly in response to snapping, unsnapping, rotation, etc... 
     window.addEventListener("resize", onResize, false); 

     // Retrieve the window coordinates of the splash screen image. 
     coordinates = splash.imageLocation; 

     // Register an event handler to be executed when the splash screen has been dismissed. 
     splash.addEventListener("dismissed", onSplashScreenDismissed, false); 

     // Create and display the extended splash screen using the splash screen object. 
     show(splash); 

     // Listen for window resize events to reposition the extended splash screen image accordingly. 
     // This is important to ensure that the extended splash screen is formatted properly in response to snapping, unsnapping, rotation, etc... 
     window.addEventListener("resize", onResize, false); 
    } 


    // Displays the extended splash screen. Pass the splash screen object retrieved during activation. 
    function show(splash) { 
     var extendedSplashImage = document.getElementById("extendedSplashImage"); 

     // Position the extended splash screen image in the same location as the system splash screen image. 
     extendedSplashImage.style.top  = splash.imageLocation.y  + "px"; 
     extendedSplashImage.style.left  = splash.imageLocation.x  + "px"; 
     extendedSplashImage.style.height = splash.imageLocation.height + "px"; 
     extendedSplashImage.style.width  = splash.imageLocation.width + "px"; 

     // Position the extended splash screen's progress ring. Note: In this sample, the progress ring is not used. 
     /* 
     var extendedSplashProgress = document.getElementById("extendedSplashProgress"); 
     extendedSplashProgress.style.marginTop = splash.imageLocation.y + splash.imageLocation.height + 32 + "px"; 
     */ 

     // Once the extended splash screen is setup, apply the CSS style that will make the extended splash screen visible. 
     var extendedSplashScreen = document.getElementById("extendedSplashScreen"); 
     WinJS.Utilities.removeClass(extendedSplashScreen, "hidden"); 
    } 

    // Updates the location of the extended splash screen image. Should be used to respond to window size changes. 
    function updateImageLocation(splash) { 
     if (isVisible()) { 
      var extendedSplashImage = document.getElementById("extendedSplashImage"); 

      // Position the extended splash screen image in the same location as the system splash screen image. 
      extendedSplashImage.style.top  = splash.imageLocation.y  + "px"; 
      extendedSplashImage.style.left  = splash.imageLocation.x  + "px"; 
      extendedSplashImage.style.height = splash.imageLocation.height + "px"; 
      extendedSplashImage.style.width  = splash.imageLocation.width + "px"; 

      // Position the extended splash screen's progress ring. Note: In this sample, the progress ring is not used. 
      /* 
      var extendedSplashProgress = document.getElementById("extendedSplashProgress"); 
      extendedSplashProgress.style.marginTop = splash.imageLocation.y + splash.imageLocation.height + 32 + "px"; 
      */ 
     } 
    } 

    // Checks whether the extended splash screen is visible and returns a boolean. 
    function isVisible() { 
     var extendedSplashScreen = document.getElementById("extendedSplashScreen"); 
     return !(WinJS.Utilities.hasClass(extendedSplashScreen, "hidden")); 
    } 

    // Removes the extended splash screen if it is currently visible. 
    function remove() { 
     if (isVisible()) { 
      var extendedSplashScreen = document.getElementById("extendedSplashScreen"); 
      WinJS.Utilities.addClass(extendedSplashScreen, "hidden"); 
     } 
    } 

    function onResize() { 
     // Safely update the extended splash screen image coordinates. This function will be fired in response to snapping, unsnapping, rotation, etc... 
     if (splash) { 
      // Update the coordinates of the splash screen image. 
      coordinates = splash.imageLocation; 
      updateImageLocation(splash); 
     } 
    } 

    function onSplashScreenDismissed() { 
     // Include code to be executed when the system has transitioned from the splash screen to the extended splash screen (application's first view). 
     dismissed = true; 

     // Tear down the app's extended splash screen after completing setup operations here... 
     // In this sample, the extended splash screen is torn down when the "Learn More" button is clicked. 
     //document.getElementById("learnMore").addEventListener("click", ExtendedSplash.remove, false); 
    } 

    //namespace created for accessing to certain methods created inside this JS file from external JS 
    WinJS.Namespace.define("ExtendedSplash", { 
     isVisible:   isVisible, 
     remove:    remove, 
     loadSplashScreen: loadSplashScreen 
    }); 
})(); 

在default.js查找功能或與

args.detail.kind === activation.ActivationKind.launch

並且存在在我的情況下添加此

app.onactivated = function (args) { 
     if (args.detail.kind === activation.ActivationKind.launch) { 
      ExtendedSplash.loadSplashScreen(args);         //loads extended splash screen 

      // Use setPromise to indicate to the system that the splash screen must not be torn down 
      // until after processAll and navigate complete asynchronously. 
      args.setPromise(WinJS.UI.processAll().then(function(){ 
       setTimeout(function() { 
        ExtendedSplash.remove();          //removes splash screen 
        document.getElementById("content").removeAttribute("hidden"); //shows main screen (content and footer) 
        document.getElementById("footer").removeAttribute("hidden"); 
       }, 4000); 
      })); 

} 

我加入4秒的延遲,然後我隱藏我濺射屏幕

ExtendedSplash.remove();

,然後我發現我的兩個主要的div(內容和頁腳)

的document.getElementById( 「內容」)的removeAttribute( 「隱藏」)。
//顯示主屏幕(內容和頁腳) document.getElementById(「footer」)。removeAttribute(「hidden」);

回答

2

這很簡單...您只需創建一個頁面,當飛濺被取下時您首先顯示的頁面看起來就像您的啓動畫面。

它完全記錄在here

+0

我可以讓它工作!謝謝你,兄弟 – Jesus