上一篇文章《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中使用,其实就是上一篇文章代码的延伸,效果如下图所示,感兴趣的可以下载插件玩一玩。

测试jquery ui 已下载 164 次

测试jquery ui效果

 

3条留言

    1. 是啊,我对js的东西不太懂,有这些东西帮忙能省不少事呢

评论功能已关闭