Изменение размера текста с помощью jQuery? - PullRequest
Новая
       1

Изменение размера текста с помощью jQuery?

0 голосов
/ 05 августа 2010

Я нашел это отличное решение для изменения размера текста на месте с помощью jQuery: http://dev -tips.com / featured / jquery-tip-quick-and-easy-resizeting font

Работает как брелок, но мне не хватает трех вещей, которые мне не нужны;

A.) Опция щелчка мышью «вернуться к умолчанию».B.) Ограничения на изменение размера (т. Е. Позволяют изменять его только в два или более раза.) Добавление нескольких элементов в область с изменяемыми размерами

Вот мой измененный код из приведенного выше примера: 

 $(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);
 });
   });

Прекрасно работает без этих 3 проблем.Я знаю "С)."не должно быть так сложно, но я просто недостаточно знаком с синтаксисом jQuery, чтобы добавить больше элементов для изменения размера, чем просто #content.Не уверен, как подойти к другому 2. Разметка для элементов управления выглядит следующим образом, как вы можете видеть из моего JS, для маленьких и больших ссылок обычно указывается "$ ('. 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>

Любая помощь будет принята с благодарностью.

1 Ответ

0 голосов
/ 05 августа 2010

Для A) и B) вам нужно хранить информацию в глобальной переменной (переменной, определенной вне области действия функции). Просто создайте переменную «baseFontSize» для хранения размера шрифта сброса и переменную «fontSizeDelta», которую вы можете проверить, убедившись, что она никогда не превышает «2» или меньше «-2». Вы бы добавили проверку внутри вашей функции .click против fontSizeDelta (вызывая return немедленно, если она равна max или min), а также увеличивали или уменьшали ее по мере необходимости. Если я понимаю, что вы спрашиваете на «С», это просто строка: 

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

повторяется, но заменяет "ourText" на "$ ('# required_element_id')", где required_element_id, ну, в общем, идентификатор элемента, на который вы хотите повлиять.

Это помогает?

...