3

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

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

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

UI 附加了这么多的类，把它全部看完是一件很头疼的事（我很乐意这样做）。

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

4

3 回答 3

0

对于带有标签的 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/

于 2012-09-18T20:19:03.357 回答
0

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

或者您可以通过网络检查器，编辑 HTML 并开始将它们一一破解，以查看哪些实际上与脚本挂钩。

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

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

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

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

于 2012-09-18T19:45:39.283 回答
0

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

  • 对话框不需要任何东西。

  • Resizable 需要它的大部分样式，因为手柄需要大小以便它们可以被拖动。

  • Tabs 只需要为隐藏面板.ui-tabs-hide设置的类。display:none

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

于 2012-09-18T20:15:45.720 回答