当前位置：首页 > news >正文

[moka同学笔记]yii表单dropdownlist样式

news 来源：原创 2024/5/9 6:20:08

 1 <?= $form->field($modelUser,'name') ?>
 2 <div class="form-group field-community-mobile required">
 3 
 4     <label for="mobile">手机
 5     </label>
 6     <div class="input-group">
 7         <span class="input-group-addon" style="padding: 0px;">
 8         <?=$form->field($modelContact, 'area_code')->dropDownList($telCode,['prompt' => '+86'])->label(false); ?>
 9         </span>
10         <?= $form->field($modelContact,'mobile',['labelOptions' => ['class' => 'form-control']])->label(false) ?>
11     </div>
12 </div>
13 <div class="form-group field-community-mobile required">
14     <label for="mobile">手机
15     </label>
16     <div class="input-group">
17             <span class="input-group-addon" style="padding: 0px;">
18             <select style="padding:7px 0; " name="area_code">
19                 <option>1454</option>
20                 <option>32</option>
21                 <option>453</option>
22                 <option>12</option>
23             </select>
24             </span>
25         <input type="text" name="" class="form-control" value=""/>
26     </div>
27 </div>
28 
29  
30 
31 下面内容来自于网络
32 
33 http://www.cnblogs.com/benlightning/p/4536392.html
34 
35  
36 
37 
38 <?php $form = ActiveForm::begin([
39         'options'=>['enctype'=>'multipart/form-data','class' => 'form-horizontal'],
40         'fieldConfig' => [  //统一修改字段的模板
41             'template' => "{label}\n<div class=\"col-lg-5\">{input}</div>\n<div class=\"col-lg-3\">{error}</div>", 
42 
43 　　　　　　　　//修改显示内容默认为{label}\n{input}\n{hint}\n{error}  \n是html代码显示时的换行
44 
45             'labelOptions' => ['class' => 'col-lg-2 control-label'],  //修改label的样式
46         ],
47     ]); ?>
48 
49 Image(16)
50 
51 //修改某字段的样式
52 
53 <?= $form->field($model, 'img_path',[  
54             'template' => "{label}\n<div class=\"col-lg-3\">{input}</div>\n<div class=\"col-lg-2\"><label for=\"uploadImg\" class=\"btn btn-default forfocus1\" οnclick=\"changeImg(1,'forfocus');\">选择图片<img src=\"\"></label></div>\n{error}",  
55             'labelOptions' => ['class' => 'col-lg-2 control-label'],
56         ])->textInput(['maxlength' => 255,'placeholder'=>'专题图片','readonly'=>true])->label('专题名称')->hint('错误提示信息') ?>
57 
58 以下为一个完整的例子
59 
60 <?php $form = ActiveForm::begin([
61         'options'=>['enctype'=>'multipart/form-data','class' => 'form-horizontal'],
62         'fieldConfig' => [  
63             'template' => "{label}\n<div class=\"col-lg-5\">{input}</div>\n<div class=\"col-lg-5\">{error}</div>",  
64             'labelOptions' => ['class' => 'col-lg-2 control-label'],
65         ],
66     ]); ?>
67     
68     <?= $form->field($model, 'title')->textInput(['maxlength' => 255,'placeholder'=>'请输入专题名称'])->label('专题名称') ?>
69     <?= $form->field($model, 'img_path',[  
70             'template' => "{label}\n<div class=\"col-lg-3\">{input}</div>\n<div class=\"col-lg-2\">
71 
72                <label for=\"uploadImg\" class=\"btn btn-default forfocus1\" οnclick=\"changeImg(1,'forfocus');\">选择图片
73 
74                <img src=\"\"></label></div>\n{error}",  
75             'labelOptions' => ['class' => 'col-lg-2 control-label'],
76         ])->textInput(['id'=>'img_path','maxlength' => 255,'placeholder'=>'专题图片','readonly'=>true])->label('专题名称') ?>
77     <?= $form->field($model, 'showImg',[  
78             'template' => "{label}\n<div id=\"showImg\" class='col-lg-10'></div>",  
79             'labelOptions' => ['class' => 'col-lg-2 control-label'],
80         ])->label('图片预览') ?>
81     <?= $form->field($model, 'link_to')->textInput(['maxlength' => 255,'placeholder'=>'请输入专题链接'])->label('专题链接') ?>
82     </div>
83         
84     <div class="form-group" style="margin-left: 50px;">
85         <?= Html::submitButton($model->isNewRecord ? Yii::t('app', 'Create') : Yii::t('app', 'Update'), ['class' => $model->isNewRecord ? 'btn btn-success' : 'btn btn-primary']) ?>
86     </div>
87 
88     <?php ActiveForm::end(); ?>