jquery ui标签主要风格变化

我正在使用jquery UI选项卡，我需要主要更改它的样式。我需要放弃背景图像，边界，几乎所有东西。我需要它看起来很小，而不是像它自成一体。jquery ui标签主要风格变化

这样做的最好方法是什么？但是，我需要为日历小部件使用默认的UI样式，它位于同一页面上。我做了大量的研究，每个人似乎都指向了主题滚轮。但是，我不只是想改变颜色和边框半径。我需要删除垃圾。主题辊似乎只是改变颜色的东西（对真实世界并不真正有用）。如何在不改变同一页面上其他UI小部件样式的情况下调整标签的CSS（我希望日历保持原样）？

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

来源

2010-03-17 Jonah

无法回答问题的最后部分。这是你必须自己决定的事情。其余的很容易。只适应CSS。 – jitter 2010-03-17 01:06:54

如何在不改变日历样式的情况下调整标签的CSS？ – Jonah 2010-03-17 01:22:24

你应该看看Keith Wood在上的详细博客文章，样式JQuery UI标签。

回答你的具体问题

我需要rempve背景图像，边框，几乎所有的东西。我需要它看起来不明显

是基思·伍德的帖子的这部分“Remove most of the formatting”。

除此之外，还有10个更多的风格变化，完成所需的CSS以达到预期的效果。

JQuery UI Tabs Styling - Keith Wood Blog Post

来源

2012-03-26 07:21:31 Shiva

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

如果我回想起来，还可以调整标签js并调整添加图像的线条（如果这是同一个插件），或者完全按照您的喜好去除该线条。

来源

2010-03-17 01:25:44 Kevin

我选择编写自己的简单标签功能时，我意识到我不需要大部分内置功能，例如加载AJAX内容和动态添加/删除标签。如果我需要这些功能，自己实现它们将很容易。是什么促使我抛弃jQuery UI Tabs，是因为我必须以不同的方式构建我的DOM元素。我还需要让我的标签看起来很小，我认为从头开始构建会比试图剥离很少。

我最想错过的特性是jQuery UI Tabs如何自动选择由URL中的＃表示的选项卡（我知道我可以复制它 - 只是还没有得到它）。

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

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

等..

来源

2010-03-17 01:26:05

这似乎是一条很好的路线。有没有办法阻止jquery向widget中添加类，以便我可以从头开始编写样式？ – Jonah 2010-03-17 02:18:20

尝试以下在你的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-17 02:19:37 kiev

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

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

来源

2010-03-18 13:29:55

我不知道！重要的属性应该在默认的jQuery UI模板中放在第一位。例如，如果将选项卡更改为左侧或右侧而不是顶部，则'border-bottom'不应该有！important，因为这通常会被覆盖。

来源

2010-05-17 09:31:15 user339047

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

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

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

来源

2014-02-05 18:30:29

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

来源

2014-10-01 17:37:56 Bellash

提供某种解释和任何代码总是有帮助的。 – 2014-10-01 18:13:53

jquery ui标签主要风格变化

回答

相关问题