Maison > Tutoriel CMS > WordPresse > le corps du texte

Comment partager le contenu sélectionné avec Sina Weibo dans Wordpress

藏色散人
Libérer: 2020-01-07 10:10:48
original
2523 Les gens l'ont consulté

Comment partager le contenu sélectionné avec Sina Weibo dans Wordpress

Comment partager le contenu sélectionné avec Sina Weibo dans WordPress ?

L'exemple de cet article décrit comment WordPress partage le contenu sélectionné avec Sina Tencent Weibo. Partagez-le avec tout le monde pour votre référence. La méthode spécifique est la suivante :

Recommandé : "tutoriel wordpress"

1. Présentez jQuery. Je crois que la plupart des blogs WordPress l'ont déjà fait. introduit jQuery. Ensuite, vous pouvez passer directement à la deuxième étape

2. En bas de la page, ou plus précisément, ajoutez ce morceau de JS après avoir introduit la bibliothèque jQuery, vous pouvez voir la même chose que ceci. site Cela fonctionne.

La fonction de sélection et de partage semble relativement avancée, mais en fait la mise en œuvre est assez simple. Le principe qui fait grossir la tête et qui n'intéresse pas la plupart des gens sera ignoré ici. ce texte js j'ai simplement encapsulé la fonction de partage sur Sina Weibo. Le nom de la méthode est : $sinaMiniBlogShare

L'exemple de code est le suivant :

Le code est le suivant :

var miniBlogShare = function() { 
//指定位置驻入节点 
$(&#39;<img id="imgSinaShare" class="img_share" title="将选中内容分享到新浪微博" src="1328255868614.gif" /><img id="imgQqShare" class="img_share" title="将选中内容分享到腾讯微博" src="/1328255868314.png" />&#39;).appendTo(&#39;body&#39;); 
//默认样式 
$(&#39;.img_share&#39;).css({ 
display : &#39;none&#39;, 
position : &#39;absolute&#39;, 
cursor : &#39;pointer&#39; 
}); 
//选中文字 
var funGetSelectTxt = function() { 
var txt = &#39;&#39;; 
if(document.selection) { 
txt = document.selection.createRange().text; 
} else { 
txt = document.getSelection(); 
} 
return txt.toString(); 
}; 
//选中文字后显示微博图标 
$(&#39;html,body&#39;).mouseup(function(e) { 
if (e.target.id == &#39;imgSinaShare&#39; || e.target.id == &#39;imgQqShare&#39;) { 
return 
} 
e = e || window.event; 
var txt = funGetSelectTxt(), 
sh = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop || 0, 
left = (e.clientX - 40 < 0) ? e.clientX + 20 : e.clientX - 40, 
top = (e.clientY - 40 < 0) ? e.clientY + sh + 20 : e.clientY + sh - 40; 
if (txt) { 
$(&#39;#imgSinaShare&#39;).css({ 
display : &#39;inline&#39;, 
left : left, 
top : top 
}); 
$(&#39;#imgQqShare&#39;).css({ 
display : &#39;inline&#39;, 
left : left + 30, 
top : top 
}); 
} else { 
$(&#39;#imgSinaShare&#39;).css(&#39;display&#39;, &#39;none&#39;); 
$(&#39;#imgQqShare&#39;).css(&#39;display&#39;, &#39;none&#39;); 
} 
}); 
//点击新浪微博 
$(&#39;#imgSinaShare&#39;).click(function() { 
var txt = funGetSelectTxt(), title = $(&#39;title&#39;).html(); 
if (txt) { 
window.open(&#39;http://v.t.sina.com.cn/share/share.php?title=&#39; + txt + &#39; —— 转载自:&#39; + title + &#39;&url=&#39; + window.location.href); 
} 
}); 
//点击腾讯微博 
$(&#39;#imgQqShare&#39;).click(function() { 
var txt = funGetSelectTxt(), title = $(&#39;title&#39;).html(); 
if (txt) { 
window.open(&#39;http://v.t.qq.com/share/share.php?title=&#39; + encodeURIComponent(txt + &#39; —— 转载自:&#39; + title) + &#39;&url=&#39; + window.location.href); 
} 
}); 
}();
Copier après la connexion

Vous pouvez voir $ La méthode sinaMiniBlogShare a deux paramètres, eleShare et eleContainer Parmi eux, le premier paramètre est obligatoire et fait référence à l'élément de calque flottant qui apparaît après la sélection du texte (dans la démo de cet article, il. est l'icône de l'œil Sina). Ce dernier paramètre fait référence au conteneur de sélection de texte, paramètre facultatif, s'il n'est pas défini, il fait référence à l'élément du document, c'est-à-dire que la sélection du texte de la page entière déclenchera la fonction de partage.

Supposons que le code HTML de l'icône de partage Sina Weibo soit le suivant :

Le code est le suivant :

<img id="imgSinaShare" class="img_sina_share" title="将选中内容分享到新浪微博" src="http://simg.sinajs.cn/blog7style/images/common/share.gif" />
Copier après la connexion

Utilisez directement le code suivant :

Le code est le suivant :

$sinaMiniBlogShare(document.getElementById("imgSinaShare"));
Copier après la connexion

J'espère que cet article sera utile à tout le monde dans la création d'un site Web WordPress.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Étiquettes associées:
source:php.cn
Déclaration de ce site Web
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
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal
À propos de nous Clause de non-responsabilité Sitemap
Site Web PHP chinois:Formation PHP en ligne sur le bien-être public,Aidez les apprenants PHP à grandir rapidement!