modifier la position de l'arrière-plan en utilisant la requête

Question

sur mon projet de site Je veux que l'utilisateur puisse changer l'image de bannière qu'ils ont pour leurs profils. Jusqu'à présent, je peux leur demander de télécharger une image et de l'appliquer automatiquement en tant qu'arrière-plan à l'en-tête. J'ai également 3 entrées radio qui leur permettent de répéter-x, répéter-y et non-répéter la bannière.

Ma prochaine étape est de comprendre comment les laisser choisir la position de leur image.

Je ne veux pas jeter 10 boutons radio en leur donnant des choix prédéfinis car il semble moche. J'ai essayé de prendre une approche de case à cocher et les ai choisis "Top" alors une deuxième position dit "GAUCHE" donc cela s'appliquerait comme .css({'backgroundPosition' : 'top left'});

le problème avec ceci est que j'ai plus de deux cases à cocher ainsi logique de jquery. Est-ce que quelqu'un peut me donner quelques idées sur la façon dont je peux résoudre ce problème? En fin de compte, j'avais l'intention d'abandonner et de leur donner un rectangle d'échantillon avec des "points chauds" et de leur demander de sélectionner l'endroit où ils veulent que l'image longe deux entrées pour une valeur numérique pour le positionnement en haut à gauche (c'est-à-dire 10px 200px)

Y a-t-il une façon élégante d'y parvenir?

mon code actuel pour gérer le bouton radio cliquez

$("form#frm_look_and_feel input[name='position']").each(function(){ 
     $(this).bind('change', function(){ 
      var position = $(this).val(); 
      $('#topHeader').css({'backgroundPosition' : position}); 
     }); 
    }); 

Answer 1

Donnez-leur 2 autres jeux de boutons radio:

• One For top ou bottom

• Un pour left ou right

  <form id="form"> 
      <input type="radio" name="topOrBottom" value="top" />Top 
      <input type="radio" name="topOrBottom" value="bottom" />Bottom 
  
  
      <input type="radio" name="leftOrRight" value="left" />Left 
      <input type="radio" name="leftOrRight" value="right" />Right 
  </form> 
  

Ensuite, votre jQuery se présente comme suit:

$('#form').submit(function() { 
    var tb = $('input[name="topOrBottom"]:checked').val(), 
     lr = $('input[name="leftOrRight"]:checked').val(); 
    $('.whatever').css({'backgroundPosition' : tb + ' ' + lr}); 
});