Yii学习笔记之六（HTML生成帮助类api 翻译）

1.基础知识

(1) 生成标签(Generating Tags)

生成标签的代码如下:

<?= Html::tag('p', Html::encode($user->name), ['class' => 'username']) ?>

<p class="username">samdark</p>

(2) 格式化css类和样式 (Forming CSS Classes and Styles)

当建立对HTML标记选项我们经常先从我们需要修改默认设置。为了添加或删除CSS类，
你可以使用以下命令：

<?php
$options = ['class' => 'btn btn-default'];

if ($type === 'success') {
    Html::removeCssClass($options, 'btn-default');
    Html::addCssClass($options, 'btn-success');
}

echo Html::tag('div', 'Pwede na', $options);

// 当 $type 是 'success' 成
// <div class="btn btn-success">Pwede na</div>
?>

<?php
$options = ['style' => ['width' => '100px', 'height' => '100px']];

// 添加样式 style="width: 100px; height: 200px; position: absolute;"
Html::addCssStyle($options, 'height: 200px; position: absolute;');

// 添加样式 style="position: absolute;" 移除掉 height和 width
Html::removeCssStyle($options, ['width', 'height']);
?>

(3) 编码和解码内容 (Encoding and Decoding Content)

为了让内容在HTML中正确安全的显示，需要对内容中的特殊字符进行编码.
在 PHP 中它是由 htmlspecialchars 和 htmlspecialchars_decode 函数来做的.
与直接使用这些方法的问题是，你必须指定编码和额外的标志所有的时间。因为标志是相同的所有时间和编码应匹配，以防止安全问题的应用中的一个，Yii中提供了两个紧凑和简单的使用方法：

<?php
$userName = Html::encode($user->name);
echo $userName;

$decodedUserName = Html::decode($userName);
?>

2. 表单 (Forms)

表单标记处理是相当频繁的，容易出错。正因为如此，有一组方法来帮助处理这些问题。

提示: 考虑使用 ActiveForm 如果你使用 models 而且需要验证(validation)的话.

(1) 创建表单 (Creating Forms)

Form 使用方法 beginForm() 打开form标签:

<?= Html::beginForm(['order/update', 'id' => $id], 'post', ['enctype' => 'multipart/form-data']) ?>

<?= Html::endForm() ?>

(2) 按钮 (Buttons)

为了生成按钮 你可以使用下面的代码:

<?= Html::button('Press me!', ['class' => 'teaser']) ?>
<?= Html::submitButton('Submit', ['class' => 'submit']) ?>
<?= Html::resetButton('Reset', ['class' => 'reset']) ?>

(3) 文件上传表单 (Input Fields)

下面有两组 input 方法.
一个是动态生成的调取动态的input另一个则不是.
动态inputs 会从 model获取指定的数据和属性，而普通表单是直接指定input数据。

最普遍使用两种方法如下:

类型type, input的name, input的value, input的相关选项

<?= Html::input('text', 'username', $user->name, ['class' => $username]) ?>

<?= Html::activeInput('text', $user, 'name', ['class' => $username]) ?>

(4) 单选按钮 和 复选框

Radios 和 checkboxes 就方法而言有一些不同:

<?= Html::radio('agree', true, ['label' => 'I agree']); ?>
<?= Html::activeRadio($model, 'agree', ['class' => 'agreement'])?>

<?= Html::checkbox('agree', true, ['label' => 'I agree']); ?>
<?= Html::activeCheckbox($model, 'agree', ['class' => 'agreement']) ?>

(5)下拉列表 和 列表

Dropdown list 和 list box 渲染方式如下:

<?= Html::dropDownList('list', $currentUserId, ArrayHelper::map($userModels, 'id', 'name')) ?>
<?= Html::activeDropDownList($users, 'id', ArrayHelper::map($userModels, 'id', 'name')) ?>

<?= Html::listBox('list', $currentUserId, ArrayHelper::map($userModels, 'id', 'name')) ?>
<?= Html::activeListBox($users, 'id', ArrayHelper::map($userModels, 'id', 'name')) ?>

(6)多选下拉列表

<?= Html::checkboxList('roles', [16, 42], ArrayHelper::map($roleModels, 'id', 'name')) ?>
<?= Html::activeCheckboxList($user, 'role', ArrayHelper::map($roleModels, 'id', 'name')) ?>

(7)单选列表

<?= Html::radioList('roles', [16, 42], ArrayHelper::map($roleModels, 'id', 'name')) ?>
<?= Html::activeRadioList($user, 'role', ArrayHelper::map($roleModels, 'id', 'name')) ?>

(8) 标签和错误 (Labels and Errors)

如同input一样这里也有两种方法生成 form labels.
动态的是从model中取值，另一个则是直接取值:

<?= Html::label('User name', 'username', ['class' => 'label username']) ?>
<?= Html::activeLabel($user, 'username', ['class' => 'label username']) ?>

<?= Html::errorSummary($posts, ['class' => 'errors']) ?>

<?= Html::error($post, 'title', ['class' => 'error']) ?>

(9) input的名字和值 (Input Names and Values)

这有两种方法去获取名字names, ids 和 values 对基于model的input字段 .
这些主要是内部使用，但有时可能不是很是得心应手:

<?php
// Post[title]
echo Html::getInputName($post, 'title');

// post-title
echo Html::getInputId($post, 'title');

// my first post
echo Html::getAttributeValue($post, 'title');

// $post->authors[0]
echo Html::getAttributeValue($post, '[0]authors[0]');

?>

<?php
// dates
echo Html::getAttributeName('dates[0]');
?>

3.样式和脚本 (Styles and Scripts)

这儿有两种方式声称样式和脚本:

<?= Html::style('.danger { color: #f00; }') ?>
//会生成
<style>.danger { color: #f00; }</style>

<?= Html::script('alert("Hello!");', ['defer' => true]);?>
//会生成
<script defer>alert("Hello!");</script>

<?= Html::cssFile('@web/css/ie5.css', ['condition' => 'IE 5']) ?>
//会生成
<!--[if IE 5]>
    <link href="http://example.com/css/ie5.css" />
<![endif]-->

<?= Html::jsFile('@web/js/main.js') ?>

4. 超链接 (Hyperlinks)

这里有一种渐变的方法去生成超链接:

<?= Html::a('Profile', ['user/view', 'id' => $id], ['class' => 'profile-link']) ?>

<?= Html::mailto('Contact us', 'admin@example.com') ?>

5. 图片 (Images)

下面是生成图片的标签:

<?= Html::img('@web/images/logo.png', ['alt' => 'My logo']) ?>
//生成
<img src="http://example.com/images/logo.png" alt="My logo" />

6. Lists 列表

无序列表的生成大概像下面的代码:

<?= Html::ul($posts, ['item' => function($item, $index) {
    return Html::tag(
        'li',
        $this->render('post', ['item' => $item]),
        ['class' => 'post']
    );
}]) ?>

Yii学习笔记之六（HTML生成帮助类api 翻译）

原文：http://blog.csdn.net/wujiangwei567/article/details/46469873