suchen

Heim >Web-Frontend >js-Tutorial >jQuery implementiert die Methode zum Auswählen von Text mit der Maus, um ihn auf Sina Weibo_jquery zu posten

jQuery implementiert die Methode zum Auswählen von Text mit der Maus, um ihn auf Sina Weibo_jquery zu posten

WBOY
WBOYOriginal
2016-05-16 15:06:541386Durchsuche

Das Beispiel in diesem Artikel beschreibt, wie jQuery mit der Maus ausgewählten Text zum Posten auf Sina Weibo implementiert. Teilen Sie es als Referenz mit allen. Die Details lauten wie folgt:

Mir ist kürzlich aufgefallen, dass Sina Blog eine kleine Funktion hat, das heißt, wenn die Maus einen Text auswählt, wird ein kleines Bild angezeigt, um den ausgewählten Inhalt aus einer Laune heraus an Sina Weibo zu senden Habe gestern Abend eine Demo zum Spielen geschrieben, der Code ist super einfach und nicht optimiert. Freunde, die interessiert sind, können ihn selbst verbessern.

Das Prinzip ist sehr einfach: Wählen Sie zuerst mit der Maus den Text aus, rufen Sie dann die in Sina Blog bereitgestellte Seite auf und übergeben Sie den Text als Parameter.

Der Code lautet wie folgt: 

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
  <title></title>
  <style type="text/css">
    .tooltip
    {
      width:120px;
      height:23px;
      line-height:23px;
      background-color:#CCCCCC;
    }
    .tooltip a
    {
      color: #333333;
      display: block;
      font-size: 12px;
      font-weight: bold;
      text-indent: 10px;
    }
  </style>
  <script src="jquery.min.js"></script>
  <script type="text/javascript">
    $(function () {
      $("#blogContent").mouseup(function (e) {
        var x = 10;
        var y = 10;
        var r = "";
        if (document.selection) {
          r = document.selection.createRange().text;
        }
        else if (window.getSelection()) {
          r = window.getSelection();
        }
        if (r!= "") {
          var bowen = "发送到新浪微博";
          var tooltip = "<div id='tooltip' class='tooltip'><a onclick=ask('"+r+"')>" + bowen + "</a></div>";
          $("body").append(tooltip);
          $("#tooltip").css({
            "top": (e.pageY + y) + "px",
            "left": (e.pageX + x) + "px",
            "position": "absolute"
          }).show("fast");
        }
      }).mousedown(function () {
        $("#tooltip").remove();
      });
    })
    function ask(r) {
      if (r != "") {
        window.open('http://v.t.sina.com.cn/share/share.php&#63;searchPic=false&title='+r+'&url=http://www.nowwamagic.net&sourceUrl=http%3A%2F%2Fblog.sina.com.cn&content=utf-8&appkey=1617465124', '_blank', 'height=515, width=598, toolbar=no, menubar=no, scrollbars=auto, resizable=yes, location=no, status=yes');
      }
    }
  </script>
</head>
<body>
  <div id="blogContent">
    words words words words words words words words words。
  </div>
</body>
</html>

So einfach ist das, Sie können es selbst ausprobieren. Natürlich gibt es auch andere Vorgänge, um den ausgewählten Text abzurufen. Dies ist nur ein Trick, um Sinas Seite aufzurufen. Wenn Sie interessiert sind, können Sie Ihre eigene Anwendung erstellen und diese selbst implementieren.

Leser, die an weiteren jQuery-bezogenen Inhalten interessiert sind, können sich die speziellen Themen auf dieser Website ansehen: „Zusammenfassung der Drag-Effekte und Fähigkeiten von JQuery“, „Zusammenfassung der Fähigkeiten der jQuery-Erweiterung“ , „Zusammenfassung der allgemeinen klassischen JQuery-Spezialeffekte“, „Zusammenfassung der Verwendung von jQuery-Animationen und Spezialeffekten“, „Zusammenfassung der Verwendung des JQuery-Selektors“ und „jQuery Allgemeine Plug-Ins und Nutzungsübersicht》

Ich hoffe, dass dieser Artikel für alle hilfreich ist, die sich mit der jQuery-Programmierung befassen.

Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：Beispiele zur Erläuterung der Verwendung des Statusattributs im jQuery EasyUI-Baum mit warning_jqueryNächster Artikel：Beispiele zur Erläuterung der Verwendung des Statusattributs im jQuery EasyUI-Baum mit warning_jquery

In Verbindung stehende Artikel

Mehr sehen