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

html帮助类 (Html helper)

参考地址：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']) ?>
//会生成
<!--[if IE 5]>
    <link href="http://example.com/css/ie5.css" />
<![endif]-->

第一个参数是 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

第三个参数是标签的相关属性.

如果你想生成mailto 邮件链接:

<?= Html::mailto('Contact us', '[email protected]') ?>

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() 代替上面的就行了.

时间： 2024-11-06 16:05:23

Yii学习笔记之六（HTML生成帮助类api 翻译）的相关文章

Yii学习笔记之五（核心验证器 api 翻译）

核心验证器 Core Validators 0. 前言 Yii 提供了一系列常用的核心 validators, 你可在 yii\validators namespace 中找到. 不用使用长的验证器类名, 你可以使用别名代替他们. 例如, 你可以使用别名 required 代替 yii\validators\RequiredValidator 类: <?php public function rules() { return [ [['email', 'password'], 'required

Yii学习笔记之四（表单验证 api 翻译）

1.表单验证 对于用户输入的所有数据,你不能信任,必须加以验证. 所有框架如此,对于yii 可以使用函数 yii\base\Model::validate()  进行验证 他会返回boolean值的 true /false 如果验证未通过,可以使用 yii\base\Model::$errors 属性进行处理,如下代码: <?php //加载表单模型(绝对地址方式) /*如果上面引入 use app\models\ContactForm; 则可以直接使用 $model = new Contact

Citrix XenMobile学习笔记之六：XenMoble业务访问数据流程

总体访问流程图 终端设备注册流程 Android设备注册流程 到google Play或亚马逊应用商店或者豌豆荚.Citrix官网,下载思杰Worx Home应用.并在设备上安装. 当系统提示您安装该应用程序,单击下一步,然后单击安装. 安装Worx Home之后,点击启动. 输入您的认证信息,如设备管理器服务器名,用户主体名称(UPN),或电子邮件地址的名称,然后单击下一步. 在激活设备管理员屏幕上,点击激活. 输入您的账户密码,然后点击点登录. 根据XenMobile的配置方式,您可能会被要

yii学习笔记（在控制器访问别的类方法）

在当前控制器定义一个actions的方法 public function actions() { return array( // 'captcha'=>array( 'class'=>'CCaptchaAction', 'backColor'=>0xFFFFFF, ), // // 'page'=>array( 'class'=>'CViewAction', ), ); } function actions(){ return array( 'captcha'=>ar

android学习笔记——利用BaseAdapter生成40个列表项

RT: main.xml ? 1 2 3 4 5 6 7 8 9 10 11 12 <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"               android:orientation="vertical"        

C++ Primer 学习笔记_81_模板与泛型编程 --类模板成员[续1]

模板与泛型编程 --类模板成员[续1] 二.非类型形参的模板实参 template <int hi,int wid> class Screen { public: Screen():screen(hi * wid,'#'), cursor(hi * wid),height(hi),width(wid) {} //.. private: std::string screen; std::string::size_type cursor; std::string::size_type height

C++ Primer 学习笔记_82_模板与泛型编程 --类模板成员[续2]

模板与泛型编程 --类模板成员[续2] 六.完整的Queue类 Queue的完整定义: template <typename Type> class Queue; template <typename Type> ostream &operator<<(ostream &,const Queue<Type> &); template <typename Type> class QueueItem { friend clas

C++ Primer 学习笔记_72_面向对象编程 --句柄类与继承[续]

面向对象编程 --句柄类与继承[续] 三.句柄的使用 使用Sales_item对象能够更easy地编写书店应用程序.代码将不必管理Item_base对象的指针,但仍然能够获得通过Sales_item对象进行的调用的虚行为. 1.比較两个Sales_item对象 在编写函数计算销售总数之前,须要定义比較Sales_item对象的方法.要用Sales_item作为关联容器的keyword,必须能够比較它们.关联容器默认使用keyword类型的小于操作符,可是假设给Sales_item定义小于操作符,

Python学习笔记之六：在VS中调用Python

1,安装配置好Python本身的运行环境,以能在命令行下运行py脚本为准 2,将Python的根目录下的include文件夹,添加到VS的项目属性->配置属性->C/C++->"附加包含目录"中 3,将Python的根目录下的libs文件夹,添加到VS的项目属性->配置属性->链接器->"附加库目录"中 4,在C++项目中添加Python头文件: #include <python.h> 5,添加必要的Python初始化