CODEWITHSUNDEEP
cssjquery-mobile
Mike
Mike

Reputation: 6839

Can I use pieces of jQuery Mobile in my mobile website I already made?

I have built a mobile website on my own in PHP, and wanted to use pieces of jQuery Mobile to make it display better on a mobile device.

I am trying to pick out pieces form jQuery such as forms and list views to use to enhance my site. I am trying to do this with out re-writing most of my code, as I already have a nice theme I would like to keep my website on.

The first thing I tried to do was use the form elements form jQuery Mobile, and when I inserted them in my page it made everything askew.

enter image description here

Before I inserted the jQuery Mobile code it looked like this:

enter image description here

the website with the jQuery code can be found here to see the source:

http://www.beerportfolio.com/jmobile

the website without the jQuery Mobile code can be seen here:

http://www.beerportfolio.com/mobile

I think it's a CSS problem but I am un-able to find it by using inspect element on Chrome.

Update:

Looking closer at inspect element I think jquery is inserting this code in my page. I tried to take a lot of it out and it fixed the problem! The thing is I can only take this code out in chrome inspect element and I do not know how to prevent jquery mobile from inserting the code.

Below is a picture of the inspect element of the one I edited and the one I didnt:

enter image description here

Upvotes: 1

Views: 768

Answers (2)

Jack
Jack

Reputation: 10993

The short anwser is yes you can use just bits and pieces of jQuery Mobile.

You can tell JQM to not enhance any specific form or button element by adding the data-role="none" attribute to it or you can specify a container that shouldn't be enhanced by adding the data-enhance="false" to the container (if you do it this way then you also need to set $.mobile.ignoreContentEnabled to true). Aside from that you can always use CSS to target specific elements and "override" the JQM styling.

In addition there is a download builder where you can specify what parts of the framework you want to download.

In your specific example you probably want to either move your sidebar div into your *data-role="content" div or outside your data-role="page" div.

Upvotes: 1

Ragnarokkr
Ragnarokkr

Reputation: 2328

jQuery Mobile is an extension of jQuery, so it requires jQuery to correctly works.

As reported on jQuery Mobile documentation page:

Welcome. jQuery Mobile is the easiest way to build sites and apps that are accessible on all popular smartphone, tablet and desktop devices. For jQuery 1.7.0 to 1.8.2.

Obviously, since jQuery Mobile requires its own CSS (and jQuery doesn't), things are rendered differently once included in your website.

Upvotes: 0

Related Questions