lista - ¿Cómo cambiar de tema dinámicamente en jquery mobile?
paginacion jquery mobile (3)
Estoy creando aplicaciones web móviles usando jQuery Mobile.
Estoy usando theme-b para cada página y me gustaría cambiar a otro tema dinámicamente para cada página. ¿Cómo puedo cambiar el tema dinámicamente?
La respuesta de Rajesh me ayudó mucho ... Pero Rajesh, te perdiste una clase importante ---- ''ui-page-theme- *'', así que modifiqué tu respuesta y ahora es perfecta para jQuery Mobile 1.4.5 (de nuevo). ..
var updateTheme = function(newTheme) {
var rmbtnClasses = '''';
var rmhfClasses = '''';
var rmbdClassess = '''';
var arr = [''a'', ''b'', ''c'', ''d'', ''e'', ''f'', ''g'', ''h'', ''i'', ''j'', ''k'', ''l'', ''m'', ''n'', ''o'', ''p'', ''q'', ''r'', ''s'']; // I had themes from a to s
$.each(arr, function(index, value) {
rmbtnClasses = rmbtnClasses + '' ui-btn-up-'' + value + '' ui-btn-hover-'' + value;
rmhfClasses = rmhfClasses + '' ui-bar-'' + value;
rmbdClassess = rmbdClassess + '' ui-body-'' + value + '' ui-page-theme-''+ value;
});
// reset all the buttons widgets
$.mobile.activePage.find(''.ui-btn'').not(''.ui-li-divider'').removeClass(rmbtnClasses).addClass(''ui-btn-up-'' + newTheme).attr(''data-theme'', newTheme);
// reset the header/footer widgets
$.mobile.activePage.find(''.ui-header, .ui-footer'').removeClass(rmhfClasses).addClass(''ui-bar-'' + newTheme).attr(''data-theme'', newTheme);
// reset the page widget
$.mobile.activePage.removeClass(rmbdClassess).addClass(''ui-body-'' + newTheme + '' ui-page-theme-''+ newTheme).attr(''data-theme'', newTheme);
// target the list divider elements, then iterate through them and
// change its theme (this is the jQuery Mobile default for
// list-dividers)
$.mobile.activePage.find(''.ui-li-divider'').each(function(index, obj) {
$(this).removeClass(rmhfClasses).addClass(''ui-bar-'' + newTheme).attr(''data-theme'', newTheme);
});
};
La respuesta de arriba me ayudó mucho, la modifiqué un poco para mi necesidad, ya que estoy usando el controlador y espero tener más de 20 temas. Esto es lo que he hecho.
function updateTheme(newTheme) {
//alert("In refresh");
var rmbtnClasses = '''';
var rmhfClasses = '''';
var rmbdClassess = '''';
var arr = ["a", "b", "c", "d", "e", "f", "g", "h", "i", "j", "k", "l", "m", "n", "o", "p", "q", "r", "s", "t", "u", "v", "w", "x", "y", "z" ];
$.each(arr,function(index, value){
rmbtnClasses = rmbtnClasses + " ui-btn-up-"+value + " ui-btn-hover-"+value;
rmhfClasses = rmhfClasses + " ui-bar-"+value;
rmbdClassess = rmbdClassess + " ui-body-"+value;
});
// reset all the buttons widgets
$.mobile.activePage.find(''.ui-btn'').not(''.ui-li-divider'').removeClass(rmbtnClasses).addClass(''ui-btn-up-'' + newTheme).attr(''data-theme'', newTheme);
// reset the header/footer widgets
$.mobile.activePage.find(''.ui-header, .ui-footer'').removeClass(rmhfClasses).addClass(''ui-bar-'' + newTheme).attr(''data-theme'', newTheme);
// reset the page widget
$.mobile.activePage.removeClass(rmbdClassess).addClass(''ui-body-'' + newTheme).attr(''data-theme'', newTheme);
// target the list divider elements, then iterate through them and
// change its theme (this is the jQuery Mobile default for
// list-dividers)
$.mobile.activePage.find(''.ui-li-divider'').each(function(index, obj) {
$(this).removeClass(rmhfClasses).addClass(''ui-bar-'' + newTheme).attr(''data-theme'',newTheme);
})
Ahora, cuando obtengo el nuevo tema del servidor a través de json, llamo a este método con el nuevo tema como parámetro.
Saludos Rajesh J
Puede apuntar a clases específicas relacionadas con widgets específicos, restablecer sus clases y luego agregar la clase temática de su elección:
//set your new theme letter
var theme = ''e'';
//reset all the buttons widgets
$.mobile.activePage.find(''.ui-btn'')
.removeClass(''ui-btn-up-a ui-btn-up-b ui-btn-up-c ui-btn-up-d ui-btn-up-e ui-btn-hover-a ui-btn-hover-b ui-btn-hover-c ui-btn-hover-d ui-btn-hover-e'')
.addClass(''ui-btn-up-'' + theme)
.attr(''data-theme'', theme);
//reset the header/footer widgets
$.mobile.activePage.find(''.ui-header, .ui-footer'')
.removeClass(''ui-bar-a ui-bar-b ui-bar-c ui-bar-d ui-bar-e'')
.addClass(''ui-bar-'' + theme)
.attr(''data-theme'', theme);
//reset the page widget
$.mobile.activePage.removeClass(''ui-body-a ui-body-b ui-body-c ui-body-d ui-body-e'')
.addClass(''ui-body-'' + theme)
.attr(''data-theme'', theme);
Esto no es, de ninguna manera, un fragmento de código totalmente funcional, tendrá que encontrar cualquier otro widget que desee actualizar cuando cambie el tema y agregarlo al código anterior. Puede encontrar qué clases tiene cada widget fácilmente utilizando FireBug u otra Consola de desarrollador.
ACTUALIZAR
Cuando se tiene en cuenta el elemento data-role="list-divider , esto se vuelve un poco complicado:
var theme = ''c'';
//the only difference between this block of code and the same code above is that it doesn''t target list-dividers by calling: `.not(''.ui-li-divider'')`
$.mobile.activePage.find(''.ui-btn'').not(''.ui-li-divider'')
.removeClass(''ui-btn-up-a ui-btn-up-b ui-btn-up-c ui-btn-up-d ui-btn-up-e ui-btn-hover-a ui-btn-hover-b ui-btn-hover-c ui-btn-hover-d ui-btn-hover-e'')
.addClass(''ui-btn-up-'' + theme)
.attr(''data-theme'', theme);
//target the list divider elements, then iterate through them to check if they have a theme set, if a theme is set then do nothing, otherwise change its theme to `b` (this is the jQuery Mobile default for list-dividers)
$.mobile.activePage.find(''.ui-li-divider'').each(function (index, obj) {
if ($(this).parent().attr(''data-divider-theme'') == ''undefined'') {
$(this).removeClass(''ui-bar-a ui-bar-b ui-bar-c ui-bar-d ui-bar-e'')
.addClass(''ui-bar-b'')
.attr(''data-theme'', ''b'');
}
})
/*The rest of this code example is the same as the above example*/
Aquí hay una demostración: http://jsfiddle.net/VNXb2/7/