如何獲得索姆jQuery Mobile的特點在WordPress

我試圖整合被發現jQuery Mobile的成WordPress插件的一些功能。我沒有專門針對移動設備，我只是喜歡框架中的一些功能。我遇到的問題是，似乎jQuery Mobile CSS正在接管本地WP CSS並更改樣式。此外，一些jQuery Mobile功能無法正常工作。我用wp_register_style和wp_enqueue_style加載樣式，以及wp_enqueue_script加載腳本是這樣的：如何獲得索姆jQuery Mobile的特點在WordPress

 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頁面中使用它。所有的

來源

2013-05-14 Todd German

你有沒有試過建造者？ http://jquerymobile.com/download-builder/ – Omar 2013-05-14 16:01:24

是的，我其實，只是加載我需要的東西，但它仍然是一樣的。 – 2013-05-14 16:04:31

首先，我不認爲這會爲你工作。 jQuery Mobile面板只能作爲data-role="page" div的一部分工作。這將隨版本1.4而改變，但目前你被卡住了。基本上，你的整個內容必須與此DIV包裹：

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

此錯誤是在jQuery Mobile的GitHub的倉庫打開，link。正如你所看到的，它計劃用於1.4版本。我會建議你等一下。版本1.4應該在今年第二季度左右出現。

即使你走這條路，你需要防止jQuery Mobile的再整，從您的內容。如果您定製jQM框架並定製它，可以很容易地避免它tool。

下一步將做刪除文檔準備事件，並用正確的jQuery Mobile的頁面事件 - 問題代替它這裏是文件準備好，有時網頁加載到DOM之前，你的面板不會附着可以觸發。要了解關於頁面事件的更多信息，請閱讀我的其他答案：jQuery Mobile: document ready vs page events。

最後，當您動態創建面板時，您需要強制jQuery Mobile對其進行正確設置。對於那看看我的其他答案：Query Mobile: Markup Enhancement of dynamically added content。搜索章節：增強整頁內容（頁眉，內容，頁腳）。

來源

2013-05-14 16:06:08 Gajotres

謝謝你的出色答案。我嘗試在data-role = page div中包裝整個內容，但是這帶來了更多問題。由於版本1.4應該會很快到來，我只需等待它。再次感謝。 – 2013-05-14 23:36:26

如何獲得索姆jQuery Mobile的特點在WordPress

回答

相關問題