1 //quick & dirty theme switcher, written to potentially work as a bookmarklet
3 $.themeswitcher = function(){
4 if( $('[data-'+ $.mobile.ns +'-url=themeswitcher]').length ){ return; }
5 var themesDir = 'http://jquerymobile.com/test/css/themes/',
6 themes = ['default','valencia'],
7 currentPage = $.mobile.activePage,
8 menuPage = $( '<div data-'+ $.mobile.ns +'url="themeswitcher" data-'+ $.mobile.ns +'role=\'dialog\' data-'+ $.mobile.ns +'theme=\'a\'>' +
9 '<div data-'+ $.mobile.ns +'role=\'header\' data-'+ $.mobile.ns +'theme=\'b\'>' +
10 '<div class=\'ui-title\'>Switch Theme:</div>'+
12 '<div data-'+ $.mobile.ns +'role=\'content\' data-'+ $.mobile.ns +'theme=\'c\'><ul data-'+ $.mobile.ns +'role=\'listview\' data-'+ $.mobile.ns +'inset=\'true\'></ul></div>'+
14 .appendTo( $.mobile.pageContainer ),
15 menu = menuPage.find('ul');
18 $.each(themes, function( i ){
19 $('<li><a href="#" data-'+ $.mobile.ns +'rel="back">' + themes[ i ].charAt(0).toUpperCase() + themes[ i ].substr(1) + '</a></li>')
20 .bind("vclick", function(){
21 addTheme( themes[i] );
22 menuPage.dialog( "close" );
29 function addTheme(theme){
30 $('head').append( '<link rel=\'stylesheet\' href=\''+ themesDir + theme +'/\' />' );
33 //create page, listview