Advertisement
  1. Code
  2. Web Development

Coding UI Plugin jQuery Pertama Anda

Scroll to top
Read Time: 10 min

Indonesian (Bahasa Indonesia) translation by Muhammad Gufron (you can also view the original English article)

jQuery berisi fn.extend() metode, yang membuat authoring jQuery plugin cukup mudah, memungkinkan kita untuk menulis kode yang digunakan dalam cara yang sama sebagai metode jQuery lain. jQuery UI juga berisi struktur yang memudahkan authoring kustom jQuery UI plugin. Jadi itulah yang kita akan melihat selama tutorial ini. Metode yang digunakan berbeda dari standar jQuery plugin, dan ada Konvensi ketat yang harus diikuti, itulah sebabnya saya merasa topik layak dari sebuah artikel.


Selama tutorial ini, saya akan menunjukkan Anda coding Konvensi dan pedoman umum yang harus ditaati ketika authoring plugin untuk jQuery UI. Kami akan membuat sebuah plugin sederhana yang hanya menambah keterangan gambar pada halaman. Hal ini sengaja sederhana sehingga kita dapat berfokus pada apa yang dibutuhkan untuk membuat sebuah plugin jQuery UI tanpa tersesat dalam kode. Siapapun yang telah menulis sebuah plugin jQuery seharusnya tidak memiliki masalah. Pengetahuan tentang jQuery UI dapat membantu tetapi tidak boleh penting untuk menyelesaikan tutorial ini. Mari kita mulai.

Persiapan

Kami akan memerlukan salinan jQuery serta beberapa file dari jQuery UI, tetapi perlu jQuery UI 1,8 (ini dapat ditemukan di blog). Buat sebuah direktori kerja di suatu tempat pada komputer Anda yang disebut jqueryui-plugin, maka dalam hal ini menciptakan css folder, js folder dan folder img (gambar yang digunakan dalam tutorial ini dapat ditemukan di kode download).

Download library dan unpack di suatu tempat yang mudah diakses. Kita hanya perlu beberapa file dari arsip, yaitu jQuery sumber file yang ada dalam akar Arsip sebagai jquery-1.4.1.js, dan jquery.ui.core.js dan jquery.ui.widget.js file, yang keduanya di ui folder. Ambil ini dan menempatkan mereka ke dalam folder js dalam direktori kerja Anda. Kami akan membuat cahaya penggunaan CSS kerangka juga, jadi kita akan perlu satu lembar gaya tema yang tersedia dengan versi stabil jQuery UI (saya menggunakan ui-lightness dalam contoh ini).

Kami akan membuat sebuah widget captionator, jadi kita juga memerlukan halaman, dengan sekelompok gambar pada itu, untuk mengembangkan/tes plugin dengan. Contoh ini menggunakan halaman berikut:

Kami akan menjaga hal-hal yang cukup sederhana untuk saat ini; kami hanya memiliki tiga gambar di halaman, diikuti oleh empat file skrip; tiga tautan ke file sumber jQuery dan jQuery UI, yang keempat ke file sumber plugin kami yang akan kami buat sebentar lagi. jquery.ui.core.js file diperlukan oleh semua jQuery UI widget/plugins. jquery.ui.widget.js file pabrik widget dan memungkinkan untuk penciptaan konsisten widget yang berbagi fungsi API umum. Kebanyakan komponen perpustakaan memerlukan ini, dan kami akan menggunakannya untuk membuat plugin kami.

Membuat Plugin File

Buat sebuah file JavaScript baru dan Simpan sebagai jquery.ui.captionator.js di js folder; kita harus menjaga konvensi penamaan jQuery UI yang telah diperbaharui di versi 1.8 Perpustakaan, dan menggunakan jquery.ui.plugin_name.js. Tambahkan kode berikut ke file baru:

Semua kode yang membuat kami plugin harus dikemas dalam diri pelaksana fungsi anonim. Objek jQuery dilewatkan ke fungsi ini dan digunakan di dalam fungsi melalui $ alias; ini adalah untuk memastikan bahwa plugin kompatibel dengan jQuery's noConflict() metode. Ini merupakan persyaratan yang ditentukan dan harus selalu harus ditaati.

Selanjutnya kita perlu mendefinisikan plugin; Tambahkan kode berikut untuk fungsi anonim kami:

Pola untuk menggunakan widget pabrik mudah digunakan, cukup kita panggil metode widget() yang menentukan nama plugin sebagai argumen pertama, dan obyek harfiah yang mengandung properti dan metode yang membuat fungsi plugin. Hal ini memungkinkan kami plugin untuk disebut (dan menciptakan) menggunakan $ sintaks jQuery commen $("element_caption_applied_to").captionator(); seperti jQuery atau lain jQuery UI metode.

Widget factory menyediakan sejumlah properti dan metode ini untuk kami; misalnya, kita dapat mengatur opsi default untuk plugin menggunakan properti opsi, dan menambahkan fungsi inisialisasi yang dijalankan secara otomatis oleh pabrik widget segera setelah instance dari plugin dipanggil. Di dalam objek yang muncul sebagai argumen kedua di kode sebelumnya, tambahkan kode berikut:

Ini adalah satu-satunya pilihan yang kita akan menggunakan di plugin contoh kami; pengguna (dan oleh pengguna maksudku Pelaksana, pengguna akhir tidak) plugin dapat menentukan posisi judul untuk menjadi baik di bagian atas gambar yang disebut di, atau bagian bawah, mereka dapat menentukan warna teks pada keterangan , atau mengubah warna latar belakang dari judul. Untuk mengubah pilihan dikonfigurasi setiap jQuery UI widget sebelum inisialisasi pelaksana pengembang hanya akan menggunakan sesuatu seperti ini:

$("element_caption_applied_to").captionator ({} Lokasi: "atas"});

Selanjutnya kita dapat membuat fungsi inisialisasi kami, setelah objek pilihan menambahkan metode berikut:

Nama metode harus dimulai dengan underscore sebagai jQuery UI mencegah metode plugin yang diawali dengan tanda garis bawah dari sedang menelepon dari luar plugin, jadi ini berhenti itu sengaja disebut dari halaman HTML. Apapun metode yang kita mulai dengan underscore akan dilindungi dengan cara ini.

Sebagian besar metode inisialisasi kami adalah serangkaian variabel; dalam fungsi kami kata kunci ini merujuk kepada suatu objek yang dilewatkan ke dalam metode yang mewakili contoh plugin. Variabel pertama cache referensi untuk contoh saat ini plugin; _create metode ini disebut untuk setiap elemen yang metode plugin yang disebut, yang bisa menjadi satu elemen atau beberapa.

Kita dapat mengakses pilihan default plugin (yang akan diganti secara otomatis jika pelaksana mengkonfigurasi salah satu dari mereka) menggunakan properti options objek; kami cache ini dalam kedua variabel. Elemen yang metode plugin (captionator()) disebut, yang dalam contoh ini akan menjadi sebuah gambar, dapat diakses menggunakan elemen properti dari objek. Kami menyimpan ini dalam ketiga variabel.

Kami menggunakan variabel keempat untuk menyimpan referensi ke unsur keterangan baru, yang dibangun dari simple <span>; <span> memiliki innerText yang ditetapkan untuk atribut alt gambar saat ini, dan beberapa nama kelas yang ditambahkan ke dalamnya; kita memberikannya nama kelas ui-widget jadi itu ca n mengambil beberapa default styling dari jQuery UI tema. Kami juga memberikan nama kelas khusus sehingga kami dapat menambahkan beberapa gaya kami sendiri.

Selanjutnya kita perlu mengatur beberapa properti CSS; kami akan menggunakan lembar gaya terpisah untuk beberapa gaya, tetapi hal-hal tertentu, seperti color dan gaya latar background-color dapat dikontrol melalui opsi yang dapat dikonfigurasi, jadi kami perlu mengaturnya menggunakan plugin. Lebar teks harus sesuai dengan lebar gambar yang dilapisnya, jadi kami juga perlu menentukan ini dan mengaturnya secara terprogram. Akhirnya baru <span> diinject ke halaman langsung setelah gambar target.

Setelah teks dimasukkan, perlu ukuran dan posisi; satu-satunya cara agar dapat diukur secara akurat adalah jika sudah ada di DOM dan menerapkan aturan CSS, seperti ukuran font. Inilah mengapa kami menambahkan judul ke halaman, dan kemudian menentukan dimensi tepatnya, yang kemudian disimpan dalam variabel capWidth dan capHeight.

Setelah judul telah ditambahkan ke halaman (dan hanya kemudian) kita dapat bekerja mengatur benar lebar, tinggi dan posisi masing-masing judul, yang kita tentukan menggunakan css() metode sekali lagi. Keterangan benar-benar benar-benar terpisah dari gambar; mereka dimasukkan langsung setelah setiap gambar dan kemudian diposisikan untuk muncul untuk tampilan gambar, setelah semua, kita tidak dapat menambahkan <span> sebagai anak <img>.

Ini baik, sampai browser diubah ukurannya, pada titik mana gambar bergerak tapi keterangan tidak karena mereka benar-benar diposisikan. Untuk memperbaiki hal ini, kami telah menggunakan pengendali dasar ukuran yang melekat pada jendela yang hanya repositions keterangan masing-masing ke posisi baru gambar. Handler acara ini adalah hal terakhir yang kami metode inisialisasi.

Metode lain yang kami plugin harus mengekspos adalah metode destroy() yang umum bagi semua jQuery UI plugin. Kita harus menyediakan pelaksanaan metode ini untuk membersihkan setelah plugin kami. Untuk contoh kami plugin, metode dapat yang sederhana seperti ini:

Yang perlu kita lakukan adalah menghapus keterangan dan tidak mengikat penangan kami mengubah ukuran jendela. Metode ini dapat disebut oleh pelaksana menggunakan plugin sehingga kita tidak boleh mulai nama metode ini dengan tanda garis bawah. Untuk memanggil metode ini, pelaksana akan menggunakan $("element_caption_attached_to").captionator("destroy"); Itulah bagaimana salah satu metode umum kami akan dipanggil.

Kita perlu untuk menyediakan metode lain yang dikontrol/dijalankan oleh pabrik widget; kami melihat sebelumnya bagaimana pengembang dapat mengubah pilihan dikonfigurasi sebelum inisialisasi, tetapi apa tentang setelah inisialisasi? Hal ini dilakukan menggunakan metode option menggunakan sintaks berikut: $("element_caption_attached_to").captionator ("option", "location", "top"); Jadi kita perlu menambahkan _setOption metode built-in untuk menangani hal ini:

Kita mulai metode ini dengan tanda garis bawah karena pelaksana menggunakan option, tidak _setOption untuk benar-benar mengubah pilihan; kita tidak perlu khawatir tentang bagaimana hal ini ditangani, kita hanya perlu untuk menyediakan metode ini untuk menghadapi apa pun yang khusus untuk plugin kami. Karena metode ini sudah ada di pabrik widget yang kita harus memanggil metode yang asli, yang kita lakukan pertama-tama dalam metode kami menggunakan prototipe dari objek Widget, menentukan nama metode (_setOption dalam kasus ini, tetapi kita bisa melakukannya untuk metode built-in lain seperti sumur) dan gunakan apply untuk memanggilnya. Kita kemudian dapat melanjutkan dengan kode spesifik untuk plugin kami.

Fungsi secara otomatis akan menerima dua argumen yang pilihan untuk mengubah dan nilai baru. Kami cache beberapa elemen yang sering digunakan, seperti gambar dan keterangan, dan mendapatkan ketinggian saat ini keterangan masing-masing. Kami kemudian menggunakan pernyataan kasus saklar sederhana untuk menangani masing-masing dari tiga kami pilihan yang sedang berubah. Reposisi keterangan adalah yang paling kompleks, tetapi masih sangat sepele dan mirip dengan bagaimana kita diposisikan mereka pada awalnya.

Menambahkan Peristiwa

Hal ini penting untuk menambahkan Peristiwa yang pengembang menggunakan plugin Anda dapat menambahkan callback untuk sehingga mereka dapat bereaksi berbeda hal-hal yang terjadi ketika pengguna berinteraksi dengan widget dalam beberapa cara. Pabrik widget menangani sebagian besar tugas ini bagi kita, kita perlu lakukan adalah memicu peristiwa. Plugin ini benar-benar tidak berbuat banyak, tetapi kami masih bisa memicu suatu peristiwa setelah keterangan masing-masing ditambahkan ke halaman; untuk melakukan ini menambahkan kode berikut tepat sebelum mengubah ukuran event handler:

Itu saja yang perlu kita lakukan! Satu baris kode dan kami memiliki acara adat yang dapat bereaksi terhadap. Kita memanggil metode _trigger() contoh plugin (yang kita disimpan dalam variabel itu sendiri) dan lulus metode tiga argumen; yang pertama adalah nama acara, yang kedua adalah untuk objek acara (kita tidak perlu menggunakan ini dalam contoh plugin kami, maka nilai null) dan yang ketiga adalah referensi elemen keterangan. Pabrik widget secara otomatis akan melewati objek acara (jika disediakan) dan data kita lulus dalam parameter ketiga untuk fungsi panggilan balik yang menggunakan acara ditambahkan. Pengembang bisa menghubungkan ke acara ini menggunakan sintaks berikut: $("element_caption_attached_to").captionator ({ ditambahkan: fungsi (e, ui) {//do stuff});

Styling  Plugin

Kami hanya membutuhkan style sheet yang sangat kecil untuk plugin kami, secara harfiah kami hanya memiliki tiga gaya. Hal ini hampir tidak layak bahkan menciptakan sebuah file terpisah untuk gaya! Tapi kami akan, jadi Buat sebuah file baru yang disebut ui.captionator.css, yang merupakan format yang diharuskan untuk plugin style sheet, dan menyimpannya dalam direktori css. Tambahkan gaya berikut ini:

Thats semua ada untuk itu. Plugin kami kini fungsional dan visual yang lengkap. Teks akan muncul seperti ini:

Final ProductFinal ProductFinal Product

Ringkasan

Seperti jQuery's plugin penciptaan metode fn.extend(), jQuery UI juga memiliki sendiri mekanisme yang memungkinkan pengembang untuk dengan cepat dan mudah menulis plugins kuat dan terukur yang memenuhi jQuery UI proyek standar tinggi, meskipun dalam hal apa yang itu sebenarnya bagi kami, Hal ini bahkan lebih baik jQuery. Pabrik widget telah dibuat sedemikian rupa bahwa pretty much semua kerja keras yang diambil dari plugin kustom penciptaan.

Sangat mudah untuk bekerja dengan metode-metode yang disediakan oleh pabrik widget untuk menambah metode kami plugin yang umum di UI widget, seperti metode destroy dan option, yang pelaksana pengembang akan berharap untuk menemukan dalam plugin. Kami juga melihat betapa mudahnya untuk memicu peristiwa kustom yang dapat digunakan oleh pengembang untuk bereaksi terhadap interaksi atau kejadian dengan widget.

Advertisement
Did you find this post useful?
Want a weekly email summary?
Subscribe below and we’ll send you a weekly email summary of all new Code tutorials. Never miss out on learning about the next big thing.
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.