Beispiel für ein auswählbares JQueryUI-Widget

jQueryUI bietet ein auswählbares Widget, mit dem Elemente einzeln oder in Gruppenelementen mithilfe der Maus ausgewählt werden können. Es ist auch möglich, Elemente auszuwählen, indem die Maus über die Elemente bewegt wird, indem ein Feld gezogen wird. Elemente können durch Klicken auf das Element oder durch Ziehen des Elements ausgewählt werden und ermöglichen auch die Auswahl mehrerer Elemente auf der Webseite. Halten Sie die Strg-Taste gedrückt, um mehrere Elemente auszuwählen.

lesen Sie auch:

  • JQuery Keydown, Keypress und Keyup
  • JQUEry-Einstellungs-Dropdown-Wert
  • JQuery prepend() und prependTo()

Die wählbare Methode kann in folgenden Formen verwendet werden:

  • $(Selektor, Kontext). wählbar (Optionen)
  • $(Selektor, Kontext). wählbar („Aktionen“, [params])

Das folgende Beispiel zeigt ein einfaches Beispiel für ein auswählbares Widget:

<!DOCTYPE html>
<head>
<link href="http://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css" rel="stylesheet">
<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<style type="text/css">
	#selectMe {
		list-style-type: none;
		margin: 0;
		padding: 0;
		width: 100px;
	}
	 #selectMe .ui-selected{
	 	background: orange;
	 }
	.myList {
		background: gray;
		border: 1px solid cyan;
              }
</style>
<script>
   $(function(){
      $("#selectMe").selectable();
   });
</script>
</head>
<title>JQueryUI Example</title>
<body>
   <h2>Select the Countries</h2>
   <ul id="selectMe">
      <li  >India</li>
      <li  >Srilanka</li>
      <li  >Australia</li>
      <li  >South Africa</li>
      <li  >China</li>
      <li  >Japan</li>
      <li  >Italy</li>
      <li  >France</li>
      <li  >Canada</li>
      <li  >Brazil</li>
   </ul>
</body>
</html>
  • Das obige einfache Skript definiert die Auswahl von Elementen einzeln oder in Gruppenelementen mithilfe der Maus. Es wählt Elemente durch Ziehen eines Felds aus.
  • Wenn wir auf das Element klicken oder die Elemente ziehen, ändert sich die Farbe in Orange, was die ausgewählten Elemente in der Liste anzeigt.

Führen Sie die JQueryUI Simple Selectable Demo aus

Einfaches auswählbares JQueryUI-Beispiel

Auswählbare Widget-Optionen

Die auswählbare Methode enthält folgende Optionen:

Option Beschreibung Standardwert

AnhängenBeim Auswählen wird das angegebene Element angehängt.Körper
automatische AktualisierungDie Position und Größe auswählbarer Elemente sollte zu Beginn der Auswahl aktualisiert werden oder nicht, wenn sie auf „true“ gesetzt ist.WAHR
stornierenEs wird verwendet, um den Auswahlvorgang für das angegebene Element abzubrechen.Eingabe, Textbereich, Schaltfläche, Auswahl, Option
VerzögerungGibt die Verzögerungszeit in Millisekunden an, wenn der Auswahlvorgang beginnt.0
deaktiviertEs deaktiviert die Auswahl von Elementen, wenn es auf „true“ gesetzt ist, dh es stoppt die Auswahl der Elemente.FALSCH
DistanzEs bestimmt die Verschiebung, bei der die Auswahl von Elementen in Form von Pixeln beginnen soll.0
FilterEs bestimmt, welche Elemente ausgewählt werden können oder Teil der Auswahl sein können.*
ToleranzEs wird verwendet, um zu testen, ob die Auswahlhilfe ein Element auswählen soll.berühren

Das folgende Beispiel veranschaulicht die Verwendung von Verzögerungs- und Distanzoptionen:

<!DOCTYPE html>
<head>
<link href="http://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css" rel="stylesheet">
<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<style type="text/css">
	#selectMe1,#selectMe2{
		list-style-type: none;
		margin: 0;
		padding: 0;
		width: 100px;
	}
	 #selectMe1 .ui-selected, #selectMe2 .ui-selected{
	 	background: orange;
	 }
	 #selectMe1 .ui-selecting, #selectMe2 .ui-selecting{
	 	 background: red;
	 }
	.myList {
		background: gray;
		border: 1px solid cyan;
           }

 </style>
<script>

   $(function(){
      $("#selectMe1").selectable({
         delay: 500
      });
      $("#selectMe2").selectable({
	     distance:100
	  });
   });
</script>

<title>JQueryUI Example</title>
</head>
<body>

   <h2>Starts after Delay of 500ms </h2>
   <ul id="selectMe1">
      <li  >India</li>
      <li  >Srilanka</li>
      <li  >Australia</li>
      <li  >South Africa</li>
   </ul>
   <h2>Moves after the distance of 100px</h2>
   <ul id="selectMe2">
      <li  >China</li>
      <li  >Japan</li>
      <li  >Italy</li>
      <li  >France</li>
      <li  >Canada</li>
      <li  >Brazil</li>
   </ul>
</body>
</html>

  • Wenn wir das obige Skript ausführen, erhalten wir zwei Teile der Ländernamenliste, nämlich einen für die Verzögerungsoption und einen anderen für die Entfernungsoption.
  • Die Verzögerungsoption gibt die Zeit in Millisekunden an, zu der der Auswahlvorgang beginnt. Hier haben wir 500 ms definiert, d. h. wir können die Elemente nach den 500 ms auswählen.
  • Die Option „Abstand“ bestimmt die Verschiebung, bei der die Auswahl von Elementen in Form von Pixeln beginnen soll. Im Skript ist es als 100 Pixel definiert, dh wir können mit der Auswahl der Elemente beginnen, nachdem sich die Maus um eine Distanz von 100 Pixel bewegt hat.
  • Diese beiden Optionen verwenden einen bestimmten ID-Selektor und auch die Verwendung verschiedener CSS-Stile, die das Ergebnis mit angegebenen Werten anzeigen.

Führen Sie die Demo zu den auswählbaren JQueryUI-Optionen aus

Beispiel für auswählbare JQueryUI-Optionen

Das folgende Beispiel zeigt die Verwendung der Abbruchoption:

<!DOCTYPE html>
<head>
<link href="http://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css" rel="stylesheet">
<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<style type="text/css">
	#selectMe{
		list-style-type: none;
		margin: 0;
		padding: 0;
		width: 100px;
	}
	 #selectMe .ui-selected{
	 	background: orange;
	 }
	.myList {
		background: gray;
		border: 1px solid cyan;
        }
       .blocked {
		background: green;
		border: 1px solid cyan;
        }
</style>
<script>
   $(function(){
      $("#selectMe").selectable({
         cancel: ".blocked"
      });
   });
</script>
</head>
<title>JQueryUI Example</title>
<body>
   <h2>Starts after Delay of 500ms </h2>
   <ul id="selectMe">
      <li  >India</li>
      <li  >Srilanka</li>
      <li  >Australia</li>
      <li  >South Africa</li>
      <li  >China</li>
      <li  >Japan</li>
      <li  >Italy</li>
      <li  >France</li>
      <li  >Canada</li>
      <li  >Brazil</li>
   </ul>
</body>
</html>
  • Das Skript verwendet die Option „Abbrechen“, die die Auswahl der Elemente mit passendem Selektor stoppt.
  • Wir haben die Klasse „blockiert“ verwendet, die die blockierten Elemente angibt, bei denen wir das Element nicht auswählen können. Diese Elemente werden mit grüner Hintergrundfarbe angezeigt.

Führen Sie JQueryUI Selectable Options Demo1 aus

Beispiel für auswählbare JQueryUI-Optionen1

Das folgende Beispiel veranschaulicht die Verwendung der Filteroption:

<!DOCTYPE html>
<head>
<link href="http://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css" rel="stylesheet">
<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<style type="text/css">
	#selectMe{
		list-style-type: none;
		margin: 0;
		padding: 0;
		width: 100px;
	}
	 #selectMe .ui-selected{
	 	background: orange;
	 }
	.myList {
		background: gray;
		border: 1px solid cyan;
         }
        .myClass {
		background: green;
		border: 1px solid cyan;
         }
</style>
<script>
   $(function(){
      $("#selectMe").selectable({
         filter: "li:not(.myClass)"
      });
   });
</script>
</head>
<title>JQueryUI Example</title>
<body>
   <h2>Starts after Delay of 500ms </h2>
   <ul id="selectMe">
      <li  >India</li>
      <li  >Srilanka</li>
      <li  >Australia</li>
      <li  >South Africa</li>
      <li  >China</li>
      <li  >Japan</li>
      <li  >Italy</li>
      <li  >France</li>
      <li  >Canada</li>
      <li  >Brazil</li>
   </ul>
</body>
</html>
  • Das Skript verwendet eine Filteroption, die angibt, welche Elemente Teil der Auswahl sein können.
  • Wenn wir das Skript ausführen, können wir alle Elemente auswählen, mit Ausnahme der Elemente, die sich auf die Klasse myClass beziehen.
  • Die übereinstimmenden untergeordneten Elemente werden zu ausgewählten Elementen gemacht und die Elemente, die in der Klasse myClass definiert sind, werden nicht ausgewählt und werden mit grüner Hintergrundfarbe angezeigt.

Führen Sie JQueryUI Selectable Options Demo2 aus

Beispiel für auswählbare JQueryUI-Optionen2

Auswählbare Widget-Methoden

Die folgende Tabelle zeigt einige der Methoden, die mit auswählbaren Widgets verwendet werden:

Methodenbeschreibung

zerstören()Es entfernt die auswählbare Funktionalität.
deaktivieren()Diese Methode deaktiviert den auswählbaren Vorgang.
aktivieren()Diese Methode ermöglicht die auswählbare Operation.
Optionen()Es gibt die Optionseigenschaft zurück. Es legt den auswählbaren Vorgang mit dem angegebenen Optionsnamen fest.
AktualisierungEs aktualisiert die Position und Größe der ausgewählten Elemente.
widget()Es definiert ein auswählbares Element mit einem jQuery-Objekt.

Das folgende Beispiel demonstriert die Verwendung der Disable- und Option-Methoden:

<!DOCTYPE html>
<head>
<link href="http://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css" rel="stylesheet">
<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<style type="text/css">
	#selectMe1, #selectMe2{
		list-style-type: none;
		margin: 0;
		padding: 0;
		width: 100px;
	}
	 #selectMe1 .ui-selected, #selectMe2 .ui-selected{
	 	 background: orange;
	 }
	 #selectMe1 .ui-selecting, #selectMe2 .ui-selecting{
	 	 background: red;
	 }
	.myList {
		background: gray;
		border: 1px solid cyan;
         }
</style>
<script>
   $(function(){
      $("#selectMe1").selectable();
      $("#selectMe1").selectable('disable');
      $("#selectMe2").selectable();
      $("#selectMe2").selectable("option", "distance", 1);
   });
</script>
</head>
<title>JQueryUI Example</title>
<body>
   <h2>Using Disable Method</h2>
      <ul id="selectMe1">
         <li  >India</li>
         <li  >Srilanka</li>
         <li  >Australia</li>
         <li  >South Africa</li>
      </ul>
   <h2>Using Options Method</h2>
      <ul id="selectMe2">
         <li  >China</li>
         <li  >Japan</li>
         <li  >Italy</li>
         <li  >France</li>
         <li  >Canada</li>
         <li  >Brazil</li>
      </ul>
</body>
</html>
  • Das obige Skript verwendet auswählbare Methoden „disable“ und „option“.
  • Die Disable-Methode deaktiviert die auswählbaren Elemente, die keine Argumente akzeptieren.
  • Die Optionsmethode gibt die Optionseigenschaft zurück. Es legt den auswählbaren Vorgang mit dem angegebenen Optionsnamen fest. Im Skript verwenden wir die Option „Abstand“, die die Verschiebung bestimmt, bei der die Auswahl von Elementen in Form von Pixeln beginnen soll.
  • Beide Methoden verwenden einen bestimmten ID-Selektor, um verschiedene CSS-Stile zu definieren, wenn sie auf der Webseite angezeigt werden.

Führen Sie die Demo zu den auswählbaren Methoden von JQueryUI aus

Beispiel für auswählbare JQueryUI-Methoden

Auswählbare Widget-Ereignisse

Die folgende Tabelle zeigt Ereignisse, die mit auswählbaren Widgets verwendet werden:

Eventbeschreibung

create(event, ui)Es wird ausgelöst, wenn ein auswählbares Element erstellt wird.
ausgewählt(Ereignis, Benutzeroberfläche)Es wird ausgelöst, wenn jedes Element ausgewählt wird.
Auswählen (Ereignis, Benutzeroberfläche)Es wird ausgelöst, wenn jedes Element ausgewählt werden soll.
start(event, ui)Es wird ausgelöst, wenn der auswählbare Vorgang beginnt.
stop(event, ui)Es wird ausgelöst, wenn der auswählbare Vorgang endet.
nicht ausgewählt (Ereignis, Benutzeroberfläche)Es wird ausgelöst, wenn jedes Element nicht ausgewählt ist.
Auswahl aufheben (Ereignis, Benutzeroberfläche)Es wird ausgelöst, wenn die Auswahl jedes Elements aufgehoben wird.

Das folgende Beispiel veranschaulicht die Verwendung des ausgewählten Ereignisses:

<!DOCTYPE html>
<head>
<link href="http://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css" rel="stylesheet">
<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<style type="text/css">
	#selectMe{
		list-style-type: none;
		margin: 0;
		padding: 0;
		width: 100px;
	}
	 #selectMe .ui-selected{
	 	background: orange;
	 }
	.myList {
		background: gray;
		border: 1px solid cyan;
         }
</style>
<script>
   $(function(){
      $("#selectMe").selectable({
         selected: function(event, ui){
            var selected=$("li[class$='ui-selected']").length;
            $("#myval").html("you selected " +selected+ " countries");
            }
         });
   });
</script>
</head>
<title>JQueryUI Example</title>
<body>
   <h2>Using Selected Event</h2>
   <ul id="selectMe">
      <li  >India</li>
      <li  >Srilanka</li>
      <li  >Australia</li>
      <li  >South Africa</li>
      <li  >China</li>
      <li  >Japan</li>
      <li  >Italy</li>
      <li  >France</li>
      <li  >Canada</li>
      <li  >Brazil</li>
   </ul><br>
<span id="myval" style="color:green;">selected 0 countries.</span>
</body>
</html>
  • Das Skript verwendet eine auswählbare Option namens selected, die ausgelöst wird, wenn jedes Element in der Liste ausgewählt wird.
  • Wenn wir die Elemente aus der Liste auswählen, erhalten wir eine Aussage wie „2 Länder ausgewählt“ wie diese. Bei der Auswahl der Elemente werden die Zahlen weiter erhöht.

Führen Sie die JQueryUI Selectable Events-Demo aus

Beispiel für auswählbare JQueryUI-Ereignisse

Kommentar verfassen

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert

Nach oben scrollen