1

複数のテーマを持つはずのhtmlのみ（サーバー側のコードなし）のWebサイトを作成していますが、

ユーザーはテーマを選択/変更して、Web サイトを表示できます。

これを行う方法についていくつかの概念を提案するか、少なくともいくつかの役立つ記事を教えてください.

よろしくお願いいたします。

4

5 に答える 5

3

最も一般的なアプローチは、選択したテーマに基づいて切り替えられるさまざまな外部 CSS スタイルシートを使用することです。また、テーマによって提供されるさまざまなレイアウトを許可するように、DOM を賢く構造化する必要があります。

于 2012-04-19T10:48:40.660 に答える
1

おそらくやり過ぎです...しかし、これは私がGoogle Font APIと少し前に書いたDocument Fragment Builderスクリプトを使用して思いついたフォントセレクターの例です。

var FragBuilder = (function() {
    var applyStyles = function(element, style_object) {
        for (var prop in style_object) {
            element.style[prop] = style_object[prop];
        }
    };
    var generateFragmentFromJSON = function(json) {
        var tree = document.createDocumentFragment();
        json.forEach(function(obj) {
            if (!('tagName' in obj) && 'textContent' in obj) {
                tree.appendChild(document.createTextNode(obj['textContent']));
            } else if ('tagName' in obj) {
                var el = document.createElement(obj.tagName);
                delete obj.tagName;
                for (part in obj) {
                    var val = obj[part];
                    switch (part) {
                    case ('textContent'):
                        el.appendChild(document.createTextNode(val));
                        break;
                    case ('style'):
                        applyStyles(el, val);
                        break;
                    case ('childNodes'):
                        el.appendChild(generateFragmentFromJSON(val));
                        break;
                    default:
                        if (part in el) {
                            el[part] = val;
                        }
                        break;
                    }
                }
                tree.appendChild(el);
            } else {
                throw "Error: Malformed JSON Fragment";
            }
        });
        return tree;
    };
    var generateFragmentFromString = function(HTMLstring) {
        var div = document.createElement("div"),
            tree = document.createDocumentFragment();
        div.innerHTML = HTMLstring;
        while (div.hasChildNodes()) {
            tree.appendChild(div.firstChild);
        }
        return tree;
    };
    return function(fragment) {
        if (typeof fragment === 'string') {
            return generateFragmentFromString(fragment);
        } else {
            return generateFragmentFromJSON(fragment);
        }
    };
}());

function jsonp(url) {
    var script = document.createElement('script');
    script.type = 'text/javascript';
    script.src = url;
    document.getElementsByTagName('body')[0].appendChild(script);
}

function replacestyle(url) {
    if (!document.getElementById('style_tag')) {
        var style_tag = document.createElement('link');
        style_tag.rel = 'stylesheet';
        style_tag.id = 'style_tag';
        style_tag.type = 'text/css';
        document.getElementsByTagName('head')[0].appendChild(style_tag);
        replacestyle(url);
    }
    document.getElementById('style_tag').href = url;
}

function loadFonts(json) {
    var select_frag = [
        {
        'tagName': 'select',
        'id': 'font-selection',
        'childNodes': [
            {
            'tagName': 'option',
            'value': 'default',
            'textContent': 'Default'}
        ]}
    ];
    json['items'].forEach(function(item) {
        var family_name = item.family,
            value = family_name.replace(/ /g, '+');

        if (item.variants.length > 0) {
            item.variants.forEach(function(variant) {
                value += ':' + variant;
            });
        }

        select_frag[0].childNodes.push({
            'tagName': 'option',
            'value': value,
            'textContent': family_name
        });
    });

    document.getElementById('container').appendChild(FragBuilder(select_frag));
    document.getElementById('font-selection').onchange = function(e) {
        var font = this.options[this.selectedIndex].value,
            name = this.options[this.selectedIndex].textContent;
        if (font === 'default') {
            document.getElementById('sink').style.fontFamily = 'inherit';
        } else {
            document.getElementById('sink').style.fontFamily = name;
            replacestyle('https://fonts.googleapis.com/css?family=' + font);
        }
    };
}

jsonp("https://www.googleapis.com/webfonts/v1/webfonts?key=AIzaSyDBzzPRqWl2eU_pBMDr_8mo1TbJgDkgst4&sort=trending&callback=loadFonts");​

これがキッチンシンクの例です...

于 2012-04-19T13:03:59.310 に答える
0

jQuery スタイルのスイッチャーを使用できます。それを行う方法に関するステップバイステップのチュートリアルもある以下のリンクをチェックしてください。

http://www.net-kit.com/10-practical-jquery-style-switchers/

こちらにも作り方の記事があります。

http://net.tutsplus.com/tutorials/javascript-ajax/jquery-style-switcher/

于 2012-04-19T10:52:22.737 に答える
0

Cudos は既にこの質問に回答していますが、とにかく投稿します。

Cudos によって投稿されたこのチュートリアル (http://net.tutsplus.com/tutorials/javascript-ajax/jquery-style-switcher/) を変更して、index.phpファイルにこれらの変更を加えたクライアント側コードのみで構成することができます。

PHP ブロックを削除し、この関数を追加します。

<script language="javascript" type="text/javascript">
  function readCookie(name) {
  var nameEQ = name + "=";
  var ca = document.cookie.split(';');

  for(var i=0;i < ca.length;i++) {
    var c = ca[i];
    while (c.charAt(0)==' ') c = c.substring(1,c.length);
    if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length,c.length);
  }
 return null;
}

var js_style = readCookie(style);
</script>

PHP スタイル スイッチャーをこれに置き換えます。

<script language="javascript" type="text/javascript">
  if (typeof js_style == 'undefined') { js_style = 'day'; }
  document.write('<link id="stylesheet" type="text/css" href="css/' + js_style + '.css" rel="stylesheet" />');
</script>

私のために働いた...

于 2012-04-19T11:39:17.830 に答える
0

Alexander Pavlov が彼の回答に書いているように、さまざまな外部スタイル シートを使用してください。ユーザーが永続的にテーマを選択できるようにするには (つまり、サイトの別のページに移動したとき、または翌日サイトに戻ったときにテーマが保持されるように)、HTTP cookie または HTML5 スタイルの localStorage を使用します。サーバー側のコードなしで、情報をユーザーのコンピューターにローカルに保存できます。

localStorage (HTML ストレージまたは Web ストレージとも呼ばれます) に関するチュートリアルは数多くありますが、特定のものを取り上げるのは困難です。Cookie よりも柔軟性があり、ユーザーがカスタマイズしたスタイルシートであっても、大量のデータを保存するために使用できます。localStorage の主な問題は、IE 7 以前ではサポートされていないことです。それらを使用している人々がカスタマイズ可能性を得られないと判断するかもしれません. または、cookiers、userData (IE)、dojox.storage、またはその他のツールを使用して、旧式のブラウザーで localStorage をシミュレートすることもできます。

于 2012-04-19T12:52:04.630 に答える