Ich habe vor zwei Tagen einen Teil H5 gehört. Bei dem Treffen gab es einen Urteil. Ich war sehr berührt: Es ist nicht so, dass Sie es nicht können, sondern dass Sie zu niedrige Anforderungen für sich selbst haben. In einem sehr einfachen Satz glaube ich, dass viele Dinge für alle nicht unmöglich sind, aber sie haben wirklich zu niedrige Anforderungen für sich. Wenn Sie mehr Anforderungen für sich selbst bitten, können Sie größere Fortschritte machen. Seit dem Aufwachsen haben viele Freunde auch viele Worte gehört, die sich motivieren, Fortschritte zu machen, aber nicht jeder kann es weiter tun. Tatsächlich hat dies viel mit ihrer Persönlichkeit und der Umgebung zu tun. Ich kann nur sagen, dass Sie mehr Methoden und Bedingungen finden können, um sich selbst zu ermutigen und Ihre Anforderungen für sich selbst ständig zu verbessern, damit Sie die Möglichkeit haben, mehr Erfolge zu erzielen.
In der zweiten Hälfte dieses Jahres habe ich vor, eine Website namens "Mobile Development Guide" in der Gruppe zu erstellen. Beim Erstellen des Website -Frameworks muss eine Funktion in die Zwischenablage kopiert werden. Ich glaube, diese Funktion wird sehr häufig verwendet, aber es ist eine große Herausforderung für mich, die nicht häufig JS -Code schreiben. Wenn ich auf eine Site zurückblickte, habe ich Fenster verwendet.clipboardData, um die Kopie in die Zwischenablage -Funktion zu verwirklichen, und unterstützt nur den IE- und FF -Browser. Zu dieser Zeit fand ich ein paar Lösungen auf Baidu, aber ich gab auf, wenn ich es nicht aushalten konnte. Später habe ich im Code ein Urteil gemacht. Wenn dieses Attribut nicht unterstützt wird, werde ich direkt alarmieren: Diese Funktion unterstützt den Browser nicht. Bitte kopieren Sie den Inhalt im Textfeld manuell. Jetzt denke ich darüber nach, ich bin wirklich faul. Hehe, wurde jemand erschossen ~
ALERT ("Diese Funktion unterstützt diesen Browser nicht. Bitte kopieren Sie den Inhalt im Textfeld manuell").Es gibt tatsächlich keine detaillierte Erklärung im Internet im Internet, um die Kopie zur Zwischenablage zu realisieren. Viele Artikel sind tausend Male. Es ist ziemlich schmerzhaft für Kinderschuhe, die die Kopie zur Zwischenablage verwenden müssen. Heute werde ich diesen Teil teilen. Bitte geben Sie mir aufgrund begrenzter Fähigkeiten einige Ratschläge zu den Fehlern ~
Ich glaube, dass viele Schüler, die eine Website mit WordPress erstellt haben, wissen, dass sie JQuery verwendet. Sie sind mit JQuery nicht nicht vertraut und sind sehr einfach zu bedienen. Leider realisiert JQuery selbst die Funktion des Kopierens in die Zwischenablage nicht, aber vielleicht wird seine API diese Funktion haben. Diesmal verwendet die von mir erstellte Website WordPress und verbrachte einige Zeit damit, nach der API zu suchen, um JQuery in die Zwischenablage zu kopieren. Es gibt auch: JQuery Zeroclipboard, daher habe ich sie einfach verwendet, um die Kopie in die Zwischenablage in WordPress implementieren zu können. JQuery Zeroclipboard erwies sich jedoch als Vater namens Zero Clipboard.
Zero Clipboard ist eine eigenständige JS -Bibliothek, die Flash zum Kopieren verwendet und zwei Dateien erfordert: Zeroclipboard.js und Zeroclipboard.swf. Es gibt zwei Versionen im Internet. Das Implementierungsprinzip wird mit Flash kopiert. Ich weiß nicht, wessen die ursprüngliche Kreation gehört, oder zu den beiden Brüdern der Familie, daher ist mir das egal. Solange wir das Urheberrecht selbst respektieren und ein klares Gewissen ausdrücken, ist die Version, die ich Ihnen heute vorstellen werde, relativ einfach.
Schauen wir uns zunächst die folgende Abbildung an. Das nach der Verwendung von Null -Zwischenablage erzeugte Flash -Objekt. Es ist mit Flash10 und den folgenden Versionen kompatibel und mit allen Browsern kompatibel:
Offizielle Adresse von Zero Clipboard: http://zeroclipboard.org/, Github -Adresse: https://github.com/zeroclipboard/zeroclipboard
Verwenden Sie es, um eine Serverumgebung zu erstellen. Einige Schüler sind sich möglicherweise nicht klar. Es gibt viele Methoden zum Erstellen einer Serverumgebung, wie XP oder IIS, die mit Win7 -System geliefert werden. Sie können auch XAMPP, AppServ, APMServ und andere Integrationspakete verwenden, um zu installieren. Es ist sehr einfach zu bauen. Ich werde es hier nicht vorstellen ~
Jetzt verwenden wir zunächst die unabhängige JS Library Zero -Zwischenablage, um die Kopie einfach in die Zwischenablage zu implementieren, und die Demo lautet wie folgt:
<! DocType html> <html> <kopf> <titels> Null-Clipboard-Test </title> <meta charset = "utf-8"> </head> <body> <!-
veranschaulichen:
1.Data-Clipboard-Target Geben Sie die ID des zu kopierten Objekts ein
-> <button id = "d_clip_button" data-clipboard-target = "fe_text"> <b> in die Zwischenablage kopieren </b> </button> <br/> <textArea id = "fe_text" cols = "50" rows = "3"> Entery/textarea> </html> </html> </html> </html> </html> </htm. src = "Zeroclipboard.js"> </script> <script type = "text/javaScript"> // Definieren Sie ein neues Copy -Objekt var clip = neueroclipboard (document.getElementById ("d_clip_button"), {Moviepath: "Zeroclipboard.Wf"}). Funktion (Client, args) {alert (erfolgreich kopieren, Inhalt kopieren ist: "+ args.text);}); </script>Demo -Download (warme Erinnerung: Schüler, die den Code herunterladen, denken Sie daran, die Serverumgebung beim Surfen der Demo zu verwenden. Andernfalls gibt es keinen Effekt ~)
Die Funktionen der Zero -Zwischenablage wurden in den obigen Code -Kommentaren eingeführt. Weitere Funktionen finden Sie unter https://github.com/zeroclipboard/zeroclipboard
Stellen Sie als nächstes JQuery Zeroclipboard vor
JQuery Zeroclipboard ist eine Verbesserung, die auf Zeroclipboard basiert und kurz als ZCLIP bezeichnet wird. Als API von JQuery führt Jquery Zeroclipboard auch sehr einfache Vorgänge aus. Die offizielle Adresse lautet: http://www.steamdev.com/zclip/
Vor der Verwendung müssen Sie sich auf 2 JS -Dateien beziehen: jquery.js und jquery.zclip.js
<skript type = "text/javaScript" src = "js/jquery.js"> </script> <script type = "text/javaScript" src = "js/jquery.zclip.js"> </script>
Jetzt verwenden wir jQuery.zclip.js, um die Kopie wie folgt einfach in die Demo der Zwischenablage zu implementieren:
<! DocType html> <html> <Head> <title> Zeroclipboard-Test </title> <meta charset = "utf-8"> <style type = "text/css">. Zeile {Margin-Bottom: 20px;}/* Eingabeaufforderung*/. -20px -80px; Hintergrundfarbe: RGBA (0, 0, 0, 0,2); Filter: progid: dimaTransform.microsoft.gradient (startcolorstr =#30000000, endcolorstr =#30000000); Padding: 6px;}. #F4D9A6;background-color:#FFFDEE;font-size:14px;}</style><script type="text/javascript" src="jquery.js"></script><script type="text/javascript" src="jquery.zclip.js"></script></head><body><div><h2>demo1 Click to copy the current Text </h2> <a href = "#keine"> Klicken Sie, um mich zu kopieren Typ = "text/javaScript"> $ (Dokument) .ready (function () {/* Definieren Sie alle Klassen als Kopier -Tags, und nach dem Klicken können Sie den Text des geklickten Objekts kopieren*/$ ("."). Maus*/$ (this) .css ("color", "orange");}, Aftercopy: function () {/*Betrieb nach erfolgreicher Kopie erfolgreich </div> </div> "); $ (" body "). find (". Kopier-Tipps "). REME (). End (). append ($ copySuc); "Zeroclipboard.swf", kopieren: function () {return $ (this) .Parent (). Find (". Eingabe"). Val ();}, Aftercopy: function () {/* Operation nach dem Kopieren von*/var $ copysuc = $ ("<Div class = 'Copy-Tips'> <divy = 'copy-tipps-wrap' erfolgreich </div> </div> "); $ (" body "). find (". Copy-Tips "). REMET (). End (). append ($ copysuc);Demo -Download (warme Erinnerung: Schüler, die den Code herunterladen, denken Sie daran, die Serverumgebung beim Surfen der Demo zu verwenden. Andernfalls gibt es keinen Effekt ~)
Der obige Code kombiniert die Funktionen der Operationsknoten von JQuery und spielt die Rolle von jQuery.zclip.js gut, z. B. vor und nach dem Kopieren, dynamisch Einfügen von Knoten. Es ist auch ersichtlich, dass die Kraft von jQuery.zclip.js sehr einfach zu verwenden ist. Wenn Sie mehr über die Funktionen von jquery.zclip.js erfahren müssen, gehen Sie bitte unter http://www.steamdev.com/zclip/.
Aus den oben genannten unabhängigen JS -Bibliotheken werden Zeroclipboard.js und jQuery.zclip.js beide Flash, um die Funktion des Kopierens in die Zwischenablage zu implementieren. Es ist ersichtlich, dass die Verwendung von Zeroclipboard.js relativ wenige Funktionen bringt, aber es handelt sich um eine unabhängige Bibliothek mit relativ kleinen Dateien. Die Funktionen nach der Verwendung von jQuery.zclip.js sind relativ reich. Für Websites, die das JQuery -Framework nicht verwenden, ist es jedoch eine Verschwendung von Breitbandverschwendung. Welche zu verwendende Kopiermethode hängt von der spezifischen Positionierung des Produkts ab ~
Das obige ist die JS -Implementierung von Kopierinhalten in die Zwischenablagefunktion, die der von Ihnen eingeführte Editor mit allen Browsern kompatibel ist (empfohlen). Ich hoffe, es wird für alle hilfreich sein. Wenn Sie Fragen haben, hinterlassen Sie mir bitte eine Nachricht und der Editor wird allen rechtzeitig antworten. Vielen Dank für Ihre Unterstützung auf der Wulin.com -Website!