为我自己的HTML元素使用jQuery UI css样式

时间:2022-11-02 20:52:47

Using jQuery UI gives me these nice stylesheets. These apply to the widgets, ... of jQuery UI. But how could I apply these styles to my own HTML elements to have the same look and feel?

使用jQuery UI为我提供了这些漂亮的样式表。这些应用于小部件,……jQuery UI。但是,我如何将这些样式应用到我自己的HTML元素中,使其具有相同的外观和感觉呢?

When I change the jQuery UI theme I want my pages to change accordingly. I am aware there are similar questions such as " jQuery UI Themeroller Question ". There it is said I can only open the CSS and manually apply a CSS class to my elements.

当我更改jQuery UI主题时,我希望我的页面相应地更改。我知道有类似的问题,比如“jQuery UI Themeroller问题”。在那里,据说我只能打开CSS并手动地将CSS类应用到我的元素中。

Is there no better / official way to do it? Especially with the Theme Switcher I could easily have a customizable UI.

难道没有更好的/正式的方法来做这件事吗?特别是使用主题切换器,我可以轻松地拥有一个可定制的UI。

-- Add on to original question --

——加上最初的问题。

OK, all of you explain me, that I have to manually apply the css class to my element. I appreciate the information and you certainly have more CSS experience than I do. However, when I later want to change the style, I have to change this (jQuery UI) class in many places - e.g. all td elements. So in my CSS files I prefer to apply styles via selectors.

好的,你们都解释了,我必须手动地将css类应用到我的元素上。我很欣赏这些信息,你肯定比我有更多的CSS经验。但是,当我以后想要更改样式时,我必须在很多地方更改这个(jQuery UI)类——例如所有td元素。所以在我的CSS文件中,我更喜欢通过选择器应用样式。

Q: Can I re-apply a class (of the jQuery UI css) with a selector, something like "apply class XYZ to all of my table headers in div "ABC"?

问:我可以重新应用一个类(jQuery UI css的)和一个选择器,比如“将类XYZ应用到div”ABC中的所有表头吗?

I could do this via jQuery selection, but can I do it within "my css"?

我可以通过jQuery选择来实现,但是我可以在“我的css”中实现吗?

2 个解决方案

#1


4  

In firefox/chrome

在firefox /铬

Right click the element whose style you want to copy, and select inpsect element. Note which classes it belongs to.

右键单击要复制其样式的元素,并选择inpsect元素。注意它属于哪个类。

Add those classes to your elements

将这些类添加到元素中。

to answer your td question above:

回答你上面的td问题:

you could create a td class in your css, and copy the styles from the jquery ui csss file to it:

您可以在css中创建一个td类,并将jquery ui csss文件中的样式复制到它:

td{
 //Styles go here
}

also, you asked "apply class XYZ to all of my table headers in div "ABC"?" add this to your css file

另外,您还要求“将类XYZ应用到div的所有表头中”ABC”

if the divs ID is ABC

如果div ID是ABC。

div#ABC th{
   //Styles Go Here
}

if the divs class is ABC

如果divs是ABC的话。

div.ABC th{
   //Styles Go Here
}

#2


5  

To answer your question, that is the official way of theming your own elements not constructed by a jQuery UI widget. You must apply the specific classes to your elements, and they will end up looking like other widgets from jQuery UI.

要回答您的问题,这是您自己的元素的官方方式,不是由jQuery UI小部件构建的。您必须将特定的类应用到您的元素中,它们最终看起来就像jQuery UI中的其他小部件。

#1


4  

In firefox/chrome

在firefox /铬

Right click the element whose style you want to copy, and select inpsect element. Note which classes it belongs to.

右键单击要复制其样式的元素,并选择inpsect元素。注意它属于哪个类。

Add those classes to your elements

将这些类添加到元素中。

to answer your td question above:

回答你上面的td问题:

you could create a td class in your css, and copy the styles from the jquery ui csss file to it:

您可以在css中创建一个td类,并将jquery ui csss文件中的样式复制到它:

td{
 //Styles go here
}

also, you asked "apply class XYZ to all of my table headers in div "ABC"?" add this to your css file

另外,您还要求“将类XYZ应用到div的所有表头中”ABC”

if the divs ID is ABC

如果div ID是ABC。

div#ABC th{
   //Styles Go Here
}

if the divs class is ABC

如果divs是ABC的话。

div.ABC th{
   //Styles Go Here
}

#2


5  

To answer your question, that is the official way of theming your own elements not constructed by a jQuery UI widget. You must apply the specific classes to your elements, and they will end up looking like other widgets from jQuery UI.

要回答您的问题,这是您自己的元素的官方方式,不是由jQuery UI小部件构建的。您必须将特定的类应用到您的元素中,它们最终看起来就像jQuery UI中的其他小部件。