文档章节

Yii 2 表单美化

tywali
 tywali
发布于 2017/06/19 18:24
字数 1257
阅读 64
收藏 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参数设置为空,避免默认的显示类影响显示效果。

© 著作权归作者所有

共有 人打赏支持
tywali
粉丝 0
博文 85
码字总数 21246
作品 0
深圳
程序员
Yii入门指导(四):强大的“小物件”

1,修改默认的控制器 Yii的默认应用: 所有的配置都可以在main.php中进行配置,那么修改默认的控制器就是在main.php中增加如下代码: 'defaultController' => '', //修改默认控制器 Yii模块:...

Koma
2014/10/24
0
1
详解Yii2框架中生成URL的方法

前言 在项目中,推荐使用 Yii2 内置的 URL 工具类生成链接,这样可以非常便捷的管理整站的 URL 行为:比如通过修改配置改变整站的URL格式等。URL 更多高级的用法参见官方文档,这篇文章仅仅介...

botkenni
06/07
0
0
Yii2 Unable to verify your data submission 错误-CSRF

Yii2 功能很是强大,组件化编程很高大上,全栈编程很容易,但我觉得日常的开发中还是有很大一部分人会去手写表单之类的,为了配合前端的工作,或者懒得再去学这套堪比一门新语言的组件语法....

big_cat
2016/02/01
345
2
yii2 modal弹窗之ActiveForm ajax表单异步验证

作者:白狼 出处:http://www.manks.top/yii2modalactiveform_ajax.html 本文版权归作者,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出原文连接,否则保留追究法律责...

白狼栈
2016/06/19
121
0
修复准备https://fonts.googleapis.com/css

参考网页: + http://www.cnblogs.com/tekikesyo/p/4636412.html+ http://stackoverflow.com/questions/8966740/how-to-host-google-web-fonts-on-my-own-server+ https://github.com/almasa......

不避风云
2016/01/02
1K
3

没有更多内容

加载失败,请刷新页面

加载更多

腾讯三大运维开源项目齐聚“OSCAR开源先锋日”

10月20日,腾讯开源三大运维开源项目——TARS、蓝鲸和织云Metis首次集结,参与了由中国信息通信研究院主办、云计算标准与开源推进委员会承办的 “OSCAR开源先锋日”。会上,腾讯开源团队与前...

腾讯开源
19分钟前
1
0
JAVA并发-从缓存一致性说volatile 讲的很好

学过计算机组成原理的一定知道,为了解决内存速度跟不上CPU速度这个问题,在CPU的设计中加入了缓存机制,缓存的速度介于CPU和主存之间。在进行运算的时候,CPU将需要的数据映射一份在缓存中,...

码代码的小司机
37分钟前
1
0
IDEA 调试功能

1.设置断点 选定要设置断点的代码行,在行号的区域后面单击鼠标左键即可。 2.开启调试会话 点击红色箭头指向的小虫子,开始进入调试。 IDE下方出现Debug视图,红色的箭头指向的是现在调试程序...

狼王黄师傅
44分钟前
1
0
Java面试170题

1、面向对象的特征有哪些方面? 2、访问修饰符public,private,protected,以及不写(默认)时的区别? 3、String 是最基本的数据类型吗? 4、float f=3.4;是否正确? 5、short s1 = 1; s1 = ...

lanyu96
50分钟前
0
0
优雅的写出类

前言 虽然现在已经是ES6的时代,但是,还是有必要了解下ES5是怎么写一个类的。 本文详述JavaScript面向对象编程中的类写法,并分步骤讲述如何写出优雅的类。 一、例子 例子为一个轻提示组件T...

peakedness丶
55分钟前
2
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部