Yii 2 表单美化
博客专区 > tywali 的博客 > 博客详情
Yii 2 表单美化
tywali 发表于10个月前
Yii 2 表单美化
  • 发表于 10个月前
  • 阅读 37
  • 收藏 1
  • 点赞 0
  • 评论 0

【腾讯云】新注册用户域名抢购1元起>>>   

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(
    'id' => 'user-auth-form',
    'enableAjaxValidation' => false,
    'htmlOptions' => array('enctype' => "multipart/form-data",
        "class" => "form-horizontal",
        "role" => "form"))); ?>
<div class="row">
    <div class="col-md-2 nowrap">
        姓名
    </div>
    <div class="col-md-10">
        <?php echo $form->textField($model, 'fname',
            array('maxlength' => 100, 'required' => true,
                "class" => "form-control")); ?>
    </div>
</div>
<div class="row">
    <div class="col-md-2 nowrap">
        手机号
    </div>
    <div class="col-md-10">
        <?php echo $form->textField($model, 'fphone',
            array('maxlength' => 100, 'required' => true,
                "class" => "form-control")); ?>
    </div>
</div>
<?php $this->endWidget(); ?>

 

可以看出,需要为每一行设置栅格系统的参数,Yii的ActiveField只是负责输出input控件,并没有为简化代码做出什么贡献,以至于后来我在用Yii 1做表单的时候,基本上不用ActiveField的方式输出input,而是直接写HTML代码,觉得这样还更简单一些。

 

而到了Yii 2,表单的代码变成如下:

<?php $form = ActiveForm::begin([
    'id' => 'login-form',
    'layout' => 'horizontal',
    'options' => [
        'class' => 'ldo-login-form',
    ],
    'fieldConfig' => [
        'horizontalCssClasses' => [
            'label' => 'col-sm-3 col-md-2',
            'wrapper' => 'col-sm-9 col-md-10',
            'error' => 'text-left',
            'offset' => 'col-sm-offset-3 col-md-offset-2',
        ]],
]); ?>
<?= $form->field($model, 'username')->textInput(['autofocus' => true]) ?>
<?= $form->field($model, 'password')->passwordInput() ?>
<?= $form->field($model, 'rememberMe')->checkbox()  ?>
<div class="form-group">
    <div class="col-sm-9 col-md-10 col-sm-offset-3 col-md-offset-2">
        <?= Html::submitButton('登录', ['class' => 'btn btn-primary', 'name' => 'login-button']) ?>
    </div>
</div>
<?php ActiveForm::end(); ?>

 

忽然发现表单代码清爽很多,没有了每一行外面的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">
    <div class="col-sm-9 col-md-10 col-sm-offset-3 col-md-offset-2">
        <?= Html::submitButton('登录', ['class' => 'btn btn-primary', 'name' => 'login-button']) ?>
    </div>
</div>

 

这样,最终的效果图如下:

 

现在表单样式基本美化完毕,但是还是可以看到Label和错误提示都不是中文,需要进行处理,这个在下一节进行说明。

1.1.7  修改hint位置

默认表单模板的显示效果如下:

 

hint的位置在input的后面,看起来视觉效果不好,我们希望做到下面这样的效果:

 

即提示信息在输入框的下面,这样看起来一目了然,要达到这样的效果,只需要修改ActiveForm的template参数即可:

<?php $form = ActiveForm::begin([
    'id' => 'form',
    'layout' => 'horizontal',
    'options' => [
        'class' => '',
    ],
    'action' => 'saveDeviceSn.html',
    'fieldConfig' => [
        'template' => '{label}{beginWrapper}{input}{hint}{error}{endWrapper}',
        'horizontalCssClasses' => [
            'label' => 'col-sm-2 col-md-1',
            'wrapper' => 'col-sm-6 col-md-5',
            'error' => 'text-left',
            'offset' => 'col-sm-offset-2 col-md-offset-2',
            'hint' => '',
        ]],
]); ?>

 

主要是使用“{beginWrapper}”和“{endWrapper}”这两个标签,将input、hint和error区域包含在一个div里,同时要将hint参数设置为空,避免默认的显示类影响显示效果。

标签: PHP Yii2
  • 打赏
  • 点赞
  • 收藏
  • 分享
共有 人打赏支持
粉丝 0
博文 84
码字总数 21117
×
tywali
如果觉得我的文章对您有用,请随意打赏。您的支持将鼓励我继续创作!
* 金额(元)
¥1 ¥5 ¥10 ¥20 其他金额
打赏人
留言
* 支付类型
微信扫码支付
打赏金额:
已支付成功
打赏金额: