如何将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的正确方法是什么?
只需将其应用于您自己的HTML。不需要Javascript(除了悬停状态)。
当您使用jQueryUI的小部件时,Javascript会使用这些类创建所有HTML。
如果您需要悬停状态,则必须切换ui-state-hover
类。对于那些你需要使用Javascript:
$('.ui-state-error').hover(function(){
$(this).toggleClass('ui-state-hover');
});
您可以在默认情况下只能使用的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以获取适用类的完整列表。
此链接已损坏。 –
对不起;当我在2年前发布这篇文章时,它正在工作。 – iHaveacomputer
适用于我自己的html?带类ui-widget和类ui-state-error和ui-corner-all的wrapper div? –
@at。 - 正确。只需复制这段HTML,并按原样使用它。 –