yii中的下拉样式

时间:2013-12-17 06:57:06

标签: php jquery html css yii

我正在尝试主题化我的应用程序。对于活动下拉列表,从我的css中,调用以下样式,

.inputs {
  width: 635px;
  float: left;
}

.inputs select[id="Model_attribute"]{
  float: left;
  padding: 9px 9px 9px;
  width: 278px;
  margin-left: 20px;
  margin-top: 23px;
  -webkit-border-radius: 7px;
  -moz-border-radius: 7px;
  border-radius: 7px;
  border:none;
}

以下是生成的html

<div class="inputs">
<select name="Model[attribute]" id="Model_attribute">
<option value="">Select an option</option>
<option value="26">Option 1</option>
<option value="28">Option 2/option>
</select>   
</div>

以下是视图文件

    <?php echo CHtml::activeDropDownList($model,'attribute', $model->getOptions(),array(
                 'prompt'=>$hname,
                'ajax' => array(
                'type'=>'POST',
                'id'=>'id',
                'url'=>MyController::createUrl('loadOptions'),
                'update'=>'#'.CHtml::activeId($model,'attribute2'),

              'data'=>array('attribute'=>'js:this.value'),
   )
        )); ?>

当我将其作为html文件进行测试时,样式已应用,但当我以原始形式调用它时,样式不会出现。我用firebug检查它,但没有样式显示。请帮助。提前谢谢!

2 个答案:

答案 0 :(得分:0)

在yii中,您可以在activeDropDownList

中指定以下内容
array('class'=>'yourCssClass')

然后在你的样式表中:

.yourCssClass{
   //any styles
}

这应该为你做。

注意:确保包含正确的样式表。尝试清除浏览器缓存/历史记录。

编辑:

完成的下拉窗口小部件如下所示:

<?php echo CHtml::activeDropDownList($model,'attribute', $model->getOptions(),array(
      'prompt'=>$hname,
      'class'=>'yourCssClass',
      'ajax' => array(
      'type'=>'POST',
      'id'=>'id',
      'url'=>MyController::createUrl('loadOptions'),
      'update'=>'#'.CHtml::activeId($model,'attribute2'),
      'data'=>array('attribute'=>'js:this.value'),
   )
)); ?>

并对所有下拉列表重复相同的操作。如果样式相同,只需使用相同的类,如果样式不同,则相应地使用不同的类。

希望这是有道理的。

答案 1 :(得分:0)

在您的视图中,您正在使用'attribute'生成dropDown。在这里,Yii将通过连接模型和模型字段(即'attribute')为该dropDown生成动态ID。

EX:如果你的

          $model=new Country(); //Country is the lable here

现在ID将生成为

         <select id='Country_attribute' .......

         .........

         </select>

所以写下该ID的样式

        #Country_attribute
        {
            //Style
        }