IdentifiantMot de passe
Loading...
Mot de passe oublié ?Je m'inscris ! (gratuit)
Navigation

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les réponses en temps réel, voter pour les messages, poser vos propres questions et recevoir la newsletter

jQuery Discussion :

Aligner deux éléments graphiques à l'horizontal [UI Mobile]


Sujet :

jQuery

  1. #1
    Membre à l'essai
    Homme Profil pro
    Inscrit en
    Novembre 2009
    Messages
    19
    Détails du profil
    Informations personnelles :
    Sexe : Homme

    Informations forums :
    Inscription : Novembre 2009
    Messages : 19
    Points : 22
    Points
    22
    Par défaut Aligner deux éléments graphiques à l'horizontal
    Bonjour,

    Je cherche a aligner deux éléments (un <input> et une icone-bouton <a>). J'ai essayé avec data-inline ou avec un FieldContain mais je conserve comme affichage l'input qui prend toute la ligne et le bouton a la ligne suivante. De plus, je ne réussis pas a capter l’événement de click sur le bouton (avec un alert('Test'))

    C'est sans doute un problème assez simple mais je sèche un peu la. Est ce que quelqu'un aurais une idée ? J'utilise JQueryMobile 1.4.2

    Ex1.html :
    Code html : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    <html lang="fr">
    	<head>
    		<meta charset="utf-8"/>
    		<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.css" />
    		<script src="http://code.jquery.com/jquery-2.1.0.min.js"></script>
    		<script src="Ex1.js"></script>
    		<script src="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.js"></script>
    	</head>
    	<body>
    		<div data-role="page" id="PageItem">
    			<div data-role="content">
    				<div data-role="fieldcontain">
    					<input type="text" name="newItem" id="newItem" value="" />
    					<a href="#" id="addItem" data-role="button" data-icon="plus" data-iconpos="notext">Add new item</a>
    				</div>
    				<input type="text" name="newItem2" id="newItem2" value="" data-inline="true" />
    				<a href="#" id="addItem2" data-role="button" data-icon="plus" data-iconpos="notext" data-inline="true">Add new item</a>
    			</div>
    		</div>
    	</body>
    </html>

    Ex1.js
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    $('document').ready(new function() {
    	$('#addItem').click(function(){
    		alert('Test');
    	});
    });
    Merci d'avance pour votre aide

  2. #2
    bm
    bm est déconnecté
    Membre confirmé

    Homme Profil pro
    Freelance
    Inscrit en
    Octobre 2002
    Messages
    874
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Drôme (Rhône Alpes)

    Informations professionnelles :
    Activité : Freelance
    Secteur : Tourisme - Loisirs

    Informations forums :
    Inscription : Octobre 2002
    Messages : 874
    Points : 556
    Points
    556
    Billets dans le blog
    6

  3. #3
    Membre à l'essai
    Homme Profil pro
    Inscrit en
    Novembre 2009
    Messages
    19
    Détails du profil
    Informations personnelles :
    Sexe : Homme

    Informations forums :
    Inscription : Novembre 2009
    Messages : 19
    Points : 22
    Points
    22
    Par défaut
    Merci de ta réponse

    Je pensais qu'il y avait d'autre moyen mais en tout cas, ca marche (en mettant bien le table width=100% pour prendre la largeur)

    Code html : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    <table width=100%>
    	<tr>
    		<td width=90%><input type="text" name="newItem" id="newItem" value="" /></td>
    		<td width=10%><a href="#" id="addItem" data-role="button" data-icon="plus" data-iconpos="notext">Add new item</a></td>
    	</tr>
    </table>

  4. #4
    Rédacteur

    Avatar de Bovino
    Homme Profil pro
    Développeur Web
    Inscrit en
    Juin 2008
    Messages
    23 647
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 53
    Localisation : France, Gironde (Aquitaine)

    Informations professionnelles :
    Activité : Développeur Web
    Secteur : High Tech - Éditeur de logiciels

    Informations forums :
    Inscription : Juin 2008
    Messages : 23 647
    Points : 91 418
    Points
    91 418
    Billets dans le blog
    20
    Par défaut
    Citation Envoyé par bm
    Avec une table
    Oh non...
    Pourquoi pas des frameset tant qu'on y est...

    Cela fait déjà de nombreuses années qu'il est recommandé de ne pas utiliser les tables pour la mise en forme !
    Il existe aussi, au passage, des références beaucoup plus sérieuses que W3Schools ! Par exemple MDN...
    Pas de question technique par MP !
    Tout le monde peut participer à developpez.com, vous avez une idée, contactez-moi !
    Mes formations video2brain : La formation complète sur JavaScriptJavaScript et le DOM par la pratiquePHP 5 et MySQL : les fondamentaux
    Mon livre sur jQuery
    Module Firefox / Chrome d'intégration de JSFiddle et CodePen sur le forum

  5. #5
    bm
    bm est déconnecté
    Membre confirmé

    Homme Profil pro
    Freelance
    Inscrit en
    Octobre 2002
    Messages
    874
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Drôme (Rhône Alpes)

    Informations professionnelles :
    Activité : Freelance
    Secteur : Tourisme - Loisirs

    Informations forums :
    Inscription : Octobre 2002
    Messages : 874
    Points : 556
    Points
    556
    Billets dans le blog
    6
    Par défaut
    Bovino

    MDN ?

    Quel site ?

    http://www.mdn-mines.com/fr/

  6. #6
    Rédacteur

    Avatar de Bovino
    Homme Profil pro
    Développeur Web
    Inscrit en
    Juin 2008
    Messages
    23 647
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 53
    Localisation : France, Gironde (Aquitaine)

    Informations professionnelles :
    Activité : Développeur Web
    Secteur : High Tech - Éditeur de logiciels

    Informations forums :
    Inscription : Juin 2008
    Messages : 23 647
    Points : 91 418
    Points
    91 418
    Billets dans le blog
    20
    Pas de question technique par MP !
    Tout le monde peut participer à developpez.com, vous avez une idée, contactez-moi !
    Mes formations video2brain : La formation complète sur JavaScriptJavaScript et le DOM par la pratiquePHP 5 et MySQL : les fondamentaux
    Mon livre sur jQuery
    Module Firefox / Chrome d'intégration de JSFiddle et CodePen sur le forum

  7. #7
    bm
    bm est déconnecté
    Membre confirmé

    Homme Profil pro
    Freelance
    Inscrit en
    Octobre 2002
    Messages
    874
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Drôme (Rhône Alpes)

    Informations professionnelles :
    Activité : Freelance
    Secteur : Tourisme - Loisirs

    Informations forums :
    Inscription : Octobre 2002
    Messages : 874
    Points : 556
    Points
    556
    Billets dans le blog
    6
    Par défaut
    Ce MDN là...

    Les développeurs Jquery travaillent pour mozilla et ne dévoilent pas les recettes jq .

    mgesche : une table est définissable avec un css et sera active avec un div

  8. #8
    Rédacteur

    Avatar de Bovino
    Homme Profil pro
    Développeur Web
    Inscrit en
    Juin 2008
    Messages
    23 647
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 53
    Localisation : France, Gironde (Aquitaine)

    Informations professionnelles :
    Activité : Développeur Web
    Secteur : High Tech - Éditeur de logiciels

    Informations forums :
    Inscription : Juin 2008
    Messages : 23 647
    Points : 91 418
    Points
    91 418
    Billets dans le blog
    20
    Par défaut
    Quoi ?

    J'imagine donc que les fichiers disponibles, non minifiés ni obfusqués sont juste des fichiers factices destinés à tromper les utilisateurs...
    Et puis tu as raison, Mozilla est bien connu pour ses licences propriétaires et leur acharnement à vouloir garder leurs environnements fermés...
    Pas de question technique par MP !
    Tout le monde peut participer à developpez.com, vous avez une idée, contactez-moi !
    Mes formations video2brain : La formation complète sur JavaScriptJavaScript et le DOM par la pratiquePHP 5 et MySQL : les fondamentaux
    Mon livre sur jQuery
    Module Firefox / Chrome d'intégration de JSFiddle et CodePen sur le forum

  9. #9
    bm
    bm est déconnecté
    Membre confirmé

    Homme Profil pro
    Freelance
    Inscrit en
    Octobre 2002
    Messages
    874
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Drôme (Rhône Alpes)

    Informations professionnelles :
    Activité : Freelance
    Secteur : Tourisme - Loisirs

    Informations forums :
    Inscription : Octobre 2002
    Messages : 874
    Points : 556
    Points
    556
    Billets dans le blog
    6
    Par défaut
    https://developer.mozilla.org/fr/search?q=fichiers

    Le résultat est surtout du html ..

  10. #10
    Rédacteur

    Avatar de Bovino
    Homme Profil pro
    Développeur Web
    Inscrit en
    Juin 2008
    Messages
    23 647
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 53
    Localisation : France, Gironde (Aquitaine)

    Informations professionnelles :
    Activité : Développeur Web
    Secteur : High Tech - Éditeur de logiciels

    Informations forums :
    Inscription : Juin 2008
    Messages : 23 647
    Points : 91 418
    Points
    91 418
    Billets dans le blog
    20
    Par défaut
    Mais tu parles de quoi là ?

    * Les développeurs jQuery (qui de surcroit ne sont pas nécessairement employés de Mozilla ) mettent à disposition tous les fichiers, toutes les informations et tous les bugtrackers nécessaires pour connaitre ce qu'il y a dans le code et comment il fonctionne.
    * W3Schools que tu cites est un site supposé de référence mais de piètre qualité et il existe des références beaucoup plus fiables et ouvertes dont MDN.
    * Il n'y a aucun rapport entre MDN et jQuery !

    Bref, quand on propose de passer par une table HTML pour aligner deux éléments avec un lien W3Schools à la clé, les deux propositions sont mauvaises.
    Ensuite, que tu préfères W3Schools à MDN (mais il existe, encore une fois, d'autres références fiables) parce que les développeurs jQuery sont employés par Mozilla, c'est ton droit, mais ça ne renforce pas vraiment ta crédibilité et il est utile de l'indiquer à ceux qui lisent la discussion.
    Pas de question technique par MP !
    Tout le monde peut participer à developpez.com, vous avez une idée, contactez-moi !
    Mes formations video2brain : La formation complète sur JavaScriptJavaScript et le DOM par la pratiquePHP 5 et MySQL : les fondamentaux
    Mon livre sur jQuery
    Module Firefox / Chrome d'intégration de JSFiddle et CodePen sur le forum

  11. #11
    Membre expert
    Avatar de Golgotha
    Homme Profil pro
    Full-stack Web Developer
    Inscrit en
    Août 2007
    Messages
    1 385
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France

    Informations professionnelles :
    Activité : Full-stack Web Developer
    Secteur : High Tech - Éditeur de logiciels

    Informations forums :
    Inscription : Août 2007
    Messages : 1 385
    Points : 3 527
    Points
    3 527
    Billets dans le blog
    1
    Par défaut
    Mgesche, il existe de nombreuse façon de solutionner le problème en CSS.
    Comme Bovino l'a expliqué on ne doit pas faire de présentation en HTML, c'est le rôle du CSS.

    Voici 3 façons pour positionner les éléments en ligne.

    1. Utiliser le système de grille mis à disposition par jquery mobile.

    Code js : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
     
          <fieldset class="ui-grid-a">
            <div class="ui-block-a">
              <input type="text" name="newItem" id="newItem" value="item 1" />
            </div>
            <div class="ui-block-b">
              <a href="#" id="addItem" data-role="button" data-icon="plus" data-iconpos="notext">Add new item</a>
            </div>
          </fieldset>

    Jquery mobile met à disposition un système de grille qui te permet de faire des mises en forme tabulaire responsive.
    Comme tu peux le voir c'est assez simple, tu englobe par une première div avec une classe ui-grid-a (pour 2 colonnes), ensuite la première colonne sera une div de classe ui-block-a
    et la seconde colonne sera une autre div de classe ui-block-b

    Dans le même ordre d'idée tu peux aller jusqu’à 5 colonnes avec la classe ui-grid-d et les classes ui-block-a à ui-block-e

    http://codepen.io/anon/pen/danbm/

    2. Le positionnement float

    Code html : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    <div class="input_area">        <div class="left">
              <input type="text" name="newItem" id="newItem" value="item 1" />
          </div>
     
     
            <div class="left">
              <a href="#" id="addItem" data-role="button" data-icon="plus" data-iconpos="notext">Add new item</a>
            </div>
        </div>

    Code css : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    .input_area{  width : 300px;
      display: table;
    }
     
     
    .cell-row{
      display: table-cell;  
      padding: 2px;
    }

    Ici tu va simplement "dire" aux éléments de se positionner à gauche, les uns à la suite des autres.
    Ceci dit, ce n'est pas la meilleur façon de faire et il faut être prudent quand on "sort" un élément du flux.

    http://codepen.io/anon/pen/vhtHI/

    3. Utiliser le display:table

    Sans doute la façon la plus propre, en CSS ont peux dire à une div de se comporter comme un tableau.

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    <div class="input_area">        <div class="cell-row">
              <input type="text" name="newItem" id="newItem" value="item 2" />
          </div>
     
     
            <div class="cell-row">
              <a href="#" id="addItem" data-role="button" data-icon="plus" data-iconpos="notext">Add new item</a>
            </div>
        </div>
    Code css : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    .input_area{  width : 300px;
      display: table;
    }
     
     
    .cell-row{
      display: table-cell;  
      padding: 2px;
    }

    Ici donc, la class input_area à un display : table, ce qui veux dire que la div va se comporter comme un tableau,
    Pour cela on va insérer des div qui auront l'attribut display: table-cell et se comporterons comme des cellules.

    http://codepen.io/anon/pen/DIfwC/


    As tu des questions sur l'une ou l'autre des solutions ?
    Consultant et développeur full-stack spécialiste du Web
    faq jQuery - règles du forum - faqs web

  12. #12
    bm
    bm est déconnecté
    Membre confirmé

    Homme Profil pro
    Freelance
    Inscrit en
    Octobre 2002
    Messages
    874
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Drôme (Rhône Alpes)

    Informations professionnelles :
    Activité : Freelance
    Secteur : Tourisme - Loisirs

    Informations forums :
    Inscription : Octobre 2002
    Messages : 874
    Points : 556
    Points
    556
    Billets dans le blog
    6
    Par défaut
    ok golgotha :

    Fieldset concentre plus en hauteur les champs de data , que table ..

+ Répondre à la discussion
Cette discussion est résolue.

Discussions similaires

  1. Aligner deux éléments l'un en dessous de l'autre
    Par Hilary dans le forum Mise en page CSS
    Réponses: 14
    Dernier message: 19/07/2010, 10h41
  2. Aligner par le bas deux éléments en float.
    Par blueice dans le forum Mise en page CSS
    Réponses: 1
    Dernier message: 18/12/2007, 13h42
  3. Aligner un élément a gauche, et un autre à droite
    Par TommyWeb dans le forum Balisage (X)HTML et validation W3C
    Réponses: 3
    Dernier message: 21/09/2005, 16h32
  4. Comment aligner des éléments d'un TEdit à droite ?
    Par bertrand_declerck dans le forum Composants VCL
    Réponses: 18
    Dernier message: 15/06/2005, 18h46
  5. Réponses: 3
    Dernier message: 26/01/2005, 16h21

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo