如何将 jQuery UI 主题应用于我的常规 html？答案

【问题标题】：How to apply jQuery UI theme to my regular html?如何将 jQuery UI 主题应用于我的常规 html？
【发布时间】：2011-11-22 09:44:15
【问题描述】：

我将 jQuery UI 用于各种小部件，如对话框、按钮等。我想继续将主题用于我的其他网页元素，如错误/警报通知和突出显示样式。于是我去themeroller页面查看了他们对css的使用情况，比如一个alert notice：

<div class="ui-widget">
    <div style="padding: 0 .7em;" class="ui-state-error ui-corner-all"> 
        <p><span style="float: left; margin-right: .3em;" class="ui-icon ui-icon-alert"></span> 
        <strong>Alert:</strong> Sample ui-state-error style.</p>
    </div>
</div>

有一个包装器 div、带背景图标的跨度等。我只是复制这些还是 jQuery UI javascript 为我创建了一些？将主题应用于非小部件 html 的正确方法是什么？

【问题讨论】：

标签： jquery jquery-ui themes themeroller jquery-ui-theme

【解决方案1】：

只需将其应用于您自己的 HTML。无需 Javascript（悬停状态除外）。

当您使用 jQueryUI 的小部件时，Javascript 会使用这些类创建所有 HTML。

如果您需要悬停状态，则必须切换 ui-state-hover 类。为此，您需要 Javascript：

$('.ui-state-error').hover(function(){
    $(this).toggleClass('ui-state-hover');
});

【讨论】：

对我自己的 html 应用什么？带有类 ui-widget 和类 ui-state-error 和 ui-corner-all 的包装器 div？
@at。 - 正确的。只需复制那段 HTML，然后按原样使用它。

【解决方案2】：

默认情况下，您只能在您的网站上使用 themeroller 预定义元素：按钮、图标、标题栏等以及所有 jquery 小部件，如日期选择器、对话框、突出显示/错误 - 几乎所有您在http://jqueryui.com/themeroller/#themeGallery 。

要存档，您必须复制 html 和 html 标签的相应类，浏览器会将您包含的 themeroller.css 中的样式应用到它。

但是，这也意味着您的布局有点受限。只要您将正确的 css 类（.ui-state-default、.ui-state-hover、.ui-state-disabled、图标等）应用到您的 html 中，您仍然可以包含其他非主题滚动器元素能够使用主题切换器 - 有关适用类的完整列表，请参阅http://jqueryui.com/docs/Theming/API。

【讨论】：