Nano Hash - криптовалюты, майнинг, программирование

Динамическое мобильное всплывающее окно JQuery с Ajax JSON

У меня есть мобильный веб-сайт MVC 4. На первой странице есть всплывающее окно, которое должно отображать большой объем текста, поступающего от контроллера через запрос AJAX.

В контроллере:

[HttpPost]
public ActionResult GetLongText()
{
    return Json(OurState.GetLongText);
}

Который просто вернет то, что находится в функции ошибки на jsfiddle: http://jsfiddle.net/TyhnV/28/

Первый щелчок кнопки покажет всплывающее окно сбоку, второй щелчок правильно отцентрирует его по окну. Мне нужно знать, как динамически создавать всплывающее окно, чтобы при первом нажатии кнопки всплывающее окно занимало правильное положение, а не перемещалось из-за размера текста, помещаемого в него.

json dynamic jquery jquery-mobile
10.12.2013

Ответы:


1

Вот небольшое базовое руководство о том, как динамически создавать всплывающие окна на лету.

// close button
var closeBtn = $('<a href="#" data-rel="back" data-role="button" data-theme="a" data-icon="delete" data-iconpos="notext" class="ui-btn-right">Close</a>').button();

// text you get from Ajax
var content = "<p>Lorem ipsum dolor sit amet, consectetur adipiscing. Morbi convallis sem et dui sollicitudin tincidunt.</p>";

// Popup body - set width is optional - append button and Ajax msg
var popup = $("<div/>", {
    "data-role": "popup"
}).css({
    "width": "150px"
}).append(closeBtn).append(content);

// Append it to active page
$(".ui-page-active").append(popup);

// Create it and add listener to delete it once it's closed
// add listener to change its' position if you want
$("[data-role=popup]").on("popupafterclose", function () {
    $(this).remove();
}).on("popupafteropen", function () {
    $(this).popup("reposition", {
        "positionTo": "window"
        /* or set custom position */
        x: 150,
        y: 200
    });
// enhance popup and open it
}).popup().popup("open");

Вам не нужно использовать .trigger("create"), потому что каждый отдельный элемент улучшен заранее. Существуют и другие дополнительные параметры для управления всплывающим виджетом.

$(".selector").popup({
    "theme" : "a",
    "overlayTheme" : "e",
    "history" : false,
    "dismissible" : false,
    "transition" : "fade"
});

Демо

10.12.2013
Новые материалы
Кластеризация: более глубокий взгляд
Кластеризация — это метод обучения без учителя, в котором мы пытаемся найти группы в наборе данных на основе некоторых известных или неизвестных свойств, которые могут существовать. Независимо от..
Как написать эффективное резюме
Предложения по дизайну и макету, чтобы представить себя профессионально Вам не позвонили на собеседование после того, как вы несколько раз подали заявку на работу своей мечты? У вас может..
Частный метод Python: улучшение инкапсуляции и безопасности
Введение Python — универсальный и мощный язык программирования, известный своей простотой и удобством использования. Одной из ключевых особенностей, отличающих Python от других языков, является..
Как я автоматизирую тестирование с помощью Jest
Шутка для победы, когда дело касается автоматизации тестирования Одной очень важной частью разработки программного обеспечения является автоматизация тестирования, поскольку она создает..
Работа с векторными символическими архитектурами, часть 4 (искусственный интеллект)
Hyperseed: неконтролируемое обучение с векторными символическими архитектурами (arXiv) Автор: Евгений Осипов , Сачин Кахавала , Диланта Хапутантри , Тимал Кемпития , Дасвин Де Сильва ,..
Понимание расстояния Вассерштейна: мощная метрика в машинном обучении
В обширной области машинного обучения часто возникает необходимость сравнивать и измерять различия между распределениями вероятностей. Традиционные метрики расстояния, такие как евклидово..
Обеспечение масштабируемости LLM: облачный анализ с помощью AWS Fargate и Copilot
В динамичной области искусственного интеллекта все большее распространение получают модели больших языков (LLM). Они жизненно важны для различных приложений, таких как интеллектуальные..