Explication détaillée de la façon d'utiliser le plug-in texte jquery.dotdotdot.js

Cet article présente principalement l'explication détaillée de la façon d'utiliser le plug-in de débordement de texte jquery.dotdotdot.js. Les amis dans le besoin peuvent s'y référer. J'espère que cela pourra aider tout le monde.

Adresse de téléchargement du plug-in : https://github.com/FrDH/jQuery.dotdotdot

Présentation de jQuery.js et jquery.dotdotdot.js

<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery.dotdotdot.js"></script>

Définissez une largeur et une hauteur pour l'élément contenant du texte. Lorsque le texte dépasse cette hauteur, l'effet sera déclenché

se transforme en points de suspension : .

<p class="box" style="width:300px;height:100px;">
 测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试
</p>
<script type="text/javascript">
 $(function(){ 
  $(".box").dotdotdot(); 
 })  
</script>

Il existe des ellipses et du contenu personnalisé :

<p class="box02" style="width:300px;height:100px;">
 测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试
 <span style="color:#ff0000;"><a style="color: #F4606C">read more</a></span>
</p>
<script type="text/javascript">
 $(function(){ 
  $(".box02").dotdotdot({ 
   after: &#39;a&#39; 
  }); 
 });
</script>

Il y a des boutons développer/réduire :

<p class="box03" style="width:300px;height:100px;">
 测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试
</p>
<style type="text/css">
.opened{height: auto;} 
.toggle .close,.opened .toggle .open{display: none;} 
.toggle .opened,.opened .toggle .close{display: inline;} 
</style>

<script type="text/javascript">
 var $dot = $(&#39;.box03&#39;);
 $dot.append( &#39; <a class="toggle" href="#" rel="external nofollow" ><span class="open">[ + ]</span><span class="close">[ - ]</span></a>&#39; );
 function createDots()
 {
  $dot.dotdotdot({ 
   after: &#39;a.toggle&#39; 
  });
 }
 function destroyDots() {
  $dot.trigger( &#39;destroy&#39; );
 }
 createDots();
 $dot.on( 
   &#39;click&#39;, 
   &#39;a.toggle&#39;, 
   function() {
    $dot.toggleClass( &#39;opened&#39; );
    if ( $dot.hasClass( &#39;opened&#39; ) ) {
     destroyDots(); 
    } else {
     createDots(); 
    }
    return false; 
   }
 );
</script>

Recommandations associées :

Partage d'exemples d'implémentation du plugin Jquery canvaspercent.js de pourcentage d'effet de gâteau rond

Plug-in JQuery DataTables partage de technologie de développement de pagination

Explication détaillée du plug-in jquery jquery.viewport.js

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!