Yii2.0 Html帮助类

Html帮助类

use yii\helpers\Html;

生成标签

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

生成 CSS 类和样式

// class
$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);
// <div class="btn btn-success">Pwede na</div>

// style
$options = ['style' => ['width' => '100px', 'height' => '100px']];
// gives style="width: 100px; height: 200px; position: absolute;"
Html::addCssStyle($options, 'height: 200px; position: absolute;');

// gives style="position: absolute;"
Html::removeCssStyle($options, ['width', 'height']);

// 相同的属性会被覆盖

标签内容的转码和解码

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

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

创建表单

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

// 关闭表单
<?= Html::endForm() ?>

按钮

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

输入框

// 参数: type, input name, input value, options
<?= Html::input('text', 'username', $user->name, ['class' => $username]) ?>

type, model, model attribute name, options
<?= 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()

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

如果你需要使用多项选择

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

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

Labels 和 Errors

Yii 也提供了两个方法用于生成表单 label 。 带 ative 方法用于从 model 中取数据,另外一个则是直接接收数据。

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

//为了从一个或者一组 model 中显示表单的概要错误,你可以使用如下方法:
<?= Html::errorSummary($posts, ['class' => 'errors']) ?>

// 显示单个错误:
<?= Html::error($post, 'title', ['class' => 'error']) ?>

Input 的名和值

Yii 提供了方法用于从 model 中获取 input 的名称,ids,值。

// 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]');
// 在上面的例子中,第一个参数为模型,而第二个参数是属性表达式。 在最简单的表单中,这个属性表达式就是属性名称,但是在一些多行输入的时候,
// 它也可以是属性名以数组下标前缀或者后缀(也可能是同时)。

// [0]content 代表多行输入时第一个 model 的 content 属性的数据值。
// dates[0] 代表 dates 属性的第一个数组元素。
// [0]dates[0] 代表多行输入时第一个 model 的 dates 属性的第一个数组元素。
// 为了获取一个没有前缀或者后缀的属性名称,我们可以如下做:

// dates
echo Html::getAttributeName('dates[0]');

样式表和脚本

<?= Html::style('.danger { color: #f00; }') ?>
<!-- <style>.danger { color: #f00; }</style> -->


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

如果你想要外联 css 样式文件,可以如下做:

<?= Html::cssFile('@web/css/ie5.css', ['condition' => 'IE 5']) ?>

<!--[if IE 5]>
    <link href="http://example.com/css/ie5.css" />
<![endif]-->
<!-- 第一个参数是 URL。第二个参数是标签属性数组。 -->

为了外联 JavaScript 文件:

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

超链接

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

<!-- 在需要的时候,你可以用如下代码生成 mailto 链接: -->
<?= Html::mailto('Contact us', 'admin@example.com') ?>

图片

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

列表

无序列表可以如下生成:

<?= Html::ul($posts, ['item' => function($item, $index) {
    return Html::tag(
        'li',
        $this->render('post', ['item' => $item]),
        ['class' => 'post']
    );
}]) ?>
<!-- 有序列表请使用 Html::ol() 方法。 -->

参考: -http://www.yiichina.com/doc/guide/2.0/helper-html




导航