在原生WordPress脚本中使用jQuery选项卡有什么解决方案吗?如果您知道在前端和后端使用jQuery选项卡的任何方法,请共享您的解决方案。
我已尝试实施jQuery Tabs (链接中提供示例源)
Dependencies:
- UI Core
- Widget Factory
- Effects Core (可选;用于show 和hide 选项)
Additional Notes:
这个小部件需要一些功能性CSS,否则它将无法工作。如果构建自定义主题,请使用小部件的特定CSS文件作为起点。
我还尝试实施Organic Tabs (demo) (source)
我尝试将所有本机WordPress脚本排队,但无法使选项卡正常工作。
在原生WordPress脚本中使用第一个选项(jQuery和jQuery UI)不起作用。当我使用最新版本的jQeury而不是原生的WordPress jQuery时,它们工作正常,但随后管理界面的其余部分被破坏。
再看一下Organic Tabs源代码,就好像该代码最后一次测试是为了使用jQuery版本:1.7.1
.
作为补充说明,本机WordPress jQuery版本似乎是:1.8.3
Here are the styles being added for jQuery and jQuery UI tabs.
$to_add[\'jquery-ui\'] = \'http://code.jquery.com/ui/1.10.1/themes/base/jquery-ui.css\';
$to_add[\'tabs\'] = \'./css/global/tabs.css\';// path to custom tab styles.
Here are the scripts being added for jQuery and jQuery UI tabs.
$to_add[\'jquery\'] = includes_url(\'/js/jquery/jquery.js\');
$to_add[\'jquery-ui-core\'] = includes_url(\'/js/jquery/ui/jquery.ui.core.min.js\');
$to_add[\'jquery-ui-widget\'] = includes_url(\'/js/jquery/ui/jquery.ui.widget.min.js\');
$to_add[\'jquery-effects-core\'] = includes_url(\'/js/jquery/ui/jquery.ui.effect.min.js\');
$to_add[\'jquery-ui-tabs\'] = includes_url(\'/js/jquery/ui/jquery.ui.tabs.min.js\');
当然,开火了
admin_enqueue_scripts
使用
wp_enqueue_style()
和
wp_enqueue_script()
Using their same HTML markup from the example just changing the tabs container ID to a class instead.
<script>
$(function(){
$(".tabs_container").tabs();
});
</script>
Setting jQuery Script to:
$to_add[\'jquery\'] = \'http://code.jquery.com/jquery-latest.js\';
使选项卡正常工作,但仪表板的所有其他区域都会分页符。
我所指的仪表板页面是:任何帖子类型的帖子编辑屏幕。正在尝试将jQeury选项卡添加到元数据库。
It looks like WordPress is loading the following scripts on the post edit screen:
最合适的回答,由SO网友:bcorkins 整理而成
jQuery UI选项卡实际上随WordPress core一起提供,因此实现它们非常简单。听起来您只是想利用管理端的选项卡,因此非常基本的设置如下所示:
In functions.php:
function my_enqueue_scripts($hook) {
// Only load the scripts on the pages where they\'re needed
if( \'myfile.php\' != $hook )
return;
wp_register_style( \'tabs_css\', \'path/to/tabs.css\' );
wp_enqueue_style( \'tabs_css\' );
wp_enqueue_script("jquery-ui-tabs");
wp_enqueue_script( \'admin_scripts\', \'path/to/admin-script.js\', array(\'jquery\', \'jquery-ui-tabs\') );
// No need to enqueue jQuery as it\'s already included in the WordPress admin by default
}
add_action( \'admin_enqueue_scripts\', \'my_enqueue_scripts\' );
In admin-script.js:
jQuery(document).ready(function($) {
$(".tabs_container").tabs();
});
然后使用与示例中相同的HTML标记。如果您让它与jQuery的另一个版本一起使用,那么听起来您对这一部分的理解是正确的。
SO网友:Michael Ecklund
好吧,答案其实很简单。
Enqueuing Styles
您需要将jquery ui基CSS文件排队以获得适当的功能。然后立即将自定义选项卡样式排入队列。
示例:
$styles[\'jquery-ui\'] = \'http://code.jquery.com/ui/1.10.1/themes/base/jquery-ui.css\';
$styles[\'tabs\'] = \'./css/global/tabs.css\';// path to custom tab styles.
Enqueuing Scripts
您不能包括jQuery,因为admin部分已经加载了jQuery。我将对选项卡的调用放在一个单独的JS文件中,并在最后一个标题中将其排队。
因此:
jQuery(document).ready(function($) {
$(".tabs_container").tabs();
});
已移至
tabs.js
我的插件目录中的文件。
所需脚本示例:
$scripts[\'jquery-ui-core\'] = includes_url(\'/js/jquery/ui/jquery.ui.core.min.js\');
$scripts[\'jquery-ui-widget\'] = includes_url(\'/js/jquery/ui/jquery.ui.widget.min.js\');
$scripts[\'jquery-effects-core\'] = includes_url(\'/js/jquery/ui/jquery.ui.effect.min.js\');
$scripts[\'jquery-ui-tabs\'] = includes_url(\'/js/jquery/ui/jquery.ui.tabs.min.js\');
$scripts[\'tabs\'] = \'./js/global/tabs.js\';
塔达阿。给你。仪表板中的jQuery选项卡。
例如,如果您使用管理脚本进行组织,请编辑2013年6月29日。你可能会用钩子admin_print_scripts
和admin_enqueue_scripts
. 我想如果我打电话给admin_enqueue_scripts
通话前admin_print_scripts
重要的脚本将在打印任何其他脚本之前排队。我错了。我花了整整45分钟试图找出问题所在。长话短说,尽管我认为我的脚本会在其他脚本打印之前排队,但这是错误的。
我是怎么修好的?
为您的admin_print_scripts
钩我把我的设定为“999”。这样可以确保在使用jQuery UI核心和小部件工厂的脚本之前包含我所需的脚本。例如选项卡。如果我没有这样做,那么在加载必要的依赖项之前,我的选项卡脚本就会被打印出来。因此,他们一直不能正常工作的原因。