我使用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的正确方法是什么?
答案 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以获取适用类的完整列表。