0

我正在使用 magnific popup 来加载一个 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>

有任何想法吗 ？

4

1 回答 1

0

来自 jQM 文档

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

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

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

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

还要检查jQM 文档并确保您遵循他们关于如何使用selectjQM 方式的指南。

于 2013-12-08T17:47:25.390 回答