jQuery realisiert die Shuttle-Box-Funktion

In diesem Artikelbeispiel wird der spezifische Code von jQuery zur Realisierung der Shuttle-Box-Funktion zu Ihrer Information geteilt. Der spezifische Inhalt ist wie folgt

Zuerst das Effektbild

Sie müssen nur auf eine jq-Datei verweisen

<!DOCTYPE html>
<html>
 <Kopf>
  <meta charset="UTF-8">
  <title>Shuttle-Box</title>
  <link rel="stylesheet" href="index.css" >
  <script src="http://libs.baidu.com/jquery/1.8.3/jquery.min.js"></script>
  <Stil>
   .schweben{
    schweben: links;
   }

   .float auswählen{
    Breite: 300px;
    Rand: 1px durchgezogen #ebeef5;
    Höhe: 200px;
   }
   .top_title{
    Breite: 298px;
    Höhe: 30px;
    Rand: 1px durchgezogen #ebeef5;

    Rahmen oben links – Radius: 4px;
    Rahmen oben rechts – Radius: 4px;
    Zeilenhöhe: 30px;
    Hintergrund: #fbfbfb;
    Anzeige: Flex;
    Inhalt ausrichten: Abstand dazwischen;
   }
   .letzte_Nummer{
    Rand rechts: 10px;
   }

   .suchen{
    Breite: 300px;

    Anzeige: Flex;
    /*Rand: 1px durchgehend rot;*/
   }
   .Sucheingabe{
    schweben: links;
    Flexibilität: 4;
    Höhe: 30px;
    Gliederung: keine;
    Rand: 1px durchgezogen #ebeef5;
    Box-Größe: Rahmenbox;
    Polsterung links: 10px;
   }
   .Suchschaltfläche{
    schweben: rechts;
    biegen: 1;
    Höhe: 30px;
    Hintergrundfarbe: #f1f1f1;
    Farbe: #000000;
    Rahmenstil: keiner;
    Gliederung: keine;
    Cursor: Zeiger;/*Mauspfeilgeste festlegen*/
   }
   .Suchschaltfläche i{
    Schriftstil: normal;
   }
   .Suchen-Schaltfläche:hover{
    Schriftgröße: 16px;
   }
   .nach_links,.nach_rechts{
    Breite: 20px;/*Schaltflächenbreite festlegen*/
    height:20px;/*Schaltflächenhöhe festlegen*/
    Farbe:weiß;/*Schriftfarbe*/
    background-color:#667082;/*Hintergrundfarbe der Schaltfläche*/
    border-radius: 100%;/*Den Button glatter machen*/
    border-width: 0;/*hässlichen Rand des Buttons entfernen*/
    Rand: 0;
    Gliederung: keine;/*Gliederung abbrechen*/

    text-align: center;/*Schrift zentriert*/
    Cursor: Zeiger;/*Mauspfeilgeste festlegen*/
   }
   button:hover{/*Farbe ändert sich, wenn die Maus bewegt wird*/
    Hintergrundfarbe: #aa9a8a;
   }
   .Klick_Schaltfläche{

 Rahmenradius: 5px;
 Hintergrund: #ded8;
 Polsterung: 5px 0;
 Rand: 115px 5px 0px 5px;
   }

  </Stil>
 </Kopf>

 <Text>
  <div>
  <div Klasse="float">
   <div Klasse="Top_Titel">
    <div class="float_title"><label><input type="checkbox" class="left_checkbox">Alles auswählen</label></div>
    <div class="float_title">Titel</div>
    <div Klasse="float_title letzte_Nummer" ><span Klasse="alte_Auswahllänge">0</span>/<span Klasse="alte_Gesamtlänge">0</span></div>
   </div>
   <div Klasse="Suche">
    <input class="old_search" type="text" placeholder="Bitte geben Sie ein..." name="" id="" value="" />

   </div>

   <mehrere Klassen auswählen="alte_Auswahl">
    <option value="1">11111</option>
    <option value="2">22222</option>
    <option value="3">33333</option>
    <option value="4">123</option>
    <option value="5">23312</option>
    <option value="6">23233</option>
    <option value="7">21233</option>
    <option value="8">12233</option>
    <option value="9">23133</option>

   </Auswählen>
  </div>

  <div Klasse="float">
   <div Klasse="Klick_Schaltfläche">
    <div><button class="nach_links">></button></div>
    <div><button class="nach_rechts"></button></div>
  </div>

  </div>
  <div Klasse="float">
   <div Klasse="Top_Titel">
    <div class="float_title"><label><input type="checkbox" class="right_checkbox">Alles auswählen</label></div>
    <div class="float_title">Titel</div>
    <div Klasse = "float_title letzte_Nummer" ><span Klasse = "new_select_length">0</span>/<span Klasse = "new_total_length">0</span></div>
   </div>
   <div Klasse="Suche">
    <input class="new_search" type="text" placeholder="Bitte geben Sie ein..." name="" id="" value="" />

   </div>

   <mehrere Klasse auswählen="neue_Auswahl">
   <option value="1">11111</option>
   <option value="2">22222</option>
   <option value="3">33333</option>
   <option value="4">123</option>
   <option value="5">233</option>

   </Auswählen>
  </div>
  </div>
<Skript>
 //Die Zahl in der oberen rechten Ecke zeigt "" an.
 Funktion Längenrückgabe(){
  var alte_Gesamtlänge = $(".old_select").find('option').length;
  var old_select_length = $(".old_select").find('option:selected').length;
  var neue_Gesamtlänge = $(".new_select").find('option').Länge;
  var neue_Auswahllänge = $(".neue_Auswahl").find('Option:ausgewählt').Länge
  $(".alte_Gesamtlänge").text(alte_Gesamtlänge)
  $(".alte_Auswahllänge").text(alte_Auswahllänge)
  $(".neue_Gesamtlänge").text(neue_Gesamtlänge)
  $(".neue_Auswahllänge").text(neue_Auswahllänge)
  };

 $(".to_left").klick(function(){
  var alte_Auswahl = $(".alte_Auswahl");
  var neue_Auswahl = $(".neue_Auswahl");
  old_select.find('Option:ausgewählt').jeder(Funktion () {
   neue_Auswahl.anhängen(dies)
  })
  Längenrückgabe()
 })

 $(".to_right").klick(function(){
  var alte_Auswahl = $(".alte_Auswahl");
  var neue_Auswahl = $(".neue_Auswahl");
  new_select.find('Option:ausgewählt').jeder(Funktion () {
   alt_select.anhängen(dies)
  })
  Längenrückgabe()
 })

 $(".left_checkbox").klick(function(){
  wenn($(this).is(":checked")){
   $(".old_select").find('Option').jeweils(Funktion () {
    $(this).attr("ausgewählt","ausgewählt")
   })
  }
  anders{
   $(".old_select").find('Option').jeweils(Funktion () {
    $(this).removeAttr("ausgewählt")
    })
  }
  Längenrückgabe()
 })

 $(".right_checkbox").klick(function(){
  wenn($(this).is(":checked")){
   $(".new_select").find('Option').jeweils(Funktion () {
    $(this).attr("ausgewählt","ausgewählt")
   })
  }
  anders{
   $(".new_select").find('Option').jeweils(Funktion () {
    $(this).removeAttr("ausgewählt")
    })
  }
  Länge_Rückgabe()
 })
 $("Auswählen").on("Klicken","Option",Funktion(e){
  wenn($(".left_checkbox").ist(":checked"))
   {
    $('.left_checkbox').prop('aktiviert', false);
   }
  Längenrückgabe();

 })

 $("Auswählen").on("Klicken","Option",Funktion(e){
  wenn($(".right_checkbox").ist(":aktiviert"))
   {
    $('.right_checkbox').prop('aktiviert', false);
   }
  Längenrückgabe();

 })

 $(".old_search").on("Eingabeeigenschaft ändern",Funktion(Ereignis){
  //Abfragevorgang ausführen var old_select = $(".old_select");
  var kw = $(diese).val()
  wenn (!kw){
   old_select.find("Option").show()
  }
  old_select.find("Option").jeweils(Funktion(){
   wenn($(this).text().indexOf(kw) < 0)
   {
    $(diese).ausblenden()
   }
  })

 })
  $(".new_search").on("Eingabeeigenschaftsänderung", Funktion(Ereignis){
   var neue_Auswahl=$(".neue_Auswahl");
   var kw = $(diese).val()
   wenn(!kw){
    new_select.find("Option").show();

   }
   new_select.find("Option").jeweils(Funktion(){
    wenn($(this).text().indexOf(kw)<0){
     $(diese).ausblenden()
    }
   })
  })
 Länge_Rückgabe()
</Skript>
 </body>
</html>

Das Obige ist der vollständige Inhalt dieses Artikels. Ich hoffe, er wird für jedermanns Studium hilfreich sein. Ich hoffe auch, dass jeder 123WORDPRESS.COM unterstützen wird.

Das könnte Sie auch interessieren: