Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Code
  2. Web Development

Bagaimana untuk meniru iGoogle antarmuka

by
Read Time:24 minsLanguages:

Indonesian (Bahasa Indonesia) translation by Yudha Zubair (you can also view the original English article)

Dua kali sebulan, kita kembali beberapa pembaca kami posting favorit dari sepanjang sejarah Nettuts +.

Dalam tutorial ini, saya akan menunjukkan kepada Anda bagaimana untuk membuat antarmuka yang dapat disesuaikan dengan widget. Produk jadi akan menjadi ramping dan diam-diam dikodekan iGoogle-seperti antarmuka, yang memiliki banyak aplikasi potensial!

Finished ProjectFinished ProjectFinished Project

Rencana

Pertama, mari kita daftar persis apa yang kita akan buat di sini dan apa fitur ini yang akan di miliki:

  • Antarmuka ini akan berisi beberapa widget.
  • Setiap widget dapat dicollpase, dihapus dan diedit.
  • Widget dapat diurutkan ke tiga kolom terpisah oleh user (menggunakan drag dan drop teknik).
  • Pengguna akan dapat mengedit warna dan judul setiap widget.
  • Setiap widget dapat berisi jumlah reguler konten HTML, teks, Gambar, flash dll.

Harap dicatat bahwa kita akan hanya mencakup aspek front-end proyek dalam tutorial ini. Jelas Anda dapat mengintegrasikan UI dengan sistem sisi server yang solid yang bisa mengurus menyimpan preferensi dan disesuaikan dengan widget.

Karena itu semua tentang pengguna dan karena gagasan dipengaruhi oleh iGoogle kami akan akan memanggil proyek ini 'iNettuts'.

Tata letak iNettuts

Tata letak adalah tiga kolom sederhana satu; setiap kolom berisi widget:

layoutlayoutlayout

Setiap widget memiliki "handle" yang pengguna dapat digunakan untuk menggerakan widget.

jQuery UI

Serta jQuery perpustakaan core kita juga akan menggunakan jQuery UI Perpustakaan dan khusus "sortable" dan "draggable" modul. Ini akan membuat cukup sederhana untuk menambahkan fungsionalitas drag-and-drop yang kita inginkan. Anda harus mendapatkan download personalisasi perpustakaan UI yang memiliki apa yang kita butuhkan di dalamnya. (Centang kotak 'sortable')


Langkah 1: XHTML markup

Setiap kolom akan daftar unordered (UL) dan setiap widget dalam kolom akan daftar item (LI):

Kolom pertama:

Kode di atas mewakili kolom pertama, di sebelah kiri dan dua widget masing-masing dalam daftar item. Seperti yang ditunjukkan dalam rencana, akan ada tiga kolom - tiga unordered list.


Langkah 2: CSS

Kita akan menggunakan dua CSS stylesheet, salah satu dari mereka akan berisi semua style utama dan StyleSheet kedua hanya akan berisi style yang diperlukan oleh JavaScript tambahan. Kita memisahkan mereka seperti ini alasannya sehingga JavaScript diaktifkan Jangan buang bandwidth mereka men-download style yang mereka tidak akan gunakan.

Berikut adalah inettuts.css:

tidak ada yang rumit dalam StyleSheet di atas. Biasanya akan lebih baik untuk menggunakan gambar bukan properti CSS3 border-radius membuat rounded corner (untuk manfaat cross-browser), tetapi mereka tidak benar-benar merupakan bagian integral dari tata letak - menambahkan border-radius cepat dan tidak sakit.

Hanya sebuah catatan tentang class warna: idealnya, elemen harus dinamai menurut makna semantik mereka atau konten, tidak penampilan mereka. Masalahnya adalah bahwa widget dapat berarti/berisi banyak hal yang berbeda sehingga benar-benar memiliki class seperti ini adalah alternatif terbaik, kecuali Anda bersedia untuk menambahkan warna style inline. Masing-masing class warna diawali dengan 'color-'; itu akan menjadi jelas mengapa aku telah melakukan ini kemudian di tutorial.

CSS di atas kami juga menggunakan min-height hack untuk setiap kolom sehingga gambar latar belakang (pembagi) tetap utuh dan sehingga kolom kosong masih dapat memiliki widget menyeret kembali ke dalamnya:

Kita akan fokus pada stylesheet kedua kemudian ketika kami telah menambahkan JavaScript.

Berikut adalah preview apa kita punya sejauh ini, hanya CSS/HTML (dan beberapa gambar):

layoutlayoutlayout

Langkah 3: JavaScript

Pengenalan

Seperti sudah saya katakan, kita akan menggunakan jQuery. Itu adalah Perpustakaan pilihan tidak hanya karena modul UI menawarkan tetapi juga karena ini akan membantu dalam mempercepat proses pembangunan sementara menjaga segala sesuatu cross-browser beroperasi.

Produk akhir akan memiliki kemungkinan tak terbatas, beberapa di antaranya sudah telah dieksplorasi oleh orang-orang seperti NetVibes, dan iGoogle. Jadi, kami ingin memastikan kode kita mudah maintainable, memungkinkan untuk upgrade dan dapat digunakan kembali; Kami ingin menjadi future-proof!

Kita akan mulai dengan obyek global yang disebut "iNettuts" - ini akan bertindak sebagai satu-satunya diduduki namespace proyek (ditambah dependensi seperti jQuery). Di bawah ini kami akan kode sampai fungsi utama dari situs yang menggunakan jQuery dan perpustakaan UI.

inettuts.js:

Init metode akan dipanggil ketika dokumen siap untuk manipulasi (yaitu ketika DOM sudah dimuat dan siap). Meskipun ada berbagai metode yang tersedia telah terbukti bahwa cara tercepat untuk initialise kode pada acara ini adalah untuk menyebutnya dari bagian bawah dokumen Anda. Itu juga masuk akal untuk link ke semua skrip di bawah sehingga tidak untuk memperlambat pemuatan sisa halaman:

Settings

Seperti sudah saya katakan, akan ada settings objek yang akan berisi semua pengaturan global yang diperlukan untuk membuat fungsional ini. Kami juga akan memiliki individu widget settings objek, ini berarti itu akan mungkin untuk membuat setiap widget settings.

settings objek (di bawah iNettuts):

Ya, ada cukup banyak pengaturan, tetapi jika kita ingin usabilitas kode maksimum ini adalah suatu keharusan. Sebagian besar di atas adalah mudah dijelaskan. Seperti yang Anda lihat kami telah setup sebuah objek widgetDefault yang berisi pengaturan default untuk setiap widget; Jika Anda ingin menimpa pengaturan ini kemudian script akan meminta Anda untuk memberikan widget id (dalam HTML) dan kemudian membuat aturan baru. Kami punya dua aturan-set (objects) yang menimpa default mereka, 'intro' dan 'gallery'. Jadi, aturan-aturan yang ditentukan dalam objek "galley" hanya akan berlaku untuk widget ini:

Mengambil settings

getWidgetSettings objek (di bawah iNettuts):

Metode ini akan mengembalikan sebuah objek dengan pengaturan widget tertentu apapun. Jika sebuah widget tidak memiliki id (atribut HTML) maka itu hanya akan mengembalikan pengaturan default, sebaliknya akan terlihat untuk melihat apakah widget yang memiliki pengaturan sendiri, jika tidak maka akan kembali pengaturan default dan bahwa pengaturan widget digabung menjadi satu objek (widget' memiliki pengaturan individu yang didahulukan).

Melampirkan file CSS yang menggunakan JavaScript

Saya sebutkan sebelumnya bahwa kita memiliki tambahan stylesheet yang JavaScript tambahan yang akan dibutuhkan.

Inilah StyleSheet (inettuts.js.css):

Target elemen dalam StyleSheet di atas belum dikodekan, tapi akhirnya kita akan menulis JavaScript yang secara dinamis menambahkan elemen ke halaman, sehingga StyleSheet digunakan.

Metode yang melekat StyleSheet ini disebut 'attachStylesheet':

Metode di atas menambahkan link ke head dokumen. Ketika sebuah elemen link baru ditambahkan ke dokumen melalui DOM browser akan memuat dan menerapkan aturan CSS seperti yang akan untuk setiap biasa hard-code StyleSheet terkait. Ketika melakukan hal ini, ingatlah bahwa aturan CSS warisan dan kekhususan masih berlaku.

Membuat widget bekerja

Widgets

Bagian selanjutnya dari tutorial ini mungkin paling sulit, jadi ambil perlahan-lahan.

Kami ingin menambahkan metode lain ke objek global iNettuts, kita akan menyebutnya makeSortable:

By the way, 'metode' adalah nama angan-angan diberikan kepada 'fungsi' yang telah ditetapkan untuk obyek properti. Dalam hal ini objek disebut 'iNettuts' jadi 'makeSortable' metode 'iNettuts'...

Metode baru ini akan mengambil pengaturan kita ditentukan dalam 'settings' objek dan membuat elemen yang dibutuhkan sortable.

Pertama, kami ingin memastikan semua yang kita butuhkan mudah diakses dalam metode baru ini:

*1: tidak akan hanya menjadi salah satu contoh dari obyek global kami, tetapi hanya menyelimuti beberapa contoh perlu dibuat atau jika kita ingin mengubah nama objek global adalah ide yang baik untuk mengatur sebuah variabel baru (dalam hal ini 'iNettuts') untuk kata kunci 'this' yang referensi objek bahwa ini metode dicapai. Hati-hati, kata kunci 'this' agak liat dan tidak selalu referensi apa yang Anda pikirkan itu!

*2 : di atas objek iNettuts kami telah meletakkan properti baru: ' jQuery: $'. Dalam mengejar usabilitas kode maksimum, kita tidak ingin script kami konflik dengan perpustakaan lain yang juga membuat penggunaan simbol tanda dolar (misalnya The Prototype Perpustakaan). Jadi, misalnya, jika Anda mengganti jQuery untuk JQLIB maka Anda bisa mengubah properti 'jQuery' untuk JQLIB dan script akan terus berfungsi dengan baik. Baris ke-2 dalam kode di atas tidak perlu sama sekali, - jika kita tidak ingin kita hanya bisa menggunakan this.jQuery().ajQueryFunction() daripada $() dalam metode ini.

*3: sekali lagi, ini tidak benar-benar diperlukan, kami hanya menciptakan sedikit jalan pintas, jadi daripada harus ketik 'this.settings' dalam metode ini kita hanya perlu mengetikkan 'settings'.

Langkah berikutnya adalah untuk mendefinisikan satu set objek sortable (yaitu widget yang akan bergerak). Ingat, kembali pada settings kita dimungkinkan untuk mengatur properti yang disebut 'movable' ke true atau false. Jika 'movable' diatur ke false, standarnya atau pada individu widget kita harus melayani untuk itu:

Sekarang kita punya satu set elemen DOM yang direferensikan dalam jQuery objek yang dikembalikan dari fungsi di atas. Kita dapat membuat segera digunakan ini:

Jadi, kami sedang mencari apa yang telah didefinisikan sebagai 'handle' dalam widget movable (dalam sortableItems) dan kemudian kami menerapkan properti CSS kursor baru 'move' untuk masing-masing; Hal ini untuk membuatnya jelas bahwa setiap widget bergerak.

mousedown dan mouseup fungsi yang diperlukan untuk mengatasi beberapa masalah dengan menyeret dan menjatuhkan... Karena kita ingin Halaman ini dan semua unsur di dalamnya untuk expand ketika browser diubah ukurannya kami belum menetapkan setiap lebar eksplisit pada widget (daftar item). Ketika salah satu daftar item yang diurutkan ini menjadi benar-benar diposisikan (sementara diseret) yang berarti bahwa itu akan peregangan untuk isinya 's komposit lebar. Berikut adalah contoh:

When dragged the widget stretches to length of pageWhen dragged the widget stretches to length of pageWhen dragged the widget stretches to length of page

Ini adalah apa yang harus terjadi:

When dragged the widget has the correct width!When dragged the widget has the correct width!When dragged the widget has the correct width!

Untuk membuat hal ini terjadi kami telah secara eksplisit menetapkan lebar widget untuk apa itu sebelum menyeret telah dimulai. Modul 'sortable' UI memiliki properti di mana Anda dapat menempatkan fungsi yang akan dijalankan ketika sebuah widget mulai yang diurutkan (yaitu ketika mulai diseret), sayangnya hal ini tidak cukup baik bagi kita karena itu berjalan terlalu terlambat; kita perlu untuk mengatur lebar sebelum modul 'sortable' terus mengambil - cara terbaik untuk melakukan ini adalah dengan menjalankan fungsi pada mousedown menangani ('handle', dalam hal ini, adalah bar di bagian atas setiap widget).

Jika kita membiarkan hal itu seperti ini kemudian ketika Anda drop widget di tempat tertentu dan res

browser widget tidak akan berubah dalam ukuran. Untuk mencegah hal ini kita perlu menulis fungsi untuk terikat pada event mouseup handle:

class 'dragging' ditambahkan di 'start' properti sortable modul yang kita bicarakan sebelumnya. (kita akan menulis kode tersebut kemudian)

Ini adalah metode makeSortable kami apa yang tampak seperti sejauh ini:

Selanjutnya, masih dalam 'makeSortable' kita perlu initialise modul 'sortable':

Opsi di atas setup perilaku yang kita inginkan untuk widget kami sortable. Ada banyak lebih tersedia pilihan untuk modul ini tetapi atas akan cukup untuk saat ini.

Mengedit, menghapus dan collapsing widget

Langkah berikutnya adalah untuk membuatnya mungkin bagi pengguna untuk collapse widget, menutup widget (Hapus) dan mengedit elemen tertentu dalam setiap widget.

Kami akan menempatkan semua ini dalam satu metode, kita akan menyebutnya 'addWidgetControls':

Sebagai dengan 'makeSortable' kami ingin menetapkan variabel berikut di awal:

Kita perlu loop melalui setiap widget pada halaman dan menambah fungsionalitas tergantung pada pengaturan default atau pengaturan yang dibuat untuk setiap widget tertentu.

Seperti yang Anda lihat dari kode di atas, kita sedang memeriksa pengaturan sebelum menambahkan salah satu dari ketiga tombol dan setiap button’ s sesuai fungsi.

Sebelum kita menulis persis apa yang akan terjadi dalam masing-masing dari tiga kondisi Mari kita daftar persis apa setiap tombol ini akan melakukan:

  • CLOSE (Hapus): tombol ini akan menghapus widget dari DOM. Bukan hanya menghapus segera kami akan menerapkan efek yang akan fade out widget dia dan kemudian geser ruang yang diduduki.
  • EDIT: Tombol ini, ketika diklik, akan memunculkan sebuah 'kotak edit' bagian dalam widget. Dalam bagian ini 'edit' pengguna dapat mengubah judul widget dan warnanya. Untuk menutup bagian 'edit' yang pengguna harus klik pada tombol 'edit' yang sama lagi - jadi pada dasarnya tombol ini Matikan bagian 'edit'.
  • COLLAPSE: Tombol ini beralih antara up-panah dan panah bawah tergantung apakah widget collapse atau tidak. Collapsing widget hanya akan menyembunyikan isi, sehingga hanya dapat dilihat dari widget akan ditangani (bar di bagian atas setiap widget).

Kita tahu apa yang kita inginkan sekarang, sehingga kami dapat mulai menulis: (potongan di bawah ini adalah teka-teki dengan komentar jadi pastikan Anda membaca melalui kode!)

CLOSE (Hapus):

EDIT:

COLLAPSE:

Apa itu "Event Bubbling"?

Event bubbling atau 'propagasi' adalah ketika, setelah mengklik pada elemen, event akan menampilkan melalui DOM elemen tingkat tertinggi dengan suatu event yang sama sebagai event Anda hanya dipicu pada elemen asli. Jika kita tidak berhenti propogation dalam cuplikan di atas (e.stopPropagation();) pada event mouseDown masing-masing menambahkan tombol kemudian acara mouseDown menangani (parent tombol) juga akan memicu dan dengan demikian menyeret akan akan dimulai hanya dengan menekan mouse Anda turun lebih dari salah satu tombol - kita tidak ingin hal ini terjadi; kami hanya ingin menyeret ke dimulai ketika pengguna menempatkan mouse mereka langsung di atas pegangan dan mendorong ke bawah.

Kotak Edit event/fungsi

Kami telah menulis kode yang akan menyuntikkan kotak edit ke dalam dokumen di tempat yang benar. -Kami menambahkan sebuah kotak masukan sehingga pengguna dapat mengubah judul sebuah widget dan kami juga menambahkan daftar warna yang tersedia. Jadi, kita sekarang perlu loop melalui setiap edit-bix (tersembunyi dari view) dan menentukan bagaimana elemen-elemen ini dapat berinteraksi dengan:

Kotak edit sudah sepenuhnya fungsional. Semua kode di atas berada dalam metode 'addWidgetControls'.


Hampir selesai

Sekarang bahwa kami telah menulis sebagian besar JavaScript kita dapat menulis memulai metode dan intialise script!

Sekarang, untuk memulai itu semua:

Hanya Jadi kita jelas, ini adalah struktur keseluruhan objek iNettuts dengan masing-masing metode-metode yang dijelaskan:


Selesai!

Finished ProjectFinished ProjectFinished Project

Kami benar-benar selesai, antarmuka harus benar-benar beroperasi sekarang. Aku susah menguji pada PC saya (menjalankan Windows XP) di browser berikut: Firefox 2, Firefox 3, Opera 9.5, Safari 3, IE6, IE7 & Chrome.

Catatan: Ada beberapa masalah di IE. Secara khusus, itu tidak mengatur ukuran pengganti benar plus ada beberapa CSS masalah di IE6 (diharapkan).

Pada pandangan pertama aplikasi potensial antarmuka ini tampaknya terbatas seperti iGoogle atau NetVibes tetapi dapat, pada kenyataannya, digunakan untuk banyak hal yang berbeda.

  • Anda bisa, misalnya menggunakan blog Anda dengan memberikan pengguna pilihan untuk menyortir blog Anda widget di sidebar - Anda kemudian dapat menyimpan preferensi mereka untuk cookie sehingga widget akan dalam urutan yang sama ketika user kembali.
  • Jika Anda menambahkan sistem otentikasi pengguna dan database maka Anda telah mendapatkan iGoogle sederhana.
  • Plugin 'sortable' sendiri dapat digunakan untuk menyortir setiap elemen, mereka tidak harus widget.

Terlepas dari Apakah Anda akan menggunakan ini dalam proyek atau tidak saya harap Anda telah belajar sesuatu hari ini!

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