Кожи/тема своп


Тема-поменять функциональность будет сделано через более привлекательную

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

Я собираюсь сделать пять разных темах, каждый в двух размерах, так как сайт очень плохо в 800х600 и все еще довольно плохо в 1024х768.

Дайте мне знать, если он ломается или просто не работает. Я заметил баг, что случается раз в Голубой Луны, но я думаю, что это потому, что браузер может делать параллельную работу и один скрипт получает слишком далеко вперед. Мне придется исследовать его более, но я думаю, что это достаточно хорошо, чтобы попросить мнения.

Страницы в конечном итоге отображения через

Пожалуйста, включите JavaScript!

Как это работает:

  1. Без JavaScript страница отображается с
  2. Если JavaScript включен, загружает тему-предпочтение с печеньем.
  3. В JavaScript затем применяет популярные темы через AJAX получение соответствующей теме (кожа[х].формате HTML) и содержание страницы ([page_name.html]).

Код еще не идеален, и я определенно должны удалить использовать образ другого человека в качестве фона для вторая кожа, но это почти сделано. Около половины кода занимается лишь перемещать элементы при изменении размеров окна. Для краткости, некоторые код не отображается. Я прошу прощения за ее длину.

index.html:

<script type="text/javascript"> 
window.onresize = function() { setContentPositions(); setJSMenuPositions(); }
$('html').addClass('js');
</script> 



<script type="text/javascript"> 
$().ready(function() {

getThemeInfo();

AJAX_LoadResponseIntoElement("mybody", "skin1.txt", function() {
  AJAX_LoadResponseIntoElement("contentdiv", "index.txt", initPage);
  });


if (themeSelect>1) { themeSwapNoInc();}

});
</script> 

funcs.js:

function getThemeInfo()
{
themeSelect=checkCookie();
}

function themeSwap()
{
  themeSelect++;
  if (themeSelect>2 || themeSelect<1) {themeSelect=1;}
  $('html').addClass('js');

  switch(themeSelect) {
    case 1:
      AJAX_LoadResponseIntoElement("mybody", "skin1.txt", function() {
        AJAX_LoadResponseIntoElement("contentdiv", "index.txt", initPage);
        });

      document.body.style.backgroundImage="url(http://www.solarcoordinates.com/images/bg2b.png)";
      document.body.style.backgroundRepeat="repeat-x";

      break;

    case 2:
      AJAX_LoadResponseIntoElement("mybody", "skin2.txt", function() {
        AJAX_LoadResponseIntoElement("contentdiv", "index.txt", initPage);
        });

      document.body.style.backgroundImage="url(http://www.constantcollide.com/wp-content/themes/killerbrown/images/texture.jpg)";
      document.body.style.backgroundRepeat="repeat";

      break;
  }

  setCookie("themeSelection",themeSelect,365);

}



function themeSwapNoInc()
{  
  themeSelect--;
  themeSwap();
}



function initPage()
{
    $('#vertnav .kwicks').kwicks({
        defaultKwick:0,
        max : 205,
        spacing : 3,
        isVertical : true
    });

setContentPositions();
replaceCSSMenu();
showContainer();
setJSMenuPositions();

}



function showContainer()
{
    $('html').removeClass('js');
}


function AJAX_LoadResponseIntoElement (elementId, fetchFileName, cfunc) {
  var XMLHRObj;
  if (window.XMLHttpRequest) { XMLHRObj=new XMLHttpRequest(); }
    else { XMLHRObj=new ActiveXObject("Microsoft.XMLHTTP"); }

  XMLHRObj.onreadystatechange=function()
    {
    if (XMLHRObj.readyState==4 && XMLHRObj.status==200)
      {
      document.getElementById(elementId).innerHTML=XMLHRObj.responseText;
      cfunc();
      }
    }
  XMLHRObj.open("GET",fetchFileName,true);
  XMLHRObj.send();
}


function findLeft(obj) {
  var curleft = 0;

  if (obj.offsetParent) { do {curleft += obj.offsetLeft;} while (obj = obj.offsetParent);} 
  else { curleft += obj.offsetLeft; }

  return curleft;
}


function findTop(obj) {
   var curtop = 0;

  if (obj.offsetParent) { do {curtop += obj.offsetTop;} while (obj = obj.offsetParent);}
  else { curtop += obj.offsetTop; }

  return curtop;
}


function findmyparent(e) {
    var srcElement = e.srcElement ? e.srcElement : e.target;

    if (srcElement.className.search("jsmenu")==-1 && srcElement.className.search("kwick")==-1 && srcElement.className!="vertnav" && srcElement.className!="active") 
    { 
        document.getElementById("jsmenu" + lastindex).style.display="none";
        submenuvisible=false;
    } 
}


function getContentHeight() { return window.innerHeight; }

function getContentWidth() { return window.innerWidth; }

function setContentPositions() {


  var DOMheight = getContentHeight()? getContentHeight(): window.document.body.parentElement.clientHeight;
  var DOMwidth = getContentWidth()? getContentWidth(): window.document.body.parentElement.clientWidth;

  var y_lbound, x_lbound, x_ubound;
  var container_ymod, container_ymin;
  var container_xmod, container_xmax, container_xmin;
  var content_xmod, content_xmax, content_xmin;


switch (themeSelect) {

  case 1:

    y_lbound=727;
    x_lbound=910;
    x_ubound=1400;

    container_ymod=-240;
    container_ymin=487;

    container_xmod=-240;
    container_xmax=1160;
    container_xmin=670;

    content_xmod=-490;
    content_xmax=910;
    content_xmin=420;


    break;

  case 2:

    y_lbound=710;
    x_lbound=910;
    x_ubound=1400;

    container_ymod=-178;
    container_ymin=532;

    container_xmod=-300;
    container_xmax=1100;
    container_xmin=610;

    content_xmod=-350;
    content_xmax=1050;
    content_xmin=560;



    break;

  default:


} // end switch



    if (DOMheight > y_lbound) {  document.getElementById('containerdiv').style.height = (DOMheight+container_ymod) + 'px';   }
      else { document.getElementById('containerdiv').style.height = container_ymin + 'px'; }

    if (DOMwidth > x_lbound) {
        if (DOMwidth < x_ubound) {
            document.getElementById('containerdiv').style.width = (DOMwidth+container_xmod) + 'px';
            document.getElementById('contentdiv').style.width = (DOMwidth+content_xmod) + 'px'; 
        } else {
            document.getElementById('containerdiv').style.width = container_xmax +'px';
            document.getElementById('contentdiv').style.width = content_xmax + 'px'; 
        }
    } else {
        document.getElementById('containerdiv').style.width = container_xmin + 'px';
        document.getElementById('contentdiv').style.width = content_xmin + 'px'; 
    }



}

jsmenucontent.js:

function setJSMenuPositions()
{
    var popupleft = findLeft(document.getElementById('kwick1'))+168;
    var popuptop = findTop(document.getElementById('kwick1'));

    document.getElementById('jsmenu0').style.left = popupleft + "px";
    document.getElementById('jsmenu0').style.top = popuptop -12+ "px";

    document.getElementById('jsmenu1').style.left = popupleft + "px";
    document.getElementById('jsmenu1').style.top = popuptop +33+ "px";

    document.getElementById('jsmenu2').style.left = popupleft + "px";
    document.getElementById('jsmenu2').style.top = popuptop +77+ "px";

}


772
3
задан 29 января 2011 в 05:01 Источник Поделиться
Комментарии
1 ответ

Это может быть просто мне ковырятся гнида.

Но, используя этот подход, я вижу очень очень грязный.
Если вы решили сказать 40 темы. Это чертовски много кода JavaScript!
и особенно если вы решите, что вы собираетесь поддерживать такие вещи, как мобильный телефон или планшет.

Вы изменяете внешний вид своей страницы с помощью JavaScript.
Вы бы лучше на мой взгляд иметь:

<link rel="stylesheet" href="..\css\themes\th1.css" id="themesheet" type="text/css" /> 

в HTML есть

<select id="theme">
<option value="th1" selected="selected">Theme One</option>
<option value="th2">Theme Two</option>
</select>

затем в JavaScript есть

$('#theme').change(function(){
var link = '..\css\themes\{name}.css';
link = link.replace('{name}', $(this).val());
$('#themesheet').attr('href', link);
});

Таким образом, вы меняете только лист CSS вместо кодирования в изменения стиля для каждой темы.

6
ответ дан 30 января 2011 в 10:01 Источник Поделиться