Блог

Я нахожусь в процессе создания сайта, который позволит пользователю выбирать несколько цветовых схем (для дальтонизма), но также должен быть масштабируемым. Поскольку изображение также должно увеличиваться, у меня нет другого способа сделать это, кроме как сохранить все изображения на странице (невозможно контролировать размер фонового изображения ниже IE8).

Это привело меня к этому коду, который добавляет префикс ко всем изображениям на ТЕКУЩЕЙ странице

 $(function() {
    $('img.swap').each(function(){     
    $(this).data('current_image', this.src);     
}) 
$('a').click(function(){          
        var prefix = $(this).attr("class");       
         $('img.swap').each(       
         function() {           
            if($(this).data('prefix') != prefix){            
            this.src = $(this).data('current_image').replace('.gif', (prefix) '.gif');
            $(this).data('prefix', prefix)          
    }         
     else {            
     this.src = $(this).data('current_image');           
      $(this).data('prefix', '')          
      }       
       });  
      }); 
 });
  

Проблема возникает, когда пользователь нажимает на ссылку, новая страница не запоминает префикс, которым должны быть изображения (цветовая схема).

Вопрос в том, есть ли какой-либо способ сделать это так, чтобы при нажатии на определенный цвет он запоминался по всему сайту? Если нет, есть ли какой-либо способ контролировать размер фонового изображения CSS до ie9?

Большое спасибо

Джон

Предполагая, что вы хотите делать все на стороне клиента, сохраните значение цветовой схемы в строке запроса:

     var _colorScheme;

    function getQueryStringParam(paramName) {
        queryString = window.location.search.substring(1);
        queryStringParams = queryString.split("amp;");

        for(i=0;i<queryStringParams.length;i  ) {
             param = queryStringParams[i].split("=");
             if (param[0] == paramName)
                   return param[1];
        }
    }

    $(document).ready(function() {
        _colorScheme = getQueryStringParam("color");
    });


$('a').click(function(){          
        var prefix = $(this).attr("class");   

         $('img.swap').each(       
         function() {           
            if($(this).data('prefix') != prefix){            
            this.src = $(this).data('current_image').replace('.gif', (prefix) '.gif');
            $(this).data('prefix', prefix);

            // remember the new color scheme
            _colorScheme = prefix;
    }         
     else {            
     this.src = $(this).data('current_image');           
      $(this).data('prefix', '')          
      }       
       });  
      }); 

         // attach querystring to link's href attribute so that it is passed to the next page
        var href = $(this).attr('href');
        $(this).attr('href', href   '?color='   prefix);
 });
  

Теперь, когда у вас есть _colorScheme настройка на document ready, вы можете использовать это для установки префиксов изображений. В то же время вам нужно будет использовать jquery для выбора каждой ссылки и прикрепления строки запроса к их тегам href. Например, <a href="page.html"> станет <a href="page.html?color=red"> .

Лучшей альтернативой является сохранение цветовой схемы в переменной сеанса, что возможно с помощью серверных сценариев на php, asp или .net.