Forum PHP.pl > ajax - podmiana arkusza styli do strony

Pomoc - Szukaj - Użytkownicy - Kalendarz

Pełna wersja: ajax - podmiana arkusza styli do strony

Dobrek Kropielnicki

11.05.2006, 10:05:26

witam,
probuje rozwiazac nastepujacy problem:

strona posiada pewna czesc wspolnych styli (pojedynczy plik css) oraz kilka skorek (osobne arkusze styli) - zalaczenie ich wszystkich jako styli alternatywnych i ich podmiana przy pomocy techniki opisanej na http://www.alistapart.com/articles/alternate/ lub przy pomocy mechanizmu http://24ways.org/advent/introducing-udasss nie za bardzo wchodzi w gre - ograniczenie wynika z wagi poszczegolnych skorek kazda z nich to ok 100kB do zaladownia

rozwiazanie ktore działa ale niestety nie waliduje sie

to dynamiczne umieszczenie w tresci strony (gdzies w sekcji body) tagu <link> z odwolaniem do dolaczanego arkusza styli

czy ktos z Was mial juz do czynienia z taka sytuacja ? macie jakies pomysly jak to rozwiazac ?

pozdrawiam
dobrek

bigZbig

29.05.2006, 12:42:43

Możesz stworzyć w sekcji head taga np. <style id="mycss" type="text/css">, a później załadować do niego dane tekstowe przy pomocy AJAXA, tak jakbyś to robił z każdym innym divem czy spanem w sekcji body.

Pomysł ten został wykorzystany na stronie Generator kolorowania składni. Niestety technika ta nie działa w IE.

TomASS

29.05.2006, 13:49:00

Do tego wcale nie jest potrzebny AJAX - ja to mam zrobione tak:

[HTML] pobierz, plaintext 
<link rel="Stylesheet" href="./style/style.css" type="text/css">
<link rel="Stylesheet" href="./style/red.css" type="text/css">
<link rel="Stylesheet" href="./style/green.css" type="text/css">
<link rel="Stylesheet" href="./style/blue.css" type="text/css">
<link rel="Stylesheet" href="./style/yellow.css" type="text/css">
[HTML] pobierz, plaintext

Gdzie pierwszy ze styli jest wspolnym stylem, a później mam funkcję JS:

[HTML] pobierz, plaintext 
<script>
function selectCSS(numer){
	for(i=1;i<document.styleSheets.length;i++){
		document.styleSheets[i].disabled=true;
	}
	document.styleSheets[numer].disabled=false;
}
</script>
[HTML] pobierz, plaintext

bigZbig

29.05.2006, 14:34:32

No tak ale niezaleznie od tego ktorego arkusza styli uzywasz musisz za kazdym razem zaladowac wszystkie. Moj sposob umozliwia doladowanie definicji styli w zaleznosci od potrzeb. Widze zastosowanie przy pisaniu pluginow, modulow itp. Pytanie moje brzmi czy mozna to jakos zaimplementowac dla IE?

-- edit --
@TomASS - a tak w ogole to masz racje - do tego nie jest potrzebny AJAX tylko js, ktory zaktualizuje nam DOM

bigZbig

30.05.2006, 09:28:53

Okazuje sie ze dla IE tez moze dzialac

Kod

<html><head>
  <link rel="stylesheet" id="myStylesheet" href="./red.css" type="text/css" />
  <script type="text/javascript">

// prototype StyleManger {
  function StyleManager() {
    this.varsion = '1.0';
  }

  StyleManager.prototype.changeStylesheet = function(url) {
    this.removeStylesheet();
    this.addStylesheet(url);
  }

  StyleManager.prototype.addStylesheet = function(url) {
    var head = document.getElementsByTagName('head')[0];
    var link = document.createElement('link');
    link.id = 'myStylesheet'
    link.rel = 'stylesheet';
    link.type = 'text/css';
    link.href = url;
    head.appendChild(link);
  }

  StyleManager.prototype.removeStylesheet = function() {
    var head = document.getElementsByTagName('head')[0];
    var link = document.getElementById('myStylesheet');
    if(link) {
      head.removeChild(link);
    }
  }
// }
  StyleManager = new StyleManager();

  </script>

</head>
<body>
  <form action="" method="POST">
    <select onchange="StyleManager.changeStylesheet(this.value)">
      <option value="./red.css">red</option>
      <option value="./yellow.css">yellow</option>
      <option value="./green.css">green</option>
    </select>
  </form>
  <h1>PRÓBA</h1>
</body></html>

To jest wersja lo-fi głównej zawartości. Aby zobaczyć pełną wersję z większą zawartością, obrazkami i formatowaniem proszę kliknij tutaj.