0

I want to make a theme switcher using the data-theme attribute of the jQuery mobile framework. When the user clicks a link which has a data-theme inside it, all my pages' data-theme attribute should be replaced with this clicked data-theme attribute. To get a better idea of what I'm trying to do see this page at the jQuery mobile site, it's pretty close to what I'm trying to do for my pages except that it only updates the current page, and I want to update all of the webApp pages.

Jack
  • 10,943
  • 13
  • 50
  • 65
Eslam Hamdy
  • 7,126
  • 27
  • 105
  • 165
  • You cannot just update the `data-theme` attributes and expect the theme to change. You have to then re-initialize every widget on the page so it gets the proper classes/structure. – Jasper Mar 03 '12 at 01:06
  • possible duplicate of [How to change theme dynamically in jquery mobile?](http://stackoverflow.com/questions/8656801/how-to-change-theme-dynamically-in-jquery-mobile) – Jasper Mar 03 '12 at 01:07

2 Answers2

1

Have you looked at jquery ui theme roller?, it's available for Jquery Mobile too

http://jquerymobile.com/themeroller/

generate a set of themes and switch it accordingly. Here's a link on switching: http://midnightprogrammer.net/post/Change-Page-Themes-Dynamically-Using-JQuery-Theme-Roller.aspx

Satish
  • 6,457
  • 8
  • 43
  • 63
  • is that mechanism will work for all my webApp pages, i.e. will update all the pages in the App or only update one page? – Eslam Hamdy Mar 03 '12 at 00:07
  • isn't exist a mechanism which will update only the data-theme attribute of all the pages when a data-theme link is clicked, i'm sure it can be done, but don't know how to do it by javascript! – Eslam Hamdy Mar 03 '12 at 00:14
1

You can set data-theme="THEME_LETTER" as a php variable. Then, have links on the page to switch themes. When the user clicks a link for theme "b", it will set a session variable, and then on each page load, the THEME_LETTER will be set by php to reflect their selection.

inside the HTML, it would look like this:

data-theme="<?php echo $_SESSION['THEME_LETTER']; ?>"

adamdehaven
  • 5,890
  • 10
  • 61
  • 84