jQuery UI对话框需要最小css？

I'm going through the css and combining declarations.

我正在通过CSS和组合声明。

For example the header for the dialog is in ui-widget-header and ui-dialog-titlebar.

例如，对话框的标题位于ui-widget-header和ui-dialog-titlebar中。

The issue is when I have jquery UI tabs, for example, within a dialog. Even through they are both scoped to different css selectors - there's still some conflict because the tabs inherits some of the parent's styles.

问题是当我有jquery UI选项卡时，例如，在对话框中。即使它们都被限定为不同的css选择器 - 仍然存在一些冲突，因为选项卡继承了一些父级的样式。

UI appends so many classes, it's a headache to go through it all (which I'm happy to do).

UI附加了这么多课程，所有人都很头疼（我很乐意这样做）。

I'm wondering if anyone has whittled down the dialog css to only the css it needs (without consideration of other UI elements). So combining declarations into one...

我想知道是否有人将对话框css削减到仅需要的css（不考虑其他UI元素）。所以将声明合二为一......

3 个解决方案

#1

I recently used the UI Slider and I just used the selectors that are used with the script, I was able to get it down to two with that. Most of them you can scrap.. Like "ui-corners" for example. All that one does is round the corners. My advice would be to create one in jsFiddle and see what you need only for the functionality and then apply your own styles.

我最近使用了UI Slider，我只使用了与脚本一起使用的选择器，我能够将它降低到两个。他们中的大多数你可以废弃..比如“ui-corner”。所有这一切都在拐角处。我的建议是在jsFiddle中创建一个，只看到你需要的功能，然后应用你自己的样式。

Or you could possibly go through the web inspector, edit the HTML and start hacking them out one by one to see which ones are actually hooked to the script.

或者你可以通过网络检查员，编辑HTML并开始逐个黑客攻击，看看哪些实际上是挂钩到脚本。

Another option would be to put a wrapper DIV around the content and override the CSS with your own styles.

另一种选择是在内容周围放置一个包装器DIV，并用自己的样式覆盖CSS。

Best option though is probably to look at the documentation you can see what it is dependent on and under the theme tab it says which classes are used...

最好的选择可能是查看文档，你可以看到它依赖什么，在主题选项卡下它说明使用了哪些类...

http://jqueryui.com/demos/dialog/

Not really a very good answer but maybe it will help.

不是一个非常好的答案，但也许它会有所帮助。

#2

Most of the widgets don't really need many css styles.

大多数小部件并不需要很多css样式。

Dialog doesn't need any.

Dialog不需要任何。
Resizable needs most of its styles, because the handles need sizes so that they can be dragged.

Resizable需要大多数样式，因为手柄需要大小以便可以拖动它们。
Tabs only needs the .ui-tabs-hide class which just sets display:none for the hidden panels.

选项卡只需要.ui-tabs-hide类，它只为隐藏面板设置display：none。

Note that all widgets have a css style with their name (i.e. .ui-dialog) applied to their root element and that any widget specific styles are namespaced under it.

请注意，所有窗口小部件都有一个css样式，其名称（即.ui-dialog）应用于其根元素，并且任何窗口小部件特定样式都在其下命名。

#3

All you have to do for the jquery UI dialog with tabs is:

您需要为带有制表符的jquery UI对话框执行的操作是：

HTML;

<div id='unique_id'>
    <div id="tabs">
        <ul>
            <li><a href="#tabs-1">Nunc tincidunt</a></li>
            <li><a href="#tabs-2">Proin dolor</a></li>
            <li><a href="#tabs-3">Aenean lacinia</a></li>
        </ul>
        <div id="tabs-1">
            <p>Proin elit arcu, rutrum commodo, vehicula tempus, commodo a, risus. Curabitur nec arcu. Donec sollicitudin mi sit amet mauris. Nam elementum quam ullamcorper ante. Etiam aliquet massa et lorem. Mauris dapibus lacus auctor risus. Aenean tempor ullamcorper leo. Vivamus sed magna quis ligula eleifend adipiscing. Duis orci. Aliquam sodales tortor vitae ipsum. Aliquam nulla. Duis aliquam molestie erat. Ut et mauris vel pede varius sollicitudin. Sed ut dolor nec orci tincidunt interdum. Phasellus ipsum. Nunc tristique tempus lectus.</p>
        </div>
        <div id="tabs-2">
            <p>Morbi tincidunt, dui sit amet facilisis feugiat, odio metus gravida ante, ut pharetra massa metus id nunc. Duis scelerisque molestie turpis. Sed fringilla, massa eget luctus malesuada, metus eros molestie lectus, ut tempus eros massa ut dolor. Aenean aliquet fringilla sem. Suspendisse sed ligula in ligula suscipit aliquam. Praesent in eros vestibulum mi adipiscing adipiscing. Morbi facilisis. Curabitur ornare consequat nunc. Aenean vel metus. Ut posuere viverra nulla. Aliquam erat volutpat. Pellentesque convallis. Maecenas feugiat, tellus pellentesque pretium posuere, felis lorem euismod felis, eu ornare leo nisi vel felis. Mauris consectetur tortor et purus.</p>
        </div>
        <div id="tabs-3">
            <p>Mauris eleifend est et turpis. Duis id erat. Suspendisse potenti. Aliquam vulputate, pede vel vehicula accumsan, mi neque rutrum erat, eu congue orci lorem eget lorem. Vestibulum non ante. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Fusce sodales. Quisque eu urna vel enim commodo pellentesque. Praesent eu risus hendrerit ligula tempus pretium. Curabitur lorem enim, pretium nec, feugiat nec, luctus a, lacus.</p>
            <p>Duis cursus. Maecenas ligula eros, blandit nec, pharetra at, semper at, magna. Nullam ac lacus. Nulla facilisi. Praesent viverra justo vitae neque. Praesent blandit adipiscing velit. Suspendisse potenti. Donec mattis, pede vel pharetra blandit, magna ligula faucibus eros, id euismod lacus dolor eget odio. Nam scelerisque. Donec non libero sed nulla mattis commodo. Ut sagittis. Donec nisi lectus, feugiat porttitor, tempor ac, tempor vitae, pede. Aenean vehicula velit eu tellus interdum rutrum. Maecenas commodo. Pellentesque nec elit. Fusce in lacus. Vivamus a libero vitae lectus hendrerit hendrerit.</p>
        </div>
    </div>
</div>

jQuery:

jQuery的：

$('#tabs').tabs();
$('#unique_id').dialog();

See an example here: http://jsfiddle.net/qR8gK/21/

在这里查看示例：http：//jsfiddle.net/qR8gK/21/

#1