如何将 jQuery UI 主题应用到我的常规 html 中？

发布于 2024-12-06 00:56:55 字数 581 浏览 1 评论 0原文

我对各种小部件（如对话框、按钮等）使用 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、带背景图标的 span 等。我是直接复制这些还是 jQuery UI javascript 创建一些用于我？将主题应用于非小部件 html 的正确方法是什么？

原文

I use jQuery UI for the various widgets like dialogs, buttons, etc. I want to continue using the theme for my other webpage elements like error/alert notices and highlight styles. So I went to the themeroller page to view what they use for the css around, for example, an alert notice:

<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>

There's a wrapper div, span with background icon, etc. Do I just copy these or does the jQuery UI javascript create some for me? What's the proper way to apply themes to non-widget html?

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

长梦不多时 2024-12-13 00:56:55

只需将其应用到您自己的 HTML 中即可。不需要 JavaScript（悬停状态除外）。

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

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

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

Simply apply that to your own HTML. No Javascript needed (except for hover state).

When you're using jQueryUI's widget, the Javascript creates all of that HTML with those classes.

If you need the hover state, you'll have to toggle the ui-state-hover class. For that you'll need Javascript:

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

回复收藏 0 原文

醉殇 2024-12-13 00:56:55

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

要存档此文件，您必须复制 html 和 html 标签的相应类，浏览器将应用包含的 themeroller.css 中的样式。

然而，这也意味着您的布局会受到一些限制。只要将正确的 css 类（.ui-state-default、.ui-state-hover、.ui-state-disabled、icons 等）应用到 html 中，您仍然可以包含其他非 themeroller 元素。能够使用主题切换器 - 请参阅 http://jqueryui.com/docs/Theming/API完整列表适用类别。

回复收藏 0 原文

~没有更多了~