WordPress、jQuery UI CSS 文件？

Question

提问by Merianos Nikos

I'm trying to create a WordPress plugin, and I would like to have jQuery UI Tabs in one of my settings pages.

我正在尝试创建一个 WordPress 插件，并且我希望在我的设置页面之一中有 jQuery UI 选项卡。

I already have the scripting code set:

我已经有了脚本代码集：

wp_enqueue_script('jquery');                    // Enque jQuery
wp_enqueue_script('jquery-ui-core');            // Enque jQuery UI Core
wp_enqueue_script('jquery-ui-tabs');            // Enque jQuery UI Tabs

...and I have created the HTML and JavaScript too. Until here all are fine.

...我也创建了 HTML 和 JavaScript。直到这里一切都很好。

The question is:

问题是：

The WordPress platform comes with some scripts already pre-installed like the one I have enqueue above. My script runs fine with the tabs, but it is not styled! So what I'm trying to ask, does the WordPress platform come with jQuery UI Theme pre-installed? ...and if so, how do I enqueue the style into my plugin?

WordPress 平台附带了一些已经预先安装的脚本，就像我上面排队的那个。我的脚本在选项卡上运行良好，但没有样式！所以我想问的是，WordPress 平台是否预装了 jQuery UI 主题？...如果是这样，我如何将样式放入我的插件中？

Answer 1

回答by EkoJR

Sounds more like you have an issue with finding an available styling within WordPress for the jquery-ui theme.

听起来更像是您在 WordPress 中为 jquery-ui 主题寻找可用样式时遇到问题。

To answer your question. No, WordPress has no useful styles available within the platform itself.The only available css is in \wp-includes\jquery-ui-dialog.css, and that alone isn't very useful.

回答你的问题。不，WordPress 在平台本身内没有可用的有用样式。唯一可用的 css 位于 \wp-includes\jquery-ui-dialog.css 中，仅此一项并不是很有用。

I also had the same issue, and I found two options. Either store it in a CSS folder and load it from there, or load it via URL(Google APIs). For JQuery UI I decided to rely on Google's CDA and added a way to utilize the 'Theme Roller'. Storing that amount of css code seems un-nessecary to begin with, and its too bad WordPress doesn't provide any styling support like they do with the jquery-ui scripts.

我也有同样的问题，我找到了两个选项。要么将其存储在 CSS 文件夹中并从那里加载它，要么通过URL（Google API）加载它。对于 JQuery UI，我决定依赖 Google 的 CDA 并添加了一种利用“主题滚轮”的方法。存储大量的 css 代码一开始似乎并不必要，而且它太糟糕了 WordPress 没有像 jquery-ui 脚本那样提供任何样式支持。

However, WP does offer scripts, which will keep the CSS up to date with $wp_scripts->registered['jquery-ui-core']->ver. You can either access it with wp_scripts();OR global $wp_scripts;.

但是，WP 确实提供了脚本，这将使 CSS 保持最新的$wp_scripts->registered['jquery-ui-core']->ver. 您可以使用wp_scripts();OR访问它global $wp_scripts;。

Static-theme

静态主题

$wp_scripts = wp_scripts();
wp_enqueue_style('plugin_name-admin-ui-css',
                'http://ajax.googleapis.com/ajax/libs/jqueryui/' . $wp_scripts->registered['jquery-ui-core']->ver . '/themes/smoothness/jquery-ui.css',
                false,
                PLUGIN_VERSION,
                false);

OR Dynamic-theme

OR 动态主题

$wp_scripts = wp_scripts();
wp_enqueue_style('plugin_name-admin-ui-css',
                'http://ajax.googleapis.com/ajax/libs/jqueryui/' . $wp_scripts->registered['jquery-ui-core']->ver . '/themes/' . $pluginOptions['jquery_ui_theme'] . '/jquery-ui.css',
                false,
                PLUGIN_VERSION,
                false);

And an example of locally storing it

以及本地存储它的示例

wp_enqueue_style('plugin_name-admin-ui-css',
                plugins_url() . '/plugin-folder-name/includes/css/jquery-ui-theme-name.css',
                false,
                PLUGIN_VERSION,
                false);

Answer 2

回答by Tim S.

I don't think a UI theme comes pre-installed. You need to add the script to the header.

我认为没有预装 UI 主题。您需要将脚本添加到标题中。

I think you're looking for this function. It allows you to add a script to your header. Just put the theme's css somewhere in your plugin folder and include that.

我想你正在寻找这个功能。它允许您将脚本添加到标题中。只需将主题的 css 放在插件文件夹中的某个位置并包含它。

Answer 3

回答by Luc Lérot

To add some more details to EkoJr's answer, as of Jquery UI v1.11.4 if you add the whole JQuery UI CSS stylesheet, it might break the default Wordpress Theme styling.

要向 EkoJr 的答案添加更多细节，从 Jquery UI v1.11.4 开始，如果您添加整个 JQuery UI CSS 样式表，它可能会破坏默认的 Wordpress 主题样式。

So, you could only add the CSS classes corresponding to the slider component. Here are the classes I used (note : these are built for the ui-darkness theme) :

因此，您只能添加与滑块组件对应的 CSS 类。这是我使用的类（注意：这些是为ui-darkness 主题构建的）：

.ui-state-default,
.ui-widget-content .ui-state-default,
.ui-widget-header .ui-state-default {
    border: 1px solid #666666;
    /* this image is from the ui-darkness theme, use the one you'd like */
    background: #555555 url("img/jquery-ui/ui-bg_glass_20_555555_1x400.png") 50% 50% repeat-x;
    font-weight: bold;
    color: #eeeeee;
}
.ui-slider-horizontal .ui-slider-handle {
    top: -.3em;
    margin-left: -.6em;
}
.ui-slider .ui-slider-handle {
    position: absolute;
    z-index: 2;
    width: 1.2em;
    height: 1.2em;
    cursor: default;
    -ms-touch-action: none;
    touch-action: none;
}
.ui-corner-all,
.ui-corner-bottom,
.ui-corner-right,
.ui-corner-br {
    border-bottom-right-radius: 6px;
}
.ui-corner-all,
.ui-corner-bottom,
.ui-corner-left,
.ui-corner-bl {
    border-bottom-left-radius: 6px;
}
.ui-corner-all,
.ui-corner-top,
.ui-corner-right,
.ui-corner-tr {
    border-top-right-radius: 6px;
}
.ui-corner-all,
.ui-corner-top,
.ui-corner-left,
.ui-corner-tl {
    border-top-left-radius: 6px;
}
.ui-corner-all,
.ui-corner-bottom,
.ui-corner-right,
.ui-corner-br {
    border-bottom-right-radius: 6px;
}
.ui-corner-all,
.ui-corner-bottom,
.ui-corner-left,
.ui-corner-bl {
    border-bottom-left-radius: 6px;
}
.ui-corner-all,
.ui-corner-top,
.ui-corner-right,
.ui-corner-tr {
    border-top-right-radius: 6px;
}
.ui-corner-all,
.ui-corner-top,
.ui-corner-left,
.ui-corner-tl {
    border-top-left-radius: 6px;
}
.ui-widget-content {
    border: 1px solid #666666;
    /* this image is from the ui-darkness theme, use the one you'd like */
    background: #000000 url("img/jquery-ui/ui-bg_inset-soft_25_000000_1x100.png") 50% bottom repeat-x;
    color: #ffffff;
}
.ui-widget {
    font-family: Segoe UI,Arial,sans-serif;
    font-size: 1.1em;
}
.ui-slider-horizontal {
    height: .8em;
}
.ui-slider {
    position: relative;
    text-align: left;
}

Also, please note that you can prefixthose classes with your container ID. For exemple, if your slider has the ID 'slider', use :

另外，请注意，您可以使用容器 ID 为这些类添加前缀。例如，如果您的滑块具有 ID 'slider'，请使用：

 #slider .ui-state-default,
 #slider .ui-widget-content .ui-state-default,
 #slider .ui-widget-header .ui-state-default {
    border: 1px solid #666666;
    /* this image is from the ui-darkness theme, use the one you'd like */
    background: #555555 url("img/jquery-ui/ui-bg_glass_20_555555_1x400.png") 50% 50% repeat-x;
    font-weight: bold;
    color: #eeeeee;
}
....ETC

Answer 4

回答by Arun Basil Lal

An update for the changes that has happened with WordPress ever since. Recent WordPress packages come with the CSS in the box.

从那时起 WordPress 发生的变化的更新。最近的 WordPress 软件包随附了 CSS。

You can find then in wp-includes\cssand enqueue using wp_enqueue_style().

您可以wp-includes\css使用wp_enqueue_style().

I think for OP's use case wp_enqueue_style( 'wp-jquery-ui-dialog' );is all that was needed.

我认为对于 OP 的用例wp_enqueue_style( 'wp-jquery-ui-dialog' );来说，这就是所需要的。

Hope this helps someone in the future.

希望这对未来的人有所帮助。

Answer 5

回答by Hix.botay

I just face this issue and found the post then I found a way is that inserting class "subsubsub" to ul tag. The list will be not bad. The code will be:

我只是面对这个问题并找到了帖子然后我找到了一种方法是将类“subsubsub”插入到ul标签中。名单不会差。代码将是：

<div id="tabs">
<ul class="subsubsub"><li><a href="#tab1"></a></li>
<div id="tab1"></div>
</div>

Hope it can help someone.

希望它可以帮助某人。

Answer 6

回答by Paul

If you use the wp_enqueue_style()and wp_enqueue_script()calls correctly, and assuming other author's are using them correctly as well, then WordPress will take care of conflicts.

如果您正确使用wp_enqueue_style()andwp_enqueue_script()调用，并假设其他作者也正确使用它们，那么 WordPress 会处理冲突。

However if a plugin or theme author prints the styles or scripts directly to the head of the page using wp_heador admin_headactions then there's not much you can do to avoid conflict.

但是，如果插件或主题作者使用wp_head或admin_head动作将样式或脚本直接打印到页面的头部，那么您无能为力避免冲突。

Refs:
- http://codex.wordpress.org/Function_Reference/wp_enqueue_style
- http://codex.wordpress.org/Function_Reference/wp_enqueue_script

参考：
- http://codex.wordpress.org/Function_Reference/wp_enqueue_style
- http://codex.wordpress.org/Function_Reference/wp_enqueue_script

WordPress、jQuery UI CSS 文件？

提问by Merianos Nikos

回答by EkoJR

回答by Tim S.

回答by Luc Lérot

回答by Arun Basil Lal

回答by Hix.botay

回答by Paul

相关推荐

最近更新

标签

WordPress、jQuery UI CSS 文件？

提问by Merianos Nikos

回答by EkoJR

回答by Tim S.

回答by Luc Lérot

回答by Arun Basil Lal

回答by Hix.botay

回答by Paul

相关推荐

jquery 文件上传 - IE 完成回调 data.result 问题

jQuery 从 servlet 返回 JSON

jQuery $.browser 的替代品是什么

如何在 CodeIgniter 中包含 jQuery 文件？

相关推荐

最近更新

标签