[英]How to add CSS classes to Zend_Form_Element_Select option
我正在嘗試將一個CSS類添加到Zend_Form_Element_Select選項中,但我找不到一種方法來執行它。
期望的輸出將是這樣的:
<select name="hey" id="hey">
<option value="value1" style="parent">label1</option>
<option value="value2" style="sibling">sublabel1</option>
<option value="value3" style="sibling">sublabel2</option>
<option value="value4" style="parent">label2</option>
<option value="value5" style="sibling">sublabel3</option>
<option value="value6" style="sibling">sublabel4</option>
</select>
但是我得到了這個:
<select name="hey" id="hey">
<option value="value1">label1</option>
<option value="value2">sublabel1</option>
<option value="value3">sublabel2</option>
<option value="value4">label2</option>
<option value="value5">sublabel3</option>
<option value="value6">sublabel4</option>
</select>
我似乎無法將CSS類屬性傳遞給select元素中的任何選項,盡管我可以設置select元素itselft的樣式。
我的代碼:
$sel = new Zend_Form_Element_Select('hey');
$sel->setRequired(true)->setLabel('Select an Option:');
$sel->addMultiOption('value1', 'label1', array('class' => 'parent'))
->addMultiOption('value2', 'sublabel1', array('class' => 'sibling')) (etc...);
在研究了一下之后,我發現Element_Select沒有一種方法可以將CSS樣式添加到選擇框中的選項,僅用於選擇本身。
那么,我該如何添加它們呢? 我應該擴展form_element_select嗎? 或者自定義裝飾器是否足夠? 任何人都可以給我一個提示嗎? 我對此感到困惑。
提前致謝!
$htmlEgressCss='<style>';
$multiOptions = array("" => "All");
$resEg = $this->commonDB->getEgressTrunk();
while ($row = $resEg->fetch()) {
if($row['IsActive']==0){
$htmlEgressCss .= '.egressClass select, option[value="'.$row['TrunkInfoID'].'"] {color:red;font-weight:bold;}';
}
$multiOptions[$row['TrunkInfoID']] = $row['IngressTrunkName'];
}
$htmlEgressCss.='</style>';
$this->addElement(
'select',
'cmbEgressTrunk',
array(
'multiOptions' =>$multiOptions,
)
);
$html = '<form><div>'.$this->cmbEgressTrunk .'</div></form>'.$htmlEgressCss;
您可以使用Javascript添加它,特別是jQuery。 這將導致選擇下拉列表的背景被着色。
<style type="text/css">
.t1 {background: red; color:#fff;}
</style>
<form>
<select id="test">
<option value="abc">ABC</option>
<option value="123">123</option>
<option value="foo">Foo</option>
</select>
</form>
<script type="text/javascript">
$('#test [value*="abc"]').addClass('t1');
$('#test [value*="foo"]').addClass('t1');
</script>
通知 :
<?php
require_once 'glx/Form/Element/Select.php'; // custom select class
// ... in init or __create function :
$categories = new Model_DbTable_Categories(); // some Model
$PID = new glx_Form_Element_Select('PID'); // custom select object
$PID
->setLabel('PID')
->setDecorators(array('ViewHelper'))
->addMultiOptions($categories->getSelectOptions())
;
文件庫/ glx / Form / Select.php:
<?php
require_once 'Zend/Form/Element/Multi.php';
$error_reporting = error_reporting(0);
@include_once '../application/views/helpers/glxFormSelect.php'; // first, maby here
if (! class_exists('Zend_View_Helper_glxFormSelect'))
require_once 'glx/View/Helper/glxFormSelect.php'; // or least, maby here
error_reporting($error_reporting);
class glx_Form_Element_Select extends Zend_Form_Element_Multi
{
public $helper = 'glxFormSelect'; // this is my custom code
}
?>
文件application / views / helpers / glxFormSelect.php或library / glx / View / Helpe / glxFormSelect.php:
<?php
require_once 'Zend/View/Helper/FormElement.php';
class Zend_View_Helper_glxFormSelect extends Zend_View_Helper_FormSelect
{
public function glxFormSelect($name, $value = null, $attribs = null, $options = null, $listsep = "<br />\n")
{
return parent::formSelect($name, $value, $attribs, $options, $listsep);
}
protected function _build($value, $label, $selected, $disable)
{
if (is_bool($disable))
$disable = array();
$oldLabel = $label; // this is my custom code
$label = ltrim($label); // this is my custom code
$opt = '<option'
. ' value="' . $this->view->escape($value) . '"'
. ' label="' . $this->view->escape($label) . '"';
if (($countSpaces = strlen($oldLabel) - strlen($label)) > 0) // this is my custom code
$opt.= sprintf(' style="padding-left:%dpx"', (15 * $countSpaces)); // this is my custom code
if (in_array((string) $value, $selected))
$opt .= ' selected="selected"';
if (in_array($value, $disable))
$opt .= ' disabled="disabled"';
$opt .= '>' . $this->view->escape($label) . "</option>";
return $opt;
}
}
?>
最后的HTML結果代碼(樣式填充 - 左側添加):
<select name="PID" id="PID">
<option value="1" label="Categories" style="padding-left:15px">Categories</option>
<option value="2" label="Publications" style="padding-left:30px">Publications</option>
<option value="83" label="Links" style="padding-left:45px">Links</option>
...
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.