Latest web development tutorials

UI Contoh jQuery - Part Gallery (Widget Factory)

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

Untuk rincian lebih lanjut tentang widget perpustakaan (Widget Factory), periksa dokumentasi API perpustakaan komponen (Widget Factory) .

Fungsi standar

Demo menunjukkan sederhana untuk menggunakan komponen perpustakaan (jquery.ui.widget.js) untuk membuat widget kustom.

Tiga blok dengan cara yang berbeda untuk menginisialisasi. Klik untuk mengubah warna latar belakang mereka. Lihat kode sumber dan komentar untuk memahami cara kerjanya. 

<! DOCTYPE html>
<Html lang = "en">
<Head>
  <Meta charset = "utf-8">
  <Title> jQuery UI widget perpustakaan (Widget Factory) - Fungsi standar </ title>
  <Link rel = "stylesheet" href = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
  <Script src = "// code.jquery.com/jquery-1.9.1.js"> </ script>
  <Script src = "// code.jquery.com/ui/1.10.4/jquery-ui.js"> </ script>
  <Link rel = "stylesheet" href = "http://jqueryui.com/resources/demos/style.css">
  <Gaya>
  .custom-mewarnai {
    font-size: 20px;
    position: relative;
    width: 75px;
    height: 75px;
  }
  .custom-mewarnai-changer {
    font-size: 10px;
    position: absolute;
    kanan: 0;
    bottom: 0;
  }
  </ Style>
  <Script>
  $ (Fungsi () {
    // Definisi Anggota, dimana "kebiasaan" namespace, "mewarnai" adalah nama dari anggota $ .widget ( "custom.colorize", {
      // Pilihan Default: {
        merah: 255,
        hijau: 0,
        biru: 0,
 
        // Perubahan Callback: null,
        random: null
      },
 
      // Konstruktor _create: function () {
        this.element
          // Tambahkan topik kelas
          .addClass ( "custom-colorize")
          // Mencegah klik dua kali untuk memilih .disableSelection teks ();
 
        this.changer = $ ( "<button>", {
          teks: "perubahan"
          "Kelas": "custom-mewarnai-changer"
        })
        .appendTo (this.element)
        .button ();
 
        // Mengikat tombol klik event changer dengan metode random this._on (this.changer, {
          // Ketika widget dinonaktifkan, _on tidak disebut secara acak
          klik: "random"
        });
        this._refresh ();
      },
 
      () Fungsi {: // memanggil _refresh ketika Anda membuat dan kemudian mengubah pilihan
        this.element.css ( "background-color", "rgb (" +
          this.options.red + "," +
          this.options.green + "," +
          this.options.blue + ")"
        );
 
        // Memicu callback / acara this._trigger ( "perubahan");
      },
 
      // Mengubah warna untuk nilai acak // metode umum dapat disebut langsung melalui .colorize acak ( "random"): function (event) {
        warna var = {
          merah: Math.floor (Math.random () * 256),
          hijau: Math.floor (Math.random () * 256),
          biru: Math.floor (Math.random () * 256)
        };
 
        // Memicu acara, periksa apakah dibatalkan jika (this._trigger ( "random", acara, warna)! == Salah) {
          this.option (warna);
        }
      },
 
      // Automatic acara penghapusan terikat oleh _on sini // ulang modifikasi _destroy lainnya: function () {
        // Hapus elemen yang dihasilkan this.changer.remove ();
 
        this.element
          .removeClass ( "custom-colorize")
          .enableSelection ()
          Css ( "background-color", "transparan");
      },
 
      // _setOptions Dengan hash semua berubah dengan pilihan untuk memohon // ketika mengubah opsi selalu menyegarkan _setOptions: function () {
        // _super Dan _superApply
        this._superApply (argumen);
        this._refresh ();
      },
 
      // _setOption _setOption Untuk setiap individu untuk mengubah pilihan memanggil: function (key, value) {
        nilai-nilai // Warna untuk mencegah tidak sah jika (/red|green|blue/.test(key) && (nilai <0 || nilai> 255)) {
          kembali;
        }
        this._super (key, value);
      }
    });
 
    // Inisialisasi pilihan default $ ( "# my-WIDGET1") .colorize ();
 
    // Dengan dua pilihan kustom untuk menginisialisasi $ ( "# my-WIDGET2") .colorize ({
      merah: 60,
      biru: 60
    });
 
    // Green oleh nilai diri didefinisikan dan hanya memungkinkan warna hijau callback acak cukup untuk menginisialisasi $ ( "# my-WIDGET3") .colorize ({
      hijau: 128,
      random: function (event, ui) {
        kembali ui.green> 128;
      }
    });
 
    // Klik Beralih diaktifkan / dinonaktifkan
    $ ( "#disable") .Klik (Fungsi () {
      // Kustom pemilih untuk setiap widget untuk menemukan semua contoh // Semua contoh switching bersama-sama, sehingga kita bisa mulai dari negara bagian pertama untuk memeriksa apakah ($ ( ": custom-colorize") .colorize ( "pilihan", "cacat")) {
        $ ( ": Custom-colorize") .colorize ( "mengaktifkan");
      } Lain {
        $ ( ": Custom-colorize") .colorize ( "disable");
      }
    });
 
    // Setelah inisialisasi, klik Pengaturan opsi $ ( "#Black") .Klik (function () {
      $ ( ": Custom-colorize") .colorize ( "pilihan", {
        merah: 0,
        hijau: 0,
        biru: 0
      });
    });
  });
  </ Script>
</ Kepala>
<Body>
 
<Div>
  <Div id = "my-WIDGET1"> perubahan warna </ div>
  <Div id = "my-WIDGET2"> perubahan warna </ div>
  <Div id = "my-WIDGET3"> perubahan warna </ div>
  <Tombol id = "disable"> mengalihkan opsi dinonaktifkan </ button>
  <Tombol id = "hitam"> ke Black </ button>
</ Div>
 
 
</ Body>
</ Html>