文档章节

Yii 2 表单美化

tywali
 tywali
发布于 2017/06/19 18:24
字数 1257
阅读 50
收藏 1
点赞 0
评论 0

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
博文 84
码字总数 21117
作品 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
《PHP框架Yii学习》系列技术文章整理收藏

《PHP框架Yii学习》系列技术文章整理收藏 1Yii Framework框架获取分类下面的所有子类方法 2YII模块实现绑定二级域名的方法 3Yii框架官方指南系列43——专题:URL(创建、路由、美化及自定义)...

开元中国2015
2015/05/30
232
0
Yii入门指导(三):Yii“模块”窥探

1,Yii模块简介 Yii中的模块,可以把它看做成一个单独的应用,它具有独立的控制器、模型、视图以及组件等。 通常情况下,我们使用Yii做WEB项目开发,那么“默认的Yii应用”我们可以作为WEB的...

Koma
2014/10/22
0
0
yii2开发中19条推荐实践(阿北总结)

虽然每个人的编程风格不同,但是有些建议能让你的代码更加规范和稳定,本次就我这次网站更新总结如下几点,希望对你的yii2学习和使用有所帮助。 环境说明 服务器环境: CentOS 开发环境及IDE...

阿北2017
06/02
0
0
yii2集成富文本编辑器redactor

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

白狼栈
2016/04/24
287
0
yii2组件之多图上传插件FileInput的详细使用

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

白狼栈
2016/06/23
85
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

回想过往,分析当下,着眼未来

好久没有真正的在纸质笔记本上写过东西了,感觉都快不会写字了,笔画都不知道怎么写了。接下来就说说咱们的正事。 2018年7月22日,我做了一个决定,那就是去参加安全培训(可能是我职业生涯中...

yeahlife
41分钟前
4
0
关于工作中的人际交往

关于工作中的人际交往 Intro 写了篇发泄情绪的博客,但不会发布出来。 大概就是,要么忍,要么滚。 以及一些不那么符合社会主义核心价值观,不满于大资本家与小资本家剥削的废话。

uniqptr
47分钟前
0
0
springMVC的流程

1.用户发送请求至前端控制器DispatcherServlet 2.DispatcherServlet收到请求调用HandlerMapping处理器映射器。 3.处理器映射器根据请求url找到具体的处理器,生成处理器对象及处理器拦截器(...

JavaSon712
今天
0
0
大数据教程(3.2):Linux系统软件安装之自动化脚本

博主前面文章有介绍过软件的安装,可以帮助IT人员顺利的完成功能软件安装;但是,对于我们运维人员或者需要管理软件安装的项目经理来说,有些应用一次行需要搭建很多台相同的软件环境(如tom...

em_aaron
今天
0
1
Spring Boot 2.0.3 JDBC整合Oracle 12

整合步骤 1. Oracle驱动引入 Oracle驱动一般不能通过maven仓库直接下载得到,需自行下载并导入到项目的lib目录下,建议通过如下pom依赖引入下载的Oracle驱动 <!-- Oracle 驱动 -->...

OSC_fly
今天
0
0
java 8 并行流 - 1

下面创建一个并行流,与顺序流 //顺序流Stream.iterate(0L, i -> i + 1) .limit(Integer.MAX_VALUE) .reduce(0L, Long::sum);//并行流Stream.iterate(0L, i -> i......

Canaan_
今天
0
0
数据结构与算法5

二分法采用向下取整的方法 使用有序数组的好处是查找的速度比无序数组快的多,不好的方面是因为要将所有靠后的数据移开,所以速度较慢,有序数组和无序数组的删除操作都很慢。 有序数组在查找...

沉迷于编程的小菜菜
昨天
1
1
SpringBoot | 第十一章:Redis的集成和简单使用

前言 上几节讲了利用Mybatis-Plus这个第三方的ORM框架进行数据库访问,在实际工作中,在存储一些非结构化或者缓存一些临时数据及热点数据时,一般上都会用上mongodb和redis进行这方面的需求。...

oKong
昨天
5
0
对基于深度神经网络的Auto Encoder用于异常检测的一些思考

一、前言 现实中,大部分数据都是无标签的,人和动物多数情况下都是通过无监督学习获取概念,故而无监督学习拥有广阔的业务场景。举几个场景:网络流量是正常流量还是攻击流量、视频中的人的...

冷血狂魔
昨天
0
0
并发设计之A系统调用B系统

A-->B A在发送请求之前,用乐观锁,减少对B的重复调用,这样一定程度上是幂等性。 比如A系统支付功能,要调用B系统进行支付操作,但是前端对"支付"按钮不进行控制,即用户会不断多次点击支付...

汉斯-冯-拉特
昨天
0
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部