CODEWITHSUNDEEP
cssjqueryjquery-mobile
RGBK
RGBK

Reputation: 2048

How to serve different css files to different ajax pages?

In jQuery Mobile, one creates a single file which includes all the pages. If a user selects a page, the ajax simply loads in the elements related to that page.

I understand this, but not sure then how you would serve CSS to those pages if you want there to be some exceptions?

I have two styles, one for the menu page (a dark coloured theme) and then a lighter coloured theme for any other page.

Whats the best way to style each?

To clarify, since jQuery Mobile has really intricate 'swatch' themes, it wouldn't be practical to have exceptions for each of the pages, it would make more sense just to serve different CSS files for each.

Upvotes: 3

Views: 299

Answers (3)

imaginethepoet
imaginethepoet

Reputation: 864

I've dealt a lot with CSS themes as of late. Here is the approach I am using. The base themes a, b, c, d, I've left alone for the most part- except for C & D i've stripped the rest out. (you could take these over and override them with your own look for a dark theme) or just create a F Theme and use that.

I use themes up to S currently in our application. It works quite well and is easy to manage. This is very similar to what you are mentioning up a-bove. I'm calling the themes I need when I need and it seems to be working quite well.

When I need to use a new base one I'll copy one of my existing ones A, B, C, and change and extend the css as I need. This fixes the overlap issue you might run into with pages that use similar themes names. I would take this approach so I don't overlap and have a hard time debugging themes.

All the info I'm relaying comes with about 3 months of experience day and night working with JQM themes & CSS.

Things to watch for:

  • Use Firebug on firefox or Chrome - it will save you hours and hours of headaches.
  • Overlaps in uses of classes - AVOID them - there is just so many levels and depths of JQm rendering going on you can spend days on a bug.
  • Trying to override base themes requires !important in some of your attributes
  • Think hard about if you really need a new theme or can simply build out a small group of classes and use your theme as the base for layout, structure, (for example you might just want to change 1 color)
  • On your newly generated dynamic page I would load only the theme you need at the time you need it or pre-fetch it after another page loads. This will help keep load time to minimum
  • Be sure to compress your themes and custom themes
  • I separate into the following (structure.css, themes.css, custom.css (this holds my custom themes as well as my overrides, (additional.css - Ideally this should be loaded only when it is needed
  • Determine if you need a whole new theme or simply put your inline styles in the page document. Any extra code you add from a theme is just that extra code and extra load time, so be aware that blanket adding a theme can increase your css size by quite a few lines of code.

Upvotes: 1

Jasper
Jasper

Reputation: 76003

Simply add the CSS markup you want to each page. For example you can change the theme for a specific page or just some specific CSS rules:

Theme Override --

<div data-role="page" data-theme="e"> ... </div>

Each page can have a different data-theme attribute (each widget can have it's own data-theme attribute as well).

CSS Override --

/*this adds 50px of padding to the `data-role="content"` element in the `#my-page-id` pseudo-page*/
#my-page-id .ui-content {
    padding : 50px;
}

You can target any individual page that has an ID attribute like this (you can also select by other attributes using square brackets: [data-myAttribute="myValue"] { ... }).

I recommend just adding some CSS rules that override the styling for the menu page.

Upvotes: 1

Clarence Liu
Clarence Liu

Reputation: 4019

You can commandeer this solution: https://stackoverflow.com/a/7349521/737023 - this isn't exactly what you want, but lets say your theme 1 is using swatch a,b,c,d,e - create your 2nd theme and use the swatches f,g,h,i,j (may need to concat the two CSSs and do some replaces?) - then use this solution to swap all a's to f's, b's to g's etc... Of course this would only support I guess 5 sets of 5 swatches?

OR

Just don't use AJAX loading, data-ajax="false" if there's separate sections of your site that need a new theme, ensure all links to it don't use AJAX and just include the new CSS in the head

OR

If you really wanted to get fancy and you needed more themes, from what I know there is no pretty solution for this I think, to start if you include your CSS within your div[data-role="page"] tags that will get pulled in with the AJAX load and initialized to work.

If you're talking about having different themeroller swatches for the a,b,c.. etc values on every page, I don't think that's possible without getting really ugly. jQM loads the <head> only once, subsequent pages are loaded via AJAX.

Even if you included the CSS in those pages you'd have no way of getting rid of the original CSS classes. So then you'd need to extract out the styles you need, add it to a unique class for each page and use the !important flag to overwrite jQM's styles.

jQM also uses data-theme="x" to make DOM manipulations, wrapping things in spans and such, you'd need to do a lot of work inspecting all elements to see what classes/styles you need to overwrite. But I suspect it to be possible - you may even need to handle some things via JS, e.g. find a <ul data-role="listview" class="myCustomClass"> and add your custom classes to dynamically generated DOM

Upvotes: 1

Related Questions