3

ですから、自分のサイトの絶対的なテーマを決めるのに問題があるので、ユーザーがドロップダウンメニューからテーマを選択できるようにしたいのですが、オプションをクリックすると、背景画像、背景色、背景が変更されますポジショニング。

例えば。ユーザーが「マリオブラザーズ3」のテーマを選択した場合、

background-image:url('smb3.jpg');
background-repeat:repeat-x;
background-position:left bottom;
background-attachment: fixed;
background-color: #6899f8;

そして、「ゼルダLTTP」のテーマを選択すると、

background-image:url('zeldalttp.jpg');
background-repeat:no-repeat;
background-position:left bottom;
background-attachment: fixed;
background-color: Black;

これをドロップダウンメニューに入れて、選択内容を記憶してもらい、毎回適用されるようにしたいと思います。

私はこれをどのように行うのかほとんどわかりません、誰か助けてもらえますか？

4

2 に答える 2

9

次のように、ボディのさまざまなクラスでテーマを選択します。

body.smb2{
    background-image:url('smb3.jpg');
    background-repeat:repeat-x;
    background-position:left bottom;
    background-attachment: fixed;
    background-color: #6899f8;
}
body.zelda{
    background-image:url('zeldalttp.jpg');
    background-repeat:no-repeat;
    background-position:left bottom;
    background-attachment: fixed;
    background-color: Black;
}

次に、JavaScript（またはサーバー側）を使用してbodyクラスを設定し、選択内容をCookieに保存します。

正確には、cssをcssファイルに入れて、次のように変更できます。

HTML：

<select id="select">
    <option value=""></option>
    <option value="smb2">SMB 2</option>
    <option value="zelda">Zelda</option>
</select>

純粋なJS：

var sel = document.getElementById('select');
sel.onchange = function(){
    document.body.className = sel.value;
};

または必要に応じてjQuery：

$('select').change(function(){
    $('body').prop('class',$(this).val());    
});

あなたのサイトの問題は、ボディにすでに他のクラスがたくさんあるということです。そして、classNameはそれらすべてを上書きします。1つの解決策は、古いクラスを保存してから、次のように新しいクラスを追加することです。

var saveclass = null;
var sel = document.getElementById('select');
sel.onchange = function(){
    saveclass = saveclass ? saveclass : document.body.className;
    document.body.className = saveclass + ' ' + sel.value;
};

またはjQuery：

var currentclass = null;
$('select').change(function(){
    $('body').removeClass(currentclass).addClass($(this).val());
    currentclass = $(this).val();
});
于 2012-06-03T22:09:24.407 に答える
0

WordPressまたは多数のメッセージボードのテーマアーキテクチャを調べると、通常、ユーザーの選択に応じて別々のcssファイルを提供します。ただし、両方のテーマのスタイルに大きな違いがある場合（つまり、複数の行の背景の違い）、冗長なcssがクライアントに受信されないようにする場合は正当化されます。

違いがわずかであれば、アンディの答えはうまくいくでしょう。はい、選択内容をCookieに保存してください。これにより、サーバーにプロファイルが保存されていなくても設定を保存できるようになります。つまり、サイトにアクセスするたびに正しいテーマを再選択する必要がありません。

于 2012-06-03T23:05:34.137 に答える