jQuery UI API - Widget-Factory

Codebeispiele:

Initialisieren Sie ein Widget mit der angegebenendisabled`disabled`-Option:

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

Abrufen oder Festlegen derdisabled`disabled`-Option nach der Initialisierung:

// getter
var disabled = $( ".selector" ).widget( "option", "disabled" );
 
// setter
$( ".selector" ).widget( "option", "disabled", true );
    

Mehrere Typen werden unterstützt:

• Boolean: Wenn gesetzt auffalse`false`, es wird keine Animation verwendet und das Element wird sofort ausgeblendet. Wenn auftrue`true`, wird das Element mit der Standarddauer und dem Standard-Easing ausgeblendet.
• Number: Das Element wird mit der angegebenen Dauer und dem Standard-Easing ausgeblendet.
• String: Das Element wird unter Verwendung des angegebenen Effekts ausgeblendet. Der Wert kann der Name einer integrierten jQuery-Animationsmethode sein, wie z. B."slideUp"`slideUp`, oder einen jQuery-UI-Effektnamen, wie z. B."fold"In beiden oben genannten Fällen verwendet der Effekt die Standarddauer und das Standard-Easing.
• Object: Wenn der Wert ein Objekt ist, danneffect、delay、durationundeasingEigenschaft angegeben ist. WenneffectEigenschaft enthält den Namen einer jQuery-Methode, wird diese Methode verwendet; andernfalls wird sie als Name eines jQuery-UI-Effekts betrachtet. Wenn Sie einen jQuery-UI-Effekt verwenden, der zusätzliche Einstellungen unterstützt, können Sie diese Einstellungen in das Objekt aufnehmen, und sie werden an den Effekt übergeben. Wenndurationodereasingausgelassen wird, wird der Standardwert verwendet. Wenneffectausgelassen wird, dann"fadeOut". Wenndelayausgelassen wird, wird keine Verzögerung verwendet.

Codebeispiele:

Initialisieren Sie das Widget mit dem angegebenenhideoption:

$( ".selector" ).widget({ hide: { effect: "explode", duration: 1000 } });
    

Nach der Initialisierung abrufen oder festlegenhideoption:

// getter
var hide = $( ".selector" ).widget( "option", "hide" );
 
// setter
$( ".selector" ).widget( "option", "hide", { effect: "explode", duration: 1000 } );
    

Unterstützt mehrere Typen:

• Boolean: Wenn gesetzt auffalse, wird keine Animation verwendet und das Element wird sofort angezeigt. Wenn auftrue, wird das Element mit der Standarddauer und dem Standard-Easing eingeblendet.
• Zahl: Das Element wird mit der angegebenen Dauer und dem Standard-Easing eingeblendet.
• String: Das Element wird mit dem angegebenen Effekt angezeigt. Der Wert kann der Name einer integrierten jQuery-Animationsmethode sein, wie z. B."slideDown", oder es kann ein jQuery-UI-Effektname sein, wie z. B."fold". In beiden oben genannten Fällen verwendet der Effekt die Standarddauer und das Standard-Easing.
• Object: Wenn der Wert ein Objekt ist, danneffect、delay、durationundeasingEigenschaft angegeben ist. WenneffectEigenschaft enthält den Namen einer jQuery-Methode, wird diese Methode verwendet; andernfalls wird sie als Name eines jQuery-UI-Effekts betrachtet. Wenn Sie einen jQuery-UI-Effekt verwenden, der zusätzliche Einstellungen unterstützt, können Sie diese Einstellungen in das Objekt aufnehmen, und sie werden an den Effekt übergeben. Wenndurationodereasingausgelassen wird, wird der Standardwert verwendet. Wenneffectausgelassen wird, dann"fadeIn". Wenndelayausgelassen wird, wird keine Verzögerung verwendet.

Codebeispiele:

Initialisieren Sie das Widget mit dem angegebenenshowoption:

$( ".selector" ).widget({ show: { effect: "blind", duration: 800 } });
    

Nach der Initialisierung abrufen oder festlegenshowoption:

// getter
var show = $( ".selector" ).widget( "option", "show" );
 
// setter
$( ".selector" ).widget( "option", "show", { effect: "blind", duration: 800 } );
    

• Diese Methode akzeptiert keine Argumente.

Codebeispiele:

Setzt die Hintergrundfarbe des Widget-Elements basierend auf einer Option.

_create: function() {
  this.element.css( "background-color", this.options.color );
}
    

• fn
  Typ: Function() oder String
  Beschreibung: Die aufzurufende Funktion. Sie kann auch der Name einer Methode des Widgets sein.
• delay
  Typ: Number
  Beschreibung: Die Anzahl der Millisekunden, die gewartet wird, bevor die Funktion aufgerufen wird. Standardwert ist0。

Codebeispiele:

Nach 100 Millisekunden, auf dem Widget, rufe die_foo()Methode.

this._delay( this._foo, 100 );
    

• Diese Methode akzeptiert keine Argumente.

Codebeispiele:

Entfernt eine Klasse aus dem Element des Widgets, wenn das Widget zerstört wird.

_destroy: function() {
  this.element.removeClass( "my-widget" );
}
    

• element
  Typ: jQuery
  Beschreibung: Das Element, auf das das Fokussierverhalten angewendet werden soll.

Codebeispiele:

Wendet Fokussierungsstil auf eine Gruppe von Elementen innerhalb des Widgets an:

this._focusable( this.element.find( ".my-items" ) );
    

• Diese Methode akzeptiert keine Argumente.

Codebeispiele:

in RichtungcreateDer Event-Handler übergibt die Optionen des Widgets als Argument.

_getCreateEventData: function() {
  return this.options;
}
    

• Diese Methode akzeptiert keine Argumente.

Codebeispiele:

Macht das id-Attribut des Widget-Elements als Option verfügbar.

_getCreateOptions: function() {
  return { id: this.element.attr( "id" ) };
}
    

• element
  Typ: jQuery
  Beschreibung: Das auszublendende Element.
• option
  Typ: Object
  Beschreibung: Einstellungen, die definieren, wie das Element ausgeblendet wird.
• callback
  Typ: Function()
  Beschreibung: Ein Callback, der aufgerufen wird, nachdem das Element vollständig ausgeblendet wurde.

Codebeispiele:

ÜbergibthideOptionen für die benutzerdefinierte Animation.

this._hide( this.element, this.options.hide, function() {
 
  // Remove the element from the DOM when it's fully hidden.
  $( this ).remove();
});
    

• element
  Typ: jQuery
  Beschreibung: Das Element, auf das das Hoverable-Verhalten angewendet werden soll.

Codebeispiele:

Beim Hovern über das Element, auf alle Elemente innerhalb des Elements,divHoverable-Styling anwenden.

this._hoverable( this.element.find( "div" ) );
    

Hinweis: Wenn logische Aktionen ausgeführt werden sollen, wenn das Widget erfolgreich ohne Argumente aufgerufen wird, kann die Initialisierung nur zu diesem Zeitpunkt behandelt werden.

• Diese Methode akzeptiert keine Argumente.

Codebeispiele:

Wenn dieautoOpenOption gesetzt ist, dann rufen Sie dieopen()Methode.

_init: function() {
  if ( this.options.autoOpen ) {
    this.open();
  }
}
    

• element
  Typ: jQuery
  Beschreibung: Das Element, von dem Event-Handler entbunden werden sollen. Im Gegensatz zu dem_on()Methode,_off()Ein Element ist in der Methode erforderlich.
• eventName
  Typ: String
  Beschreibung: Ein oder mehrere durch Leerzeichen getrennte Ereignistypen.

Codebeispiele:

Hebt die Bindung aller Click-Events vom Element des Widgets auf.

this._off( this.element, "click" );
    

• Behält den entsprechendenthisKontext innerhalb von Handlern.
• Behandelt deaktivierte Widgets automatisch: Wenn das Widget deaktiviert ist oder das Ereignis auf einem Element mit derui-state-disabledKlasse auftritt, wird der Event-Handler nicht aufgerufen. Kann durch densuppressDisabledCheckParameter überschrieben werden.
• Event-Handler erhalten automatisch Namensräume und werden beim Zerstören automatisch bereinigt.
• suppressDisabledCheck(Standard:false）
  Typ: Boolean
  Beschreibung: Ob die Deaktivierungsprüfung umgangen werden soll.
• element
  Typ: jQuery
  Beschreibung: Das Element, an das die Event-Handler gebunden werden. Wenn kein Element angegeben wird,this.elementes wird für nicht delegierte Ereignisse verwendet,das Widget-Elementwird für delegierte Ereignisse verwendet.
• Handler
  Typ: Object
  Beschreibung: Eine Map, in der String-Schlüssel Ereignistypen darstellen, optionale Selektoren für die Delegierung verwendet werden und Werte die für die Ereignisse aufgerufenen Handler-Funktionen darstellen.

Codebeispiele:

Verhindert das Standardverhalten aller angeklickten Links innerhalb des Widget-Elements.

this._on( this.element, {
  "click a": function( event ) {
    event.preventDefault();
  }
});
    

• key
  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:

Wenn sich dieheightoderwidthOption des Widgets ändert, aktualisieren Sie das Element des Widgets.

_setOption: function( key, value ) {
  if ( key === "width" ) {
    this.element.width( value );
  }
  if ( key === "height" ) {
    this.element.height( value );
  }
  this._super( key, value );
}
    

• options
  Typ: Object
  Beschreibung: Der Wert, der für die Option festgelegt werden soll.

Codebeispiele:

Wenn sich dieheightoderwidthOption des Widgets ändert, rufen Sie dieresizeMethode.

_setOptions: function( options ) {
  var that = this,
    resize = false;
 
  $.each( options, function( key, value ) {
    that._setOption( key, value );
    if ( key === "height" || key === "width" ) {
      resize = true;
    }
  });
 
  if ( resize ) {
    this.resize();
  }
}
    

• element
  Typ: jQuery
  Beschreibung: Das Element, das angezeigt werden soll.
• option
  Typ: Object
  Beschreibung: Einstellungen, die definieren, wie das Element angezeigt wird.
• callback
  Typ: Function()
  Beschreibung: Ein Callback, der aufgerufen wird, nachdem das Element vollständig angezeigt wurde.

Codebeispiel:

Benutzerdefinierte Animation übergebenshowOption.

this._show( this.element, this.options.show, function() {
 
  // Focus the element when it's fully visible.
  this.focus();
}
    

• arg
  Typ: Object
  Beschreibung: Null oder mehr Argumente, die an die Methode des übergeordneten Widgets übergeben werden.

Codebeispiel:

HandletitleOptionsaktualisierungen und Aufruf der Methode des übergeordneten Widgets_setOption()um den internen Speicher der Optionen zu aktualisieren.

_setOption: function( key, value ) {
  if ( key === "title" ) {
    this.element.find( "h3" ).text( value );
  }
  this._super( key, value );
}
    

• Argumente
  Typ: Array
  Beschreibung: Ein Array von Argumenten, die an die Methode des übergeordneten Widgets übergeben werden.

Codebeispiel:

HandletitleOptionsaktualisierungen und Aufruf der Methode des übergeordneten Widgets_setOption()um den internen Speicher der Optionen zu aktualisieren.

_setOption: function( key, value ) {
  if ( key === "title" ) {
    this.element.find( "h3" ).text( value );
  }
  this._superApply( arguments );
}
    

Der Ereignisname ist eine Zeichenkette in Kleinbuchstaben aus dem Widget-Namen und dem Typ.

Hinweis: Wenn Daten angegeben werden, müssen alle drei Parameter angegeben werden. Wenn kein Ereignis übergeben wird, übergeben Sienull。

Wenn das Standardverhalten verhindert wird, gibt es zurückfalse, andernfalls gibt sie zurücktrue. Wenn der Handler zurückgibtfalseoder aufruftevent.preventDefault(), wird das Standardverhalten verhindert.

• type
  Typ: String
  Beschreibung:typeDer Name sollte mit der Callback-Option übereinstimmen. Der vollständige Ereignistyp wird automatisch generiert.
• event
  Typ: Event
  Beschreibung: Das ursprüngliche Ereignis, das dieses Ereignis ausgelöst hat, nützlich, um den Listenern Kontext zu bieten.
• data
  Typ: Object
  Beschreibung: Ein mit dem Ereignis verknüpfter Daten-Hash.

Codebeispiel:

Wenn eine Taste gedrückt wird, löse das aussearchEreignis.

this._on( this.element, {
  keydown: function( event ) {
 
    // Pass the original event so that the custom search event has
    // useful information, such as keyCode
    this._trigger( "search", event, {
 
      // Pass additional information unique to this event
      value: this.element.val()
    });
  }
});
    

• Diese Methode akzeptiert keine Argumente.

Codebeispiel:

Zerstören Sie das Widget, wenn ein beliebiger Anker des Widgets angeklickt wird.

this._on( this.element, {
  "click a": function( event ) {
    event.preventDefault();
    this.destroy();
  }
});
    

• Diese Methode akzeptiert keine Argumente.

Codebeispiel:

Deaktivieren Sie das Widget, wenn ein beliebiger Anker des Widgets angeklickt wird.

this._on( this.element, {
  "click a": function( event ) {
    event.preventDefault();
    this.disable();
  }
});
    

• Diese Methode akzeptiert keine Argumente.

Codebeispiel:

Aktivieren Sie das Widget, wenn ein beliebiger Anker des Widgets angeklickt wird.

this._on( this.element, {
  "click a": function( event ) {
    event.preventDefault();
    this.enable();
  }
});
    

• optionName
  Typ: String
  Beschreibung: Der Name der Option, die abgerufen werden soll.

Codebeispiel:

Ruft denwidthWert der Option ab.

this.option( "width" );
    

• Diese Methode akzeptiert keine Argumente.

Codebeispiel:

Protokollieren Sie die Schlüssel/Wert-Paare jeder Widget-Option zum Debuggen.

var options = this.option();
for ( var key in options ) {
  console.log( key, options[ key ] );
}
    

• 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.

Codebeispiel:

Setzt diewidthOption auf500。

this.option( "width", 500 );
    

• options
  Typ: Object
  Beschreibung: Die Options-Wert-Paare, die festgelegt werden sollen.

Codebeispiel:

Setzt dieheightundwidthOption auf500。

this.option({
  width: 500,
  height: 500
});
    

• Diese Methode akzeptiert keine Argumente.

Codebeispiel:

Wenn das Widget erstellt wird, platzieren Sie einen roten Rahmen um das ursprüngliche Element des Widgets.

_create: function() {
  this.widget().css( "border", "2px solid red" );
}
    

• event
  Typ: Event
• ui
  Typ: Object

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

Codebeispiel:

Initialisieren Sie das Widget mit dem angegebenen create-Callback:

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

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

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