Étiquette : bouton

[Magento 2] Afficher/masquer le bouton « Effacer tous les filtres » dans la liste des catégories/produits

12/01/2021 / admin

Testé fonctionnel Magento 2.4!

Dans mon exemple, l’ID « narrow-by-list » est présent deux fois dans le DOM (ce qui n’est pas du tout une bonne pratique) car la liste des filtres s’affiche dans deux zones bien distinctes de la page: 1. en mode horizontal au-dessus de la liste des catégories/produits et dans un volet glissant qui ne s’affiche qu’au clic sur un bouton de type « Voir plus de filtres ».

Il faudra donc adapter un peu mon code à votre propre utilisation.

Chemin: app/design/frontend/MyVendor/MyTheme/Magento_LayeredNavigation/templates/layer/view.phtml.

Je désactive la condition PHP <?php if ($block->getLayer()->getState()->getFilters()) : ?> qui sette la visibilité du bouton « Effacer tout », mais uniquement au rechargement de la page.
J’ajoute un ID <div id="filterActions" class="block-actions filter-actions">.

            <?php //if ($block->getLayer()->getState()->getFilters()) : ?>
                <div id="filterActions" class="block-actions filter-actions">
                    <a href="<?= $block->escapeUrl($block->getClearUrl()) ?>" class="action secondary icon clear small filter-clear">
                        <span><?= $block->escapeHtml(__('Clear All')) ?></span>
                        <span class="icon">
                            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="20" viewBox="0 0 24 20"><g><g><g><path fill="none" stroke="#fff" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="20" d="M1 6.99v0l3 4.5v0l3.5-4v0"/></g><g><path fill="none" stroke="#fff" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="20" d="M13.5 19.5A9.5 9.5 0 1 0 4 10v1.494"/></g></g></g></svg>
                        </span>
                    </a>
                </div>
            <?php //endif; ?>

<?php //if ($block->getLayer()->getState()->getFilters()) : ?>

<a href="<?= $block->escapeUrl($block->getClearUrl()) ?>" class="action secondary icon clear small filter-clear">

<span><?= $block->escapeHtml(__('Clear All')) ?></span>

</span>

</a>

</div>

<?php //endif; ?>

Dans le même fichier view.phtml, j’ajoute ce bout de code javaScript (il vous faudra probablement adapter le ciblage du selecteur suivant qui n’existera pas chez vous: let FILTER = $('#narrow-by-list.is-view-top').find('.active');):

<script>
    require([
        'jquery'
    ], function($){
        'use strict';

        // On vérifie dans le noeud '#narrow-by-list.is-view-top' (view-top.phtml)
        // qu'il y a au moins 1 filtre d'actif.
        function checkForActiveFilter() {
            let FILTER = $('#narrow-by-list.is-view-top').find('.active');

            if (FILTER.length >= 1) {
                return true;
            } else {
                return false;
            }
        }

        // On sette la visibilité du bouton "Effacer tout" en fonction du résultat
        // retourné par la fonction checkForActiveFilter().
        function setFilterActionsVisibility() {
            const $FILTER_ACTIONS = $('#filterActions');

            if ( checkForActiveFilter() == true ){
                $FILTER_ACTIONS.removeClass('no-active-filter');
            } else {
                $FILTER_ACTIONS.addClass('no-active-filter');
            }
        }

        // console.log("is any filter active? " + checkForActiveFilter());
        
        setFilterActionsVisibility();
    });
</script>

require([

'jquery'

], function($){

'use strict';

// On vérifie dans le noeud '#narrow-by-list.is-view-top' (view-top.phtml)

// qu'il y a au moins 1 filtre d'actif.

function checkForActiveFilter() {

let FILTER = $('#narrow-by-list.is-view-top').find('.active');

if (FILTER.length >= 1) {

return true;

} else {

return false;

}

// On sette la visibilité du bouton "Effacer tout" en fonction du résultat

// retourné par la fonction checkForActiveFilter().

function setFilterActionsVisibility() {

const $FILTER_ACTIONS = $('#filterActions');

if ( checkForActiveFilter() == true ){

$FILTER_ACTIONS.removeClass('no-active-filter');

} else {

$FILTER_ACTIONS.addClass('no-active-filter');

}

// console.log("is any filter active? " + checkForActiveFilter());

setFilterActionsVisibility();

});

</script>

On n’oublie pas le petit CSS qui va bien:

#filterActions.no-active-filter {
    display: none !important;
}

#filterActions.no-active-filter {

display: none !important;

}

[Magento 2] Rajouter des préfixes de civilités sous forme de boutons radio dans le formulaire de création de compte

27/11/2020 / admin

Attention: astuce fonctionnelle sur une version de Magento 2.4 Enterprise. Je crois que toute la partie attributs des customers n’est pas disponible en version Community Edition. Mais cette astuce pourrait très bien fonctionner avec les deux versions.

PHTML à modifier

Créer le fichier de surcharge app/design/frontend/MyVendor/mytheme/Magento_Customer/templates/widget/name.phtml pour remplacer l’élément Select par des boutons Radio:

<?php if ($prefix) : ?>
    <div class="field field-name-prefix<?= $block->isPrefixRequired() ? ' required' : '' ?>">
        <?php if ($block->getPrefixOptions() === false) : ?>
            <label class="label" for="<?= $block->escapeHtmlAttr($block->getFieldId('prefix')) ?>"><span><?= $block->escapeHtml($block->getStoreLabel('prefix')) ?></span></label>
        <?php endif; ?>

        <?php if ($block->getPrefixOptions() === false) : ?>
            <div class="control">
                <input type="text" id="<?= $block->escapeHtmlAttr($block->getFieldId('prefix')) ?>"
                       name="<?= $block->escapeHtmlAttr($block->getFieldName('prefix')) ?>"
                       value="<?= $block->escapeHtmlAttr($block->getObject()->getPrefix()) ?>"
                       title="<?= $block->escapeHtmlAttr($block->getStoreLabel('prefix')) ?>"
                       class="input-text <?= $block->escapeHtmlAttr($block->getAttributeValidationClass('prefix')) ?>" <?= $block->isPrefixRequired() ? ' data-validate="{required:true}"' : '' ?>>
            </div>
        <?php else : ?>
            <?php foreach ($block->getPrefixOptions() as $_option) : ?>
                <?php if (!$block->escapeHtml(__($_option) == " ")) : ?>
                    <div class="field choice">
                        <div class="control">
                            <input
                                type="radio"
                                name="<?= $block->escapeHtmlAttr($block->getFieldName('prefix')) ?>"
                                id="<?= $block->escapeHtmlAttr($block->getFieldName('prefix')) ?>[<?= $block->escapeHtmlAttr($_option) ?>]"
                                value="<?= $block->escapeHtml(__($_option)) ?>" 
                                <?php // S'assurer que le préfixe coché lors de l'inscription soit récupéré pour un affichage ultérieur ?>
                                <?php if ($option == $block->getObject()->getPrefix()) : ?>
                                    checked="checked" 
                                <?php endif; ?>
                                class="radio"/>
                            <label
                                class="label"
                                for="<?= $block->escapeHtmlAttr($block->getFieldName('prefix')) ?>[<?= $block->escapeHtmlAttr($_option) ?>]">
                                <span><?= $block->escapeHtml(__($_option)) ?></span>
                            </label>
                        </div>
                    </div>
                <?php endif; ?>
            <?php endforeach; ?>
        <?php endif; ?>
    </div>
<?php endif; ?>

<?php if ($prefix) : ?>

<div class="field field-name-prefix<?= $block->isPrefixRequired() ? ' required' : '' ?>">

<?php if ($block->getPrefixOptions() === false) : ?>

<label class="label" for="<?= $block->escapeHtmlAttr($block->getFieldId('prefix')) ?>"><span><?= $block->escapeHtml($block->getStoreLabel('prefix')) ?></span></label>

<?php endif; ?>

<?php if ($block->getPrefixOptions() === false) : ?>

<input type="text" id="<?= $block->escapeHtmlAttr($block->getFieldId('prefix')) ?>"

name="<?= $block->escapeHtmlAttr($block->getFieldName('prefix')) ?>"

value="<?= $block->escapeHtmlAttr($block->getObject()->getPrefix()) ?>"

title="<?= $block->escapeHtmlAttr($block->getStoreLabel('prefix')) ?>"

class="input-text <?= $block->escapeHtmlAttr($block->getAttributeValidationClass('prefix')) ?>" <?= $block->isPrefixRequired() ? ' data-validate="{required:true}"' : '' ?>>

</div>

<?php else : ?>

<?php foreach ($block->getPrefixOptions() as $_option) : ?>

<?php if (!$block->escapeHtml(__($_option) == " ")) : ?>

<input

type="radio"

name="<?= $block->escapeHtmlAttr($block->getFieldName('prefix')) ?>"

id="<?= $block->escapeHtmlAttr($block->getFieldName('prefix')) ?>[<?= $block->escapeHtmlAttr($_option) ?>]"

value="<?= $block->escapeHtml(__($_option)) ?>"

<?php // S'assurer que le préfixe coché lors de l'inscription soit récupéré pour un affichage ultérieur ?>

<?php if ($option == $block->getObject()->getPrefix()) : ?>

checked="checked"

<?php endif; ?>

class="radio"/>

<label

class="label"

for="<?= $block->escapeHtmlAttr($block->getFieldName('prefix')) ?>[<?= $block->escapeHtmlAttr($_option) ?>]">

<span><?= $block->escapeHtml(__($_option)) ?></span>

</label>

</div>

<?php endif; ?>

<?php endforeach; ?>

<?php endif; ?>

</div>

<?php endif; ?>

A savoir:

Sans ajouter le bout de code ci-dessous, l’information sur le préfixe coché lors de l’inscription ne sera PAS récupérée pour des affichages ultérieurs des préfixes dans les pages du site.

Par exemple, dans la page « Modifier les informations de mon compte », les boutons radio représentant les préfixes disponibles s’affichaient bien, mais celui qui avait été coché lors de l’inscription n’était pas coché!

<?php // S'assurer que le préfixe coché lors de l'inscription soit récupéré pour un affichage ultérieur ?>
<?php if ($option == $block->getObject()->getPrefix()) : ?>
    checked="checked" 
<?php endif; ?>

<?php // S'assurer que le préfixe coché lors de l'inscription soit récupéré pour un affichage ultérieur ?>

<?php if ($option == $block->getObject()->getPrefix()) : ?>

checked="checked"

<?php endif; ?>

Manipulations à effectuer en BO – Afficher les préfixes (Madame, Monsieur) dans le formulaire de création de compte

Se rendre dans STORES > Attributes > Customer
Dans la liste des attributs, sélectionner l’Attribute Code « prefix »
Scroller jusqu’au volet « Storefront Properties »
Passer le champ « Show on Storefront » à « Yes »
Cliquer sur le bouton orange « Save Attribute »

Se rendre ensuite dans STORES > Settings > Configuration
Passer le Scope au store voulu
Dans la navigation de gauche, aller dans CUSTOMERS > Customers Configuration
Ouvrir le volet « Name and Address Options »
Au niveau du champ « Prefix Dropdown Options », décocher la case « Use Defaults »
Dans le champ « Prefix Dropdown Options », saisir les préfixes séparés par des point-virgules (exemple: Madame;Mademoiselle;Monsieur)
Cliquer sur le bouton orange « Save Config »

Se rendre ensuite dans SYSTEM > Tools > Cache Management
Cocher les « Cache Type » « Configuration » et « Page Cache » (leur « Status » est normalement en « INVALIDATED »
Au niveau de la liste de sélection située en haut à gauche du tableau, sélectionner « Refresh » et cliquer sur le bouton gris « Submit »

[javaScript] Désactiver un bouton d’action si le champ input associé affiche une valeur inférieure ou égale à zéro

11/12/2017 / admin

Solution 1:

Vérifier que le contenu à changé avec l’événement input (source: Can jQuery check whether input content has changed?).

$('.input-group-field').on('input', function() {
  var selectElem = $(this);
  var inputValue = parseInt(selectElem.val());
  
  if(!inputValue || inputValue < 0) {
    selectElem
      .next('.js-trigger-add-to-cart')
      .attr('disabled', 'disabled');
  }
  else {
    selectElem
      .next('.js-trigger-add-to-cart')
      .removeAttr('disabled');
  }
});

$('.input-group-field').on('input', function() {

var selectElem = $(this);

var inputValue = parseInt(selectElem.val());

if(!inputValue || inputValue < 0) {

selectElem

.next('.js-trigger-add-to-cart')

.attr('disabled', 'disabled');

}

else {

selectElem

.next('.js-trigger-add-to-cart')

.removeAttr('disabled');

}

});

Où (optimisé)

$('.input-group-field').on('input', function() {
  var selectElem = $(this);
  var inputValue = parseInt(selectElem.val());
  var targetElems = selectElem
                      .closest('.input-group')
                      .find('input[type="hidden"], .js-trigger-add-to-cart');
  
  if(!inputValue || inputValue < 0) {
    targetElems
      .attr('disabled', 'disabled');
  }
  else {
    targetElems
      .removeAttr('disabled', 'disabled');
  }
});

$('.input-group-field').on('input', function() {

var selectElem = $(this);

var inputValue = parseInt(selectElem.val());

var targetElems = selectElem

.closest('.input-group')

.find('input[type="hidden"], .js-trigger-add-to-cart');

if(!inputValue || inputValue < 0) {

targetElems

.attr('disabled', 'disabled');

}

else {

targetElems

.removeAttr('disabled', 'disabled');

}

});

Solution 2:

avec les attributs onkeyup et disabled

<div class="input-group">
	<input type="hidden" name="solrsearchParam[selected_product][${id}]" id="productselect_${id}" value="${id}" disabled="disabled"/>
	<input tal:condition="canAdd" class="input-group-field" type="text" size="3" value="0" name="solrsearchParam[quantities][${id}]" id="product_${id}" onkeyup="
		var selectElem = document.getElementById('btn_productselect_${id}');
		var inputValue = parseInt(this.value);
		if(!inputValue || inputValue < 0)
			selectElem.setAttribute('disabled', 'disabled');
		else
			selectElem.removeAttribute('disabled');"/>
	<button id="btn_productselect_${id}" class="button js-trigger-add-to-cart" type="button" disabled="disabled">
		<i class="iconfont iconfont-shopping_cart"></i>
		<span class="show-for-sr">${trans:m.catalog.frontoffice.add-to-cart,ucf}</span>
	</button>
</div>

<input tal:condition="canAdd" class="input-group-field" type="text" size="3" value="0" name="solrsearchParam[quantities][${id}]" id="product_${id}" onkeyup="

var selectElem = document.getElementById('btn_productselect_${id}');

var inputValue = parseInt(this.value);

if(!inputValue || inputValue < 0)

selectElem.setAttribute('disabled', 'disabled');

else

selectElem.removeAttribute('disabled');"/>

<span class="show-for-sr">${trans:m.catalog.frontoffice.add-to-cart,ucf}</span>

</button>

</div>

[jQuery] Détecter quel bouton est cliqué lors de la soumission d’un formulaire

23/06/2017 / admin

Source : jquery detect which button submitted form

Attention: ne fonctionne qu’avec l’élément <input />, pas avec les éléments <a />, <button />.

<form id="my-form" method="post">
    <input type="submit" value="Save" />
    <input type="submit" value="Delete" />
    <span id="result">Nothing clicked yet</span>
</form>

<span id="result">Nothing clicked yet</span>

</form>

$("#my-form input[type=submit]").click(function () {
    $("input[type=submit]", $(this).parents("form")).removeAttr("clicked");
    $(this).attr("clicked", "true");
});
$("#my-form").submit(function () {
    var clickedSubmitValue = $("input[type=submit][clicked=true]").val();
    $("#result").text("You clicked: " + clickedSubmitValue);
    return false;
});

$("#my-form input[type=submit]").click(function () {

$("input[type=submit]", $(this).parents("form")).removeAttr("clicked");

$(this).attr("clicked", "true");

});

$("#my-form").submit(function () {

var clickedSubmitValue = $("input[type=submit][clicked=true]").val();

$("#result").text("You clicked: " + clickedSubmitValue);

return false;

});

[jQuery] Soumettre un formulaire sans rafraîchir la page avec Ajax

23/06/2017 / admin

Source: Form Submission without page refresh

$(document).ready(function () {
    $('#myform').on('submit', function(e) {
        e.preventDefault();
        $.ajax({
            url : $(this).attr('action') || window.location.pathname,
            type: "GET",
            data: $(this).serialize(),
            success: function (data) {
                $("#form_output").html(data);
            },
            error: function (jXHR, textStatus, errorThrown) {
                alert(errorThrown);
            }
        });
    });
});

$(document).ready(function () {

$('#myform').on('submit', function(e) {

e.preventDefault();

$.ajax({

url : $(this).attr('action') || window.location.pathname,

type: "GET",

data: $(this).serialize(),

success: function (data) {

$("#form_output").html(data);

error: function (jXHR, textStatus, errorThrown) {

alert(errorThrown);

}

});

[SASS] Mixin button-reset pour annuler les styles appliqués aux boutons

16/02/2017 / admin

Source: Codepen.io – Reset button style.

/* Base */
 @mixin button-reset() {
    // -webkit-box-sizing: content-box;
    //    -moz-box-sizing: content-box;
    //         box-sizing: content-box;
    background: none;
    border: 0;
    color: inherit;
    /* cursor: default; */
    font: inherit;
    line-height: normal;
    overflow: visible;
    padding: 0;
    -webkit-appearance: button; /* for input */
    -webkit-user-select: none; /* for button */
       -moz-user-select: none;
        -ms-user-select: none;
    &::-moz-focus-inner,
    &::-moz-focus-inner {
        border: 0;
        padding: 0;
    }
}


/* Make `a` like a button */
@mixin a-button-reset() {
    color: inherit;
    cursor: default;
    display: inline-block;
    text-align: center;
    text-decoration: none;
    white-space: pre;
    -webkit-user-select: none;
       -moz-user-select: none;
        -ms-user-select: none;
}

/* Base */

@mixin button-reset() {

// -webkit-box-sizing: content-box;

// -moz-box-sizing: content-box;

// box-sizing: content-box;

background: none;

border: 0;

color: inherit;

/* cursor: default; */

font: inherit;

line-height: normal;

overflow: visible;

padding: 0;

-webkit-appearance: button; /* for input */

-webkit-user-select: none; /* for button */

-moz-user-select: none;

-ms-user-select: none;

&::-moz-focus-inner,

&::-moz-focus-inner {

border: 0;

padding: 0;

}

/* Make `a` like a button */

@mixin a-button-reset() {

color: inherit;

cursor: default;

display: inline-block;

text-align: center;

text-decoration: none;

white-space: pre;

-webkit-user-select: none;

-moz-user-select: none;

-ms-user-select: none;

}

[CSS] Styler tous les éléments de formulaires de façon sexy et uniquement avec CSS

09/12/2015 / admin

Source : Custom Style All Your Form Elements with Pure CSS and No JavaScript

Article en version PDF (pour la postérité) : Custom Style All Your Form Elements with Pure CSS and No javascript (PDF).
Code source HTML/CSS : pure-css-custom-form-elements (zip)

Styler l’élément HTML Select avec CSS

(Works in IE8+, FF, Webkit)

<div class="styled"> 
<select> 
<option>Explorer</option> 
<option>Firefox</option> 
<option>Webkit</option> 
</select> 
</div>

<option>Explorer</option>

<option>Firefox</option>

<option>Webkit</option>

</select>

</div>

div.styled { 
    overflow:hidden; /* this hides the select's drop button */
    padding:0; 
    margin:0; 
    background: white url(formelements-select.png) no-repeat bottom right; 
    /* this is the new drop button, in image form */
    width:12em; border-radius:2px; 
    box-shadow: 0 1px 3px rgba(0,0,0,0.2); 
    border: solid 1px #ccc; 
}
div.styled select { 
    width:115% /* this percentage effectively extends the drop down button out of view */; 
    background-color:transparent /* this hides the select's background making any styling visible from the div */; 
    background-image:none; 
    -webkit-appearance: none /* this is required for Webkit browsers */; 
    border:none; 
    box-shadow:none; 
    padding:0.3em 0.5em; /* padding should be added to the select, not the div */
}

div.styled {

overflow:hidden; /* this hides the select's drop button */

padding:0;

margin:0;

background: white url(formelements-select.png) no-repeat bottom right;

/* this is the new drop button, in image form */

width:12em; border-radius:2px;

box-shadow: 0 1px 3px rgba(0,0,0,0.2);

border: solid 1px #ccc;

}

div.styled select {

width:115% /* this percentage effectively extends the drop down button out of view */;

background-color:transparent /* this hides the select's background making any styling visible from the div */;

background-image:none;

-webkit-appearance: none /* this is required for Webkit browsers */;

border:none;

box-shadow:none;

padding:0.3em 0.5em; /* padding should be added to the select, not the div */

}

Une variante sans image de fond avec Bootstrap 3 et le composant CSS .caret

.sexy-select{
  position: relative;
  display: block;
  overflow: hidden;
  padding: 0;
  margin: 0;
  background: #fff;
  &:after{
    content: "";
    position: absolute;
    right: 8px;
    top: calc(50% - 2px); // 2px = hauteur du caret/2
    pointer-events: none;
    .caret;
  }
  .form-control{
    width: calc(100% + 30px);
    background-color: transparent;
    background-image: none;
    -webkit-appearance: none;
    border: none;
    box-shadow: none;
    padding-right: 36px;
  }
  &.is-light{
    .museo-variant(700);
    border-bottom: 1px solid #ddd;
    .form-control{
      color: @brand-primary;
    }
  }
}
/* saf3+, chrome1+ */
@media screen and (-webkit-min-device-pixel-ratio:0) {
  .sexy-select{
    padding-right: 24px;
    .form-control{
      padding-right: 26px;
    }
  }
}
/* IE 10+ */
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
  .sexy-select{
    .form-control{
      width: 200%;
    }
  }
}

.sexy-select{

position: relative;

display: block;

overflow: hidden;

padding: 0;

margin: 0;

background: #fff;

&:after{

content: "";

position: absolute;

right: 8px;

top: calc(50% - 2px); // 2px = hauteur du caret/2

pointer-events: none;

.caret;

}

.form-control{

width: calc(100% + 30px);

background-color: transparent;

background-image: none;

-webkit-appearance: none;

border: none;

box-shadow: none;

padding-right: 36px;

}

&.is-light{

.museo-variant(700);

border-bottom: 1px solid #ddd;

.form-control{

color: @brand-primary;

}

/* saf3+, chrome1+ */

@media screen and (-webkit-min-device-pixel-ratio:0) {

.sexy-select{

padding-right: 24px;

.form-control{

padding-right: 26px;

}

/* IE 10+ */

@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {

.sexy-select{

.form-control{

width: 200%;

}

[CSS] Un champ de formulaire fluide et un bouton alignés qui prennent systématiquement 100% de la largeur de leur conteneur

30/03/2015 / admin

Solution moderne avec la propriété CSS `box-sizing` :

input {
  -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
          box-sizing: border-box;
}

input {

-webkit-box-sizing: border-box;

-moz-box-sizing: border-box;

box-sizing: border-box;

}

Solution obsolète :

Source : Input field and submit button on the same line, full width.

<form>
  <button>Ok</button>
  <div class="input-wrapper">
    <input type="text" />
  </div>
</form>

<form>

</div>

</form>

button { 
  float: right;
}
.input-wrapper {
  overflow: hidden;
  padding-right: 15px;
}
input {
  width: 100%;
}

button {

float: right;

}

.input-wrapper {

overflow: hidden;

padding-right: 15px;

}

input {

width: 100%;

}

[jQuery] Click/toggle entre deux fonctions (bouton play/pause, start/stop)

18/12/2014 / admin

Source : jQuery click / toggle between two functions.
Plug-in : [jQuery-Function-Toggle-Plugin
] A jQuery plugin that binds multiple event handlers which are executed on each consecutive event.

Ajout d’un bouton Play/Pause au carousel Bootstrap : Simulation, fil de discussion sur Stack Overflow.

Problème : lancer deux opérations (ou fonctions) distinctes lorsqu’on clique sur un seul et même bouton (bouton play/pause par exemple).

(function($) {
    $.fn.clickToggle = function(func1, func2) {
        var funcs = [func1, func2];
        this.data('toggleclicked', 0);
        this.click(function() {
            var data = $(this).data();
            var tc = data.toggleclicked;
            $.proxy(funcs[tc], this)();
            data.toggleclicked = (tc + 1) % 2;
        });
        return this;
    };
}(jQuery));

(function($) {

$.fn.clickToggle = function(func1, func2) {

var funcs = [func1, func2];

this.data('toggleclicked', 0);

this.click(function() {

var data = $(this).data();

var tc = data.toggleclicked;

$.proxy(funcs[tc], this)();

data.toggleclicked = (tc + 1) % 2;

});

return this;

};

}(jQuery));

$('#test').clickToggle(function() {   
    $(this).animate({
        width: "260px"
    }, 1500);
},
function() {
    $(this).animate({
        width: "30px"
    }, 1500);
});

$('#test').clickToggle(function() {

$(this).animate({

width: "260px"

}, 1500);

function() {

$(this).animate({

width: "30px"

}, 1500);

});

Articles récents

Catégories

Archives

Méta

Étiquette : bouton

[Magento 2] Afficher/masquer le bouton « Effacer tous les filtres » dans la liste des catégories/produits

[Magento 2] Rajouter des préfixes de civilités sous forme de boutons radio dans le formulaire de création de compte

PHTML à modifier

A savoir:

Manipulations à effectuer en BO – Afficher les préfixes (Madame, Monsieur) dans le formulaire de création de compte

[javaScript] Désactiver un bouton d’action si le champ input associé affiche une valeur inférieure ou égale à zéro

Solution 1:

Solution 2:

[jQuery] Détecter quel bouton est cliqué lors de la soumission d’un formulaire

[jQuery] Soumettre un formulaire sans rafraîchir la page avec Ajax

[SASS] Mixin button-reset pour annuler les styles appliqués aux boutons

[CSS] Styler tous les éléments de formulaires de façon sexy et uniquement avec CSS

Styler l’élément HTML Select avec CSS

Une variante sans image de fond avec Bootstrap 3 et le composant CSS .caret

[CSS] Un champ de formulaire fluide et un bouton alignés qui prennent systématiquement 100% de la largeur de leur conteneur

Solution moderne avec la propriété CSS `box-sizing` :

Solution obsolète :

[jQuery] Click/toggle entre deux fonctions (bouton play/pause, start/stop)

PHTML à modifier

A savoir:

Manipulations à effectuer en BO – Afficher les préfixes (Madame, Monsieur) dans le formulaire de création de compte

Solution 1:

Solution 2:

Styler l’élément HTML Select avec CSS

Une variante sans image de fond avec Bootstrap 3 et le composant CSS .caret

Solution moderne avec la propriété CSS box-sizing :

Solution obsolète :

Solution moderne avec la propriété CSS `box-sizing` :