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

「爱情、让人受尽委屈。」 2022-08-05 07:43 119阅读 0赞

html帮助类 (Html helper)  
参考地址：[http://www.yiiframework.com/doc-2.0/guide-helper-html.html][http_www.yiiframework.com_doc-2.0_guide-helper-html.html]  
  
每一个web应用都会生成许多的HTML 标签，如果标签是静态的，他就能有效的避免PHP代码和HTML之间的混淆；但是当它是动态生成，它就开始变得棘手处理，不过它无需额外的帮助下完成。Yii 提供了这样的辅助 在一个form 提供了一系列静态的方法来处理生成 HTML标签组件, 以及他们的选项和内容.  
  
提示: 入过你的标签是静态的你最好直接使用 HTML. 没必要再去调用Html helper 函数.

## 1.基础知识 ##

由于通过字符串连接构建动态HTML越来越快但是非常凌乱，Yii提供了一套方法来操纵标签选项，并基于这些选项建立标签.

### (1) 生成标签(Generating Tags) ###

生成标签的代码如下:

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

第一个参数是标签名字.  
第二个参数是标签的内容. 注意这里我们使用 Html::encode. 那是因为内容在HTML中不会自动编码.  
第三个参数是可选的一个数组包含HTML的相关选项, 换言之, 就是该标签的相关属性. 数组中key是属性名，如class, href 或者 target 值就是该属性对应的值了.  
  
上面的代码生成下面的内容：

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

有些情况下你仅仅需要开始标签或者闭合标签，你可以使用  Html::beginTag() 和 Html::endTag() 方法.  
  
选项用来在HTML辅助和各种部件的方法很多。在所有这些情况下，有一些额外的处理需要了解:  
  
a. 如果值为null，对应的属性将不会被渲染.  
b. 其属性值是布尔类型的将被视为布尔属性.  
c. 属性的值将HTML编码使用 Html::encode().  
d. 如果属性的值是一个数组, 它将会向下面这样处理:  
  
如果属性是一个数据属性作为中列出  
yii\\helpers\\Html::$dataAttributes,   
就像 data 或 ng, 一个属性列表将会被渲染, 例如,  
'data' => \['id' => 1, 'name' => 'yii'\]  
会生成  
data-id="1" data-name="yii";  
而  
'data' => \['params' => \['id' => 1, 'name' => 'yii'\], 'status' => 'ok'\]  
则生成  
data-params='\{"id":1,"name":"yii"\}' data-status="ok".  
  
注意在后一个例子中, 子数组会被渲染成 JSON 格式.  
如果属性不是 data , 他将直接进行 JSON-encoded. 例如,  
\['params' => \['id' => 1, 'name' => 'yii'\]  
生成  
params='\{"id":1,"name":"yii"\}'.

### (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']);
    ?>

当使用 addCssStyle() 你能制定关于CSS属性的任意键值对的数组 就像  
width: 100px; height: 200px;.  
这些格式可以通过使用 cssStyleFromArray() 和  cssStyleToArray().进行相互转换。  
removeCssStyle()方法接收一个数组的参数 列出想要移除的css属性名. 如果只有单个属性  
可以直接指定成一个字符串.

### (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']) ?>

第一个参数是提交的url地址. 它可以在Yii中路由的形式 Url::to()指定，并接受参数可以接受参数.  
第二个参数是提交的方式. 默认是 post.  
第三个参数是form标签的可选项. 比如上传文件 我们需要使用 enctype = multipart/form-data.   
  
关闭form标签:

<?= Html::endForm() ?>

### (2) 按钮 (Buttons) ###

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

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

所有三种方法的第一个参数是按钮标题和第二个是选项.  
标题是不会编码，因此，如果您正在从最终用户获取数据，用它进行编码 Html::encode().

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

下面有两组 input 方法.  
一个是动态生成的调取动态的input另一个则不是.  
动态inputs 会从 model获取指定的数据和属性，而普通表单是直接指定input数据。  
  
最普遍使用两种方法如下:  
  
类型type, input的name, input的value, input的相关选项

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

类型type, 所在模型 model, model的属性名 , input的相关选项

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

如果你事先知道input的类型 下面有更快捷的方式:  
  
//下面是相关的组件及方法  
yii\\helpers\\Html::buttonInput()  
yii\\helpers\\Html::submitInput()  
yii\\helpers\\Html::resetInput()  
yii\\helpers\\Html::textInput(), yii\\helpers\\Html::activeTextInput()  
yii\\helpers\\Html::hiddenInput(), yii\\helpers\\Html::activeHiddenInput()  
yii\\helpers\\Html::passwordInput() / yii\\helpers\\Html::activePasswordInput()  
yii\\helpers\\Html::fileInput(), yii\\helpers\\Html::activeFileInput()  
yii\\helpers\\Html::textarea(), yii\\helpers\\Html::activeTextarea()

### (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')) ?>

第一个参数是 input的名字 name  
第二个参数是当前选中的selected下拉框的值  
第三个参数是一个键值对 数组的键是列表的值，列表的值则是 list的 标签 lable

### (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']) ?>

为了显示来自一个或多个 model 的form错误，这里有一个总结 你可能会用到:

<?= 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]');
    
    ?>

上面的例子中第一个参数是model，第二个参数是属性表达式  
  
在其最简单的形式，它的属性名称，但它可能是一个属性名前缀和/或后缀，主要用于对表单输入数组索引：  
  
  
\[0\]content 用在数据列表中输入到表示"content”属性以数据列表输入的模型第一个值;  
dates\[0\]  表示"dates"数组元素的第一个属性;  
\[0\]dates\[0\] 表示"dates"数组元素的第一个属性对应表单输入的第一个model.  
  
为了得到属性名且不带前缀或后缀 你可以使用下面的形式:

<?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']) ?>
    //会生成

第一个参数是 URL.  
第二个参数是一系列的操作属性. 另外常规选项，你可以指定:  
  
条件来包装 链接与指定的条件条件注释。希望你永远不会需要有条件的评论  
<noscript>可以被设置为true来包装<link>与<noscript>标签因此将被纳入只有当有一个在浏览器中  
没有任何支持JavaScript，或者它被用户关闭。  
链接 JavaScript 文件:

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

参数使用和css文件引入一样，也可以设置俩参数 第二个参数同上.

## 4. 超链接 (Hyperlinks) ##

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

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

第一个参数是标题.没有编过码，如果需要，你可以使用Html::encode().   
第二个参数将指定 a标签的href属性. 可以参考 Url::to() 更多参数细节请查看.  
[http://www.yiiframework.com/doc-2.0/guide-helper-url.html][http_www.yiiframework.com_doc-2.0_guide-helper-url.html]  
第三个参数是标签的相关属性.  
  
如果你想生成mailto 邮件链接:

<?= 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" />

第一个参数是url 第二个参数是img标签的可选项

## 6. Lists 列表 ##

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

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

有序列表用 Html::ol() 代替上面的就行了.

[http_www.yiiframework.com_doc-2.0_guide-helper-html.html]: http://www.yiiframework.com/doc-2.0/guide-helper-html.html
[http_www.yiiframework.com_doc-2.0_guide-helper-url.html]: http://www.yiiframework.com/doc-2.0/guide-helper-url.html