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

Membuat sistem mengedit di-tempat

by
Read Time:11 minsLanguages:

Indonesian (Bahasa Indonesia) translation by Amar Shaleh (you can also view the original English article)

Membuat pengguna mengklik melalui beberapa halaman hanya untuk mengedit bidang adalah begitu 1999. Dalam tutorial ini, Anda akan belajar cara membuat sistem mengedit di tempat seperti yang ditemukan pada situs populer, seperti Flickr.


Sebuah kata dari penulis

Dengan semua dengungan di sekitar Web 2.0, kemudahan penggunaan sekarang jauh lebih penting daripada sebelumnya. Mampu untuk mengedit beberapa konten tanpa harus pergi ke halaman lain adalah sesuatu yang banyak pengguna benar-benar inginkan. Banyak nama-nama besar yang sudah menggunakan pola ini untuk efek yang besar. Jika Anda telah menggunakan Flickr, Anda mungkin telah melihat hal ini langsung.

Saya percaya demo bernilai seribu kata. Tekan demo dan mencobanya sendiri.

Hari ini, kita akan melihat bagaimana menerapkan ini dengan Anda menebak dengan benar, favorit JavaScript kami Perpustakaan, jQuery. Tertarik? Mari kita mulai segera!

Tujuan desain

Sebelum kita mulai mencari cara untuk menerapkan fungsi, berikut adalah beberapa pemikiran tentang tujuan dan keputusan-keputusan yang dihasilkan.

  • Kita perlu membiarkan pengguna mengedit konten tanpa meninggalkan halaman. Ini apa yang diberikan.
  • Ini harus berfungsi sebagai keseluruhan atau gagal secara keseluruhan. Ketika JS dinonaktifkan, kita tidak ingin mengalami kebiasaan aneh.
  • Pengguna harus tahu konten dapat diedit. Perubahan halus latar belakang biru harus menarik perhatian pengguna ini.
  • Ketika berhadapan dengan cara untuk memicu edit ada adalah beberapa pilihan. Kita dapat membiarkan pengguna mengedit Klik normal atau klik dua kali. Aku telah memilih klik ganda karena acak double klik terjadi pada tingkat yang lebih kecil daripada klik acak. Switching adalah hanya soal mengubah parameter dalam mengikat event.
  • Sebuah cara bagi pengguna untuk menyimpan atau membuang perubahan.
  • Menyimpan atau mengedit event dapat dipicu oleh 2 cara. event keyboard atau mouse event. Saya memilih mouse event karena kurangnya keyboard event secara khusus.
  • Sehubungan dengan mouse event, Anda bisa menggunakan tradisional tombol atau link biasa. Saya memilih link untuk alasan tertentu.
  • Pengguna harus dapat melanjutkan mengedit bahkan jika dia klik di luar kotak input atau meninggalkan halaman dan datang kembali.
  • Selain itu, pengguna harus dapat mengedit bidang sebanyak mungkin secara bersamaan.

Sekarang bahwa kita telah memetakan kebutuhan kita kita dapat sekarang beralih ke bagaimana kita akan melakukannya.

Rencana Aksi

Kita sekarang akan perlu untuk memetakan apa yang perlu dilakukan dalam urutan tertentu.

Langkah 1: Kita harus menambahkan class editable untuk setiap elemen yang membutuhkan fungsi ini.

Langkah 2: Kita selanjutnya akan perlu untuk menambahkan hover ke setiap item yang dapat diedit untuk menarik perhatian pada fakta bahwa konten item dapat diedit. Kami akan menambahkan dan menghapus hover menggunakan JavaScript bukan CSS. Hal ini terutama dilakukan untuk perangkat atau browser dengan JavaScript dinonaktifkan. Kami tidak ingin mengirim mereka salah isyarat visual.

Langkah 3: Ketika item diedit diklik ganda, kita perlu swap keluar isi dan menggantinya dengan text box dengan teks lama di dalamnya.

Langkah 4a: ketika pengguna ingin menyimpan perubahan, Salin nilai input yang parent elemen dan menghapus kotak input.

Langkah 4b: atau ketika pengguna ingin membuang perubahan, menggantikan konten lama dan menghapus kotak input.

Ini adalah langkah dasar dalam menciptakan fungsi ini. Tentu ada beberapa hal-hal kecil lainnya, tapi aku akan menjelaskannya sebagai kita pergi bersama.

Inti Markup

HTML markup demo halaman terlihat seperti.

Seperti yang Anda lihat, mengabaikan boilerplate, kita memiliki dua daftar unordered. Setiap li elemen memiliki class editable untuk menunjukkan bahwa konten dapat diedit.

Kami juga menyertakan jQuery Perpustakaan dan file script kita sendiri.

CSS Styling

Tidak ada yang istimewa di sini. Hanya sekelompok kode untuk tata letak dan styling tujuan.

Mengambil catatan khusus dari class editHover dan noPad. Kita akan menggunakan mereka sedikit.

Implementasi JavaScript

Sekarang bahwa kita memiliki framework yang kuat dan styling beberapa dasar di tempat, kita dapat mulai coding fungsionalitas yang diperlukan. Apakah dicatat bahwa kita membuat ekstensif menggunakan jQuery. Secara khusus kita akan membutuhkan setidaknya versi 1.3 atau lebih tinggi. Kalau kuran dan tidak akan bekerja.

Menambahkan Hover

HoversHoversHovers

Seperti diperhatikan sebelumnya, kita harus menambahkan latar belakang biru halus objek yang dapat diedit untuk menandakan mereka dapat diedit. Kami telah membuat class editHover untuk mengurus ini.

Potongan kecil ini membutuhkan perawatan itu bagi kita. Kami menggunakan jQuery's hover metode untuk menambahkan class editHover ketika elemen hover di atas dan menghapusnya bila tidak. Kami menggunakan this untuk merujuk kepada elemen tertentu yang melayang di atas. Jika kita telah menggunakan .editable sebagai pemilih sebaliknya setiap elemen akan mendapatkan class yang ditambahkan ke dalamnya. Jadi kami menggunakan this untuk menargetkan hanya elemen yang kita butuhkan.

Merubah elemen

Pertama, kita perlu untuk memastikan kode kita dijalankan ketika elemen target ganda diklik. Jadi kita akan pertama menghubungkan handler untuk event ini pertama.

Kami melampirkan fungsi replaceHTML acara klik ganda relatif terhadap elemen editable dengan itu satu baris. Sekarang kita mengganti elemen.

Mari kita pergi ke kami kode sedikit demi sedikit kecil.

Saya mendefinisikan fungsi dalam terpisah bernama fungsi bukan fungsi anonim untuk alasan tertentu: Aku akan menggunakan fungsi ini lebih dari sekali. Berikutnya, kita menyimpan isi dari elemen untuk penggunaan nanti menggunakan jQuery's html metode dan mengganti semua tanda kutip karena itu mengacaukan output kami ke bawah garis.

Sekarang bahwa konten kami dengan aman disimpan untuk kemudian digunakan, kita dapat menganti element. Pertama kita kosongkan li elemen dengan mengirimkan string kosong ke metode html. Selanjutnya, kami memasukkan beberapa HTML standar untuk sebuah input box. Kami menambahkan beberapa class untuk itu untuk tujuan styling. Lebih penting lagi, kami menetapkan dalam atribut value kepada teks asli terkandung oleh elemen disimpan dalam oldText. Kita juga menambahkan beberapa link untuk mengurus menyimpan dan membuang perubahan. Kami juga telah menambahkan class mereka sehingga mereka dapat ditargetkan mudah dan untuk styling.

Seperti biasa, kami menggunakan tuis untuk menargetkan elemen yang memicu event.

Menjaga Perubahan

Edited TextEdited TextEdited Text

Pertama atas, izinkan saya memperkenalkan metode live jQuery's. Anda mungkin belum melihat banyak sebelum jadi saya akan memberikan pengenalan cepat.

Anda tidak dapat menghubungkan handler untuk evebt yang dipicu oleh unsur-unsur yang tidak hadir dalam DOM ketika halaman dan JavaScript sudah dimuat. Jika Anda menggunakan fungsi mengikat normal event, itu akan gagal karena alasan yang disebutkan di atas. Metode live menangani itu.

Ini mengikat penangan event terlepas dari saat elemen tercipta. Untuk lebih lanjut tentang hal ini, Anda dapat pergi melalui dokumen resmi.

Mari kita melihat ke dalam kode kita sekarang. Kami pertama-tama mengikat kode yang terdapat dalam fungsi anonim kami untuk klik event. Di dalam fungsi kami pertama menyimpan teks yang terkandung dalam kotak input. Ini bisa menjadi sedikit rumit karena kotak input tidak memiliki ID. Jadi kami pertama kali mencari elemen form yang kebetulan menjadi saudara yang dan kemudian melintasi melalui untuk menemukan elemen input. Kami kemudian Salin nilai setelah mengganti semua kutipan yang mungkin berisi.

Selanjutnya, kita mendapatkan link parent elemen, elemen li dan menggantikan HTML konten dengan teks yang kita disalin di langkah sebelumnya.

Blok ini dapat dengan mudah telah diciptakan sebagai sebuah satu baris, tapi aku memilih untuk split itu untuk 2 baris kepentingan mudah dibaca.

Membuang Perubahan

Ini hanya sesederhana kelihatannya. Karena pengguna tidak ingin menyimpan salah satu perubahan. Kami hanya mengganti konten HTML parent elemen dengan teks asli kita telah disalin sebelumnya ke variabel oldText.

Dengan ini inti dari pekerjaan kami dilakukan. Kita hanya perlu melakukan beberapa suntingan untuk memastikan hal-hal tidak melanggar ketika pengguna melakukan hal-hal tak terduga.

Pengikatan dan Unbinding

Jika Anda telah diuji kode kita saat ini Anda mungkin akan berakhir dengan bug ini melanggar fungsi: bila pengguna ganda mengklik pada hasil masukan kotak itu sekarang diisi dengan konten HTML sistem pengeditan. Mencobanya sendiri. Dengan setiap klik ganda, nilai kotak input mencerminkan dengan menambahkan sekelompok teks yang lain. Masalah ini mungkin akan jauh lebih buruk jika Anda telah memilih klik sebagai event yang dipicu.

Untuk memperbaiki masalah ini, kita perlu melepaskan event handler untuk elemen tertentu saja dan rebind mereka segera setelah pengguna mengklik Simpan baik atau membuang. Mari kita menerapkan yang sekarang.

Blok kode kami sebelumnya sekarang perlu diedit untuk jadi:

Kami melepas hook handler untuk elemen yang memicu event. Seluruh elemen dengan class editable masih memiliki mereka penangan utuh dan akan menanggapi event.

Berikut kami lampirkan tersebut penangan kembali meskipun apakah pengguna memilih untuk mengedit mereka atau tidak. Jika kita tidak melampirkan ini kembali, bidang yang dapat diedit hanya sekali. Kedua kalinya mereka ganda diklik, pengendali tidak lagi melekat pada event. Kami memperbaiki masalah ini dengan mengaitkan handler kembali ke event.

Beberapa tweak

Ini sedikit terakhir kode adalah murni untuk merapikan munculnya efek kami. Jika Anda perhatikan, li memiliki sedikit padding di tempat untuk membuat teks dalam terlihat lebih baik. Tapi ketika teks dilucuti keluar dan digantikan oleh kotak teks kita menghasilkan terlihat jelek dan istirahat efek. Kami ingin kotak teks untuk mengambil ruang yang sama mengambil teks asli. Dengan ini dalam pikiran, kami menambahkan sebuah noPad class elemen ketika sudah diklik ganda dan dihapus lagi ketika pengguna menyimpan atau membuang perubahan.

Kami melepas hook handler untuk elemen yang memicu event. Seluruh elemen dengan class editable masih memiliki mereka handler utuh dan akan menanggapi event.

Kode lengkap

Berikut adalah bagaimana kode lengkap terlihat:

Tidak buruk. Lima puluh baris aneh untuk menambahkan beberapa fungsi baru yang keren.

Mengambil satu langkah lagi: Backend

Kepentingan tidak membuatnya terlalu lama, aku sudah terjebak untuk menciptakan fungsionalitas sisi klien saja. Jika Anda ingin mengimplementasikan fungsi ini dalam proyek Anda sendiri, yang secara implisit diasumsikan bahwa Anda akan memerlukan sistem back-end di tempat untuk menyimpan perubahan dan lebih penting lagi, Anda akan perlu permintaan AJAX untuk membuat panggilan ini asynchronously.

Menambahkan fungsionalitas ini harus bagus tetapi membuat catatan ini. Kode di atas diciptakan hanya untuk menggambarkan pola ini dan bukan untuk digunakan produksi. Jadi saya sudah meninggalkan menambahkan atribut id tambahan ke elemen dan nama atribut ke kotak teks. Dalam kode produksi Anda, menambahkan semua dari mereka agar kotak teks nama atribut dapat diatur bermakna dan membuat backend dapat mengenali mana bagian dari data yang perlu dimutakhirkan.

Untuk menambahkan permintaan AJAX, Simpan handler akan diperbarui menjadi:

Ingat, untuk back-end untuk mengirim apa yang dimengerti, Anda memerlukan beberapa data tambahan bersama dengan teks diperbarui sehingga app tahu data untuk mengedit. Anda bisa dengan mudah mengirimkan lebih dari satu bagian dari data ke script jika diperlukan.

Kesimpulan

Dan di sana Anda memilikinya; Bagaimana cara menambahkan fungsionalitas user friendly untuk proyek Anda. Mudah-mudahan Anda sudah menemukan tutorial ini menarik dan ini berguna bagi Anda. Merasa bebas untuk menggunakan kembali kode ini di tempat lain dalam proyek Anda dan berpadu di sini jika Anda berlari ke dalam kesulitan.

Pertanyaan? Hal-hal yang baik untuk mengatakan? Kritik? Tekan bagian komentar dan Tinggalkan komentar. Happy coding!


Advertisement
Did you find this post useful?
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.