Saya mendengar bagian H5 dua hari yang lalu. Ada hukuman di pertemuan itu. Saya sangat tersentuh: Bukannya Anda tidak bisa, tetapi Anda memiliki persyaratan yang terlalu rendah untuk diri Anda sendiri. Dalam kalimat yang sangat sederhana, saya percaya bahwa banyak hal bukan tidak mungkin untuk dilakukan semua orang, tetapi mereka benar -benar memiliki persyaratan yang terlalu rendah untuk diri mereka sendiri. Jika Anda meminta lebih banyak persyaratan untuk diri sendiri, maka Anda dapat membuat kemajuan yang lebih besar. Sejak tumbuh dewasa, banyak teman juga telah mendengar banyak kata yang memotivasi diri mereka untuk membuat kemajuan, tetapi tidak semua orang dapat terus melakukannya. Bahkan, ini ada hubungannya dengan kepribadian mereka dan lingkungan sekitarnya. Saya hanya dapat mengatakan bahwa Anda dapat menemukan lebih banyak metode dan kondisi untuk mendorong diri sendiri, dan terus meningkatkan kebutuhan Anda sendiri, sehingga Anda dapat memiliki kesempatan untuk mencapai lebih banyak pencapaian.
Di paruh kedua tahun ini, saya berencana untuk membangun situs yang disebut "Panduan Pengembangan Seluler" dalam grup. Dalam proses membangun kerangka kerja situs web, ada fungsi yang perlu menyalin teks ke clipboard. Saya percaya fungsi ini sangat umum digunakan, tetapi ini adalah tantangan besar bagi saya yang tidak sering menulis kode JS. Melihat kembali ke situs saya menggunakan window.clipboardData untuk mewujudkan salinan ke fungsi clipboard, dan hanya mendukung browser IE dan FF. Pada saat itu, saya menemukan beberapa solusi di Baidu, tetapi saya menyerah jika saya tidak tahan. Kemudian, saya membuat penilaian dalam kode. Jika atribut ini tidak didukung, saya akan secara langsung waspada: Fungsi ini tidak mendukung browser. Harap salin konten di kotak teks secara manual. Sekarang saya memikirkannya, saya benar -benar malas. Hehe, ada yang ditembak ~
Peringatan ("Fungsi ini tidak mendukung browser ini, silakan salin secara manual konten di kotak teks");Sebenarnya tidak ada penjelasan terperinci di internet di internet untuk mewujudkan fungsi clipboard. Banyak artikel yang sama ribuan kali. Cukup menyakitkan untuk sepatu anak -anak yang perlu menggunakan fungsi salinan ke clipboard. Hari ini saya akan membagikan bagian ini. Karena kemampuan yang terbatas, beri saya beberapa saran tentang kesalahan ~
Saya percaya bahwa banyak siswa yang telah membangun situs menggunakan WordPress tahu bahwa itu menggunakan jQuery. Mereka tidak terbiasa dengan jQuery dan sangat mudah digunakan. Sayangnya, JQuery sendiri tidak menyadari fungsi menyalin ke clipboard, tetapi mungkin API -nya akan memiliki fungsi ini. Kali ini situs yang saya bangun menggunakan WordPress dan menghabiskan waktu mencari API untuk menyalin jQuery ke clipboard. Ada juga: jQuery zeroclipboard, jadi saya menggunakannya untuk cukup mengimplementasikan salinan ke clipboard di WordPress. Tapi, jQuery Zeroclipboard ternyata adalah ayah bernama Zero Clipboard.
Zero Clipboard adalah perpustakaan JS mandiri yang menggunakan flash untuk menyalin, membutuhkan dua file: ZeroClipboard.js dan ZeroClipboard.swf. Ada dua versi di internet. Prinsip implementasi disalin menggunakan flash. Saya tidak tahu ciptaan aslinya, atau dua bersaudara keluarga, jadi saya tidak peduli tentang ini. Selama kami menghormati hak cipta sendiri dan mengekspresikan hati nurani yang jelas, versi yang akan saya perkenalkan kepada Anda hari ini relatif sederhana.
Pertama, mari kita lihat gambar berikut. Objek flash yang dihasilkan setelah menggunakan clipboard nol. Ini kompatibel dengan flash10 dan versi berikut dan kompatibel dengan semua browser:
Alamat resmi Zero Clipboard: http://zeroclipboard.org/, Alamat GitHub: https://github.com/zeroclipboard/zeroclipboard
Gunakan untuk membangun lingkungan server. Beberapa siswa mungkin tidak jelas tentang hal itu. Ada banyak metode untuk membangun lingkungan server, seperti XP atau IIS yang dilengkapi dengan sistem Win7. Anda juga dapat menggunakan XAMPP, APPSERV, APMServ, dan paket integrasi lainnya untuk menginstal. Sangat sederhana untuk dibangun. Saya tidak akan memperkenalkannya di sini ~
Sekarang kami pertama -tama menggunakan clipboard Nol Perpustakaan JS Independen untuk cukup mengimplementasikan salinan ke fungsi clipboard, dan demo adalah sebagai berikut:
<! Doctype html> <html> <head> <title> tes nol clipboard </iteme> <meta charset = "utf-8"> </head> <body> <!-
menjelaskan:
1.Data-klipboard target Masukkan ID objek yang akan disalin
-> <tombol id = "d_clip_button" data-klipboard-target = "fe_text"> <b> salin ke clipboard </b> </button> <br/> <textarea id = "fe_text" cols = "50" barak = "3"> TEKPRIP/TEKPRIK/TEKPRIP/TEKPRIP/TEKPRIPS/BODS/BODS/BODM/HT/TEKPRIPS/JAWAP/TEKPRIM/BODS/TEKPRIM/TEKPRIPS/BODS/BODS/BODS/BODS/BODS/JAWAP/TEKPRIPS> </body </body> src = "ZeroClipboard.js"> </script> <script type = "text/javascript"> // Tentukan objek salinan baru var clip = new zeroclipboard (document.geteLementById ("d_clip_button"), {moviePath: "zeroclipboard (" d_clip}; function (client, args) {alert ("Salin berhasil, menyalin konten adalah:"+ args.text);}); </script>Unduh Demo (Warm Reminder: Siswa yang Mengunduh Kode, Ingatlah Untuk Menggunakan Lingkungan Server Saat Menjelajahi Demo, Jika tidak, tidak akan ada efek ~)
Fungsi nol clipboard telah diperkenalkan dalam komentar kode di atas. Untuk fungsi lebih lanjut, silakan kunjungi https://github.com/zeroclipboard/zeroclipboard
Selanjutnya, perkenalkan jQuery zeroclipboard
JQuery ZeroClipboard adalah peningkatan berdasarkan ZeroClipboard, disebut sebagai ZCLIP singkatnya. Sebagai API JQuery, jQuery Zeroclipboard juga melakukan operasi yang sangat sederhana. Alamat resmi adalah: http://www.steamdev.com/zclip/
Sebelum digunakan, Anda perlu merujuk ke 2 file JS: jquery.js dan jquery.zclip.js
<type script = "Text/JavaScript" src = "js/jQuery.js"> </script> <script type = "text/javascript" src = "js/jQuery.zclip.js"> </script>
Sekarang kami menggunakan jquery.zclip.js untuk hanya mengimplementasikan salinan ke demo clipboard sebagai berikut:
<!DOCTYPE html><html><head><title>ZeroClipboard Test</title><meta charset="utf-8"><style type="text/css">.line{margin-bottom:20px;}/* Copy prompt*/.copy-tips{position:fixed;z-index:999;bottom:50%;left:50%;margin:0 0 -20px -80px; latar belakang-warna: rgba (0, 0, 0, 0.2); filter: progid: dximagetransform.microsoft.gradient (startColorstr =#30000000, endcolorstr =#30000000); padding: 6px;}. Copy-tips-wrap {Padding: 10px: pading: 6px; Text-liups; TEKS-6PX; #F4d9a6; latar belakang-color: #fffdee; font-size: 14px;} </tyle> <script type = "text/javascript" src = "jQuery.js"> </script> <script type = "Text/JavaScript" src = "jQuery.zclip.js"> </scripter/javaScript "src =" jQuery.zclip.js "> </script> the script> Teks </h2> <a href = "#none"> Klik untuk menyalin saya </a> </div> <div> <h2> demo2 Klik untuk menyalin teks dalam formulir </h2> <a href = "#none"> klik untuk menyalin teks dalam urutan salinan </a> <input type = "Text" value = "enter apa yang akan disalin"/> type = "text/javascript"> $ (dokumen) .ready (function () {/* mendefinisikan semua kelas sebagai tag salinan, dan setelah mengklik, Anda dapat menyalin teks dari objek yang diklik*/$ (". Copy"). Zclip ({Path: "The ZeroClipboard.swf", copy: function () {return $ ({this). mouse*/$ (this) .css ("color", "oranye");}, aftercopy: function () {/*Operasi Setelah berhasil salin*/var $ copysuc = $ ("<div class = 'copy-tips'> <div class = 'copy-tips-wr-wrap'> ☺ Salin berhasil </div> </div> "); $ (" body "). find (". copy-tips "). Remove (). end (). append ($ copysuc); $ (". copy-tips "). fadeout (3000);}});/* Tentukan semua kelas sebagai copy-input tag. Setelah mengklik, Anda dapat menyalin teks tersebut "ZeroClipboard.swf", copy: function () {return $ (this) .parent (). Find (". Input"). Val ();}, aftercopy: function () {/* Operasi setelah menyalin*/var $ copysuc = $ ("<v class = 'copy-tips'> <div class = 'copy-wrap' berhasil </div> </div> "); $ (" body "). find (". copy-tips "). Remove (). end (). append ($ copysuc); $ (". Tips copy "). fadeout (3000);}});}); </script>Unduh Demo (Warm Reminder: Siswa yang Mengunduh Kode, Ingatlah Untuk Menggunakan Lingkungan Server Saat Menjelajahi Demo, Jika tidak, tidak akan ada efek ~)
Kode di atas menggabungkan fungsi node operasi jQuery dan memainkan peran jQuery.zclip.js dengan baik, seperti sebelum dan sesudah menyalin, memasukkan node secara dinamis. Dapat dilihat bahwa kekuatan jQuery.zclip.js sangat mudah digunakan. Jika Anda perlu tahu lebih banyak tentang fungsi jquery.zclip.js, silakan kunjungi http://www.steamdev.com/zclip/
Dari pustaka JS independen di atas Zeroclipboard.js dan jquery.zclip.js keduanya menggunakan flash untuk mengimplementasikan fungsi penyalinan ke clipboard. Dapat dilihat bahwa menggunakan ZeroClipboard.js membawa fungsi yang relatif sedikit, tetapi ini adalah perpustakaan independen dengan file yang relatif kecil. Fungsi setelah menggunakan jquery.zclip.js relatif kaya. Namun, untuk situs yang tidak menggunakan kerangka kerja jQuery, menggunakan jQuery.zclip.js adalah buang -buang broadband. Metode salinan mana yang digunakan tergantung pada posisi spesifik produk ~
Di atas adalah implementasi JS dari menyalin konten ke fungsi clipboard yang diperkenalkan editor kepada Anda kompatibel dengan semua browser (disarankan). Saya harap ini akan membantu semua orang. Jika Anda memiliki pertanyaan, silakan tinggalkan saya pesan dan editor akan membalas semua orang tepat waktu. Terima kasih banyak atas dukungan Anda ke situs web Wulin.com!