jQuery UI API - Part Gallery (Widget Factory)

kategori

Utilitas (Utilities) | widget (Widgets)

jQuery.widget (nama [, basis], prototipe) Penggunaan

Keterangan: Gunakan semua widget jQuery UI dengan abstraksi yang sama untuk membuat stateful jQuery Plugin.

Anda dapat menggunakan $.Widget objek untuk dasar warisan, atau mungkin secara eksplisit atau jQuery UI dari kontrol pihak ketiga yang ada, dibuat dari awal widget baru. Definisi widget dengan nama yang sama untuk mewarisi anggota dasar, dan bahkan memungkinkan Anda untuk benar memperluas widget.

jQuery UI mencakup banyak memegang bagian-bagian kecil, sehingga dari jQuery khas Plugin pola penggunaan yang sedikit berbeda. Semua widget jQuery UI menggunakan model yang sama, yang terdiri dari anggota perpustakaan (Widget Factory) definisi. Jadi, selama Anda belajar bagaimana menggunakan satu, Anda tahu bagaimana menggunakan widget lain (Widget).

Catatan: Bagian ini menggunakan anggota progress bar (Progressbar Widget) Demonstrasi, tetapi sintaks diterapkan untuk setiap widget.

inisialisasi

Dalam rangka untuk melacak keadaan widget, kita harus memperkenalkan siklus hidup seluruh widget. siklus hidup dimulai ketika inisialisasi widget. Untuk menginisialisasi widget, kita hanya perlu menyambungkan panggilan atau pluralitas elemen.

$ ( "#elem") .progressbar ();

Ini akan menginisialisasi objek jQuery untuk setiap elemen. Contoh unsur-unsur di atas dengan id "elem" .

Pilihan

Sejak progressbar() tanpa parameter ketika Anda menelepon, widget diinisialisasi menggunakan pilihan default. Kami dapat melewati serangkaian pilihan untuk menimpa default dalam pilihan inisialisasi:

$ ( "#elem") .progressbar ({Nilai: 20});

Kita mungkin harus lulus sesuai dengan jumlah pilihan, kita tidak lulus salah satu pilihan adalah dengan menggunakan nilai standar.

Anda dapat melewati beberapa pilihan parameter yang akan digabung menjadi satu objek (seperti $.extend( true, target, object1, objectN ) ). Jumlah ini diatur untuk mencakup semua hal, berbagi antara contoh opsi berguna:

Pilihan var = {modal: true, menunjukkan: "lambat"};
$ ( "# Dialog1") .dialog (pilihan);
$ ( "# Dialog2") .dialog (pilihan, {AutoOpen: false});

Semua pilihan yang disampaikan selama copy dalam inisialisasi, memastikan tindak lanjut tidak mempengaruhi sebagian kecil dari kasus ini untuk memodifikasi objek. Array adalah satu-satunya pengecualian, karena mereka dengan referensi. Pengecualian untuk ini adalah untuk benar mendukung data yang mengikat, dimana sumber data harus digunakan sebagai acuan.

Nilai default disimpan dalam sifat-sifat widget, sehingga kami dapat menutupi nilai pengaturan jQuery UI. Misalnya, setelah pengaturan berikut, semua contoh masa depan progress bar akan default ke nilai 80:

$ .ui.progressbar.prototype.options.value = 80;

Pilihan adalah bagian dari negara anggota kecil, sehingga kami juga dapat mengatur opsi setelah inisialisasi. Kami akan melihat opsi dalam metode berikutnya.

cara

Sekarang widget telah diinisialisasi, kita bisa query status, atau melakukan tindakan pada widget. Semua tindakan didasarkan pada setelah metode inisialisasi dipanggil untuk melakukan. Untuk memanggil metode pada widget, kami melewati nama metode untuk plugin jQuery. Sebagai contoh, menyerukan anggota progress bar (Progressbar Widget) value() metode, kita bisa menggunakan:

$ ( "#elem") .progressbar ( "Nilai");

Jika metode ini membutuhkan parameter, kita dapat melewati parameter setelah nama metode. Misalnya, untuk lulus parameter 40 ke value() metode, kita bisa menggunakan:

$ ( "#elem") .progressbar ( "Nilai", 40);

Seperti jQuery dengan cara lain, metode yang paling widget mengembalikan sebuah objek jQuery:

$ ( "#elem")
  .progressbar ( "value", 90)
  .addClass ( "hampir-dilakukan");

Setiap widget memiliki pengaturan metode sendiri, yang didasarkan pada fungsi yang disediakan oleh widget. Namun, ada beberapa cara yang hadir pada semua bagian-bagian kecil, yang akan dijelaskan secara rinci di bawah.

peristiwa

Semua widget dan mereka memiliki berbagai acara terkait perilaku untuk memberitahu Anda ketika perubahan negara. Untuk sebagian kecil, ketika acara ini dipicu, nama dalam huruf kecil dalam bentuk nama widget sebagai awalan. Sebagai contoh, kita dapat mengikat progress bar change acara, yang dipicu ketika perubahan nilai.

$ ( "#elem") .bind ( "Progressbarchange", function () {
  alert ( "Nilai telah berubah!");
});

Setiap acara memiliki mundurnya sesuai, yang sebagai pilihan. Jika perlu, kita dapat memahami kemajuan change callback, daripada mengikat progressbarchange acara.

$ ( "#elem") .progressbar ({
  mengubah: function () {
    alert ( "Nilai telah berubah!");
  }
});

Semua widget memiliki change acara, yang dipicu ketika dipakai.

Instansiasi

Contoh widget adalah dengan menggunakan nama lengkap dengan sebagian kecil sebagai kunci jQuery.data() toko. Oleh karena itu, Anda dapat menggunakan kode berikut dari elemen untuk mengambil anggota progress bar (Progressbar Widget) contoh objek.

$ ( "#elem") DATA ( "Ui-progressbar");

Apakah unsur ini terikat untuk widget yang diberikan, Anda dapat menggunakan :data seleksi untuk mendeteksi.

$ ( "#elem") .is ( ": Data ( 'ui-progressbar')"); // benar
$ ( "#elem") .is ( ": Data ( 'ui-draggable')"); // false

Anda juga dapat menggunakan :data untuk mendapatkan daftar widget yang diberikan sebagai contoh semua elemen.

$ ( ": Data ( 'ui-progressbar')");

milik

Semua widget memiliki atribut sebagai berikut:

• defaultElement: elemen ketika membangun widget contoh elemen Tersedia untuk digunakan. Misalnya, karena progress bar defaultElement adalah "<div> ", $.ui.progressbar({ value: 50 }) dalam baru <div> pada contoh dari progress bar widget misalnya.
• Dokumen: bagian-bagian kecil dalam elemen document . Berguna jika Anda perlu untuk berinteraksi dengan dalam rangka widget.
• elemen: sebuah objek jQuery yang berisi elemen yang digunakan untuk instantiate widget. Jika Anda memilih beberapa elemen dan memanggil .myWidget() , Anda akan membuat sebuah instance widget tunggal setiap elemen. Oleh karena itu, properti selalu mengandung unsur.
• namespace: Lokasi widget prototipe toko global yang objek jQuery. Misalnya, "ui" sebuah namespace merupakan bagian prototipe kecil disimpan dalam $.ui .
• Pilihan: pilihan untuk menggunakan objek saat ini berisi widget. Ketika dipakai, salah satu opsi yang diberikan oleh pengguna akan secara otomatis dan $.myNamespace.myWidget.prototype.options menggabungkan default didefinisikan. Pilihan pengguna-ditentukan menimpa nilai default.
• uuid: pengenal bilangan bulat unik menunjukkan kontrol.
• Versi: string versi widget. Untuk widget jQuery UI, properti akan ditetapkan ke versi widget jQuery UI digunakan. Plug-in pengembang harus secara eksplisit mengatur properti dari prototipe mereka.
• widgetEventPrefix: Tambahkan widget untuk nama awalan acara. Sebagai contoh, dapat drag dan drop widget (Draggable Widget) dari widgetEventPrefix adalah "drag" , jadi ketika Anda membuat draggable, nama acara ini "dragcreate" . Secara default, widget widgetEventPrefix adalah namanya. Catatan: Properti ini telah ditinggalkan, di rilis yang sangat masa depan. Nama acara diubah menjadi widgetName: EVENTNAME (seperti "draggable:create" ).
• widgetFullName: widget berisi nama lengkap namespace. Untuk $.widget( "myNamespace.myWidget", {} ) , widgetFullName akan "myNamespace-myWidget" .
• widgetName: nama widget. Untuk $.widget( "myNamespace.myWidget", {} ) , widgetName akan "myWidget" .
• window: mengandung bagian-bagian kecil dalam elemen window . Berguna jika Anda perlu untuk berinteraksi dengan dalam rangka widget.

jQuery.Widget penggunaan secara widget

Keterangan: Basis widget widget perpustakaan (Widget Factory) digunakan.

navigasi cepat

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

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

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

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

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

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

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

this._delay( this._foo, 100 );
	

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

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

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

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

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

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

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

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

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

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

_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();
  }
}
	

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

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

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

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()
    });
  }
});
	

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

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

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

this.option( "width" );
	

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

this.option( "width", 500 );
	

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

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

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

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