WinJS.UI.Flyout HTML на windows phone 8.1

Question

Я пытаюсь создать WinJS.UI.Flyout с одним полем ввода и одной кнопкой, чтобы пользователь мог ввести новое значение в поле ввода и нажать кнопку, чтобы сохранить его , Однако, на Windows Phone 8.1, Flyouts не поддерживаются.

Как я могу обойти это? Есть ли способ имитировать поведение компонента WinJS.UI.Flyout на телефоне 8.1?

Заранее спасибо.

Answer 1

Личное мнение по архитектуре здесь, но я считаю, что если у вас появится API, который запрашивает, и вы хотите, чтобы люди действительно его использовали, вам нужно убедиться, что он поддерживается во всех средах.

Вот что я использую для Всплывающих (который я использую в качестве всплывающего обычая подсказывает, что не навигации пользователя от страницы):

default.css:

/* Used to help emulate the Flyout when on a Windows Phone device. */ 
.matting { 
    position: absolute; 
    top: 0px; 
    left: 0px; 
    width: 100%; 
    height: 100%; 
    z-index: 999; 
    background-color: black; 
    opacity: 0.6; 
    display: none; 
} 

/* Applied when forcing a Flyout on a Windows Phone device. */ 
/* Removed when hiding it. */ 
/* Creates it like a WP dialog. */ 
.wp-flyout { 
    position: absolute; 
    top: 0px; 
    left: 0px; 
    width: 100%; 
    /* The height should be left alone. */ 
    z-index: 1000; 
    display: block; 
    opacity: 1.0; 
    background-color: dimgray; 
} 

в HTML, поместите это в бок о бок дивы WinJS.UI.Flyout:

<div id="matting" class="matting"></div> 

в Javascri пт, наряду с готовы и разгрузку функции в домашней странице определить, у меня есть следующие две дополнительные функции:

// Shows a flyout, even on Windows Phone. 
    // flyoutId is the WinJS.UI.Flyout structure. 
    // launchButtonId is the button that is launching this flyout. 
    Flyout: function (flyoutId, launchButtonId) { 
     var flyoutElement = document.getElementById(flyoutId); 
     if (flyoutElement.winControl) { 
      // Windows. 
      var launchButton = document.getElementById(launchButtonId); 
      flyoutElement.winControl.show(launchButton); 
     } else { 
      // Windows Phone. 
      // Fake it with a dialog. 
      var flyout = WinJS.Utilities.query("#" + flyoutId); 
      // Show the matting. 
      var matting = WinJS.Utilities.query("#matting"); 
      matting.setStyle("display", "block"); 
      // Apply click-cancel to the matting. 
      matting[0].cancel = function() { that.UnFlyout(flyoutId); return true; }; 
      matting.listen("click", matting[0].cancel, false); 
      // Apply the wp-flyout class. 
      flyout.addClass("wp-flyout"); 
      // Add back-button-cancel event. 
      WinJS.Application.addEventListener("backclick", 
       matting[0].cancel); 
      // Show the flyout. 
      flyout.setStyle("display", "block"); 
     } 
    }, 

    // Hides a flyout, even on Windows Phone. 
    UnFlyout: function (flyoutId) { 
     var flyoutElement = document.getElementById(flyoutId); 
     if (flyoutElement.winControl) { 
      // Windows. 
      flyoutElement.winControl.hide(); 
     } else { 
      // Windows Phone. 
      // We're faking it with a dialog. 
      var flyout = WinJS.Utilities.query("#" + flyoutId); 
      // Hide the flyout. 
      flyout.setStyle("display", "none"); 
      // Remove the wp-flyout class. 
      flyout.removeClass("wp-flyout"); 
      // Remove the click-cancel from the matting. 
      var matting = WinJS.Utilities.query("#matting"); 
      matting.removeEventListener("click", matting[0].cancel, false); 
      // Remove back-button-cancel event. 
      WinJS.Application.removeEventListener("backclick", 
       matting[0].cancel); 
      // Hide the matting. 
      matting.setStyle("display", "none"); 
     } 
    } 

Примечание, что я использую популярный «что = это;» в функции ready() с «var that;» над домашней страницей определите в стандартном универсальном приложении навигации.

Чистый результат: Создайте свои всплывающие окна как обычно в HTML. Когда вы хотите выпадающий, вы просто звоните:

that.Flyout("flyoutId", "launchButtonId"); 

Это покажет выпадающее как обычно в Windows, но на Windows Phone теперь будете показывать выпадающий в виде диалога WP (или достаточно близко к нему). Если у вас есть кнопки ОК/Отмена/и т.д. в выпадающем, убедитесь, что вы звоните:

that.UnFlyout("flyoutId"); 

вместо нормального «.hide()».

Не стесняйтесь играть с ним, и дайте мне знать, если у вас есть какие-либо улучшения.

Answer 2

Я не думаю, что для этого есть контроль ... и я не думаю, что захочу по телефону. Взгляните на дату & Выбор времени из приложения календаря, он приведет вас к новой «странице», чтобы ввести ваши данные.

То, что вы хотите сделать, может быть достигнуто с помощью стандартного HTML, но я просто не уверен, что хочу этого.

В таких случаях я отправляю своих пользователей на новую страницу, где они вводят необходимые данные.