README

介绍

此模块提供了一种从一些最好的前端框架中获取多个 UI 资源的快捷方式。随着时间的推移，我将添加更多库并增加更多当前资源。

Jquery: 2.1.3 jquery.com
Bootstrap: 3.3.4 getbootstrap.com
Font Awesome: 4.3.0 fortawesome.github.io
Chosen: 1.4.1 http://harvesthq.github.io/chosen/
MomentJs: 2.9.0 https://moment.js.cn

该想法是简化前端开发。您无需担心分别下载每个库，控制它们的版本等。请参阅下面的用法。

要求

PHP 5.4 或更高版本
Zend Framework 2 framework.zend.com。
rwoverdijk 的 AssetManager rwoverdijk/assetmanager
上述任何库

安装

可以使用 composer 或手动安装

使用 composer 安装

有关 composer 文档，请参阅 getcomposer.org。

使用以下内容创建或编辑您的 composer.json 文件

{
    "minimum-stability": "dev",
    "require": {
        "acplo/acploui": "1.*"
    }
}

运行 php composer.phar install
打开 my/project/directory/config/application.config.php 并将 AcploUi 添加到您的 modules

无 composer 安装

将此模块 AcploUi 复制到您的 vendor 目录
在 config/application.config.php 中启用它，如上一节的第 4 步。

用法

此模块提供两个主要的视图辅助器：AcploHeadLink 和 AcploHeadScript。您可以将这些与默认的 ZF HeadLink 和 HeadScript 一起使用，以使用其资源。

Jquery

Jquery 作为本地文件（默认）或 CDN 提供。只需将 "true" 传递给 appendJquery 方法即可使用 CDN 文件。第二个参数指示是否使用精简版本（默认）或不使用，而第三个参数指示 CDN 文件的特定版本。

只需将以下内容添加到您的 layout.phtml 文件中

<?php
//Will use the local minified version  
echo $this->acploHeadScript()->appendJquery();

//Will use the CDN version  
echo $this->acploHeadScript()->appendJquery(true);
 
//Will use the 2.1.0 unminified CDN version  
echo $this->acploHeadScript()->appendJquery(true, false, '2.1.0'); 
?>

它将生成以下 HTML

<script src="/jquery/dist/jquery.min.js" type="text/javascript"></script>

Font Awesome

Font Awesome 作为本地文件（默认）或 CDN 提供。只需将 "true" 传递给 appendFontAwesome 方法即可使用 CDN 文件。第二个参数指示是否使用精简版本（默认）或不使用，而第三个参数指示 CDN 文件的特定版本。

使用以下内容包含样式表

<?php 
//Will use the local minified version
echo $this->acploHeadLink()->appendFontAwesome();

//Will use the minified CDN version
echo $this->acploHeadLink()->appendFontAwesome(true);
 
//Will use the 4.2.0 unminified CDN version  
echo $this->acploHeadLink()->appendFontAwesome(true, false, '4.2.0');
?>

最后一个调用将生成以下 HTML

<link type="text/css" rel="stylesheet" media="screen" href="/fontawesome/css/font-awesome.min.css">

要使用它们的图标很简单，只需使用 AcploIcon 视图辅助器

<?= $this->acploIcon('fa-user') ?>

将生成

<span class="fa fa-user"></span>

您可以传递第二个参数以添加任何样式

<?= $this->acploIcon('fa-user', 'margin-right:4px;float:none') ?>

将生成

<span class="fa fa-user" style="margin-right:4px;float:none"></span>

如果您需要添加一个类，请将其与图标一起传递

<?= $this->acploIcon('fa-user pull-right') ?>

将生成

<span class="fa fa-user pull-right"></span>

您甚至可以将图标作为方法调用

<?= $this->acploIcon()->FaUser() ?>

您可以使用 "i" 标签使用图标，无论是 glyphicon 还是 fontawesome

<?= $this->acploIcon('fa-user','',true) ?>

将生成

<i class="fa fa-user"></i>

Chosen

如果未提供第一个参数作为元素，模块将假定 "select" 并将 Chosen 应用于所有 "select" 元素。您可以将 Chosen 属性作为数组（第一个或第二个参数）传递。

<script>
<?= $this->acploChosen() ?>
<?= $this->acploChosen('#my_select') ?>
<?= $this->acploChosen('#my_select',['disable_search_threshold'=>10]) ?>
<?= $this->acploChosen(['disable_search_threshold'=>10]) ?>
</script>

您不必事先包含样式表和脚本。如果您像上面那样调用视图辅助函数，模块会为您包含这两个文件的压缩版本。要禁用此行为，请将最后一个参数传递为false。

<script>
<?= $this->acploChosen(false) ?>
<?= $this->acploChosen('#my_select', false) ?>
<?= $this->acploChosen('#my_select',['disable_search_threshold'=>10], false) ?>
<?= $this->acploChosen(['disable_search_threshold'=>10], false) ?>
</script>

您可以手动包含样式表和脚本（可以使用附加或预加）

<?php echo $this->acploHeadLink()->appendChosen() ?>
<?php echo $this->acploHeadScript()->appendChosen() ?>

它将生成以下 HTML

<link type="text/css" rel="stylesheet" media="screen" href="/chosen/chosen.min.css">
<script src="/chosen/chosen.jquery.min.js" type="text/javascript"></script>

同样，您可以使用false参数获取默认文件

<link type="text/css" rel="stylesheet" media="screen" href="/chosen/chosen.css">
<script src="/chosen/chosen.jquery.js" type="text/javascript"></script>

更新：从版本1.0.19开始，您可以使用Bootstrap 3来设置Chosen元素。只需将第四个参数传递为true即可

acploChosen('#my_select',['disable_search_threshold'=>10], true, true) ?>

或者，您可以手动使用以下方式包含必要的样式

acploHeadLink()->appendChosenBootstrap() ?>

Moment

要包含脚本（可以使用附加或预加）

<?php echo $this->acploHeadScript()->appendMoment() ?>

它将生成以下 HTML

<script src="/moment/min/moment.min.js" type="text/javascript"></script>

同样，您可以使用false参数获取默认文件

<script src="/moment/moment.js" type="text/javascript"></script>

您可以通过传递给appendMoment一个数组来指定要添加哪些翻译

<?php echo $this->acploHeadScript()->appendMoment(['pt-br','en']) ?>

它将生成以下 HTML

<script src="/moment/min/moment.min.js" type="text/javascript"></script>
<script src="/moment/min/locale/pt-br.min.js" type="text/javascript"></script>
<script src="/moment/min/locale/en.min.js" type="text/javascript"></script>

您可以与未压缩版本结合使用

<?php echo $this->acploHeadScript()->appendMoment(['pt-br','en'],false) ?>

它将生成以下 HTML

<script src="/moment/moment.js" type="text/javascript"></script>
<script src="/moment/locale/pt-br.js" type="text/javascript"></script>
<script src="/moment/locale/en.js" type="text/javascript"></script>

您可以使用一个压缩文件添加所有语言

<?php echo $this->acploHeadScript()->appendMoment(['*']) ?>

它将生成以下 HTML

<script src="/moment/min/moment-with-locales.min.js" type="text/javascript"></script>

Bootstrap

Bootstrap提供为本地文件（默认）或CDN。只需将“true”传递给appendBootstrap方法即可使用CDN文件。第二个参数表示是否使用压缩版本（默认）或不是，第三个参数表示CDN文件的特定版本。

使用（可以附加或预加）包含样式表

<?php 
//Will use the minified local version
echo $this->acploHeadLink()->appendBootstrap();
echo $this->acploHeadScript()->appendBootstrap();

//Will use the minified CDN version
echo $this->acploHeadLink()->appendBootstrap(true);
echo $this->acploHeadScript()->appendBootstrap(true);  

//Will use the 3.3.1 unminified CDN version  
echo $this->acploHeadLink()->appendBootstrap(true, false, '3.3.1');
echo $this->acploHeadScript()->appendBootstrap(true, false, '3.3.1');
?>

第一次调用将生成以下HTML

<link type="text/css" rel="stylesheet" media="screen" href="/bootstrap/dist/css/bootstrap.min.css">
<script src="/bootstrap/dist/js/bootstrap.min.js" type="text/javascript"></script>

对于下面的每个部分，请参阅Bootstrap文档中的类规范。

表单

此模块提供了一个自动添加Bootstrap样式的表单视图辅助函数。只需使用默认表单，但使用新的视图辅助函数即可

<?= $this->acploForm($form) ?>

要使表单水平，只需在第二个参数中传递true，以及标签将使用的列数（默认为2）

<?= $this->acploForm($form, true) ?>
<?= $this->acploForm($form, true, 4) ?>

在水平表单中，按钮和复选框将与其他字段对齐，而不是使用标签列。为了更好地设置复选框和单选按钮的样式，请将以下内容添加到您的样式表中

.radio label, .checkbox label {
    padding-right: 20px;
}

有一个AcploFormRow视图辅助函数，它只打印一行。它将添加所有必要的类，包括表单错误的通知。

<?= $this->acploFormRow($form->get('password') ?>

如果您需要更改表单元素的顺序，您可以这样做（以下为带有4列标签的水平表单的示例）

echo $this->acploForm()->openTag($form, true);
foreach (['name','gender','email','password','passwordVerify','captcha','newsletter','submit'] as $element) {
    echo $this->acploFormRow()->render($form->get($element), true, 4);
}
echo $this->acploForm()->closeTag();

警报

<?= $this->acploAlert('test') ?>
<?= $this->acploAlert('<strong>Warning</strong> Testing...') ?>

默认警报使用警告样式，但没有cacploe图标（X）。但您可以使用任何警报

<?= $this->acploAlert()->success('test') ?>
<?= $this->acploAlert()->info('test') ?>
<?= $this->acploAlert()->warning('test') ?>
<?= $this->acploAlert()->danger('test') ?>

如果您想使用可关闭的警报，只需调用

<?= $this->acploAlert()->setDismissible(true)->success('test') ?>

徽章

<?= $this->acploBadge('2') ?>

按钮

<?= $this->acploButton('Test') ?>
<?= $this->acploButton('Test','primary') ?>
<?= $this->acploButton('Test','danger','margin-right:10px;') ?>
<?= $this->acploButton()->setDefault('Test') ?>
<?= $this->acploButton()->primary('Test') ?>
<?= $this->acploButton()->success('Test') ?>
<?= $this->acploButton()->info('Test') ?>
<?= $this->acploButton()->warning('Test') ?>
<?= $this->acploButton()->danger('Test') ?>
<?= $this->acploButton()->link('Test') ?>
<?= $this->acploButton()->primary('Test','margin-right:10px;') ?>
<?= $this->acploButton()->setId('testid')->primary('Test') ?>
<?= $this->acploButton()->setName('testname')->primary('Test') ?>
<?= $this->acploButton()->setLarge()->primary('Test') ?>
<?= $this->acploButton()->setSmall()->primary('Test') ?>
<?= $this->acploButton()->setExtraSmall()->primary('Test') ?>
<?= $this->acploButton()->isActive()->primary('Test') ?>
<?= $this->acploButton()->isBlock()->danger('Test') ?>
<?= $this->acploButton()->isDisabled()->info('Test') ?>
<?= $this->acploButton()->setId('testid')->setName('testname')->isDisabled()->isBlock()->info('Test') ?>

图标

要使用它们的图标很简单，只需使用 AcploIcon 视图辅助器

<?= $this->acploIcon('glyphicon-user') ?>

将生成

<span class="glyphicon glyphicon-user"></span>

您可以传递第二个参数以添加任何样式

<?= $this->acploIcon('glyphicon-user', 'margin-right:4px;float:none') ?>

将生成

<span class="glyphicon glyphicon-user" style="margin-right:4px;float:none"></span>

如果您需要添加一个类，请将其与图标一起传递

<?= $this->acploIcon('glyphicon-user pull-right') ?>

将生成

<span class="glyphicon glyphicon-user pull-right"></span>

您甚至可以将图标作为方法调用

<?= $this->acploIcon()->GlyphiconUser() ?>

图片

<?php echo $this->acploImage('/images/logo.png') ?>
<?php echo $this->acploImage()->circle('/images/logo.png') ?>
<?php echo $this->acploImage()->rounded('/images/logo.png') ?>
<?php echo $this->acploImage()->thumbnail('/images/logo.png') ?>

默认情况下，图片接收一个img-responsive类。要删除它，请调用

<?php echo $this->acploImage('/images/logo.png')->setResponsive(false) ?>

'navigation' => [
    'default' => [
        'crud' => [
            'pages' => [
                [
                    'label' => 'Client',
                    'route' => 'client',
                    'pages' => [
                        [
                            'label' => 'Edit Client',
                            'route' => 'client/edit',
                        ],
                        [
                    		'type' => 'AcploUi\Navigation\Page\Divider'
                 		],
                  		[
                            'label' => 'Remove Client',
                            'route' => 'client/remove',
                        ],
                    ]
                ]
            ]
        ]
    ]
]

面包屑辅助函数将遵循面包屑。

如果您仅使用href中的'#'定义URI类型的页面，则面包屑将仅打印其标签而不会生成链接。如果您有一个未链接到路由的分类，这非常有用。

分页器

您可以使用分页器视图辅助函数将其样式设置为默认分页器或分页符。

默认辅助函数将使用“滑动”滚动系统，以及Bootstrap的“默认分页器”。要更改此行为，只需使用滚动系统的第二个参数，第三个参数为null（将使用此库视图文件）。

<?= $this->acploPaginationControl($this->paginator); ?>
<?= $this->acploPaginationControl($this->paginator, 'All'); ?>
<?= $this->acploPaginationControl($this->paginator, 'Elastic'); ?>
<?= $this->acploPaginationControl($this->paginator, 'Jumping'); ?>
<?= $this->acploPaginationControl($this->paginator, 'Sliding'); ?>
<?= $this->acploPaginationControl($this->paginator, 'Sliding', null, ['type' => 'pager','aligned'=>false,'nextLabel'=>'Próximo']); ?>

以下是在第四个参数中可用的选项：

'type': 'pager'。如果指定为pager，将使用分页器。如果省略，将使用默认分页器。
'aligned': true（默认）或 false。将使用对齐的分页器版本。
'size': 'sm' 或 'lg'。分别使用小号或大号。
'nextLabel': '下一个'按钮的标签。可以与glyphicon或FontAwesome结合使用。
'previousLabel': 与nextLabel相同，但用于'上一个'按钮。

嗯

<?= $this->acploWell('test') ?>
<?= $this->acploWell()->small('test') ?>
<?= $this->acploWell()->large('test') ?>

acplo / acploui

维护者

详细信息

README

介绍

要求

安装

使用 composer 安装

无 composer 安装

用法

Jquery

Font Awesome

Chosen

Moment

Bootstrap

表单

警报

徽章

按钮

图标

图片

标签

导航

分页器

嗯