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>');

「オーバーレイ」機能のみが機能します。スタンドアロンの PHP ページで動作させることができるので、WordPress/jQuery Mobile の問題のようです。

4

1 に答える 1

1

まず第一に、これはあなたにとってうまくいくとは思いません。data-role="page"jQuery Mobile パネルは、 divの一部としてのみ機能します。これはバージョン 1.4 で変更されますが、現在は行き詰まっています。基本的に、コンテンツ全体をこの DIV でラップする必要があります。

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

このバグは、jQuery Mobile GitHub リポジトリのリンクで公開されています。ご覧のとおり、バージョン 1.4 を予定しています。それを待つことをお勧めします。バージョン 1.4 は、今年の第 2 四半期頃にリリースされる予定です。

この道を進んだとしても、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 に答える