如何在 2 个 css 样式表之间切换以用于 jQuery-UI？答案

【问题标题】：How do I switch between 2 css stylesheets for use with jQuery-UI?如何在 2 个 css 样式表之间切换以用于 jQuery-UI？
【发布时间】：2012-10-15 20:32:49
【问题描述】：

总的来说，我对 jQuery 和 javascript 还很陌生，我创建了一个简单的 .html 文件，以便使用 2 个不同的 jQuery-ui 样式表进行测试。

我想要实现的是示例对话框将使用“flick”样式表打开，并且此对话框中的日期选择器将使用“ui-lightness”样式表打开。

当用户单击对话框中的文本框时，我尝试附加选定的样式表，但仍在使用“轻弹”样式表。

我的html文件中的代码如下：

<!doctype html>

<html>

<head>
<meta charset="utf-8">
<title>jQuery Multiple Themes</title>
<link rel="stylesheet" type="text/css" href="css/flick/jquery-ui-1.9.0.custom.css">

<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/jquery-ui.js"></script>

<script type="text/javascript">

    function openDialog() {
        $("#dialog").dialog();
    }

    function loadDatePicker() {

        $('head').append('<link rel="stylesheet" type="text/css" href="css/ui-lightness/jquery-ui.1.8.24.custom.css">');

        $("#date").datepicker({});
    }

</script>

</head>

<body>

<input type="button" value="Open Dialog" onclick="openDialog()">

<div id="dialog" title="Test Mutiple Themes" style="display: none">
    Click to open a date picker in a different CSS theme
    <input id="date" type="text" size="8" onclick="loadDatePicker()">
</div>

</body>

</html>

由于缺乏使用这些脚本的经验，我希望这是一个简单的语法错误。

【问题讨论】：

试试这个stackoverflow.com/questions/3182840/…

标签： javascript jquery css jquery-ui stylesheet

【解决方案1】：

<ul id="nav">
<li><a href="#" rel="/path/to/style1.css">Default CSS</a></li>
<li><a href="#" rel="/path/to/style2.css">Larger Text</a></li>
<li><a href="#" rel="/path/to/style3.css">Something Different</a></li>
</ul>

jQuery

$(document).ready(function() { 
$("#nav li a").click(function() { 
    $("link").attr("href",$(this).attr('rel'));
    return false;
});
});

此处解释：http://www.cssnewbie.com/simple-jquery-stylesheet-switcher/

【讨论】：

感谢您的回复。我知道能够切换整个页面的样式，但是单个 jquery-ui 元素呢？
我认为有两种方法可以解决这个问题。包括两个样式表，从 flick 样式表中删除 datepicker 元素，反之亦然，或者将两者结合起来，使元素样式正确。当两张表中的样式冲突时，我想不出一种将样式表分配给特定项目的方法。这将需要一些时间，但老实说，这是我看到的实现你实际追求的唯一方法。很抱歉第一次没有理解问题的要点。

【解决方案2】：

在themeroller 下载页面上，您可以为主题设置“CSS SCOPE”。这将在样式表中的所有 UI 类前面为您选择的类添加前缀。

这允许使用您的范围类为标记中的对话框设置一个对话框，以及另一个像 dateepicker 这样的小部件及其范围类。

【讨论】：

非常感谢，这是我找到的解决方案。更多信息请访问：filamentgroup.com/lab/…