search

Home >Web Front-end >JS Tutorial >jQuery implements the method of selecting text with the mouse to post on Sina Weibo_jquery

jQuery implements the method of selecting text with the mouse to post on Sina Weibo_jquery

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

The example in this article describes how jQuery implements mouse-selected text to post on Sina Weibo. Share it with everyone for your reference, the details are as follows:

I recently noticed that Sina Blog has a small function, that is, when the mouse selects a piece of text, a small picture will appear. Click on this picture to send the selected content to Sina Weibo. On a whim, I wrote a demo last night to play with. Take a look, the code is super simple and not optimized. Friends who are interested can improve it themselves.

The principle is very simple, first get the mouse to select the text, then call the page provided in Sina Blog, and pass the text as a parameter.

The code is as follows: 

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

It’s that simple, you can try it yourself. Of course, there are other operations to get the selected text. This is just a trick to call Sina's page. If you are interested, you can create your own application and implement it yourself.

Readers who are interested in more jQuery-related content can check out the special topics on this site: "JQuery drag effects and techniques summary", "jQuery extension techniques summary", "JQuery common classic special effects summary", "jQuery animation and special effects usage summary", "jquery selector usage summary" and "jQuery common plug-ins and usage Summary》

I hope this article will be helpful to everyone in jQuery programming.

Statement：
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Previous article：Examples explaining how to use the state attribute in jQuery EasyUI tree with caution_jqueryNext article：Examples explaining how to use the state attribute in jQuery EasyUI tree with caution_jquery

Related articles

See more