Joomla/Php/Jquery/Css 中的 Switchstyle 问题答案

【问题标题】：Switchstyle Problem in Joomla/Php/Jquery/CssJoomla/Php/Jquery/Css 中的 Switchstyle 问题
【发布时间】：2010-11-22 04:09:23
【问题描述】：

我一直在开发一个网站（现在在这里作为示例：http://neurotoxine.mine.nu/gloom），我从样式切换器代码中得到了一个奇怪的行为。很大，请耐心等待。

首先，你可以先去我指定的站点看看。你有什么，它是一个 joomla 页面，使用 Jquery

var $j = jQuery.noConflict();

为了避免 mootools 冲突。然后，我使用了这些：

<?  // Checks for, and assigns cookie to local variable:
if(isset($_COOKIE['style']))
{   $style = $_COOKIE['style'];
}
// If no cookie is present then set style as "red" (default):
else {    $style = 'red';
}
?>

这只是cookie设置，如果cookie没有设置则$style=red，这个变量会附加到CSS中。像这样：

<link rel="stylesheet" type="text/css" href="<?php echo $this->baseurl ?>/templates/wh1/css/template_<?php echo $style ?>.css" media="screen" />

第一个代码，$this->baseurl=joomla 安装目录，在本例中是 goom。第二个，echo $style，将写入 cookie 加载值或从选项分配的值，如果你第一次到达那里，那么你会得到 RED 作为值，template_red.css 将是 CSS整个网站。

有一个 JS，可以做一些 jquery 技巧：

 jQuery.fn.styleSwitcher = function(){
  $j(this).click(function(){
      // We're passing this element object through to the loadStyleSheet function.
      loadStyleSheet(this);
      // And then we're returning false.
      return false;
  });
  function loadStyleSheet(obj) {
    $j('#preloader')
    // Now fade in the div (#preloader):
    .fadeIn(500,function(){
      // The following will happen when the div has finished fading in:
      // Request PHP script (obj.href) with appended "js" query string item:
      $j.get( obj.href+'&js',function(data){
        // Select link element in HEAD of document (#stylesheet) and change href attribute:
        $j('#stylesheet').attr('href','css/' + data + '.css');
        // Check if new CSS StyleSheet has loaded:
        cssDummy.check(function(){
          // When StyleSheet has loaded, fade out and remove the #overlay div:
          $j('#preloader').fadeOut(500);
        });
      });
    });
  }
  // CSS DUMMY SECTION
  var cssDummy = {
    init: function(){
      // Appends "dummy-element" div to body:
      $j('<div id="dummy-element" style="display:none" />').appendTo('body');
    },
    check: function(callback) {
      // Checks if computed width equals that which is defined in the StyleSheets (2px):
      if ($j('#dummy-element').width()==2) callback();
      // If it has not loaded yet then simple re-initiate this function every 200 milliseconds until it had loaded:
      else setTimeout(function(){cssDummy.check(callback)}, 200);
    }
  }
  cssDummy.init(); }

然后，我在我的页面中启动该功能：

$j(document).ready(function(){
$j('#style-switcher a').styleSwitcher();
});

我通过这样的链接调用它：

<a href="<?php echo $this->baseurl ?>/templates/wh1/style-switcher.php?style=fire">img</a>

最后，styleswitcher.php 代码在这里：

<?php
$style = $_GET['style'];
setcookie("style", $style, time()+604800*24); // 604800 = amount of seconds in one week *4=1 month *24=1/2 year *48=1 year
if(isset($_GET['js']))
echo $style;
else header("Location: ".$_SERVER["HTTP_REFERER"]); ?>

现在，问题是，当我在一个站点中测试它时，一切正常（http://neurotoxine.mine.nu/wht/index-test.php - 样式转换器的链接在它们的顶部和左侧显示主题）。但是当我在 joomla 模板中插入整个代码时，整个系统都失败了。我在这里和那里做了一些修复（主要是 $j 声明），然后我意识到这可能与模板的路径有关，所以我测试了许多类型的声明、绝对路径、相对路径等，但没有任何反应。

然后我将 styleswitcher.php 复制到 joomla 的根目录 (neurotoxine.mine.nu/gloom) 并检查 ti 是否可以在那里工作，我得到一个空白页。我单击了返回，然后 WOW 样式转换器工作了，但是有些东西没有告诉返回到哪里，我认为它可能是标题（“位置：”.$_SERVER[“HTTP_REFERER”]）;说明，但我不知道要在那里更改什么才能使其正常工作。

Joomla 在其模板的标题中给出了声明：

<base href="http://neurotoxine.mine.nu/gloom/" />

我不知道这是否对 http_referer 的工作方式有所影响，但我禁用了它，网站仍然这样做，单击样式，页面空白，点击返回，瞧，样式已经改变但未能检索到我所在的页面。

一些想法？任何帮助都可能有用。

【问题讨论】：

标签： php jquery css joomla styleswitching

【解决方案1】：

Referer 仅在您单击链接时设置（而不是在您直接在地址栏中输入时）。事实上，浏览器会在点击此链接之前告诉网站用户去过哪里，因此您不能 100% 信任它（请参阅PHP Manual）。我会将上次访问的页面存储在 $_SESSION 中并重定向到这个页面；如果它为空，则重定向到 $this->baseurl 。 '/index.php'。

base-Tag 仅用于相对链接，例如

<a href="index.php">

甚至：

<a>

另一个提示：在从 cookie 中获取样式之前，请检查它是否存在（硬编码所有可用模板或 file_exists()）。如果没有，请使用默认的（红色）。

【讨论】：

【解决方案2】：

我解决了这个问题...解决方案修复了三到四个错误：

首先，html 中的 cookie 检查器应该询问 coockie 是否为空，如果是 SET 则不询问。所以：

<?php  // Checks for, and assigns cookie to local variable:
if(!empty($_COOKIE['style'])) $style = $_COOKIE['style'];
// If no cookie is present then set style as "red" (default):
else $style = 'red';
?>

这是首先要解决的问题。然后这一行是固定的，因为 JQuery 插件要求在标题中更改一个 ID。我没有意识到我在链接样式表声明中没有 ID

<link id="stylesheet" rel="stylesheet" type="text/css" href="<?php echo $this->baseurl ?>/templates/wh1/css/template_<?php echo $style ?>.css" media="screen" />

在这一行我也发现了

<?php echo $this->baseurl ?>

应该替换为基地址，但是没有域，所以应该是

/gloom/templates/wh1/css/template_<?php echo $style ?>.css

另外，在初始化 JQuery 插件时，我犯了一个致命的错误。我没有更改插件将要捕获的标签容器的 ID。这部分是因为样式表标题上的 ID 和标签容器上的 ID 之间的混淆。所以我使用“#tselect”作为 DIV 的 ID，它解决了 Jquery 工作。另外，必须在插件的每条语句中加上$j。

$j(document).ready(function(){
    $j.preloadCssImages({statusTextEl: '#textStatus', statusBarEl: '#status'});
        $j("img#hhead").toggle(
        function () { 
            $j("#headtop").slideDown();
        },
        function () {
            $j("#headtop").slideUp();
        });
    $j("#tselect a").styleSwitcher(); // here is the "ID TAG".plugin() call.
});

现在，在 styleswitcher.php 中，我使用了有人告诉我关于 cookie 的提示：

<?php $style = $_GET['style'];
setcookie("style", $style, time()+604800,"/"); // 604800 = amount of seconds in one week
if(isset($_GET['js'])) echo $style;
else header("Location: ".$_SERVER['HTTP_REFERER']);
?>

你注意到了吗？是一个简单的 / 斜线。

现在一切正常。 stylechanger 更改样式并且 JQuery 效果起作用。你可以在这里看到它：link text

如果有人想要文件和解释，请给我发消息。

【讨论】：