Question

我正在使用jquery UI标签，我需要主要更改它的样式。我需要重新审视背景图像，边框，几乎所有内容。我需要它看起来很小，而不是像它自成一体。

最好的方法是什么？我需要使用日历小部件的默认UI样式，它位于同一页面上。我做了很多研究，每个人似乎都指向主题 - 滚动。但是，我不只是想改变颜色和边框半径。我需要删除废话。主题 - 滚动似乎只是改变颜色之类的东西（对现实世界不是很有用）。如何在不改变同一页面上其他UI小部件的样式的情况下调整选项卡的css（我希望日历保持原样）？

是否值得为我的标签使用jquery UI？

Answer 1

你应该查看Keith Wood关于样式化JQuery UI选项卡的详细博客文章。

您具体问题的答案

我需要重新审视背景图像，边框，几乎所有内容。我需要它看起来很小

在Keith Wood的帖子“Remove most of the formatting”中。

除此之外，还有10个样式更改，完成了实现所需效果所需的CSS。

JQuery UI Tabs Styling - Keith Wood Blog Post

Answer 2

我选择编写自己的简单选项卡功能时，我意识到我不需要其大部分内置功能，例如加载AJAX内容和动态添加/删除选项卡。如果我需要这些功能，我自己很容易实现它们。是什么迫使我抛弃jQuery UI Tabs，我不得不以不同的方式构建我的DOM元素。我还需要将我的标签设置为最小化，并且我认为从头开始构建将比尝试去掉很多东西要少。

我最想念的功能是jQuery UI选项卡如何自动选择URL中＃所指示的选项卡（我知道我可以复制它 - 还没有达到它）。

更新：但是，是的，如果您坚持使用它，您可以使用您拥有的任何ID覆盖CSS：

#my-tabs .ui-state-default {
    background-image: none; /* remove default bg image */
}

依旧......

Answer 3

在你的css中尝试以下内容，假设你的类是.mytabs用于覆盖css。它应该让你开始

.mytabs li {
        background :  white !important;
        border-top: 0 !important;
        border-left: 0 !important;
        border-right: 0 !important; 

    }
    .mytabs li.ui-state-active {
        background :  white !important;
        border-top: 0 !important;
        border-left: 0 !important;
        border-right: 0 !important; 
        margin: 0;


    }

.mytabs li a 
    {
        color:          Black !important;
        font-size:      1.4em !important;
        font-weight:    bolder;
        padding:        4px 1.5ex 3px !important;
    }

Answer 4

使用一些CSS很容易，你可以轻松覆盖jQuery UI提供的标准CSS。如果修改后的CSS出现在jQuery UI CSS之后，您可能不需要！important。

您还可以在加载jQuery时删除/添加每个元素的类，但这似乎有点不必要。

Answer 5

使用CSS应该相当简单。您的元素上有ID和类，您可以使用CSS触摸它们。 Themeroller只是一个快速的事情。

如果我记得，您还可以调整标签js并调整添加图像的行（如果这是相同的插件），或者只是根据自己的喜好删除该行。

Answer 6

我想知道！important属性是否应该首先在默认的jquery ui模板中。例如，如果您将标签更改为左侧或右侧而不是顶部，则“border-bottom”不应该具有！important，因为这通常会被覆盖。

Answer 7

这里几乎涵盖了所有内容，但我环顾四周，找到了一种方法，可以用一个类轻松地折腾你真正不需要的东西，然后编辑剩下的属性。

*[class*="ui-"] {
     border-radius:0;
     background-image: none;
     .
     .
     .
}

这样您就可以选择以“ui-”开头的每个类，并从jQuery UI中删除要删除的内容。

Answer 8

 #my-tabs * {
    background-image: transparent;
}

jquery ui tabs主要风格变化

8 个答案: