如何将jQuery UI主题应用于我的常规html?

时间:2011-09-21 23:41:43

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

我使用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的正确方法是什么?

2 个答案:

答案 0 :(得分:4)

只需将其应用于您自己的HTML即可。不需要Javascript(悬停状态除外)。

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

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

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

答案 1 :(得分:1)

默认情况下,您只能使用网站上的themeroller预定义元素:按钮,图标,标题栏等以及所有jquery小部件,如datepicker,对话框,突出显示/错误 - 几乎所有你看到的元素http://jqueryui.com/themeroller/#themeGallery

要归档这个,你必须复制html和html标签的相应类,浏览器会将你所包含的themeroller.css中的样式应用到它。

然而,这也意味着你的布局有点受限。只要你将正确的css类(.ui-state-default,.ui-state-hover,.ui-state-disabled,icons等)应用到你的html中,你仍然可以包含其他非themeroller元素能够使用themeswitcher - 请参阅http://jqueryui.com/docs/Theming/API以获取适用类的完整列表。