Yii 2 表单美化
1.1 表单美化
1.1.1 需求
Yii 2默认的表单样式如下(以login表单为例):
美工设计的样式如下:
1.1.2 Yii 2与Yii 1表单代码比较
在Yii 2中,对表单的功能进行了增强,在大多数情况下,表单的样式一般都是如上一节的图片所示,在Yii 1中,不能够整体上对表单的样式进行配置,只能是每一行单独设置,譬如:
<?php $form = $this->beginWidget('CActiveForm', array( |
可以看出,需要为每一行设置栅格系统的参数,Yii的ActiveField只是负责输出input控件,并没有为简化代码做出什么贡献,以至于后来我在用Yii 1做表单的时候,基本上不用ActiveField的方式输出input,而是直接写HTML代码,觉得这样还更简单一些。
而到了Yii 2,表单的代码变成如下:
<?php $form = ActiveForm::begin([ |
忽然发现表单代码清爽很多,没有了每一行外面的HTML包装器,想输出什么字段就直接放上一个ActiveField就好了。
1.1.3 Yii 2表单思路
用Yii 2实现表单,其基本思路是在ActiveForm::begin()中对整个表单的样式进行统一的初始化,然后在表单区域使用ActiveField输出想要的字段,同时可以在这里设置个别字段个性的显示样式。
1.1.4 Yii 2表单主要属性
在上面的Yii 2表单中,最主要的是如下几个属性:
l layout
这个是用来设置整个表单的布局的,按照官方文档的说明,可以取值为“default”、“horizontal”和“inline”,default和inline还没时间研究,horizontal是水平布局,就是指每一个字段占据一行的方式(效果图参见3.4.1)。
l fieldConfig
每个表单字段可以有Label、Input、Hint、Error、Offset等几种控件,在这里为表单内所有字段配置共同的属性,这样就省下了Yii 1中每一行还要单独配置这些控件的代码。
l horizontalCssClasses
这个是配置水平布局时,每个表单字段各个控件的CSS类参数,只有在layout=horizontal时才会起作用。
l options
这个是为表单配置HTML属性的。
使用上面的配置为表单字段配置CSS类,不会修改ActiveForm和ActiveField的默认类,譬如表单内的input控件,使用ActiveField创建出来的,都会带上“control-label”类,而上面配置的Label类,不会覆盖control-label,而是在原有值的基础上添加,实际输出的Label的类为“control-label col-sm-3 col-md-2”。
1.1.5 Yii 2表单字段的几个概念
看下图:
说明:
l label
是指input控件前的标签文字;
l wrapper
Yii在input控件外面会包一个div,这个div就叫做wrapper;
l error
对字段进行校验,所显示的错误信息
l offset
如果input控件前面没有label,则为了保持与其它input控件对其,前面的空白区域就叫做offset;
l hint
这个暂时还没有搞出来;
1.1.6 Yii 2表单按钮处理
Yii 2对表单字段的处理很好,但是对于表单的按钮,就没有这么好了,还是需要按照Yii 1的方式,单独输出按钮,并且在按钮外面自己包上容器:
<div class="form-group"> |
这样,最终的效果图如下:
现在表单样式基本美化完毕,但是还是可以看到Label和错误提示都不是中文,需要进行处理,这个在下一节进行说明。
1.1.7 修改hint位置
默认表单模板的显示效果如下:
hint的位置在input的后面,看起来视觉效果不好,我们希望做到下面这样的效果:
即提示信息在输入框的下面,这样看起来一目了然,要达到这样的效果,只需要修改ActiveForm的template参数即可:
<?php $form = ActiveForm::begin([ |
主要是使用“{beginWrapper}”和“{endWrapper}”这两个标签,将input、hint和error区域包含在一个div里,同时要将hint参数设置为空,避免默认的显示类影响显示效果。
转载于:https://my.oschina.net/tywali/blog/983718