changer dynamiquement le nuancier jquery

Je veux changer un jquery-mobile boutons nuance de couleur de façon dynamique avec javascript, mais je ne peux pas trouver un moyen (à l'exception de la suppression et l'ajout de toutes les classes et tous les gestionnaires d'événements, mais c'est salissant).
Quel est le meilleur moyen de le faire?

source d'informationauteur Philipp Melab

  1. 20

    Au moins en version 1.2.0 (1.2.0-rc1) son aussi simple que (probablement, il travaille dans les versions mineures):

    $( "#myButton" ).buttonMarkup({theme: 'd'});

    pas .button('refresh') nécessaire

  2. 3

    Ce qui a fonctionné pour moi:

    //set button active
$(this).parent().addClass('ui-btn-active');
//set button inactive
$(this).parent().removeClass('ui-btn-active');

    Ajout de la classe ui-btn-actif "à la mère va régler le bouton en cours d'actif et de modifier les données-thème à "b". Cela ne fonctionnera pas pour n'importe quelle nuance. Vous pouvez toujours besoin de l'un des plus solutions mentionnées plus tôt.

  3. 1

    Oui, on dirait qu'il n'existe aucun moyen de modifier simplement le thème de swatch.

    J'ai piraté une fonction simple pour l'échange de la couleur par l'expression régulière suivante:

    $.fn.changeColorSwatch = function(theme, type) {
  if (!type) {
    type = 'theme';
  }
  var currentTheme = this.attr('data-' + type);
  if (!currentTheme) {
    currentTheme = 'c';
  }
  this.attr('data-' + type, theme);
  var regex = new RegExp('^ui-(.*)-' + currentTheme + '$');
  var classes = $.extend({}, this[0].classList);
  var i = classes.length;
  while (i--) {
    var match = classes[i].match(regex);
    if (match) {
      this.removeClass(match[0]);
      this.addClass('ui-' + match[1] + '-' + theme);
    }
  }
};

    Je sais, il doit utiliser jqmData au lieu de attrmais les données-thème de l'attribut n'a pas été changé correctement.

  4. 1

    Boutons doivent avoir l'élément parent thème modifié.

    Ajoutez le code suivant à la fin de l' $.fn.changeColorSwatch fonction

          if(this.attr('type') == 'button'){
      this.parent().changeColorSwatch(theme, type);
  }
  5. 1

    Si le bouton est défini comme:

    <button type="button" id="yourbutton">Hello</button>

    Alors cela fonctionne de la manière la plus rapide:

    $('#yourbutton').parent().find('.ui-btn-inner').css("background-color",yournewcolor);
  6. 0

    Je l'utiliser et il fonctionne parfaitement !! 😀

    Mikael Kindborg réponse de Modifier des données-thème jQuery mobile

    $.mobile.changeGlobalTheme = function(theme)
    {
        //These themes will be cleared, add more
        //swatch letters as needed.
        var themes = " a b c d e";

        //Updates the theme for all elements that match the
        //CSS selector with the specified theme class.
        function setTheme(cssSelector, themeClass, theme)
        {
            $(cssSelector)
                    .removeClass(themes.split(" ").join(" " + themeClass + "-"))
                    .addClass(themeClass + "-" + theme)
                    .attr("data-theme", theme);
        }

        //Add more selectors/theme classes as needed.
        setTheme(".ui-mobile-viewport", "ui-overlay", theme);
        setTheme("[data-role='page']", "ui-page-theme", theme);
        setTheme("[data-role='header']", "ui-bar", theme);
        setTheme("[data-role='listview'] > li", "ui-bar", theme);
        setTheme(".ui-btn", "ui-btn-up", theme);
        setTheme(".ui-btn", "ui-btn-hover", theme);
    };