8

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

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

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

4

8 回答 8

7

您应该查看 Keith Wood 关于样式化 JQuery UI Tabs的详细博客文章。

您的具体问题的答案

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

位于Keith Wood 帖子的“删除大部分格式”部分。

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

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

于 2012-03-26T07:21:31.090 回答
4

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

我最怀念的功能是 jQuery UI 选项卡如何自动选择 URL 中 # 指示的选项卡（我知道我可以复制它——只是还没有得到它）​​。

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

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

等等..

于 2010-03-17T01:26:05.080 回答
2

假设您的类是覆盖 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;
    }
于 2010-03-17T02:19:37.507 回答
2

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

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

于 2010-03-18T13:29:55.217 回答
0

使用 CSS 应该相当简单。你的元素上有 ID 和类，你可以用 CSS 来触摸它们。Themeroller 只是一个快速入门的东西。

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

于 2010-03-17T01:25:44.317 回答
0

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

于 2010-05-17T09:31:15.127 回答
0

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

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

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

于 2014-02-05T18:30:29.483 回答
0 
 #my-tabs * {
    background-image: transparent;
}
于 2014-10-01T17:37:56.633 回答