CodeIgniter 3 - 使用不同的 CSS 主题重新加载视图答案

【问题标题】：CodeIgniter 3 - Reload View with Different CSS ThemeCodeIgniter 3 - 使用不同的 CSS 主题重新加载视图
【发布时间】：2017-10-17 16:04:55
【问题描述】：

我仍在试图理解控制器函数和 URL 请求之间的关系。

这就是我想要完成的：

我有一个包含完整 HTML 页面（无模板）的视图。在这个页面上，我希望用户能够从链接列表中选择一个主题。每个主题都有一个单独的 CSS 文件。我希望所选链接将一个值传递给控制器，然后控制器使用 $data 数组使用不同的 CSS 文件重新加载相同的视图。

如果我上面描述的情况是可能的，或者如果有更智能的解决方案，那么我将非常感谢任何帮助或建议。

基本视图/控制器结构：

我用?????????标记了所有我不明白的地方

控制器/Demos.php

public function ?????????
{
    $data['theme'] = array(
        'Normal' => "normal.css",
        'Dark' => "dark.css",
        'Light' => "light.css",
        'Ultraviolet' => "ultraviolet.css"
    );

    $this->load->view('demos/themeswap', $data);

views/demos/themeswap.php

<!DOCTYPE html>

<html lang="en-us">
<head>
    <meta charset="utf-8">
    <title>Theme Swap Demo</title>

    <link rel="stylesheet" href="/assets/css/<?php echo $theme ?>.css" media="screen" />
</head>
<body>
    <header>
        <h1>Theme Swap Demo</h1>
        <nav>
            <ul>
                <li><a href="?????????">Standard</a></li>
                <li><a href="?????????">Dark</a></li>
                <li><a href="?????????">Light</a></li>
                <li><a href="?????????">Ultraviolet</a></li>
            </ul>
        </nav>
    </header>
<main>
    <h1>Some Rock-Solid Content</h1>
    <p>Behold! I am a paragraph!</p>
</main>
<footer>
    <p>What an amazing footer.</p>
</footer>

【问题讨论】：

标签： php codeigniter codeigniter-3

【解决方案1】：

你的第一个?????? （方法名称）应如下所示：

public function theme($theme)

那么，还是你的themeswap.php 视图：

        <ul>
            <li><a href="<?php echo base_url('demos/theme/standard'); ?>">Standard</a></li>
            <li><a href="<?php echo base_url('demos/theme/dark'); ?>">Dark</a></li>
            <li><a href="<?php echo base_url('demos/theme/light'); ?>">Light</a></li>
            <li><a href="<?php echo base_url('demos/theme/ultraviolet'); ?>">Ultraviolet</a></li>
        </ul>

在您的 URL 结构中，如果配置为删除 index.php 并且不定义自定义路由，您通常会有 controller/method/variables。

有关此here 的更多信息。

【讨论】：

我建议使用base_url()，因为它是为使用而设计的。例如<li><a href="<?php echo base_url('/demos/theme/standard'); ?>">Standard</a></li>
@zJorge 经过多次尝试和进一步研究，我实际上无法使其正常工作。我需要能够将默认css文件设置为standard.css，然后用另一种方法替换它。关于如何做到这一点的任何想法？
我刚刚在bdmercado.avance.com.pa/demos/theme 为您准备了一个简单的示例。我没有一路加载 CSS 文件，而是更改了背景颜色。请看一看。
现在它会加载 CSS，如果有一个名称。如果不是，则 CSS 为 404，但如果名称实际上是有效的 CSS 颜色名称（即 whitesmoke 或 blanchedalmond），它将用作主体背景。试试看！
@zJorge 我需要查看您的示例的控制器代码，以了解为什么我的不工作，但不要打扰，因为我为这个问题创建了一个新的帖子远更多详情。请看一下，看看你是否能用新信息弄清楚：[新帖子]。（stackoverflow.com/questions/44124375/…）你的方法必须从我在你的例子中看到的正常工作，所以你的答案是正确的。

【解决方案2】：

为什么不用 jquery 试试，用锚标签重定向非常简单可靠。

<ul class="change_theme">
    <li data-theme="Standard">Standard</li>
    <li data-theme="Dark">Dark</li>
    <li data-theme="Light">Light</li>
    <li data-theme="Ultraviolet">Ultraviolet</li>
</ul>

设计主题，例如，如果您在 body 标签中更改一个类，则将在整个页面中应用

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function() {
            var current_theme = "Standard";
              $('.change_theme [data-theme]').click(function(e) {
                e.preventDefault();
                var new_theme = $(this).data('theme');
                $('body').removeClass(current_theme);
                $('body').addClass(new_theme);
                current_theme = new_theme;
              });
        });

    </script>

demo 在小提琴上

【讨论】：