Question

我正在浏览css并合并声明。

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

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

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

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

Answer 1

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

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

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

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

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

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

Answer 2

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

Dialog不需要任何。
Resizable需要大多数样式，因为手柄需要大小才能拖动它们。
标签只需要为隐藏面板设置.ui-tabs-hide的{{1}}类。

请注意，所有小部件都有一个css样式，其名称（即display:none）应用于其根元素，并且任何小部件特定样式都在其下方命名。

Answer 3

您需要为带有制表符的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的：

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

请在此处查看示例：http://jsfiddle.net/qR8gK/21/

jQuery UI对话框需要最小css？

3 个答案: