用户登录

现在我要修改一下 Drupal 下拉菜单的样式 .. 比如在这个添加评论类型的界面上,有个下拉菜单 .. 我想把 Semantic UI 的 Dropdown 模块用在我的 Drupal 界面上 ..

看一下 Examples ... 可以预览一下这个下拉菜单的效果 .. 再查看一下代码 .. 我需要在 select 元素上,添加 ui 还有 dropdown 这两个 css 类 ..

找开我的自定义的模块 .. 找到 element_info_alter .. 在这个函数里,我们可以直接修改 Drupal 的 Select 元素 .. 判断一下有没有 select ,有的话,就在 select 元素的 #attributes ,class 里面添加一个 css 类 .. 先添加一个 ui ...

复制一下,再添加一个 dropdown ..

再去定义一个资源库 ..

名字是 ui.dropdown .. 设置一下 version .. css ... 群组是 component .. css 的位置是在 semantic .. dist .. components .. dropdown.css:{}

这个库还需要一个 js 文件 .. 位置是在 semantic .. dist .. components .. dropdown.js

我还需要一个自定义的 js 文件,去配置一下 Semantic UI 的 Dropdown .. 文件可以是 js .. dropdown.config.js .. 一会需要去创建这个文件 ..

这个库还要依赖几个东西 .. 一个是核心自带的 jquery ... 它还需要 Semantic UI 的 transition 模块 .. 这个库可以是 ninghao_ui/ui.transition .. 在上面我已经定义好了这个库 ..

然后把这个库放在 select 元素上用一下 ..

在 select 的 #attached ... library 下面,添加一个 ninghao_ui/ui.dropdown ...

重建缓存 ..

再去预览一下 ... 你会发现这个下拉菜单的样式已经有了一些变化 ... 不过我们还需要去配置一下它 ..

在我的自定义模块的下面,创建一个 js 文件,名字是 dropdown.config.js ..

在里面添加点自定义的 js 代码 ..

找到页面上的带 .ui.dropdown 类的元素 .. 然后应用一下 dropdown ..

现在,这个下拉菜单就是我想要的样子了 ...

0:00
0:00
0:00
1:30
0:00
0:00
1:14
0:00
0:00

下拉菜单《 Drupal:自定义界面 》

统计

14696
分钟
0
你学会了
0%
完成

社会化网络

关于

微信订阅号

扫描微信二维码关注宁皓网,每天进步一点