1

WordPress テーマ用に複数オプションのスタイル スイッチャーを作成する必要がありますが、何も機能しません (以下のコードを参照)。マルチオプションとは、次のことを意味します。ユーザーは、カスタムの色、パターン、およびフォントを互いに独立して選択できる必要があります (単純な css リンクのスワップアウトでは実行できません)。これはすべて私の現在のスキルレベルをはるかに超えています。誰かが正しい方向に私を助けることができますか?

基本的なマークアップ:

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>Style Switcher</title>
    <link rel="stylesheet" href="css/style.css">
    <link rel="stylesheet" href="css/plugins.css">
</head>
<body id="top">
    <div id="wrapper">
        <p>The quick brown fox jumps over the lazy dog.</p>
    </div>
    <script src="js/plugins.js"></script>
    <script src="js/scripts.js"></script>
</body>
</html>

scripts.js (2回目の試行)このテーマから適応。

// DOM READY, NO CONFLICT REMAP
jQuery(document).ready(function($){

    // THEME NAME
    var themeID='mytheme';

    // STYLE SWITCHER MARKUP
    $('body').append(
        '<div id="ss">'+
            '<p>'+
                '<select id="ssColor" name="ss-color">'+
                    '<option value="red">Red</option>'+
                    '<option value="green">Green</option>'+
                    '<option value="blue">Blue</option>'+
                '</select>'+
            '</p>'+
            '<p>'+
                '<select id="ssPattern" name="ss-pattern">'+
                    '<option value="pat-a">Pattern A</option>'+
                    '<option value="pat-b">Pattern B</option>'+
                    '<option value="pat-c">Pattern C</option>'+
                '</select>'+
            '</p>'+
            '<p>'+
                '<a id="ssReset" href="">Reset</a>'+
            '</p>'+
        '</div>'
    );

    // RESET
    $('#ssReset').click(function(){
        var i=0;
        var cookies = new Array();
        $('#ss select').each(function(){
            var cookie = $(this).attr('name');
            cookies[i] = cookie;
            i++;
        });
    });

    // ???
    var cookiesMax=cookies.length;
    for(var i=0, max=cookiesMax; i<max; ++i){
        $.dough(themeID+'-'+cookies[i],'remove');
    }

    // APPLY CHANGES FUNCTION
    function applyChanges(id,selectName,selectValue){
        var cookieName=id+'-'+selectName;
        $.dough(cookieName,selectValue);
        location.reload();
    }

    // PROCESS
    $('#ss select').change(function(){
        var selectName = $(this).attr('name');
        var selectValue = $(this).val();
        applyChanges(themeID,selectName,selectValue);
    });

});

scripts.js (1 回目の試行)このチュートリアルから適応。

// DOM READY, NO CONFLICT REMAP
jQuery(document).ready(function($){

    // APPLY STYLES FUNCTION
    function apply_styles(bgcolor,bgpattern){
        $('html').css('backgroundColor','#'+bgcolor);
        $('html').css('backgroundImage','url(img/'+bgpattern+')');
    }

    // CREATE COOKIE FUNCTION
    function create_cookie(bgcolor,bgpattern){
        $.dough('bgcolor','remove');
        $.dough('bgcolor',bgcolor);
        $.dough('bgpattern','remove');
        $.dough('bgpattern',bgpattern);
    }

    // READ COOKIES ELSE DEFAULTS
    var cbgcolor=$.dough('bgcolor');
    var cbgpattern=$.dough('bgpattern');
    if(cbgcolor!=undefined&&cbgpattern!=undefined){
        apply_styles(cbgcolor,cbgpattern);
    }else{
        apply_styles('fff','default.gif');
    }

    // STYLE SWITCHER
    $('body').append(
        '<div id="style_switcher">'+
            '<p><strong id="colorpicker_box"><em></em></strong></p>'+
            '<ul id="patterns">'+
                '<li><img src="css/img/spat1.gif" rel="pat1.gif" alt=""></li>'+
                '<li><img src="css/img/spat2.gif" rel="pat2.gif" alt=""></li>'+
                '<li><img src="css/img/spat3.gif" rel="pat3.gif" alt=""></li>'+
            '</ul>'+
            '<p><strong id="save_css">Save</strong></p>'+
        '</div>'
    );

    // COLORPICKER
    $('#colorpicker_box').ColorPicker({
        onShow:function(colpkr){$(colpkr).fadeIn(500);return false;},
        onHide:function(colpkr){$(colpkr).fadeOut(500);return false;},
        onChange:function(hsb,hex,rgb){
            $('#colorpicker_box em').css({backgroundColor:'#'+hex});
        }
    });

    // PROCESS VALUES
    var pickerValue= // store 'hex' from COLORPICKER above, but how?
    var patternValue= // store rel="" value of CLICKED '#patterns li img'
    $('#save_css').click(function(){
        apply_styles(pickerValue,patternValue);
    });

});
4

2 に答える 2

1

「PROCESS VALUES」ビットをonChangeカラーピッカーのイベントに移動する必要があります。それ以外の場合はコードがすぐに実行され、選択された色が既知の場合に動作し、その値を処理する必要があるためです。

$('#colorpicker_box').ColorPicker({
        onShow:function(colpkr){$(colpkr).fadeIn(500);return false;},
        onHide:function(colpkr){$(colpkr).fadeOut(500);return false;},
        onChange:function(hsb,hex,rgb){
            // PROCESS VALUES
            var patternValue= // store rel="" value of CLICKED '#patterns li img'
            $('#save_css').click(function(){
                apply_styles('#' + hex, patternValue);
            });

            $('#colorpicker_box em').css({backgroundColor:'#'+hex});
        }
    });

CLICKED '#patterns li img" のコメント "store rel="" value を取得できるかどうかわかりません。どの画像でもクリック イベントが発生しておらず、rel 値もありません。

于 2011-05-12T12:19:23.993 に答える
0

さて、ここに行きます：

<head>
  <link class="css" href="red.css" /> <!-- default style give url and whats not --> 
  <script>
      $('select').change(function (){
          $('.css').remove();
          var val = $(this).val();
          $('<link class="css" href="'+val+'" />').appendTo('head');


      });
  </script>
</head>
<body>
<select>
 <option value="black">black</option>
 <option value="red">red</option>
</select>
</body>

とにかくjqueryテーマスイッチャーを持っていることに加えて、なぜ混乱するのですか？笑

于 2011-05-12T12:36:25.667 に答える