WordPress

WordPress & jQuery UI

上一篇文章《admin_print_scripts-(page_hook) 的用法》提到WordPress中集成了很多jQuery UI的库文件，突然很感兴趣，本人对前端基本不懂，所以要做个什么效果相当费力，但有jQuery UI帮忙，就能简单不少。到wp3.3+，jQuery UI被单独存放在一个文件夹中，更加清晰易用。

WordPress内置的jQuery UI库

jQuery UI可以帮助我们完成很多有用的操作，比如拖拽、排序、日期选择、tab切换等等，WordPress的用户界面非常友好，也得益于jQuery UI。

要知道WordPress集成了哪些jQuery UI库，可以查看一下wp_enqueue_script函数的文档，因为这个函数负责管理js脚本。

WordPress内置的脚本已经预先注册，使用的时候更加快捷，例如要引入jQuery UI核心文件，只需要

wp_enqueue_script( 'jquery-ui-core' );

目测一下至少包含下面这些库

jQuery UI Corejquery-ui-core (Att.: This is not the whole core incl. all core plugins. Just the base core.)jquery
jQuery UI Widgetjquery-ui-widgetjquery
jQuery UI Mousejquery-ui-mousejquery
jQuery UI Accordionjquery-ui-accordionjquery
jQuery UI Sliderjquery-ui-sliderjquery
jQuery UI Tabsjquery-ui-tabsjquery
jQuery UI Sortablejquery-ui-sortablejquery
jQuery UI Draggablejquery-ui-draggablejquery
jQuery UI Droppablejquery-ui-droppablejquery
jQuery UI Selectablejquery-ui-selectablejquery
jQuery UI Datepickerjquery-ui-datepickerjquery
jQuery UI Resizablejquery-ui-resizablejquery
jQuery UI Dialogjquery-ui-dialogjquery
jQuery UI Buttonjquery-ui-buttonjquery

为了更好的了解这些特效，写了段代码测试了一些效果，感觉很棒。由于我不懂前端知识，所以不喜欢自己去琢磨怎么实现tab切换效果，怎么实现滑块效果，使用现成且维护良好的库是我最喜欢干的事。

这个小插件可以帮助你了解jQuery UI 以及如何在WordPress中使用，其实就是上一篇文章代码的延伸，效果如下图所示，感兴趣的可以下载插件玩一玩。

[download id=35]

测试jquery ui效果

 

3条评论

评论已关闭。