jQuery implementiert benutzerdefinierte Kontrollkästchen und Radiostile

jQuery implementiert benutzerdefinierte Kontrollkästchen und Radiostile_jquery

WBOY

Freigeben： 2016-05-16 15:50:37

Original

1408 Leute haben es durchsucht

1, Ursache

Vor kurzem musste ich bei der Arbeit einen benutzerdefinierten Radiostil implementieren, und wir verwenden normalerweise den Standardstil. Da mir wirklich keine Lösung einfällt, habe ich mit der Suche begonnen und schließlich eine gute Lösung gefunden, die perfekt funktioniert Lösen Sie unsere aufgetretenen Probleme.

2, Prinzip

Jeder weiß, dass beim Schreiben einer Struktur das Optionsfeld oder das Kontrollkästchen zusammen mit der Beschriftung verwendet wird. Wenn der for-Attributwert der Beschriftung mit dem ID-Wert der Eingabe übereinstimmt, klicken Sie auf die Beschriftung, um die Eingabe auszuwählen , die Beschriftung wird zum Überschreiben verwendet. Unser Eingabe-Standardstil besteht darin, der Beschriftung ein Hintergrundbild (verschönertes Kontrollkästchen oder Radio) hinzuzufügen. Das heißt, während des Klickvorgangs können wir die Standardeingabe nicht sehen (Z-Index festlegen:- 1 für die Eingabe) und klicken Sie auf die Beschriftung und laden Sie verschiedene Hintergrundbilder durch verschiedene Ereignisse (hier ist die Position zum Ändern des Hintergrundbilds)

3. Legen Sie den Standardstil fest, um das Kontrollkästchen oder Radio zu verschönern

(1) Seitenstruktur

<form class="form" method="post">
  <fieldset>
    <legend>Which genres do you like&#63;</legend>
    <input type="checkbox" value="action" id="check-1" name="genre"><label for="check-1" class="">Action / Adventure</label>
    <input type="checkbox" value="comedy" id="check-2" name="genre"><label for="check-2" class="">Comedy</label>
    <input type="checkbox" value="epic" id="check-3" name="genre"><label for="check-3" class="">Epic / Historical</label>
    <input type="checkbox" value="science" id="check-4" name="genre"><label for="check-4" class="">Science Fiction</label>
    <input type="checkbox" value="romance" id="check-5" name="genre"><label for="check-5" class="">Romance</label>
    <input type="checkbox" value="western" id="check-6" name="genre"><label for="check-6" class="">Western</label>
  </fieldset> 
  <fieldset>
    <legend>Caddyshack is the greatest movie of all time, right&#63;</legend>
    <input type="radio" value="1" id="radio-1" name="opinions"><label for="radio-1" class="">Totally</label>
    <input type="radio" value="1" id="radio-2" name="opinions"><label for="radio-2" class="">You must be kidding</label>
    <input type="radio" value="1" id="radio-3" name="opinions"><label for="radio-3" class="">What's Caddyshack&#63;</label>
  </fieldset>
</form>

Nach dem Login kopieren

(2) JQuery-Code (die JQuery-Bibliothek muss eingeführt werden)

jQuery.fn.customInput = function(){
  $(this).each(function(i){
    if($(this).is('[type=checkbox],[type=radio]')){
      var input = $(this);
      //get the associated label using the input's id
      var label = $('label[for='+input.attr('id')+']');
      //get type,for classname suffix
      var inputType = (input.is('[type=checkbox]')) &#63; 'checkbox' : 'radio';
      //wrap the input + label in a div
      $('<div class="custom-'+ inputType +'"></div>').insertBefore(input).append(input,label);
      //find all inputs in this set using the shared name attribute
      var allInputs = $('input[name='+input.attr('name')+']');
      //necessary for browsers that don't support the :hover pseudo class on labels
      label.hover(function(){
        $(this).addClass('hover');
        if(inputType == 'checkbox' && input.is(':checked')) {
          $(this).addClass('checkedHover');
        }
      },function(){
        $(this).removeClass('hover checkedHover');
      });
       
      //bind custom event, trigger it, bind click,focus,blur events
      input.bind('updateState',function(){
        if(input.is(':checked')){
          if(input.is(':radio')){
            allInputs.each(function(){
              $('label[for='+$(this).attr('id')+']').removeClass('checked');
            });
          };
          label.addClass('checked');
        } else {
          label.removeClass('checked checkedHover checkedFocus');
        }
      })
      .trigger('updateState')
      .click(function(){
        $(this).trigger('updateState');
      })
      .focus(function(){
        label.addClass('focus');
        if(inputType == 'checkbox' && input.is(':checked')) {
          $(this).addClass('checkedFocus');
        }
      })
      .blur(function(){
        label.removeClass('focus checkedFocus');
      });        
    }
  });
}

Nach dem Login kopieren

Nach der Einführung der JQuery-Bibliothek und des obigen Codes können Sie den folgenden Code ausführen

$('input').customInput();

Nach dem Login kopieren

(3) Das generierte äußere Div

Wenn Ihre Codestruktur so ist, dass Beschriftung und Eingabe paarweise geschrieben werden, wird außerhalb von ihnen ein Div generiert, wie in der Abbildung gezeigt

(4) Benutzerdefinierten Standardstil festlegen

Bereiten Sie ein Bild wie folgt vor:

Sie fragen sich vielleicht, warum die Oberseite nicht oben, sondern in einem bestimmten Abstand liegt, da die meisten unserer Eingabeoptionen zentriert sind und wir das Hintergrundbild des Etiketts verwenden, um es zu simulieren, also versuchen wir, das zu machen Eingabemöglichkeiten Darstellung zentriert. Kurz gesagt: ICO-Kleinsymbole müssen vertikal angeordnet werden und ein gewisser Abstand muss eingehalten werden, um eine zentrierte Anzeige zu erreichen.

/* wrapper divs */
      .custom-checkbox,
      .custom-radio {
        position: relative;
        display: inline-block;
      }
      /* input, label positioning */
      .custom-checkbox input,
      .custom-radio input {
        position: absolute;
        left: 2px;
        top: 3px;
        margin: 0;
        z-index: -1;
      }
      .custom-checkbox label,
      .custom-radio label {
        display: block;
        position: relative;
        z-index: 1;
        font-size: 1.3em;
        padding-right: 1em;
        line-height: 1;
        padding: .5em 0 .5em 30px;
        margin: 0 0 .3em;
        cursor: pointer;
      }

Nach dem Login kopieren

Dies sind die äußersten Einstellungen, die Sie natürlich selbst ändern können

/* ==默认状态效果== */
      .custom-checkbox label { 
        background: url(images/checkbox.gif) no-repeat; 
      }
      .custom-radio label { 
        background: url(images/button-radio.png) no-repeat; 
      }
      .custom-checkbox label, 
      .custom-radio label {
        background-position: 0px 0px;
      }

Nach dem Login kopieren

/*==鼠标悬停和得到焦点状态==*/
      .custom-checkbox label.hover,
      .custom-checkbox label.focus,
      .custom-radio label.hover,
      .custom-radio label.focus {
        /*background-position: -10px -114px;*/
      }
      
      /*==选中状态==*/
      .custom-checkbox label.checked,
      .custom-radio label.checked {
        background-position: 0px -47px;
      }
      .custom-checkbox label.checkedHover,
      .custom-checkbox label.checkedFocus {
        /*background-position: -10px -314px;*/
      }
      .custom-checkbox label.focus,
      .custom-radio label.focus {
        outline: 1px dotted #ccc;
      }

Nach dem Login kopieren

Ende: Kurz gesagt, ich habe mein Problem perfekt gelöst und ich werde Ihnen einen Screenshot senden, um es zu sehen