Checkbox 3-state

În cazul în care aveți nevoie de un astfel de control copiați blocul de cod de mai jos – el se găsește în invoice/index.php.

Practic se extinde custom-checkbox-ul temei cu o stare intermediară vizualizată între cele de check și un-check folosind proprietatea “indeterminate“. Deoarece proprietatea asta poate fi setată doar via js, e folosit “readOnly” pentru a o seta via php (HTML).

De reținut: clasa “acc-check” stilează special checkbox-ul (cu dublu-check) pentru a evidenția contabilizarea – asa ca poate lipsi în alte circumstanțe. Array-ul “$labels” determină valorile și etichetele corespunzătoare stărilor. Clasa “white-bg-field” poate lipsi – aici e prezentă pentru că acest control e în zona prerequisites. Mai este obligatoriu și apelul “ts(this)” de pe “onclick”, alături de ceilalți parametri “data-label’ cu etichetele și ‘readonly’ ca flag pentru starea a treia.

 

<div class="pull-left width-150 margin-right-10 acc-check <?= $dea ?'' :'hide' ?>">
          <?php
          $labels = [
            '0' => Yii::t('app', 'Unaccounted'),
            '1' => Yii::t('app', 'Accounted'),
            'x' => Yii::t('app', 'All')
          ];
          if($searchModel->accounted=='') $searchModel->accounted='x';
          echo $form->field($searchModel, 'accounted', [
            'horizontalCheckboxTemplate' => '<div class="checkbox-custom checkbox-primary white-bg-field">{input}
              <label class="padding-left-10 color-primary" for="invoicesearch-accounted">' . $labels[$searchModel->accounted] . '</label></div>'
            ])->checkbox([
              'data-label' => json_encode($labels),
              'readOnly' => $searchModel->accounted=='x' ?'' :FALSE,
              'onclick' => 'ts(this);$("#filterForm").attr("target","_self").submit();']) ?>
        </div>

În site.js este și codul javascript necesar:

/**
 * threeState checkbox - enhancements, by Adi
 */
function ts(cb) {
  if (cb.readOnly) cb.checked=cb.readOnly=false;
  else if (!cb.checked) cb.readOnly=cb.indeterminate=true;
  let fv=$(cb).siblings('input[type=hidden]');
  let v=cb.indeterminate ?'x':(cb.checked?1:0);
  fv.val(v);
  let l=$(cb).siblings('label');
  let lt=JSON.parse($(cb).attr('data-label'));
  l.text(lt[v]);
}

 

About

Marele Po, UX Expert und Business Specialist

Categories: UI/UX |

Leave a Reply

Your email address will not be published. Required fields are marked *

[TOP]