在一个页面上使用多个jQuery UI的主题

如果你使用jQuery UI CSS框架设计一个完整的接口，你会发现，一个主题是不够的。 此快速的向导将突出jQuery UI Download Builder的新功能 ，让您轻松地在一个页面上使用多个主题。
 
存在的问题
我们经常得到我们建议你如何在一个页面上执行多个主题的问题。 出现这种情况，当你使用jQuery UI CSS框架，在一个界面中的许多风格元素，他们变得非常相似。在过去，你将不得不做一些方便工作与正则表达式在ui.theme.css中添加ui作用域的CSS主题给所有的选择器，并重新命名你的主题文件夹，所以可以对应在同一个目录中的另一个主题。不幸的是，在这个过程中肯定是一个经验丰富的开发者是可行的，因为它要比我们所想的它应该是这样一个平常的任务而复杂得多。

 

解决方案
我们决定实施一个解决方案中Download Builder ，它能够自动的适用作用域，以主题和主题文件夹重命名的过程。这种新的特性是在主题Download Builder节中的高级设置”下提供的。

首先第一件事是：
要运用主题作用域的优势，你需要先选择一个主题。你可以从Download Builder内的gallery选择几个主题，或者你可以去ThemeRoller先设计好主题。当你从ThemeRoller下载主题，你可以直接返回到Download Builder再次定制下载。

 

录入一个CSS作用域
主题作用域是你在那里录入的一个CSS选择器以代表您应用于你的网页的部分（或您的网站）的主题。例如，如果您有在您的网站的侧面导航栏的手风琴部件，你想让它比其他区域的您的网站有不同的主题，您可以键入CSS选择器，侧面导航栏（如对应.interiorNavigation ）并下载你的主题。在CSS作用域选择后Download Builder将新增一个空间，所以不用担心是否需要添加一个。

 

 

文件夹名称
当您键入你的CSS作用域，建设者将自动建议相应的主题文件夹的名称。 这个名字可以编辑的，它不会自动显示另一个文件夹，除非输入框是空的，或者你还未对键入的作用域输入框进行编辑。

 

 

下载后
一旦你下载并解压缩zip文件，你会看到一个它包含的文件夹命名为“主题”或任何在主题文件夹输入框中输入的自定义名称的主题。在这个文件夹，你会发现jQuery UI CSS框架给出的所有文件。如果这是您在主题的作用域输入框输入的作用域，那么所有在此文件夹包含的CSS将只作用于你的选择作用域。

解压缩文件夹中的快照。请注意，由于重建作用域标记的复杂性，作用域主题的下载中不包括例子页面。在页面中包括这个此主题，只是直接CSS链接中链接到在“theme_internalNavigation”文件夹的ui.all.css。

<link type="text/css" href="theme_interiorNavigation/ui.all.css" rel="Stylesheet" />

 

 

就这些了！

现在，您已经包含了一个具有特定部分的作用域主题到您的网站了。你仍是可以按您过去所喜欢的那样去做。不过，你需要考虑到留神文件的大小，因为它会增加很快！

 

快速演示
下面的示例演示在这篇文章中所述的步骤。我们链接了无作用域的主题和第二如上述的interiorNavigation选择作用域的主题。演示页面有两个选项卡的部件，其中第二个是包含在一个div与一类“interiorNavigation”，允许它接收作用域的主题风格。

原文与演示：http://www.filamentgroup.com/lab/using_multiple_jquery_ui_themes_on_a_single_page/