Redimensionnement de texte avec jQuery?

Question

Je trouve cette grande solution pour Redimensionnement texte sur place avec jQuery: http://dev-tips.com/featured/jquery-tip-quick-and-easy-font-resizing

fonctionne comme un charme, mais leur sont trois choses qu'il manque que j'ai besoin;

A.) Une option clic-droit 'return to default'. B.) Limites de redimensionnement (ie ne lui permettre d'être redimensionnée ou à deux reprises C) L'ajout de plusieurs éléments à la zone redimensionnable

Voici mon code modifié de l'exemple ci-dessus:

$(document).ready(function() { 
    //Text Zoom 
    $('.controls a').click(function(){ 
    var ourText = $('#content'); 
var currFontSize = ourText.css('fontSize'); 
var finalNum = parseFloat(currFontSize, 10); 
var stringEnding = currFontSize.slice(-2); 
    if(this.id == 'large') { 
    finalNum *= 1.2; 
    } 
    else if (this.id == 'small'){ 
    finalNum /=1.2; 
    } 
    ourText.css('fontSize', finalNum + stringEnding); 
}); 
    }); 

Cela fonctionne très bien moins ces 3 problèmes. Je sais "C". " Cela ne devrait pas être si difficile, mais je ne suis pas assez familier avec la syntaxe jQuery pour ajouter plus d'éléments à redimensionner que "# content". Je ne sais pas comment approcher l'autre 2. Le balisage pour les contrôles ressemble à ceci, comme vous pouvez le voir sur mon JS les petits et grands liens sont généralement ciblés avec "$ ('. Controls a'). Click (function() { ».

<ul id="textzoom"> 
<li class="controls"> 
    <a href="#" id="small" class="smaller" title="zoom out">-</a> 
    <a href="#" class="normal" id="orignal" title="zoom normal">AAA</a> 
    <a href="#" id="large" class="bigger" title="zoom in">+</a> 
</li> 
<li>...</li> 
</ul> 

Toute aide serait grandement appréciée.

Answer 1

pour a) et B), vous aurez besoin de stocker des informations dans une variable globale (une variable définie en dehors de la portée d'une fonction) . Il suffit de créer une variable "baseFontSize" pour stocker votre taille de police de réinitialisation et une variable "fontSizeDelta" que vous pouvez vérifier, en vérifiant qu'elle ne dépasse jamais "2" ou "-2". Vous devez ajouter une vérification à l'intérieur de votre fonction .click par rapport à fontSizeDelta (appelez le retour immédiatement s'il est à max ou min), ainsi que l'incrémenter ou le décrémenter si nécessaire. Si je comprends ce que vous demandez sur « C », juste cette ligne:

ourText.css('fontSize', finalNum + stringEnding); 

répété, mais en remplaçant « ourText » avec « $ (« # desired_element_id ») » où desired_element_id est, bien, l'id l'élément que vous voulez affecter.

Cela aide-t-il?