如何将jQuery UI主题应用于我的常规HTML？

我使用的jQuery UI的各种小部件，如对话框，按钮等我想继续使用主题为我的其他网页元素，如错误/警告通知和突出显示样式。所以我去的ThemeRoller页面，查看他们使用什么样的CSS左右，例如，警示通知：如何将jQuery UI主题应用于我的常规HTML？

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

来源

2011-09-21 at.

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

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

如果您需要悬停状态，则必须切换ui-state-hover类。对于那些你需要使用Javascript：

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

来源

2011-09-21 23:51:20

适用于我自己的html？带类ui-widget和类ui-state-error和ui-corner-all的wrapper div？ –

@at。 - 正确。只需复制这段HTML，并按原样使用它。 –

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

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

但是，这也意味着您的布局有限。只要您将正确的css类（.ui-state-default，.ui-state-hover，.ui-state-disabled，图标等）应用于您的html，您仍然可以包含其他非美化器元素能够使用themeswitcher - 请参阅http://jqueryui.com/docs/Theming/API以获取适用类的完整列表。

来源

2011-09-22 03:13:37 iHaveacomputer

此链接已损坏。 –

对不起;当我在2年前发布这篇文章时，它正在工作。 – iHaveacomputer

如何将jQuery UI主题应用于我的常规HTML？

回答

相关问题