ฉันได้ยินส่วนแบ่งของ H5 เมื่อสองวันก่อน มีประโยคในการประชุม ฉันประทับใจมาก: ไม่ใช่ว่าคุณไม่สามารถทำได้ แต่คุณมีข้อกำหนดที่ต่ำเกินไปสำหรับตัวคุณเอง ในประโยคที่ง่ายมากฉันเชื่อว่าหลายสิ่งหลายอย่างไม่เป็นไปไม่ได้ที่ทุกคนจะทำ แต่พวกเขามีข้อกำหนดที่ต่ำเกินไปสำหรับตัวเอง หากคุณขอข้อกำหนดเพิ่มเติมสำหรับตัวคุณเองคุณอาจก้าวหน้ามากขึ้น ตั้งแต่โตขึ้นเพื่อนหลายคนก็ได้ยินคำพูดมากมายที่กระตุ้นตัวเองให้ก้าวหน้า แต่ไม่ใช่ทุกคนที่สามารถทำมันได้ ในความเป็นจริงสิ่งนี้มีส่วนเกี่ยวข้องกับบุคลิกและสภาพแวดล้อมโดยรอบ ฉันสามารถพูดได้เพียงว่าคุณสามารถค้นหาวิธีการและเงื่อนไขเพิ่มเติมเพื่อส่งเสริมตัวเองและปรับปรุงความต้องการของคุณอย่างต่อเนื่องเพื่อตัวเองเพื่อให้คุณมีโอกาสที่จะบรรลุความสำเร็จมากขึ้น
ในช่วงครึ่งหลังของปีนี้ฉันวางแผนที่จะสร้างเว็บไซต์ที่เรียกว่า "คู่มือการพัฒนามือถือ" ในกลุ่ม ในกระบวนการสร้างกรอบเว็บไซต์มีฟังก์ชั่นที่จำเป็นต้องคัดลอกข้อความไปยังคลิปบอร์ด ฉันเชื่อว่าฟังก์ชั่นนี้ใช้กันทั่วไป แต่มันเป็นความท้าทายที่ยิ่งใหญ่สำหรับฉันที่ไม่ได้เขียนรหัส JS บ่อยๆ มองย้อนกลับไปที่ไซต์ที่ฉันใช้หน้าต่าง ClipboardData เพื่อรับรู้สำเนาไปยังฟังก์ชั่นคลิปบอร์ดและรองรับเฉพาะเบราว์เซอร์ IE และ FF ในเวลานั้นฉันพบวิธีแก้ปัญหาบางอย่างเกี่ยวกับ Baidu แต่ฉันยอมแพ้ถ้าฉันทนไม่ได้ ต่อมาฉันได้ตัดสินในรหัส หากไม่รองรับแอตทริบิวต์นี้ฉันจะแจ้งเตือนโดยตรง: ฟังก์ชั่นนี้ไม่รองรับเบราว์เซอร์ โปรดคัดลอกเนื้อหาในกล่องข้อความด้วยตนเอง ตอนนี้ฉันคิดเกี่ยวกับมันฉันขี้เกียจจริงๆ ฮิฮิมีใครถูกยิง ~
การแจ้งเตือน ("ฟังก์ชั่นนี้ไม่รองรับเบราว์เซอร์นี้โปรดคัดลอกเนื้อหาในกล่องข้อความด้วยตนเอง");จริงๆแล้วไม่มีคำอธิบายโดยละเอียดบนอินเทอร์เน็ตบนอินเทอร์เน็ตเพื่อรับรู้การคัดลอกไปยังฟังก์ชันคลิปบอร์ด บทความจำนวนมากเหมือนกันหลายพันครั้ง มันค่อนข้างเจ็บปวดสำหรับรองเท้าเด็กที่ต้องใช้สำเนาไปยังฟังก์ชั่นคลิปบอร์ด วันนี้ฉันจะแบ่งปันส่วนนี้ เนื่องจากความสามารถที่ จำกัด โปรดให้คำแนะนำเกี่ยวกับข้อผิดพลาด ~
ฉันเชื่อว่านักเรียนหลายคนที่สร้างเว็บไซต์โดยใช้ WordPress รู้ว่าใช้ jQuery พวกเขาไม่คุ้นเคยกับ jQuery และใช้งานง่ายมาก น่าเสียดายที่ jQuery เองไม่ได้ตระหนักถึงหน้าที่ของการคัดลอกคลิปบอร์ด แต่บางที API ของมันอาจจะมีฟังก์ชั่นนี้ เวลานี้ไซต์ที่ฉันสร้างใช้ใช้ WordPress และใช้เวลาค้นหา API เพื่อคัดลอก jQuery ไปยังคลิปบอร์ด นอกจากนี้ยังมี: jQuery Zeroclipboard ดังนั้นฉันจึงใช้มันเพียงแค่ใช้สำเนาไปยังคลิปบอร์ดใน WordPress แต่ jQuery Zeroclipboard กลายเป็นพ่อชื่อ Zero Clipboard
Zero Clipboard เป็นไลบรารี JS แบบสแตนด์อโลนที่ใช้ Flash สำหรับการคัดลอกโดยต้องการสองไฟล์: Zeroclipboard.js และ Zeroclipboard.swf มีสองเวอร์ชันบนอินเทอร์เน็ต หลักการดำเนินการถูกคัดลอกโดยใช้แฟลช ฉันไม่รู้ว่าการสร้างต้นฉบับเป็นของใครหรือพี่น้องสองคนในครอบครัวดังนั้นฉันจึงไม่สนใจเรื่องนี้ ตราบใดที่เราเคารพลิขสิทธิ์ตัวเองและแสดงความรู้สึกผิดชอบชั่วดีที่ชัดเจนเวอร์ชันที่ฉันจะแนะนำให้คุณรู้จักในวันนี้ค่อนข้างง่าย
ก่อนอื่นมาดูรูปต่อไปนี้ วัตถุแฟลชที่สร้างขึ้นหลังจากใช้คลิปบอร์ดเป็นศูนย์ เข้ากันได้กับ Flash10 และรุ่นต่อไปนี้และเข้ากันได้กับเบราว์เซอร์ทั้งหมด:
ที่อยู่อย่างเป็นทางการของ Zero Clipboard: http://zeroclipboard.org/, ที่อยู่ GitHub: https://github.com/zeroclipboard/zeroclipboard
ใช้เพื่อสร้างสภาพแวดล้อมเซิร์ฟเวอร์ นักเรียนบางคนอาจไม่ชัดเจนเกี่ยวกับเรื่องนี้ มีหลายวิธีในการสร้างสภาพแวดล้อมเซิร์ฟเวอร์เช่น XP หรือ IIS ที่มาพร้อมกับระบบ Win7 คุณยังสามารถใช้ XAMPP, AppServ, APMSERV และแพ็คเกจการรวมอื่น ๆ เพื่อติดตั้ง มันง่ายมากในการสร้าง ฉันจะไม่แนะนำที่นี่ ~
ตอนนี้เราใช้คลิปบอร์ด Zero Library zero อิสระก่อนที่จะใช้สำเนาไปยังฟังก์ชั่นคลิปบอร์ดและการสาธิตมีดังนี้:
<! doctype html> <html> <head> <dite> การทดสอบคลิปบอร์ดศูนย์ </title> <meta charset = "utf-8"> </head> <body> <!-!-!
ภาพประกอบ:
1. ไดนาคลิปบอร์ด-เป้าหมายป้อน ID ของวัตถุที่จะคัดลอก
-> <button id = "d_clip_button" data-clipboard-target = "fe_text"> <b> คัดลอกไปยัง Clipboard </b> </button> <br/> <textarea id = "fe_text" cols = "50" rows = "3" src = "zeroclipboard.js"> </script> <script type = "text/javascript"> // กำหนด copy object clip var clip = new Zeroclipboard (document.getElementById ("d_clip_button" ฟังก์ชัน (ไคลเอนต์, args) {แจ้งเตือน ("คัดลอกสำเร็จการคัดลอกเนื้อหาคือ:"+ args.text);}); </script>ดาวน์โหลดตัวอย่าง (การเตือนความจำที่อบอุ่น: นักเรียนที่ดาวน์โหลดรหัสอย่าลืมใช้สภาพแวดล้อมเซิร์ฟเวอร์เมื่อเรียกดูการสาธิตมิฉะนั้นจะไม่มีผล ~)
ฟังก์ชั่นของคลิปบอร์ดเป็นศูนย์ได้รับการแนะนำในความคิดเห็นของรหัสข้างต้น สำหรับฟังก์ชั่นเพิ่มเติมโปรดไปที่ https://github.com/zeroclipboard/zeroclipboard
ถัดไปแนะนำ jQuery Zeroclipboard
JQuery Zeroclipboard เป็นการปรับปรุงตาม Zeroclipboard เรียกว่า ZCLIP สั้น ๆ ในฐานะ API ของ jQuery jQuery zeroclipboard ยังดำเนินการง่ายมาก ที่อยู่อย่างเป็นทางการคือ: http://www.steamdev.com/zclip/
ก่อนการใช้
<script type = "text/javascript" src = "js/jQuery.js"> </script> <script type = "text/javascript" src = "js/jQuery.zclip.js"> </script>
ตอนนี้เราใช้ jQuery.zclip.js เพื่อใช้การสาธิตการคัดลอกไปยังคลิปบอร์ดดังนี้:
<! doctype html> <html> <head> <title> zeroclipboard test </title> <meta charset = "utf-8"> <style type = "text/css">. line {margin-bottom: 20px;}/* สำเนา -20px -80px; พื้นหลัง-สี: rgba (0, 0, 0, 0.2); ตัวกรอง: progid: dximagetransform.microsoft.gradient (startColorstr =#30000000, endColorstr =#30000000); 20px; Text-Aginy: Center; Border: 1px Solid #F4D9A6; พื้นหลังสี: #FFFDEE; FONT-SIZE: 14PX;} </style> <script type = "text/javascript" src = "jQuery.js"> </script> <script type = "text src = "jQuery.zclip.js"> </script> </head> <body> <div> <h2> demo1 คลิกเพื่อคัดลอกข้อความปัจจุบัน </h2> <a href = "#none"> คลิกเพื่อคัดลอกฉัน </a> </div> คำสั่งซื้อ </a> <input type = "text" value = "ป้อนสิ่งที่จะคัดลอก"/> </div> </body> </html> <script type = "text/javascript"> $ (เอกสาร). พร้อม (ฟังก์ชั่น () {/* define คลาสทั้งหมดเป็นแท็กคัดลอกและหลังจากคลิก "zeroclipboard.swf", copy: function () {return $ (this) .text ();}, beforecopy: function () {/* การทำงานเมื่อถือเมาส์*/$ (นี่) .css ("สี", "สีส้ม"); class = 'copy-tips-wrap'> ☺คัดลอกสำเร็จ </div> </div> "); $ (" body ") ค้นหา (". เคล็ดลับการคัดลอก ") ลบ (). end (). ผนวก ($ copysuc); $ (". เคล็ดลับ " อินพุต*/$ (". copy-input"). zclip ({path: "zeroclipboard.swf", copy: function () {return $ (this) .parent (). ค้นหา (". อินพุต"). val (); คัดลอกสำเร็จ </div> </div> "); $ (" body ") ค้นหา (". Copy-Tips "). ลบ (). end (). ผนวก ($ copysuc); $ (". เคล็ดลับการคัดลอก "). fadeout (3000);}});}); </script>ดาวน์โหลดตัวอย่าง (การเตือนความจำที่อบอุ่น: นักเรียนที่ดาวน์โหลดรหัสอย่าลืมใช้สภาพแวดล้อมเซิร์ฟเวอร์เมื่อเรียกดูการสาธิตมิฉะนั้นจะไม่มีผล ~)
รหัสข้างต้นรวมฟังก์ชั่นของโหนดการทำงานของ jQuery และมีบทบาทของ jQuery.zclip.js ดีเช่นก่อนและหลังการคัดลอกโหนดแทรกแบบไดนามิก นอกจากนี้ยังสามารถเห็นได้ว่าพลังของ jQuery.zclip.js นั้นใช้งานง่ายมาก หากคุณต้องการทราบเพิ่มเติมเกี่ยวกับฟังก์ชั่นของ jQuery.zclip.js โปรดไปที่ http://www.steamdev.com/zclip/
จากไลบรารี JS อิสระข้างต้น Zeroclipboard.js และ jQuery.zclip.js ทั้งคู่ใช้ Flash เพื่อใช้ฟังก์ชั่นการคัดลอกไปยังคลิปบอร์ด จะเห็นได้ว่าการใช้ Zeroclipboard.js นำฟังก์ชั่นค่อนข้างน้อย แต่เป็นไลบรารีอิสระที่มีไฟล์ค่อนข้างเล็ก ฟังก์ชั่นหลังจากใช้ jQuery.zclip.js ค่อนข้างร่ำรวย อย่างไรก็ตามสำหรับไซต์ที่ไม่ได้ใช้กรอบ JQuery โดยใช้ jQuery.zclip.js เป็นการสิ้นเปลืองบรอดแบนด์ วิธีการคัดลอกที่จะใช้ขึ้นอยู่กับตำแหน่งเฉพาะของผลิตภัณฑ์ ~
ข้างต้นคือการใช้งาน JS ของการคัดลอกเนื้อหาไปยังฟังก์ชันคลิปบอร์ดที่ตัวแก้ไขแนะนำให้คุณเข้ากันได้กับเบราว์เซอร์ทั้งหมด (แนะนำ) ฉันหวังว่ามันจะเป็นประโยชน์กับทุกคน หากคุณมีคำถามใด ๆ โปรดฝากข้อความถึงฉันและบรรณาธิการจะตอบกลับทุกคนในเวลา ขอบคุณมากสำหรับการสนับสนุนเว็บไซต์ Wulin.com!