jQuery UI API - Selectable Widget

Kategorie

Interaktionen

Nutzung

Beschreibung:Wählt einzelne Elemente oder eine Gruppe von Elementen mit der Maus aus.

添加版本：1.0

D:

Hinweise:Das jQuery UI Selectable-Plugin ermöglicht es, Elemente durch Ziehen mit der Maus auszuwählen (manchmal Lasso genannt). Sie können klicken oder ziehen, während Sie die Strg-/Meta-Taste gedrückt halten, um mehrere (nicht zusammenhängende) Elemente auszuwählen.

Zusätzliche Hinweise:Dieses Widget benötigt funktionales CSS, sonst funktioniert es nicht. Wenn Sie ein eigenes Theme erstellen, verwenden Sie die widgetspezifische CSS-Datei als Ausgangspunkt.

Schnellnavigation

Optionen Methoden Ereignisse

Optionen Type Beschreibung Standard
appendTo Selektor Das Element, zu dem der Auswahl-Helfer (Lasso) hinzugefügt werden soll.

Codebeispiele:

Initialisieren mit den angegebenenappendToOptionen für draggable:

$( ".selector" ).selectable({ appendTo: "#someElem" });
    

Nach der Initialisierung abrufen oder festlegenappendTooption:

// getter
var appendTo = $( ".selector" ).selectable( "option", "appendTo" );
 
// setter
$( ".selector" ).selectable( "option", "appendTo", "#someElem" );
    
 "body"
autoRefresh Boolean Diese Option bestimmt, ob die Position und Größe jedes auswählbaren Elements zu Beginn jedes Auswahlvorgangs aktualisiert (neu berechnet) werden soll. Wenn Sie viele Elemente haben, möchten Sie diese Option möglicherweise auf false setzen und manuell dierefresh()Methode.

Codebeispiele:

Initialisieren mit den angegebenenautoRefreshOptionen für draggable:

$( ".selector" ).selectable({ autoRefresh: false });
    

Nach der Initialisierung abrufen oder festlegenautoRefreshoption:

// getter
var autoRefresh = $( ".selector" ).selectable( "option", "autoRefresh" );
 
// setter
$( ".selector" ).selectable( "option", "autoRefresh", false );
    
 wahr
Abbruch Selektor Verhindert, dass die Auswahl bei Elementen beginnt, die dem Selektor entsprechen.

Codebeispiele:

Initialisieren mit den angegebenencancelOptionen für selectable:

$( ".selector" ).selectable({ cancel: "a,.cancel" });
    

Nach der Initialisierung abrufen oder festlegencanceloption:

// getter
var cancel = $( ".selector" ).selectable( "option", "cancel" );
 
// setter
$( ".selector" ).selectable( "option", "cancel", "a,.cancel" );
    
 "input, textarea, button, select, option"
delay Number Die Zeit in Millisekunden nach dem Drücken der Maustaste, bis die Auswahl beginnt. Diese Option kann unnötige Auswahlen verhindern, wenn auf ein Element geklickt wird.

Codebeispiele:

Initialisieren mit den angegebenendelayOptionen für selectable:

$( ".selector" ).selectable({ delay: 150 });
    

Nach der Initialisierung abrufen oder festlegendelayoption:

// getter
var delay = $( ".selector" ).selectable( "option", "delay" );
 
// setter
$( ".selector" ).selectable( "option", "delay", 150 );
    
 0
disabled Boolean Wenn festgelegt auftrue, ist das selectable deaktiviert.

Codebeispiele:

Initialisieren mit den angegebenendisabledOptionen für selectable:

$( ".selector" ).selectable({ disabled: true });
    

Nach der Initialisierung abrufen oder festlegendisabledoption:

// getter
var disabled = $( ".selector" ).selectable( "option", "disabled" );
 
// setter
$( ".selector" ).selectable( "option", "disabled", true );
    
 false
distance Number Die Entfernung in Pixeln, die die Maus nach dem Drücken der Maustaste zurücklegen muss, bevor die Auswahl beginnt. Wenn diese Option angegeben ist, beginnt die Auswahl erst, wenn die Maus über die angegebene Entfernung hinaus gezogen wird. Diese Option kann unnötige Auswahlen verhindern, wenn auf ein Element geklickt wird.

Codebeispiele:

Initialisieren mit den angegebenendistanceOptionen für selectable:

$( ".selector" ).selectable({ distance: 30 });
    

Nach der Initialisierung abrufen oder festlegendistanceoption:

// getter
var distance = $( ".selector" ).selectable( "option", "distance" );
 
// setter
$( ".selector" ).selectable( "option", "distance", 30 );
    
 0
filter Selektor Die passenden Kindelemente, die auswählbar gemacht werden (ausgewählt werden können).

Codebeispiele:

Initialisieren mit den angegebenenfilterOptionen für selectable:

$( ".selector" ).selectable({ filter: "li" });
    

Nach der Initialisierung abrufen oder festlegenfilteroption:

// getter
var filter = $( ".selector" ).selectable( "option", "filter" );
 
// setter
$( ".selector" ).selectable( "option", "filter", "li" );
    
 "*"
tolerance String Gibt den Modus an, der verwendet wird, um zu testen, ob das Lasso ein Element auswählt. Mögliche Werte:
  • "fit": Das Lasso überlappt das Element vollständig.
  • "touch": Das Lasso überlappt das Element in beliebiger Proportion.

Codebeispiele:

Initialisieren mit den angegebenentoleranceOptionen für selectable:

$( ".selector" ).selectable({ tolerance: "fit" });
    

Nach der Initialisierung abrufen oder festlegentoleranceoption:

// getter
var tolerance = $( ".selector" ).selectable( "option", "tolerance" );
 
// setter
$( ".selector" ).selectable( "option", "tolerance", "fit" );
    
 "touch"

Methoden Gibt zurück Beschreibung
destroy() jQuery (nur Plugin) Entfernt die Selectable-Funktionalität vollständig. Dadurch wird das Element in seinen Zustand vor der Initialisierung zurückversetzt.
  • Diese Methode akzeptiert keine Argumente.

Codebeispiele:

Rufen Sie die destroy-Methode auf:

$( ".selector" ).selectable( "destroy" );
    
disable() jQuery (nur Plugin) Deaktiviert das Selectable.
  • Diese Methode akzeptiert keine Argumente.

Codebeispiele:

Rufen Sie die disable-Methode auf:

$( ".selector" ).selectable( "disable" );
    
enable() jQuery (nur Plugin) Aktiviert das Selectable.
  • Diese Methode akzeptiert keine Argumente.

Codebeispiele:

Rufen Sie die enable-Methode auf:

$( ".selector" ).selectable( "enable" );
    
option( optionName ) Objekt Ruft für die aktuell angegebeneoptionNameder zugehörige Wert.
  • optionName
    Typ: String
    Beschreibung: Der Name der Option, die abgerufen werden soll.

Codebeispiele:

Rufen Sie diese Methode auf:

var isDisabled = $( ".selector" ).selectable( "option", "disabled" );
    
option() PlainObject Ruft ein Objekt ab, das Schlüssel/Wert-Paare enthält, die den aktuellen Hash der Selectable-Optionen darstellen.
  • Diese Methode akzeptiert keine Argumente.

Codebeispiele:

Rufen Sie diese Methode auf:

var options = $( ".selector" ).selectable( "option" );
    
option( optionName, value ) jQuery (nur Plugin) Legt für die angegebene OptionoptionNameden Wert der zugehörigen Selectable-Option fest.
  • optionName
    Typ: String
    Beschreibung: Der Name der Option, die festgelegt werden soll.
  • value
    Typ: Object
    Beschreibung: Der Wert, der für die Option festgelegt werden soll.

Codebeispiele:

Rufen Sie diese Methode auf:

$( ".selector" ).selectable( "option", "disabled", true );
    
option( options ) jQuery (nur Plugin) Legt eine oder mehrere Optionen für das Selectable fest.
  • options
    Typ: Object
    Beschreibung: Die Options-Wert-Paare, die festgelegt werden sollen.

Codebeispiele:

Rufen Sie diese Methode auf:

$( ".selector" ).selectable( "option", { disabled: true } );
    
refresh() jQuery (nur Plugin) Aktualisiert die Position und Größe jedes Selectable-Elements. Wenn dieautoRefreshOption auf false gesetzt ist, kann diese Methode verwendet werden, um die Position und Größe jedes Selectable-Elements manuell neu zu berechnen.
  • Diese Methode akzeptiert keine Argumente.

Codebeispiele:

Rufen Sie die refresh-Methode auf:

$( ".selector" ).selectable( "refresh" );
    
widget() jQuery Gibt einjQueryObjekt, das das Selectable-Element enthält.
  • Diese Methode akzeptiert keine Argumente.

Codebeispiele:

Rufen Sie die widget-Methode auf:

var widget = $( ".selector" ).selectable( "widget" );
    

Ereignisse Type Beschreibung
create( event, ui ) selectablecreate Wird ausgelöst, wenn das Selectable erstellt wird.
  • event
    Typ: Event
  • ui
    Typ: Object

Hinweis:uiDas Objekt ist leer und wird aus Gründen der Konsistenz mit anderen Ereignissen einbezogen.

Codebeispiele:

Initialisiert das Selectable mit dem angegebenen create-Callback:

$( ".selector" ).selectable({
  create: function( event, ui ) {}
});
    

Binden Sie einen Ereignis-Listener an das Ereignis selectablecreate:

$( ".selector" ).on( "selectablecreate", function( event, ui ) {} );
    
selected( event, ui ) selectableselected Wird am Ende des Auswahlvorgangs ausgelöst, wenn jedes Element zur Auswahl hinzugefügt wurde.
  • event
    Typ: Event
  • ui
    Typ: Object
    • selected
      Typ: Element
      Beschreibung: Das auswählbare Element, das ausgewählt wurde.

Codebeispiele:

Initialisieren Sie das Selectable mit dem angegebenen selected-Callback:

$( ".selector" ).selectable({
  selected: function( event, ui ) {}
});
    

Binden Sie einen Ereignis-Listener an das Ereignis selectableselected:

$( ".selector" ).on( "selectableselected", function( event, ui ) {} );
    
selecting( event, ui ) selectableselecting Wird während des Auswahlvorgangs ausgelöst, wenn jedes Element zur Auswahl hinzugefügt wird.
  • event
    Typ: Event
  • ui
    Typ: Object
    • selecting
      Typ: Element
      Beschreibung: Das aktuelle auswählbare Element, das gerade ausgewählt wird.

Codebeispiele:

Initialisieren Sie das selectable mit dem angegebenen selecting-Callback:

$( ".selector" ).selectable({
  selecting: function( event, ui ) {}
});
    

Binden Sie einen Event-Listener an das selectableselecting-Ereignis:

$( ".selector" ).on( "selectableselecting", function( event, ui ) {} );
    
start( event, ui ) selectablestart Wird zu Beginn der Auswahloperation ausgelöst.
  • event
    Typ: Event
  • ui
    Typ: Object

Hinweis:uiDas Objekt ist leer und wird aus Gründen der Konsistenz mit anderen Ereignissen einbezogen.

Codebeispiele:

Initialisieren Sie das selectable mit dem angegebenen start-Callback:

$( ".selector" ).selectable({
  start: function( event, ui ) {}
});
    

Binden Sie einen Event-Listener an das selectablestart-Ereignis:

$( ".selector" ).on( "selectablestart", function( event, ui ) {} );
    
stop( event, ui ) selectablestop Wird am Ende der Auswahloperation ausgelöst.
  • event
    Typ: Event
  • ui
    Typ: Object

Hinweis:uiDas Objekt ist leer; es wird hier aus Gründen der Konsistenz mit anderen Ereignissen aufgeführt.

Codebeispiele:

Initialisieren Sie das selectable mit dem angegebenen stop-Callback:

$( ".selector" ).selectable({
  stop: function( event, ui ) {}
});
    

Binden Sie einen Event-Listener an das selectablestop-Ereignis:

$( ".selector" ).on( "selectablestop", function( event, ui ) {} );
    
unselected( event, ui ) selectableunselected Wird am Ende des Auswahlvorgangs ausgelöst, wenn jedes Element aus der Auswahl entfernt wird.
  • event
    Typ: Event
  • ui
    Typ: Object
    • unselected
      Typ: Element
      Beschreibung: Das auswählbare Element, das nicht mehr ausgewählt ist.

Codebeispiele:

Initialisieren Sie das Selectable mit dem angegebenen unselected-Callback:

$( ".selector" ).selectable({
  unselected: function( event, ui ) {}
});
    

Binden Sie einen Event-Listener an das selectableunselected-Ereignis:

$( ".selector" ).on( "selectableunselected", function( event, ui ) {} );
    
unselecting( event, ui ) selectableunselecting Wird während des Auswahlvorgangs ausgelöst, wenn jedes Element aus der Auswahl entfernt wird.
  • event
    Typ: Event
  • ui
    Typ: Object
    • unselecting
      Typ: Element
      Beschreibung: Das aktuelle auswählbare Element, das gerade abgewählt wird.

Codebeispiele:

Initialisieren Sie das Selectable mit dem angegebenen unselecting-Callback:

$( ".selector" ).selectable({
  unselecting: function( event, ui ) {}
});
    

Binden Sie einen Event-Listener an das selectableunselecting-Ereignis:

$( ".selector" ).on( "selectableunselecting", function( event, ui ) {} );
    

Beispiele

Ein einfaches jQuery-UI-Selectable-Widget.

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>可选择小部件（Selectable Widget）演示</title>
  <link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
  <style>
  #selectable .ui-selecting {
    background: #ccc;
  }
  #selectable .ui-selected {
    background: #999;
  }
  </style>
  <script src="//code.jquery.com/jquery-1.10.2.js"></script>
  <script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
</head>
<body>
 
<ul id="selectable">
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
  <li>Item 4</li>
  <li>Item 5</li>
</ul>
 
<script>
$( "#selectable" ).selectable();
</script>
 
</body>
</html>

Andere Erweiterungen