Увеличивайте и уменьшайте ограничение размера шрифта до максимального и минимального jQuery

0

У меня есть сценарий jQuery, который увеличивает или уменьшает размер шрифта и высоту строки моих сайтов CSS.

Я хочу, чтобы размер увеличения был ограничен тремя щелчками, а размер уменьшения использовался только после того, как была нажата ссылка увеличения размера. Так что размер по умолчанию не может быть уменьшен, поэтому размер минимального уменьшения - размер по умолчанию.

Если пользователь изменяет размер шрифта и переходит на другую страницу на сайте, я бы хотел, чтобы отображался "новый размер". т.е. размер шрифта не возвращается к размеру по умолчанию.

Следующий скрипт увеличивает и уменьшает размер шрифта и высоту строки:

(function ($) {
    $.fn.fontResize = function (options) {
        var settings = {
            increaseBtn: $('#incfont'),
            decreaseBtn: $('#decfont')
        };
        options = $.extend(settings, options);
        return this.each(function () {
            var element = $(this);
            options.increaseBtn.on('click', function (e) {
                e.preventDefault();
                var baseFontSize = parseInt(element.css('font-size'));
                var baseLineHeight = parseInt(element.css('line-height'));
                element.css('font-size', (baseFontSize + 2) + 'px');
                element.css('line-height', (baseLineHeight + 2) + 'px');
            });
            options.decreaseBtn.on('click', function (e) {
                e.preventDefault();
                var baseFontSize = parseInt(element.css('font-size'));
                var baseLineHeight = parseInt(element.css('line-height'));
                element.css('font-size', (baseFontSize - 2) + 'px');
                element.css('line-height', (baseLineHeight - 2) + 'px');
            });
        });
    };
})(jQuery);
$(function () {
    $('body,h1,h2,h3,h4,h5,h6,p,ul,ol,a,input').fontResize();
});

Я создал jsfiddle для этого: http://jsfiddle.net/Lv2x4/

  • 2
    Если пользователь переходит со страницы, конфигурация не будет сохранена. Вы используете JS в настоящее время в качестве клиентской стороны. Если вы хотите, чтобы он был сохранен, используйте localStorage, sessionStorage или куки.
  • 1
    Кроме того, я мог бы также предложить написать свой CSS, чтобы использовать ems / rems / процентные значения относительно размера шрифта в теге html (по умолчанию это задается браузером), что позволит вам изменить размер шрифта за один раз. Поместите и измените весь ваш дизайн и макет относительно этого единого размера. Намного более отзывчивый :)
Теги:
fonts
font-size

4 ответа

2
Лучший ответ

Вы можете использовать переменную, чтобы отслеживать, где вы находитесь, размер шрифта увеличивается и уменьшается. Вот пересмотренная версия вашей скрипки и код:

(function ($) {
    $.fn.fontResize = function(options){
    var increaseCount = 0;
    var self = this;

    var changeFont = function(element, amount){
      var baseFontSize = parseInt(element.css('font-size'), 10);
      var baseLineHeight = parseInt(element.css('line-height'), 10);
      element.css('font-size', (baseFontSize + amount) + 'px');
      element.css('line-height', (baseLineHeight + amount) + 'px');
    };

    options.increaseBtn.on('click', function (e) {
      e.preventDefault();
      if(increaseCount === 3){ return; }
      self.each(function(index, element){
        changeFont($(element), 2);
      });
      increaseCount++;
        });

    options.decreaseBtn.on('click', function (e) {
      e.preventDefault();
      if(increaseCount === 0){ return; }
      self.each(function(index, element){
        changeFont($(element), -2);
      });
      increaseCount--;
    });
  }
})(jQuery);

$(function () {
    $('body,h1,h2,h3,h4,h5,h6,p,ul,ol,a,input').fontResize({
    increaseBtn: $('#incfont'),
    decreaseBtn: $('#decfont')
  });
});

http://jsfiddle.net/Lv2x4/7/

Я также сделал fontResize передать кнопки во время вызова, что имеет больше смысла, если вы пытаетесь создать это как компонент jQuery. Кроме того, поскольку логика изменения размера шрифта - это повторение кода, я разделял его на свою собственную функцию, поэтому вы не повторяетесь.

РЕДАКТИРОВАТЬ: кричит, перепрыгивает часть, которую вы хотели настойчивости! Это достаточно легко через localStorage. Нажмите здесь.

http://jsfiddle.net/Lv2x4/9/

Поделиться
  • 0
    Второй вариант вызвал странные размеры шрифтов, когда я перешел на другую страницу. Все шрифты были меньше, чем по умолчанию, хотя я их увеличил
  • 1
    Это довольно странная проблема, которую трудно отладить в jsFiddle. По какой-то причине при обновлении страницы используется значение localStorage.increaseCount . Исправление здесь, но я думаю, что это проблема jsfiddle. jsfiddle.net/Lv2x4/11
0

демонстрация

Код JavaSript я изменен:

return this.each(function () {
  var element = $(this),
      clicks = 0; // add a clicks counter

  options.increaseBtn.on('click', function (e) {
    e.preventDefault();
    if (clicks < 3) { // make sure limit is not exceeded
      var baseFontSize = parseInt(element.css('font-size'));
      var baseLineHeight = parseInt(element.css('line-height'));
      element.css('font-size', (baseFontSize + 2) + 'px');
      element.css('line-height', (baseLineHeight + 2) + 'px');
      clicks += 1; // increase by 1
    }
  });

  options.decreaseBtn.on('click', function (e) {
    e.preventDefault();
    if (clicks > 0) { // make sure there are clicks left
      var baseFontSize = parseInt(element.css('font-size'));
      var baseLineHeight = parseInt(element.css('line-height'));
      element.css('font-size', (baseFontSize - 2) + 'px');
      element.css('line-height', (baseLineHeight - 2) + 'px');
      clicks -= 1; // decrease number of clicks left
    }
  });

Это сработает. Но для хранения пользовательских настроек вам придется использовать localstorage, sessionStorage или файлы cookie.

Поделиться
  • 0
    Это хорошо работает, мне просто нужно выяснить, как использовать его с плагином cookie, предложенным @rodaine.
0

используйте две переменные var incr = 0; var decr = 0; и если условие ограничить ваш размер шрифта до трех щелчков, а также рассмотреть одну вещь, когда вы нажимаете кнопку, если нажата другая кнопка, вам нужно уменьшить значение другой переменной, чтобы вы всегда получали три клика для увеличения/уменьшения размера шрифта. (jsfiddle link РАБОТА....)

            options.increaseBtn.on('click', function (e) {
            e.preventDefault();
            var baseFontSize = parseInt(element.css('font-size'));
            var baseLineHeight = parseInt(element.css('line-height'));

            if(incr<3){
            element.css('font-size', (baseFontSize + 2) + 'px');
            element.css('line-height', (baseLineHeight + 2) + 'px');
            incr++;                
            if(decr>0)
            {decr--;  }
            }
        });
            options.decreaseBtn.on('click', function (e) {
            e.preventDefault();
            var baseFontSize = parseInt(element.css('font-size'));
            var baseLineHeight = parseInt(element.css('line-height'));

            if(decr<3){
            element.css('font-size', (baseFontSize - 2) + 'px');
            element.css('line-height', (baseLineHeight - 2) + 'px');
            decr++;
            if(incr>0)
            {incr--; }

        }
        });
Поделиться
  • 0
    работает хорошо ....
0

Без бэкэнд для сохранения пользовательских настроек вам нужно будет использовать cookie, sessionStorage или localStorage для сохранения настроек в браузере.

Здесь довольно приличный плагин jquery для CRUD файлов cookie.

Поделиться

Ещё вопросы

Сообщество Overcoder
Наверх
Меню