2

我正在尝试将 jQuery Mobile 的一些功能集成到 WordPress 插件中。我并不是专门针对移动设备，我只是喜欢框架中的一些功能。我遇到的问题是 jQuery Mobile CSS 似乎正在接管本机 WP CSS 并改变样式。此外，一些 jQuery Mobile 功能无法正常工作。我使用 wp_register_style 和 wp_enqueue_style 加载样式以及 wp_enqueue_script 加载脚本，如下所示：

        wp_register_style( 'jquery-mobile-style', 'http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.css');
        wp_register_style( 'jquery-mobile-style', 'http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.css');

        wp_enqueue_script('jquery');

         wp_enqueue_script('jq-script', 'http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.js');

我专门与专家组合作。我将面板代码注入到页面中，如下所示：

jQuery(document).ready(function($){

var s = '<div data-role="panel" id="myPanel" data-display="overlay" data-theme="b">';
    s +=     '<div class="panel-content">';
    s +=       '<h3>Default panel options</h3>';
    s +=       '<a href="#demo-links" data-rel="close" data-role="button" data-theme="c" data-icon="delete" data-inline="true">Close panel</a>';
    s +=     '</div><!-- /content wrapper for padding -->';
    s += '</div><!-- /defaultpanel -->';

    $(s).appendTo('#page');

然后我添加一个链接来打开面板：

    $('.entry-content').append('<div data-role="content"><a href="#myPanel" data-rel="panel" data-role="button">Share</a></div>');

只有“覆盖”功能有效。这似乎是一个 WordPress/jQuery Mobile 问题，因为我可以让它在独立的 PHP 页面中工作。

4

1 回答 1

1

首先，我认为这对你不起作用。jQuery Mobile 面板只能作为data-role="page"div 的一部分工作。这将随着 1.4 版本而改变，但目前你被卡住了。基本上你的全部内容必须用这个 DIV 包装：

<div data-role="page" id="pageID"></div>

此错误在 jQuery Mobile GitHub 存储库中打开，链接. 如您所见，它计划用于 1.4 版。我建议你等一下。1.4 版应该会在今年第二季度左右发布。

即使你走这条路，你也需要防止 jQuery Mobile 重新设计你的内容。如果您使用他们的定制工具定制 jQM 框架，它可以很容易地被阻止。

下一步是删除文档就绪事件并将其替换为正确的 jQuery Mobile 页面事件 - 这里的问题是文档就绪有时会在页面加载到 DOM 之前触发，并且您的面板将不会被附加。要了解有关页面事件的更多信息，请阅读我的另一个答案：jQuery Mobile: document ready vs page events。

最后，当您动态创建面板时，您需要强制 jQuery Mobile 正确设置它的样式。为此，请查看我的其他答案：Query Mobile: Markup Enhancement of dynamic added content。搜索章节：增强整页内容（页眉、内容、页脚）。

于 2013-05-14T16:06:08.263 回答