Maison >interface Web >js tutoriel >jQuery implémente la méthode de sélection de texte avec la souris pour publier sur Sina Weibo_jquery

jQuery implémente la méthode de sélection de texte avec la souris pour publier sur Sina Weibo_jquery

WBOYoriginal: 2016-05-16 15:06:541382parcourir

L'exemple de cet article décrit comment jQuery implémente le texte sélectionné par la souris à publier sur Sina Weibo. Partagez-le avec tout le monde pour votre référence, les détails sont les suivants :

J'ai récemment remarqué que Sina Blog a une petite fonction, c'est-à-dire que lorsque la souris sélectionne un morceau de texte, une petite image apparaîtra. Cliquez sur cette image pour envoyer le contenu sélectionné à Sina Weibo. a écrit une démo hier soir pour jouer avec. Jetez un oeil, le code est super simple et non optimisé. Les amis intéressés peuvent l'améliorer eux-mêmes.

Le principe est très simple, faites d'abord sélectionner le texte avec la souris, puis appelez la page fournie dans Sina Blog, et passez le texte en paramètre.

Le code est le suivant :

<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>

C'est aussi simple que cela, vous pouvez l'essayer vous-même. Bien sûr, il existe d'autres opérations pour obtenir le texte sélectionné. Ce n'est qu'une astuce pour appeler la page de Sina. Si vous êtes intéressé, vous pouvez créer votre propre application et la mettre en œuvre vous-même.

Les lecteurs intéressés par davantage de contenu lié à jQuery peuvent consulter les sujets spéciaux sur ce site : "Résumé des effets de glisser et des compétences JQuery", "Résumé des compétences de l'extension jQuery" , "Résumé des effets spéciaux classiques communs de JQuery", "Résumé de l'utilisation des animations et des effets spéciaux jQuery", "Résumé de l'utilisation du sélecteur jquery" et "jQuery plug-ins courants et résumé d'utilisation》

J'espère que cet article sera utile à tous ceux qui programment jQuery.

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：Exemples expliquant comment utiliser l'attribut state dans l'arborescence jQuery EasyUI avec Caution_jqueryArticle suivant：Exemples expliquant comment utiliser l'attribut state dans l'arborescence jQuery EasyUI avec Caution_jquery

Articles Liés

Voir plus