7

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

<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 的正确方法是什么？

4

2 回答 2

4

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

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

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

$('.ui-state-error').hover(function(){
    $(this).toggleClass('ui-state-hover');
});
于 2011-09-21T23:51:20.537 回答
1

默认情况下，您只能在您的网站上使用 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 。

于 2011-09-22T03:13:37.847 回答