Sélectionner et Désélectionner en un seul bouton

par Phyliono Mer 6 Jan 2016 - 17:49

Détails techniques

Version du forum : phpBB2
Poste occupé : Fondateur
Navigateur(s) concerné(s) : Tous les navigateurs
Capture d'écran du problème :

Voir l'image:

Personnes concernées par le problème : Tous les utilisateurs
Lien du forum : http://www.universiteuniverselle.com

Description du problème

Bonjour,

J'aimerais rassembler les boutons Sélectionner et Désélectionner de la messagerie en un seul bouton (comme vous pouvez le voir sur la capture d'écran). Lorsque l'on cliquerait une première fois, ça cocherait tout et si on reclique, ça décoche tout.

Quelqu'un saurait-il faire cela ?

Template privmsgs_body

Code:: <form action="{S_PRIVMSGS_ACTION}" method="post" name="privmsg_list"> <table width="100%" border="0" cellspacing="0" cellpadding="0" class="forumline" style="margin-bottom:6px;"> <tr class="modactions"> <td align="left" nowrap="nowrap" class="modgen"> <a href="/privmsg?mode=post"><img src="http://i21.servimg.com/u/f21/17/44/20/01/ycrire14.png" onmouseout="this.src='http://i21.servimg.com/u/f21/17/44/20/01/ycrire14.png'" onmouseover="this.src='http://i21.servimg.com/u/f21/17/44/20/01/ycrire15.png'" alt="Écrire" align="top" border="0" class="ecrirepm"/></a></td> <td align="right" valign="middle" width="100%" class="modadmin"> <table> <tr valign="middle"> <td>{INBOX_IMG}</td> <td><span class="gen"><b>{INBOX}</b>  </span></td> <td>{SENTBOX_IMG}</td> <td><span class="gen"><b>{SENTBOX}</b>  </span></td> <td>{OUTBOX_IMG}</td> <td><span class="gen"><b>{OUTBOX}</b>  </span></td> </tr> </table> </td> </tr> </table> <table class="forumline" width="100%" border="0" cellspacing="0" cellpadding="0">  <tr> <td class="{listrow.ROW_CLASS}" align="center" valign="middle" style="border-top-right-radius: 0px; border-bottom-right-radius: 0px; -webkit-border-top-right-radius: 0px; -webkit-border-bottom-right-radius: 0px; -moz-border-radius-topright: 0px; -moz-border-radius-bottomright: 1px;"> <img title="{listrow.L_PRIVMSG_FOLDER_ALT}" src="{listrow.PRIVMSG_FOLDER_IMG}" alt="{listrow.L_PRIVMSG_FOLDER_ALT}" /> </td> <td class="{listrow.ROW_CLASS}" valign="middle" width="55%" style="border-radius: 0px; -webkit-border-radius: 0px; -moz-border-radius: 0px;">   <span class="topictitle">   <a class="topictitle" href="{listrow.U_READ}">{listrow.SUBJECT}</a> </span> </td> <td class="{listrow.ROW_CLASS}" align="center" valign="middle" width="20%" style="border-radius: 0px; -webkit-border-radius: 0px; -moz-border-radius: 0px;"><span class="name"> {listrow.FROM}</span></td> <td class="{listrow.ROW_CLASS}" align="center" valign="middle" width="15%" style="border-radius: 0px; -webkit-border-radius: 0px; -moz-border-radius: 0px;"><span class="postdetails">{listrow.DATE}</span></td> <td class="{listrow.ROW_CLASS}" align="center" valign="middle" width="5%" style="border-top-left-radius: 0px; border-bottom-left-radius: 0px; -webkit-border-top-left-radius: 0px; -webkit-border-bottom-left-radius: 0px; -moz-border-radius-topleft: 0px; -moz-border-radius-bottomleft: 1px;"> <span class="postdetails"><input type="checkbox" name="mark[]2" value="{listrow.S_MARK_ID}" /></span> </td> </tr> <tr><td style="width:100%;height:8px;background:transparent;"colspan="5"></td></tr>  <tr> <td class="row1" colspan="6" align="center" valign="middle"><span class="gen">{L_NO_MESSAGES}</span></td> </tr>  <tr><td style="width:100%;height:1px;background:transparent;"colspan="5"></td></tr> <tr> <td class="globalbarre" colspan="6" align="right" valign="top" style="height:25px !important;"> <span class="gensmall"> <b> <a class="gensmall" href="javascript:select_switch_privmsg(true);"><img src="http://i68.servimg.com/u/f68/17/44/20/01/cocher10.png" onmouseout="this.src='http://i68.servimg.com/u/f68/17/44/20/01/cocher10.png'" onmouseover="this.src='http://i68.servimg.com/u/f68/17/44/20/01/cocher11.png'" /></a>   <a class="gensmall" href="javascript:select_switch_privmsg(false);"><img src="http://i68.servimg.com/u/f68/17/44/20/01/dycoch10.png" onmouseout="this.src='http://i68.servimg.com/u/f68/17/44/20/01/dycoch10.png'" onmouseover="this.src='http://i68.servimg.com/u/f68/17/44/20/01/dycoch11.png'" /></a> </b> </span>   <input class="mainoption" type="submit" name="moveprofile" value="{L_MOVE_PROFILE_MARKED}" />  <input type="submit" name="delete" class="bouton_corbeille" value=""/>  </td> </tr> </table> </form> <table class="forumline" width="100%" border="0" cellspacing="0" cellpadding="0" style="margin-top:6px;"> <tr class="modactions"> <td align="left" nowrap="nowrap" class="modgen"> <span class="nav"><div class="page_number">{PAGE_NUMBER}</div></span> <td align="right" width="400" class="modadmin"><span class="nav"><div class="pagination">{PAGINATION}</div></span></td> </td></tr> </table>

par Phyliono Jeu 7 Jan 2016 - 19:03

par Phyliono Sam 9 Jan 2016 - 13:35

par Self Sam 9 Jan 2016 - 17:18

Bonjour,

Changez votre le code de votre template par ceci :

Code:: <form action="{S_PRIVMSGS_ACTION}" method="post" name="privmsg_list"> <table width="100%" border="0" cellspacing="0" cellpadding="0" class="forumline" style="margin-bottom:6px;"> <tr class="modactions"> <td align="left" nowrap="nowrap" class="modgen"> <a href="/privmsg?mode=post"><img src="http://i21.servimg.com/u/f21/17/44/20/01/ycrire14.png" onmouseout="this.src='http://i21.servimg.com/u/f21/17/44/20/01/ycrire14.png'" onmouseover="this.src='http://i21.servimg.com/u/f21/17/44/20/01/ycrire15.png'" alt="Écrire" align="top" border="0" class="ecrirepm"/></a></td> <td align="right" valign="middle" width="100%" class="modadmin"> <table> <tr valign="middle"> <td>{INBOX_IMG}</td> <td><span class="gen"><b>{INBOX}</b>  </span></td> <td>{SENTBOX_IMG}</td> <td><span class="gen"><b>{SENTBOX}</b>  </span></td> <td>{OUTBOX_IMG}</td> <td><span class="gen"><b>{OUTBOX}</b>  </span></td> </tr> </table> </td> </tr> </table> <table class="forumline" width="100%" border="0" cellspacing="0" cellpadding="0">  <tr> <td class="{listrow.ROW_CLASS}" align="center" valign="middle" style="border-top-right-radius: 0px; border-bottom-right-radius: 0px; -webkit-border-top-right-radius: 0px; -webkit-border-bottom-right-radius: 0px; -moz-border-radius-topright: 0px; -moz-border-radius-bottomright: 1px;"> <img title="{listrow.L_PRIVMSG_FOLDER_ALT}" src="{listrow.PRIVMSG_FOLDER_IMG}" alt="{listrow.L_PRIVMSG_FOLDER_ALT}" /> </td> <td class="{listrow.ROW_CLASS}" valign="middle" width="55%" style="border-radius: 0px; -webkit-border-radius: 0px; -moz-border-radius: 0px;">   <span class="topictitle">   <a class="topictitle" href="{listrow.U_READ}">{listrow.SUBJECT}</a> </span> </td> <td class="{listrow.ROW_CLASS}" align="center" valign="middle" width="20%" style="border-radius: 0px; -webkit-border-radius: 0px; -moz-border-radius: 0px;"><span class="name"> {listrow.FROM}</span></td> <td class="{listrow.ROW_CLASS}" align="center" valign="middle" width="15%" style="border-radius: 0px; -webkit-border-radius: 0px; -moz-border-radius: 0px;"><span class="postdetails">{listrow.DATE}</span></td> <td class="{listrow.ROW_CLASS}" align="center" valign="middle" width="5%" style="border-top-left-radius: 0px; border-bottom-left-radius: 0px; -webkit-border-top-left-radius: 0px; -webkit-border-bottom-left-radius: 0px; -moz-border-radius-topleft: 0px; -moz-border-radius-bottomleft: 1px;"> <span class="postdetails"><input type="checkbox" name="mark[]2" value="{listrow.S_MARK_ID}" /></span> </td> </tr> <tr><td style="width:100%;height:8px;background:transparent;"colspan="5"></td></tr>  <tr> <td class="row1" colspan="6" align="center" valign="middle"><span class="gen">{L_NO_MESSAGES}</span></td> </tr>  <tr><td style="width:100%;height:1px;background:transparent;"colspan="5"></td></tr> <tr> <td class="globalbarre" colspan="6" align="right" valign="top" style="height:25px !important;"> <span class="gensmall"> <b> <a class="gensmall unselected" href="javascript:select_switch_privmsg(true);"><img src="http://i68.servimg.com/u/f68/17/44/20/01/cocher10.png" onmouseout="this.src='http://i68.servimg.com/u/f68/17/44/20/01/cocher10.png'" onmouseover="this.src='http://i68.servimg.com/u/f68/17/44/20/01/cocher11.png'" /></a>   <a class="gensmall selected" style="display: none;" href="javascript:select_switch_privmsg(false);"><img src="http://i68.servimg.com/u/f68/17/44/20/01/dycoch10.png" onmouseout="this.src='http://i68.servimg.com/u/f68/17/44/20/01/dycoch10.png'" onmouseover="this.src='http://i68.servimg.com/u/f68/17/44/20/01/dycoch11.png'" /></a> </b> </span>   <input class="mainoption" type="submit" name="moveprofile" value="{L_MOVE_PROFILE_MARKED}" />  <input type="submit" name="delete" class="bouton_corbeille" value=""/>  </td> </tr> </table> </form> <script> jQuery(function(){ $('.globalbarre a.unselected').on('click', function(){ $(this).hide(); $(this).next().show(); }); $('.globalbarre a.selected').on('click', function(){ $(this).hide(); $(this).prev().show(); }); }); </script> <table class="forumline" width="100%" border="0" cellspacing="0" cellpadding="0" style="margin-top:6px;"> <tr class="modactions"> <td align="left" nowrap="nowrap" class="modgen"> <span class="nav"><div class="page_number">{PAGE_NUMBER}</div></span> <td align="right" width="400" class="modadmin"><span class="nav"><div class="pagination">{PAGINATION}</div></span></td> </td></tr> </table>

Cordialement Smile

!

par Phyliono Sam 9 Jan 2016 - 17:39

Super, ça marche parfaitement. Merci beaucoup.

Juste petit bémol, j'aimerais retirer les espaces en rouge (que la barre fasse la taille des boutons), et mettre les espaces en vert à 4 pixels.
Sélectionner et Désélectionner en un seul bouton Captur30

Sélectionner et Désélectionner en un seul bouton Captur30

Sélectionner et Désélectionner en un seul bouton Captur31

Merci d'avance Smile

par Self Dim 10 Jan 2016 - 17:05

Bonjour,

Pouvez-vous me donner le CSS associé, car avec le seul template je n'ai pas le même résultat que sur votre forum et ne peut donc pas régler ce problème à l'aveugle Very Happy

!

par Phyliono Dim 10 Jan 2016 - 19:20

Tenez :

Code:: .modactions { background-image: url('http://i68.servimg.com/u/f68/17/44/20/01/modact10.png'); background-repeat: repeat; height:30px !important; } .modactions img { vertical-align: middle;} .modgen { -webkit-border-top-left-radius: 2px; -webkit-border-bottom-left-radius: 2px; -moz-border-radius-topleft: 2px; -moz-border-radius-bottomleft: 2px; border-top-left-radius: 2px; border-bottom-left-radius: 2px; } .modadmin { -webkit-border-top-right-radius: 2px; -webkit-border-bottom-right-radius: 2px; -moz-border-radius-topright: 2px; -moz-border-radius-bottomright: 2px; border-top-right-radius: 2px; border-bottom-right-radius: 2px; } .globalbarre {background-image: url('http://i68.servimg.com/u/f68/17/44/20/01/barreg10.png'); background-repeat: repeat; -moz-border-radius:3px !important; -webkit-border-radius:3px !important; border-radius:3px !important; border:none !important; line-height: 26px;} .bouton_corbeille{ background-image:url('http://i68.servimg.com/u/f68/17/44/20/01/jeter_10.png'); width:31px !important; height:30px !important; -webkit-border-radius: 5px !important; -moz-border-radius: 5px !important; border-radius: 5px !important; border:none; margin:0px !important; } .bouton_corbeille:hover{ background-image:url('http://i68.servimg.com/u/f68/17/44/20/01/jeter10.png'); width:31px; height:30px; }

Merci d'avance!

par Self Lun 11 Jan 2016 - 17:07

Bonjour,

Remplacez votre template par ceci :

Code:: <form action="{S_PRIVMSGS_ACTION}" method="post" name="privmsg_list"> <table width="100%" border="0" cellspacing="0" cellpadding="0" class="forumline" style="margin-bottom:6px;"> <tr class="modactions"> <td align="left" nowrap="nowrap" class="modgen"> <a href="/privmsg?mode=post"><img src="http://i21.servimg.com/u/f21/17/44/20/01/ycrire14.png" onmouseout="this.src='http://i21.servimg.com/u/f21/17/44/20/01/ycrire14.png'" onmouseover="this.src='http://i21.servimg.com/u/f21/17/44/20/01/ycrire15.png'" alt="Écrire" align="top" border="0" class="ecrirepm"/></a></td> <td align="right" valign="middle" width="100%" class="modadmin"> <table> <tr valign="middle"> <td>{INBOX_IMG}</td> <td><span class="gen"><b>{INBOX}</b>  </span></td> <td>{SENTBOX_IMG}</td> <td><span class="gen"><b>{SENTBOX}</b>  </span></td> <td>{OUTBOX_IMG}</td> <td><span class="gen"><b>{OUTBOX}</b>  </span></td> </tr> </table> </td> </tr> </table> <table class="forumline" width="100%" border="0" cellspacing="0" cellpadding="0">  <tr> <td class="{listrow.ROW_CLASS}" align="center" valign="middle" style="border-top-right-radius: 0px; border-bottom-right-radius: 0px; -webkit-border-top-right-radius: 0px; -webkit-border-bottom-right-radius: 0px; -moz-border-radius-topright: 0px; -moz-border-radius-bottomright: 1px;"> <img title="{listrow.L_PRIVMSG_FOLDER_ALT}" src="{listrow.PRIVMSG_FOLDER_IMG}" alt="{listrow.L_PRIVMSG_FOLDER_ALT}" /> </td> <td class="{listrow.ROW_CLASS}" valign="middle" width="55%" style="border-radius: 0px; -webkit-border-radius: 0px; -moz-border-radius: 0px;">   <span class="topictitle">   <a class="topictitle" href="{listrow.U_READ}">{listrow.SUBJECT}</a> </span> </td> <td class="{listrow.ROW_CLASS}" align="center" valign="middle" width="20%" style="border-radius: 0px; -webkit-border-radius: 0px; -moz-border-radius: 0px;"><span class="name"> {listrow.FROM}</span></td> <td class="{listrow.ROW_CLASS}" align="center" valign="middle" width="15%" style="border-radius: 0px; -webkit-border-radius: 0px; -moz-border-radius: 0px;"><span class="postdetails">{listrow.DATE}</span></td> <td class="{listrow.ROW_CLASS}" align="center" valign="middle" width="5%" style="border-top-left-radius: 0px; border-bottom-left-radius: 0px; -webkit-border-top-left-radius: 0px; -webkit-border-bottom-left-radius: 0px; -moz-border-radius-topleft: 0px; -moz-border-radius-bottomleft: 1px;"> <span class="postdetails"><input type="checkbox" name="mark[]2" value="{listrow.S_MARK_ID}" /></span> </td> </tr> <tr><td style="width:100%;height:8px;background:transparent;"colspan="5"></td></tr>  <tr> <td class="row1" colspan="6" align="center" valign="middle"><span class="gen">{L_NO_MESSAGES}</span></td> </tr>  <tr><td style="width:100%;height:1px;background:transparent;"colspan="5"></td></tr> <tr> <td class="globalbarre" colspan="6" align="right" valign="top" style="height:31px !important;"> <span class="gensmall"> <b> <a class="gensmall unselected" href="javascript:select_switch_privmsg(true);"><img src="http://i68.servimg.com/u/f68/17/44/20/01/cocher10.png" onmouseout="this.src='http://i68.servimg.com/u/f68/17/44/20/01/cocher10.png'" onmouseover="this.src='http://i68.servimg.com/u/f68/17/44/20/01/cocher11.png'" /></a>   <a class="gensmall selected" style="display: none;" href="javascript:select_switch_privmsg(false);"><img src="http://i68.servimg.com/u/f68/17/44/20/01/dycoch10.png" onmouseout="this.src='http://i68.servimg.com/u/f68/17/44/20/01/dycoch10.png'" onmouseover="this.src='http://i68.servimg.com/u/f68/17/44/20/01/dycoch11.png'" /></a> </b> </span>   <input class="mainoption" type="submit" name="moveprofile" value="{L_MOVE_PROFILE_MARKED}" />  <input type="submit" name="delete" class="bouton_corbeille" value=""> </td> </tr> </table> </form> <script> jQuery(function(){ $('.globalbarre a.unselected').on('click', function(){ $(this).hide(); $(this).next().show(); }); $('.globalbarre a.selected').on('click', function(){ $(this).hide(); $(this).prev().show(); }); }); </script> <table class="forumline" width="100%" border="0" cellspacing="0" cellpadding="0" style="margin-top:6px;"> <tr class="modactions"> <td align="left" nowrap="nowrap" class="modgen"> <span class="nav"><div class="page_number">{PAGE_NUMBER}</div></span> <td align="right" width="400" class="modadmin"><span class="nav"><div class="pagination">{PAGINATION}</div></span></td> </td></tr> </table>

Et votre CSS par ceci Wink

:

Code:: .modactions { background-image:url('http://i68.servimg.com/u/f68/17/44/20/01/modact10.png'); background-repeat:repeat; height:30px !important; } .modactions img { vertical-align:middle; } .modgen { -webkit-border-top-left-radius:2px; -webkit-border-bottom-left-radius:2px; -moz-border-radius-topleft:2px; -moz-border-radius-bottomleft:2px; border-top-left-radius:2px; border-bottom-left-radius:2px; } .modadmin { -webkit-border-top-right-radius:2px; -webkit-border-bottom-right-radius:2px; -moz-border-radius-topright:2px; -moz-border-radius-bottomright:2px; border-top-right-radius:2px; border-bottom-right-radius:2px; } .globalbarre { background-image:url('http://i68.servimg.com/u/f68/17/44/20/01/barreg10.png'); background-repeat:repeat; -moz-border-radius:3px !important; -webkit-border-radius:3px !important; border-radius:3px !important; border:none !important; height:31px !important; position: relative; } .globalbarre span { position: absolute; right: 39px; } .bouton_corbeille { background-image:url('http://i68.servimg.com/u/f68/17/44/20/01/jeter_10.png'); width:31px !important; height:30px !important; -webkit-border-radius:5px !important; -moz-border-radius:5px !important; border-radius:5px !important; border:none; margin:0px !important; position: absolute; right: 3px; } .bouton_corbeille:hover { background-image:url('http://i68.servimg.com/u/f68/17/44/20/01/jeter10.png'); width:31px; height: 30px; }

Bonne journée Wink

!

par Phyliono Mar 12 Jan 2016 - 0:29

Merci c'est bon pour la barre mais le bouton Sélectionner/Déselectionner se décale toujours vers la droite comme sur les premières captures d'écran...

Merci d'avance !

par Self Mar 12 Jan 2016 - 0:58

Bonsoir,

Dans ce cas remplacez votre CSS par ceci :

Code:: .modactions { background-image:url('http://i68.servimg.com/u/f68/17/44/20/01/modact10.png'); background-repeat:repeat; height:30px !important; } .modactions img { vertical-align:middle; } .modgen { -webkit-border-top-left-radius:2px; -webkit-border-bottom-left-radius:2px; -moz-border-radius-topleft:2px; -moz-border-radius-bottomleft:2px; border-top-left-radius:2px; border-bottom-left-radius:2px; } .modadmin { -webkit-border-top-right-radius:2px; -webkit-border-bottom-right-radius:2px; -moz-border-radius-topright:2px; -moz-border-radius-bottomright:2px; border-top-right-radius:2px; border-bottom-right-radius:2px; } .globalbarre { background-image:url('http://i68.servimg.com/u/f68/17/44/20/01/barreg10.png'); background-repeat:repeat; -moz-border-radius:3px !important; -webkit-border-radius:3px !important; border-radius:3px !important; border:none !important; height:31px !important; position: relative; } .globalbarre span { position: absolute; right: 39px; } .globalbarre span a{ position: absolute; top: 0; right: 0; } .bouton_corbeille { background-image:url('http://i68.servimg.com/u/f68/17/44/20/01/jeter_10.png'); width:31px !important; height:30px !important; -webkit-border-radius:5px !important; -moz-border-radius:5px !important; border-radius:5px !important; border:none; margin:0px !important; position: absolute; right: 3px; } .bouton_corbeille:hover { background-image:url('http://i68.servimg.com/u/f68/17/44/20/01/jeter10.png'); width:31px; height: 30px; }

par Phyliono Mar 12 Jan 2016 - 1:26

Merci c'est parfait ! Est-ce que tu pourrais m'aider sur ce sujet qui est du même genre :https://forum.forumactif.com/t383036-probleme-d-affichage-de-la-page-groupe-sur-chrome ?

Merci d'avance Smile

Sélectionner et Désélectionner en un seul bouton