2016-11-06 76 views
7

我需要這個標記文件輸入:文件輸入困難裝飾

<label class="col-sm-12">File upload</label> 
<div class="col-sm-12"> 
    <div class="fileinput fileinput-new input-group" data-provides="fileinput"> 
    <div class="form-control" data-trigger="fileinput"> 
     <i class="glyphicon glyphicon-file fileinput-exists"></i> 
     <span class="fileinput-filename"></span> 
    </div> 
    <span class="input-group-addon btn btn-default btn-file"> 
     <span class="fileinput-new">Select file</span> 
     <span class="fileinput-exists">Change</span> 
     <input type="file" name="..."> 
    </span> 
    <a href="#" class="input-group-addon btn btn-default fileinput-exists" data-dismiss="fileinput">Remove</a 
    </div> 
    <ul class="errors"> 
    <li>Some error</li> 
    </ul> 
</div> 

我試了一下這樣的:

<label class="col-sm-12">Attachment</label> 
<div class="col-sm-12"> 
    <?php echo $this->form->attachment; ?> 
</div> 

有了非常困難的裝飾:

$this->fileDecorator = array(
    array(
    array('divOpen' => 'HtmlTag'), array('tag' => 'div', 'class' => 'form-control', 'data-trigger' => 'fileinput', 'openOnly' => true, 'placement' => Zend_Form_Decorator_Abstract::APPEND) 
), 
    array(
    array('i' => 'HtmlTag'), array('tag' => 'i', 'class' => 'glyphicon glyphicon-file fileinput-exists', 'placement' => Zend_Form_Decorator_Abstract::APPEND) 
), 
    array(
    array('span' => 'HtmlTag'), array('tag' => 'span', 'class' => 'fileinput-filename', 'placement' => Zend_Form_Decorator_Abstract::APPEND) 
), 
    array(
    array('divClose' => 'HtmlTag'), array('tag' => 'div', 'closeOnly' => true, 'placement' => Zend_Form_Decorator_Abstract::APPEND) 
), 
    array(
    array('spanOpen' => 'HtmlTag'), array('tag' => 'span', 'class' => 'input-group-addon btn btn-default btn-file', 'openOnly' => true, 'placement' => Zend_Form_Decorator_Abstract::APPEND) 
), 
    array(
    'Callback', 
    array('callback' => 
     function($content, $element, $options) { 
     return "<span class=\"{$options['class']}\">{$options['text']}</span><span class=\"{$options['class2']}\">{$options['text2']}</span>"; 
     }, 
     'class' => 'fileinput-new', 
     'text' => $this->translator->_('_selectFile'), 
     'class2' => 'fileinput-exists', 
     'text2' => $this->translator->_('_change') 
    ) 
), 
    'File', 
    array(
     array('spanClose' => 'HtmlTag'), array('tag' => 'span', 'closeOnly' => true, 'placement' => Zend_Form_Decorator_Abstract::APPEND) 
), 
    array(
    'Callback', 
    array('callback' => 
     function($content, $element, $options) { 
     return "<a href=\"#\" class=\"{$options['class']}\" data-dismiss=\"{$options['data-dismiss']}\">{$options['text']}</a>"; 
     }, 
     'class' => 'input-group-addon btn btn-default fileinput-exists', 
     'text' => $this->translator->_('_remove'), 
     'data-dismiss' => 'fileinput' 
    ) 
), 
    array(
    array('div' => 'HtmlTag'), array('tag' => 'div', 'class' => 'fileinput fileinput-new input-group', 'data-provides' => 'fileinput') 
), 
    'Errors' 
); 

但問題是,該回調只能在裝飾器中一次(不像HtmlTag)。並且標記有內容不可能添加沒有回調。它可以通過更多的回調或不同的方式解決?

編輯: 我有想法。是否有可能將文件decoratror添加到回調裝飾器?

回答

1

這是簡單的像:

<div class="form-group<?php echo count($this->form->attachment->getErrors()) ? ' has-error has-feedback' : null; ?>"> 
    <label class="col-sm-12"><?php echo $this->form->attachment->renderLabel(); ?></label> 
    <div class="col-sm-12"> 
     <div class="fileinput fileinput-new input-group" data-provides="fileinput"> 
     <div class="form-control" data-trigger="fileinput"> 
      <i class="glyphicon glyphicon-file fileinput-exists"></i> 
      <span class="fileinput-filename"></span> 
     </div> 
     <span class="input-group-addon btn btn-default btn-file"> 
      <span class="fileinput-new">Select file</span> 
      <span class="fileinput-exists">Change</span> 
      <?php echo $this->form->attachment->renderFile(); ?> 
     </span> 
     <a href="#" class="input-group-addon btn btn-default fileinput-exists" data-dismiss="fileinput">Remove</a> 
     </div> 
     <?php echo $this->formErrors($this->form->attachment->getMessages()); ?> 
    </div> 
    </div>