ZUI 使用文档

调用 ZUI JS 组件

`JavaScript` 调用

ZUI 中有大量的 JavaScript 组件，这些组件在 JavaScript 脚本中可以直接使用，这里以数据表格 DTable 为例：

JavaScript

new zui.DTable(element, {
    responsive: true,
    width: '100%',
    height: 'auto',
    cols: [...],
    data: [...],
});

具体组件的使用方法可参考 ZUI 文档。

ZIN 调用

ZIN 的中部分部件基于 ZUI 组件实现，由 PHP 生成 JavaScript 代码间接调用 ZUI组件，如数据表格 dtable 部件的实现：

php

class dtable extends wg
{
    ...

    protected function build()
    {
        return zui::dtable(inherit($this));
    }
}

这里的 zui::table() 就是经由 PHP 生成类似 new DTable 这样的 JavaScript 的代码实现对数据表格组件的调用。这里的细节由 ZIN 机制封装隐藏，用户只需要关心对 ZIN 部件的传参要求。

ZIN 部件与 ZUI 组件在参数上具有一致性，调用 ZIN dtable 部件的 PHP 代码与调用 ZUI DTable 的 JavaScript 代码很相似：

php

dtable
(
    set::responsive(true),
    set::width('100%'),
    set::height('auto'),
    set::cols(array_values(...)),
    set::data(array_values(...))
)

文档查询

由于上文中所表述的这种相似性的存在，用户在对某个部件的使用存在疑惑时除了查询对应的 ZIN 部件文档之外，还可以在 ZUI 文档中查询对应的组件文档，以获得更多的细节。

ZUI 组件与基于它实现的 ZIN 部件在名称上几乎是一样的，只有大小写存在区别，用户可以通过文档搜索快速定位到对应的组件或部件文档。

使用 ZUI 工具类

ZUI 实现了大量的工具类，用户在实现某个页面或部件的样式时，可以直接使用这些工具类，如为 div 元素设置主题色背景：

php

div
(
    ...
    setClass('bg-primary'),
    ...
);

ZUI 文档 CSS 工具类章节中罗列了所有的 ZUI 工具类，用户可以通过这些文档学习使用 ZUI 工具类。

`toggle` 辅助类

toggle辅助类用来快速为某个部件添加 data-toggle 及 data-* 的 HTML 属性，如使用 <a> 标签快速实现提示消息：

zin s声明生成的 HTML

php

a
(
    ...
    toggle::tooltip(array(
        'placement' => 'right',
        'collapse-text' => '收起菜单',
        'unfold-text' => '展开菜单'
    )),
    ...
)

html

<a
    ...
    data-toggle="tooltip"
    data-placement="right"
    data-collapse-text="收起菜单"
    data-unfold-text="展开菜单"
    ...
>
    ...
</a>

其中 tootip 静态函数名用于生成 data-toggle="tooltip" 属性值，参数 array('placement' => 'right', 'collapse-text' => '收起菜单', 'unfold-text' => '展开菜单') 用于生成 data-placement="right" data-collapse-text="收起菜单" data-unfold-text="展开菜单" 属性值。

ZUI 使用文档 ​

调用 ZUI JS 组件 ​

JavaScript 调用 ​

ZIN 调用 ​

文档查询 ​

使用 ZUI 工具类 ​

toggle 辅助类 ​