4

さて、私はphpでスタイルスイッチャーを実行しました。これをサイトの非表示機能として使用しています。これは、ユーザーが「teema」と入力するとトリガーされ、ページコンテンツの上部にモーダルボックスが表示されます。利用可能なテーマを表示します。

<ul>
    <li><a href="teema.php?teema=default" class="ajaxLink">Normaali</a></li>
    <li><a href="teema.php?teema=superhero" class="ajaxLink">Superhero</a></li>
    <li><a href="teema.php?teema=spacelab" class="ajaxLink">Spacelab</a></li>
    <li><a href="teema.php?teema=united" class="ajaxLink">United</a></li>
    <li><a href="teema.php?teema=cyborg" class="ajaxLink">Cyborg</a></li>
</ul>

ただし、CSSがバックグラウンドで読み込まれるように、ページを更新せずにテーマを変更したいと思います。これがteema.phpです：

<?php
    $style = $_GET['teema'];
    setcookie("teema", $style, time()+604800);
    if(isset($_GET['js'])) {
        echo $style; 
    } 
    else{
    header("Location: ".$_SERVER['HTTP_REFERER']);  
    }
?>

そして、Cookieをチェックするインデックスのphp：

<?php 
if(!empty($_COOKIE['teema'])) $style = $_COOKIE['teema'];
else $style = 'default';
?>
<link rel="stylesheet" href="css/<? echo $style;?>.css" id="theme">

新しいcssをバックグラウンドにロードし、jQueryを使用して古いcssにフェードオーバーするにはどうすればよいですか？

4

3 に答える 3

1

PHPファイルでJavaScriptコンテンツタイプの応答を返し、スタイルシートを操作できます。

次のようにコードを変更します。

<?php
    $style = $_GET['teema'];
    setcookie("teema", $style, time()+604800);
    if(isset($_GET['js'])) {
        // echo $style; 
    } 
    else{
     // header("Location: ".$_SERVER['HTTP_REFERER']);  
    }
    header("Content-type: text/javascript");
?>
document.getElementById("theme").setAttribute("href", "teema.css");

AJAXとPHPを使用してテーマを変更します。

すでにタグでを使用しているのでid="theme"、<link />AJAXを使用してjQueryで簡単に設定できます。

したがって、次のようにテーマリクエストを送信します。

$.getScript("theme.php?teema=theme");

そしてPHPでは：

header("Content-type: text/javascript");
$('#theme').attr('href', 'css/<?php echo $_GET['teema']; ?>');
于 2012-11-11T16:54:31.953 に答える
1

このリンクの内容を変更し$('$#theme').attr('href', 'css/' + selectedtheme +'.css');ます（、JavaScriptでもCookieを設定できます（document.cookie = 'theme=' + selectedtheme）

于 2012-11-11T16:59:45.277 に答える
1

単にajaxリクエストを行うだけで、Cookieが返されます

jQueryの使用：

$('.ajaxLink').click(function(e) {
    e.preventDefault();
    var teemaUrl=this.href;
    var teema=teemaUrl.split('=').pop()
    $.get(teemaUrl, { js:true}, function(data){
       $('#theme').attr('href','css/'+ teema+'.css')

    })
});

teemaこれにより、リンクから値が解析され、その値hrefが呼び出され（パス情報を追加する必要がある場合があります）、 ID=themeのリンクタグがhref更新されます。href

于 2012-11-11T17:02:44.347 に答える