jQueryは新浪Weibo_jqueryに投稿するテキストをマウスで選択するメソッドを実装します-jsチュートリアル-php.cn

jQueryは新浪Weibo_jqueryに投稿するテキストをマウスで選択するメソッドを実装します

WBOY

リリース： 2016-05-16 15:06:54

オリジナル

1384 人が閲覧しました

この記事の例では、jQuery がマウスで選択されたテキストを実装して新浪微博に投稿する方法を説明します。参考のために皆さんと共有してください。詳細は次のとおりです:

最近、新浪ブログには小さな機能があることに気づきました。つまり、マウスでテキストを選択すると、小さな画像が表示され、選択したコンテンツが新浪微博に送信されます。昨夜デモを書いて遊んでみました。コードは非常にシンプルで最適化されていませんので、興味のある方は自分で改良してみてください。

原理は非常に簡単です。まずマウスでテキストを選択し、次に Sina Blog で提供されているページを呼び出し、テキストをパラメータとして渡します。

コードは次のとおりです:

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

ログイン後にコピー

とても簡単なので、自分で試してみることができます。もちろん、選択したテキストを取得するための操作は他にもあります。これは Sina のページを呼び出すためのトリックです。興味がある場合は、独自のアプリケーションを作成して実装することもできます。

さらに jQuery 関連のコンテンツに興味のある読者は、このサイトの特別トピック「JQuery ドラッグ効果とスキルの概要」、「jQuery 拡張機能のスキルの概要」をチェックしてください。、「jQuery共通古典特撮まとめ」、「jQueryアニメーション・特撮使い方まとめ」、「jQueryセレクター使い方まとめ」、「jQuery」一般的なプラグインと使い方のまとめ》

この記事が jQuery プログラミングのすべての人に役立つことを願っています。