How to get som jQuery Mobile Features in WordPress

Question

I'm trying to integrate some features that are found jQuery Mobile into a WordPress plugin. I am NOT targeting mobile devices specifically, I just like some of the features in the framework. The problem I am having is that it seems jQuery Mobile CSS is taking over the native WP CSS and changing the styling. Also, some of the jQuery Mobile features don't work properly. I use wp_register_style and wp_enqueue_style to load the styles as well as wp_enqueue_script to load the script like this:

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

I am specifically working with the Panel. I inject the panel code into the page like this:

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

Then I add a link to open the panel:

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

Only the "Overlay" feature works. It seems like it is a WordPress/jQuery Mobile issue as I can get it working in a standalone PHP page.

Answer 1

First of all I don't think this is going to work for you. jQuery Mobile panel will work ONLY as a part of data-role="page" div. This will change with version 1.4 but currently you are stuck. Basically your whole content must be wrapped with this DIV:

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

This bug is opened in a jQuery Mobile GitHub repository, link. As you can see it is planed for version 1.4. I would advise you to wait for it. Version 1.4 should come around Q2 of this year.

Even if you go this road you will need to prevent jQuery Mobile from restyling your content. It can be prevented easily if you customize jQM framework with their customization tool.

Next step would be do remove document ready event and replace it with correct jQuery Mobile page event- Problem here is that document ready sometimes can trigger before page is loaded into the DOM and your panel will not be attached. To find out more about page events read my other answer: jQuery Mobile: document ready vs page events.

And finally when you dynamically create panel you need to force jQuery Mobile to style it correctly. For that look at my other answer: Query Mobile: Markup Enhancement of dynamically added content. Search for chapter: Enhance a full page content (header, content, footer).