ZUI JS 组件 zui

用法

zui 部件封装了前端框架 ZUI，通过调用ZUI提供的 zin.create 函数，引入相应的前端JavaScript组件。

zin 部件

$options = array
(
    'page'        => 2,
    'recTotal'    => 101,
    'recPerPage'  => 10,
    'linkCreator' => '#?page={page}&recPerPage={recPerPage}',
    'onClickItem' => jsRaw("(info) => {console.log('> pager.onClickItem', info);}"),
    'items'       => array
    (
        array('type' => 'info',      'text' => '共 {recTotal} 项'),
        array('type' => 'size-menu', 'text' => '每页 {recPerPage} 项', 'dropdown' => array('placement' => 'top')),
        array('type' =>'link', 'page' => 'first', 'icon' => 'icon-double-angle-left', 'hint' => '第一页'),
        array('type' =>'link', 'page' => 'prev',  'icon' => 'icon-angle-left',        'hint' => '上一页'),
        array('type' =>'info', 'text' => '{page}/{pageTotal}'),
        array('type' =>'link', 'page' => 'next',  'icon' => 'icon-angle-right',        'hint' => '下一页'),
        array('type' =>'link', 'page' => 'last',  'icon' => 'icon-double-angle-right', 'hint' => '最后一页'),
    ),
);

zui::pager(set($options));

生成的 HTML

<div data-zin-id="zin1">
    <nav class="pager gap-1" zinid="zin1" page="2" rectotal="101" recperpage="10" linkcreator="#?page={page}&amp;recPerPage={recPerPage}">
        <div class="pager-info">共 101 项</div>
        <button class="btn ghost dropdown pager-size-menu size-sm" type="button" data-toggle="dropdown" data-dropdown-placement="top">
            <span class="text">每页 10 项</span><span class="caret-up"></span>
        </button>
        <a class="btn ghost pager-link square size-sm" title="第一页" href="#?page=1&amp;recPerPage=10"><i class="icon icon-double-angle-left"></i></a>
        <a class="btn ghost pager-link square size-sm" title="上一页" href="#?page=1&amp;recPerPage=10"><i class="icon icon-angle-left"></i></a>
        <div class="pager-info">2/11</div>
        <a class="btn ghost pager-link square size-sm" title="下一页" href="#?page=3&amp;recPerPage=10"><i class="icon icon-angle-right"></i></a>
        <a class="btn ghost pager-link square size-sm" title="最后一页" href="#?page=11&amp;recPerPage=10"><i class="icon icon-double-angle-right"></i></a>
    </nav>
</div>
<script>
(
    function()
    {
        $(
            () => zui.create(
                "pager",
                "[data-zin-id='zin1']",
                {
                    "page":2,
                    "recTotal":101,
                    "recPerPage":10,
                    "linkCreator":"#?page={page}&recPerPage={recPerPage}",
                    "onClickItem":(info) => {console.log('> pager.onClickItem', info);},
                    "items":
                    [
                        {"type":"info","text":"共 {recTotal} 项"},
                        {"type":"size-menu","text":"每页 {recPerPage} 项","dropdown":{"placement":"top"}},
                        {"type":"link","page":"first","icon":"icon-double-angle-left","hint":"第一页"},
                        {"type":"link","page":"prev","icon":"icon-angle-left","hint":"上一页"},
                        {"type":"info","text":"{page}\/{pageTotal}"},
                        {"type":"link","page":"next","icon":"icon-angle-right","hint":"下一页"},
                        {"type":"link","page":"last","icon":"icon-double-angle-right","hint":"最后一页"}
                    ]
                }
            )
        );
    }()
)
</script>

属性

属性名	类型	默认值	说明
_name	string	-	ZUI的组件名称，PHP静态方法自动获取，无需指定。
_to	string	-	将组件渲染到该选择子对应的HTML元素内。
_tag	string	div	_to 属性未设置时，将ZUI组件渲染到此用此属性的HTML标签内。
_toProps	array	-	给 _tag 标签设置的属性。

其他附加属性作为 options 参数传给ZUI组件。

块

无

数据

无