上一篇文章《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 Core | jquery-ui-core (Att.: This is not the whole core incl. all core plugins. Just the base core.) | jquery |
jQuery UI Widget | jquery-ui-widget | jquery |
jQuery UI Mouse | jquery-ui-mouse | jquery |
jQuery UI Accordion | jquery-ui-accordion | jquery |
jQuery UI Slider | jquery-ui-slider | jquery |
jQuery UI Tabs | jquery-ui-tabs | jquery |
jQuery UI Sortable | jquery-ui-sortable | jquery |
jQuery UI Draggable | jquery-ui-draggable | jquery |
jQuery UI Droppable | jquery-ui-droppable | jquery |
jQuery UI Selectable | jquery-ui-selectable | jquery |
jQuery UI Datepicker | jquery-ui-datepicker | jquery |
jQuery UI Resizable | jquery-ui-resizable | jquery |
jQuery UI Dialog | jquery-ui-dialog | jquery |
jQuery UI Button | jquery-ui-button | jquery |
为了更好的了解这些特效,写了段代码测试了一些效果,感觉很棒。由于我不懂前端知识,所以不喜欢自己去琢磨怎么实现tab切换效果,怎么实现滑块效果,使用现成且维护良好的库是我最喜欢干的事。
这个小插件可以帮助你了解jQuery UI 以及如何在WordPress中使用,其实就是上一篇文章代码的延伸,效果如下图所示,感兴趣的可以下载插件玩一玩。
[download id=35]
看起来蛮好玩的~
是啊,我对js的东西不太懂,有这些东西帮忙能省不少事呢
感觉学了蛮多东西,收藏您的博客了。希望您经常更新一些好的文章!