文档章节

Yii 2 表单美化

tywali
 tywali
发布于 2017/06/19 18:24
字数 1257
阅读 84
收藏 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
PHP5.4+内置webserver,Yii中如何隐藏index.php,让URL rewrite

Yii 中为了美化URL,可以把 转变成下面path的形式: Yii的配置中加入: 详细说明可参考官方文档: http://www.yiiframework.com/doc-2.0/guide-runtime-routing.html 美化后的路径仍然包含ind...

踏雪秋菊
2016/07/14
133
1
YII FORM表单怎样修改按钮的样式?

@Susanno 你好,想跟你请教个问题:YII form 表单, 你好,我在北京混口饭吃。 我干开发快两年了,之前一直是前端,会一点后台代码,现在新公司转行做PHP开发,公司开始使用YII框架。在FORM表...

cooldown
2013/04/01
3.2K
1
详解Yii2框架中生成URL的方法

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

botkenni
2018/06/07
0
0
Yii 2.0 正式版发布,完全重写的版本!

Yii 2.0 正式版发布,超过 3 年的密集的开发,将近 10000 个提交,超过 300 名贡献者。非常感谢你的耐心等待。 Yii 2.0 是一个完全重写的版本,我们的目标是构建一个最先进的 PHP 框架,同时...

oschina
2014/10/13
12.8K
81

没有更多内容

加载失败,请刷新页面

加载更多

 tomcat启动问题

tomcat启动问题: 解决方法:tomcat bin目录下 新建setenv.sh文件 文件上加入 export CATALINA_OPTS='-Djava.awt.headless=true' 该方法对tomcat8以上有用...

west_coast
31分钟前
4
0
《从0开始学架构》学习笔记索引

一、架构设计相关概念及复杂度来源 二、架构设计三原则 三、架构设计流程 ... 完整课程(微信扫码):

whoru
45分钟前
3
0
新的尝试!ComponentOne WinForm 和 .NET Core 3.0

在微软 Build 2018 开发者大会上,.NET 团队公布了 .NET Core 的下一个主要版本 .NET Core 3.0 的规划蓝图:.NET Core 3将开始支持Windows桌面应用程序,包括Windows Form、Windows Present...

葡萄城技术团队
47分钟前
1
0
Try .NET & Github Gist

Try .NET Try .NET 是微软最近推出的在线 C# 运行环境,不用安装 Visual Studio 等,就可以直接上手写 C# 代码. 可以先进来写两行代码看看 https://try.dot.net/ 对于初学者/代码分享而言是一个...

taadis
48分钟前
23
0
PyCharm入门教程——掌握PyCharm键盘快捷键

PyCharm最新版本下载 JetBrains PyCharm是一种Python IDE,其带有一整套可以帮助用户在使用Python语言开发时提高其效率的工具。此外,该IDE提供了一些高级功能,以用于Django框架下的专业Web...

电池盒
53分钟前
1
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部