jquery ui tabs 主要风格变化

Question

我正在使用 jquery UI 选项卡，我需要主要更改它的样式。我需要重新调整背景图像、边框，几乎所有内容。我需要它看起来最小，而不是像它是独立的。

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

我的选项卡是否值得使用 jquery UI？

Answer 1

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

您的具体问题的答案

我需要重新调整背景图像、边框，几乎所有内容。
我需要它看起来最小

在 Keith Wood 帖子的“删除大部分格式”部分中。

除此之外，还有 10 处样式更改，以及实现所需效果所需的 CSS。

JQuery UI 选项卡样式 - Keith Wood 博客文章

Answer 2

当我意识到我不需要它的大部分内置功能（例如加载 AJAX 内容和动态添加/删除选项卡）时，我选择编写自己的简单选项卡功能。如果我需要这些功能，我自己实现它们会很容易。促使我放弃 jQuery UI 选项卡的原因是我必须以不同的方式构建 DOM 元素。我还需要将我的选项卡设计得看起来最小，而且我认为从头开始构建比尝试剥离很多东西要省力。

我最怀念的功能是 jQuery UI Tabs 如何自动选择 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;
}