Rumah >hujung hadapan web >tutorial js >jQuery melaksanakan kaedah memilih teks dengan tetikus untuk disiarkan pada Sina Weibo_jquery

jQuery melaksanakan kaedah memilih teks dengan tetikus untuk disiarkan pada Sina Weibo_jquery

WBOYasal: 2016-05-16 15:06:541386semak imbas

Contoh dalam artikel ini menerangkan cara jQuery melaksanakan teks yang dipilih tetikus untuk disiarkan di Sina Weibo. Kongsikan dengan semua orang untuk rujukan anda, butirannya adalah seperti berikut:

Baru-baru ini saya perasan bahawa Sina Blog mempunyai fungsi kecil, iaitu apabila tetikus memilih sekeping teks, gambar kecil akan muncul Klik pada gambar ini untuk menghantar kandungan yang dipilih ke Sina Weibo menulis demo malam tadi untuk bermain. Sila lihat, kod itu sangat mudah dan tidak dioptimumkan. Rakan yang berminat boleh memperbaikinya sendiri.

Prinsipnya sangat mudah, mula-mula dapatkan tetikus untuk memilih teks, kemudian panggil halaman yang disediakan dalam Sina Blog, dan hantar teks sebagai parameter.

Kod adalah seperti berikut:

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

Semudah itu, anda boleh mencubanya sendiri. Sudah tentu, terdapat operasi lain untuk mendapatkan teks yang dipilih Ini hanyalah helah untuk menghubungi halaman Sina Jika anda berminat, anda boleh membuat aplikasi anda sendiri dan melaksanakannya sendiri.

Pembaca yang berminat dengan lebih banyak kandungan berkaitan jQuery boleh menyemak topik khas di tapak ini: "Kesan seret JQuery dan ringkasan kemahiran", "ringkasan kemahiran sambungan jQuery" , "ringkasan kesan khas klasik biasa JQuery", "animasi jQuery dan ringkasan penggunaan kesan khas", "ringkasan penggunaan pemilih jquery" dan "jQuery pemalam biasa dan ringkasan penggunaan》

Saya harap artikel ini akan membantu semua orang dalam pengaturcaraan jQuery.

Kenyataan：

Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn

Artikel sebelumnya：Contoh yang menerangkan cara menggunakan atribut keadaan dalam pepohon EasyUI jQuery dengan caution_jqueryArtikel seterusnya：Contoh yang menerangkan cara menggunakan atribut keadaan dalam pepohon EasyUI jQuery dengan caution_jquery

Artikel berkaitan

Lihat lagi