Isi kandungan:

Menempatkan Butang Salinan ke Papan Klip di Halaman Web: 5 Langkah (dengan Gambar)
Menempatkan Butang Salinan ke Papan Klip di Halaman Web: 5 Langkah (dengan Gambar)

Video: Menempatkan Butang Salinan ke Papan Klip di Halaman Web: 5 Langkah (dengan Gambar)

Video: Menempatkan Butang Salinan ke Papan Klip di Halaman Web: 5 Langkah (dengan Gambar)
Video: Cara buka papan klip 2024, Julai
Anonim
Menempatkan Butang Salin ke Papan Klip di Halaman Web
Menempatkan Butang Salin ke Papan Klip di Halaman Web

Ini mungkin terdengar sederhana, dan saya mungkin kelihatan tenang untuk meletakkannya di Instructables, tetapi pada kenyataannya, tidak semudah itu. Terdapat CSS, Jquery, HTML, beberapa javascript mewah, dan, oh, anda tahu.

Langkah 1: Buat Pen

Buat Pen
Buat Pen

Terdapat laman web keren ini bernama Codepen. Dahulu, hanya untuk membuat kod dalam HTML, dulu saya harus

  1. Lancarkan Penjelajah Fail.
  2. Pergi ke Dokumen Saya.
  3. Buat fail txt.
  4. Namakan semula fail itu menjadi "MyHTMLDoc.html".
  5. Tekan OK untuk dialog amaran.
  6. Tutup Penjelajah Fail.
  7. Buka Visual Studio, yang memakan masa lima minit.
  8. Buka fail di Visual Studio, yang memerlukan masa lima minit lagi. VS sangat perlahan.
  9. Mulakan.
  10. Apabila saya selesai, saya mesti membuka fail di Edge untuk melihat karya saya.

Sekarang, yang perlu anda lakukan hanyalah

  1. Lancarkan Edge.
  2. Pergi ke
  3. Di penjuru kanan sebelah atas, tekan Pen baru.
  4. Mulakan Pengekodan.

Lihat sejauh mana lebih mudah? Cukup masukkan JS, CSS, dan HTML anda di kotak masing-masing. Hasilnya muncul secara automatik di sebelah kanan.

Sebenarnya, Codepen jauh lebih baik, saya cadangkan anda untuk membuat akaun anda sekarang. Ya, saya tidak suka menjadi iklan, tetapi saya tidak dapat menahannya. Ia jauh lebih baik. Tidak ada yang dapat saya lakukan mengenainya.

Atau, jika anda tidak mahu membuat akaun, anda boleh membuat pen tanpa akaun. Anda boleh menyimpan pen anda di bawah nama pengguna "Captain Anonymous".

Langkah 2: Tambahkan Rujukan

Tambah Rujukan
Tambah Rujukan

Oleh kerana kita akan menggunakan Jquery dan benda yang sangat keren ini disebut "Balloon.css", kita mesti menambah rujukan terlebih dahulu. Sekiranya anda baru, saya akan memberitahu anda cara melakukannya di Codepen.

  1. Klik Tetapan.
  2. Bergantung pada apakah rujukannya adalah helaian gaya atau skrip, klik CSS atau Javascript.
  3. Di bawah Tambah Luaran (Javascript atau CSS) tambahkan rujukan.

Tambah:

bla bla bla: BLAAAAAAA !!!!

Sekarang hapus itu dan masukkan tag HTML yang menghubungkan ke CDN kegemaran anda untuk Jquery dan Balloon.css.

Langkah 3: Kod

Kod
Kod

Di bawahnya, tambahkan kod ini.

codepen.io/slate-coding/pen/oepQpX

Salin / tampal kod tersebut ke pen anda.

Langkah 4: Menukar Kod Itu Sesuai dengan Keperluan Anda

Mengubah Kod Itu Sesuai dengan Keperluan Anda
Mengubah Kod Itu Sesuai dengan Keperluan Anda

Anda boleh bermain-main seberapa banyak yang anda suka dengan pen untuk memenuhi keperluan anda, kemudian salin-tempelkan kod ke mana sahaja yang anda mahukan.

Langkah 5: Demo

Demo
Demo

codepen.io/alexvgs/pen/oepQpX

Disyorkan: