Question

我正在使用大胆的弹出窗口来加载php页面但是一旦页面打开，其中的选择器就不会选择jquerymobile样式并且只显示为常规输入选择器。我以这种方式加载php页面：

<!DOCTYPE html>
<html>

<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta name="viewport" content="width=device-width">

<link href="../../jquery.mobile-1.3.1.min.css" rel="stylesheet">
<script src="../../jquery-1.10.1.min.js"></script>
<script src="../../jquery.mobile-1.3.1.min.js"></script>

<!-- magnific popup -->
<link href="../../magnific-popup.css" rel="stylesheet" />
<script src="../../magnific_popup.js"></script>

<script>
$.mobile.loadingMessage = false;
</script>


</head>
<body>

<div data-role="page" id="home" data-theme='a'>    
         $.magnificPopup.open({
                closeOnContentClick:false,
                closeOnBgClick:false,
                    items: {
                        src: '../../test-ajax.php
                  },
                  type: 'ajax'  }, 0);
                  }

在test-ajax.php页面中，我有：

<html><head>
<meta http-equiv="content-type" content="text/html; charset=windows-1252"></head>
<body><div id="custom-content" class="mfp-bg style="max-width:100%; margin: 20px 
auto;">
    <style>
    #custom-content img {max-width: 70%;margin-bottom: 10px;}
    </style>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta name="viewport" content="width=device-width">
</head>

<body>

    <select name="test" id="test" onChange="ReadForm (this, false);">
                                <option value="a">yadayada</option>
                                <option value="b">yadayada</option>
</select>
</body></html>

有什么想法吗？

Answer 1

来自jQM docs

如果您通过JavaScript操作选择，则必须调用刷新更新视觉样式的方法。这是一个例子：

var myselect = $("select#test");
myselect.selectmenu("refresh");

或在需要由JQM处理的元素上触发此操作。文档准备好后，JQM会处理所有元素，即。当页面加载时，您将在此之后启动此弹出窗口，因此您必须明确告诉jQM处理此代码。

刷新应该在magnificpopup将代码插入DOM后进行，检查它们提供的任何回调。我自己没有使用过magnificpopup。

同时检查jQM docs并确保遵循有关如何使用select jQM方式的指导原则。

巨大的弹出式jquery风格

1 个答案: