jQuery UI的标签主要风格的改变

StackOverflow https://stackoverflow.com/questions/2459223

题

我使用jquery UI选项卡，我需要majorly更改它的样式。我需要rempve背景图像，边框，几乎所有的东西。我需要它看起来不明显，不喜欢它的自给自足的。

什么是做到这一点的最好方法是什么？我需要使用默认的UI样式的但是日历窗口小部件，这是在同一页上。我已经做了很多的研究，每个人都似乎指向主题辊。但是，我不只是想改变颜色和边框半径。我需要删除垃圾。主题辊似乎只是改变颜色一样的东西（现实世界不是真的有用）。如何适应于选项卡中的CSS不改变在同一页上的样式其他UI部件的（我想日历停留，因为它是）？

使用jQuery UI我的标签它甚至值得？

有帮助吗？

解决方案

您应该检查出基思·伍德的详细博客帖子上的造型JQuery的UI选项卡

在回答您的具体问题

  

我需要rempve背景图像，边框，几乎一切。   我需要它看起来不明显

在本节中“除去大部分格式化的”基斯伍德的讯息。

在除了这一点，有10多个风格的变化，完成与达到预期效果所需要的CSS。

JQuery的UI标签样式 - 基思·伍德博客帖子

其他提示

我选择了写我自己的简单标签的功能时，我意识到，我并不需要它的大部分内置功能，如加载AJAX内容和动态添加/删除选项卡。如果我需要这些功能，这将是很容易实现他们自己。是什么把我推到沟jQuery UI的标签是，我不得不以不同的方式组织我的DOM元素。我还需要我的风格标签看起来微乎其微，而且我认为，从头开始构建会比试图夺走了很多精力少。

我最想念的特点是jQuery用户界面标签如何自动选择在URL由＃指定的标签（我知道我可以复制它 - 只是没有得到它尚未）。

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

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

等..

尝试在你的CSS假设你的类是超控的CSS .mytabs以下。它应该让你开始

.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;
    }

这很容易与一些CSS，你可以很容易地覆盖与jQuery UI提供的标准的CSS。如果你修改CSS的jQuery UI的CSS出现后你可能不需要！重要的。

您还可以删除/添加类上负载与jQuery每个元件，但似乎有点不必要的。

它应该与CSS相当简单的。你的元素对他们ID和班级，你可以用CSS触摸它们。的ThemeRoller仅仅是一个快速去到的事情。

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

我不知道！重要的属性应该是摆在首位的默认jQuery UI的模板。例如，如果您更改选项卡上的左侧或右侧，而不是顶部，在“边框底部”应该不会有！重要的，因为这是普遍覆盖。

几乎所有的东西在这里盖，但我环顾四周，发现了一种折腾的东西，你真的不需要很容易用一个单独的类，然后同时编辑其余的属性。

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

这样，您就选择所有以“用户界面 - ”启动类，并删除任何你想从jQuery UI的删除。

 #my-tabs * {
    background-image: transparent;
}
许可以下： CC-BY-SA 和 归因
不隶属于 StackOverflow
scroll top