Configurações

Versão: 1.0.0 — Atualizado em: 2026-04-27

Descrição

O oziConf é a função de configuração global do oziLoadData. Permite ajustar as classes CSS de validação, botões, alertas e barra de progresso para qualquer framework — Bootstrap 4, Bootstrap 5, Tailwind ou CSS próprio. Deve ser chamado uma única vez, antes dos plugins.

Exemplos

[1] Bootstrap 5 — padrão

oziConf({
    // ── Validação de campos ──────────────────
    zldResponseValidClass:   'is-valid',
    zldResponseInvalidClass: 'is-invalid',

    // ── Botão de envio ───────────────────────
    zldButtonDisabledClass: 'disabled',
    zldButtonEnabledClass:  '',
    zldUseNativeDisabled:   false,
    zldAriaDisabled:        true,

    // ── Alertas ──────────────────────────────
    zldAlertClass:        'alert',
    zldAlertWarningClass: 'alert-warning',
    zldAlertDangerClass:  'alert-danger',
    zldAlertMetaClass:    'small text-muted mt-1',

    // ── Barra de progresso ───────────────────
    zldProgressBarGlobalOption: true,
    zldProgressBarGlobalClass:  'progress-bar-global',
    zldProgressClass:           'progress',
    zldProgressBarClass:        'progress-bar',
    zldProgressLoadingClass:    'progress-bar-striped progress-bar-animated',
    zldProgressSuccessClass:    'bg-success',
});

[2] Bootstrap 4

oziConf({
    // ── Validação de campos ──────────────────
    zldResponseValidClass:   'is-valid',
    zldResponseInvalidClass: 'is-invalid',

    // ── Botão de envio ───────────────────────
    zldButtonDisabledClass: 'disabled',
    zldButtonEnabledClass:  '',
    zldUseNativeDisabled:   false,
    zldAriaDisabled:        true,

    // ── Alertas ──────────────────────────────
    zldAlertClass:        'alert',
    zldAlertWarningClass: 'alert-warning',
    zldAlertDangerClass:  'alert-danger',
    zldAlertMetaClass:    'small text-muted mt-1',

    // ── Barra de progresso ───────────────────
    zldProgressBarGlobalOption: true,
    zldProgressBarGlobalClass:  'progress-bar-global',
    zldProgressClass:           'progress',
    zldProgressBarClass:        'progress-bar',
    zldProgressLoadingClass:    'progress-bar-striped active',  // ← Bootstrap 4 usa 'active'
    zldProgressSuccessClass:    'progress-bar-success',         // ← Bootstrap 4
});

[3] Tailwind CSS

oziConf({
    // ── Validação de campos ──────────────────
    zldResponseValidClass:   'ring-2 ring-green-500 border-green-500',
    zldResponseInvalidClass: 'ring-2 ring-red-500 border-red-500',

    // ── Botão de envio ───────────────────────
    zldButtonDisabledClass: 'opacity-50 cursor-not-allowed pointer-events-none',
    zldButtonEnabledClass:  'opacity-100 cursor-pointer',
    zldUseNativeDisabled:   false,
    zldAriaDisabled:        true,

    // ── Alertas ──────────────────────────────
    zldAlertClass:        'rounded-md p-3 text-sm border',
    zldAlertWarningClass: 'bg-yellow-50 text-yellow-800 border-yellow-200',
    zldAlertDangerClass:  'bg-red-50 text-red-800 border-red-200',
    zldAlertMetaClass:    'text-xs text-gray-500 mt-1',

    // ── Barra de progresso ───────────────────
    zldProgressBarGlobalOption: true,
    zldProgressBarGlobalClass:  'progress-bar-global',
    zldProgressClass:           'w-full bg-gray-200 rounded-full overflow-hidden',
    zldProgressBarClass:        'h-1.5 rounded-full transition-all duration-700',
    zldProgressLoadingClass:    'bg-blue-500 animate-pulse',
    zldProgressSuccessClass:    'bg-green-500',
});

[4] CSS próprio — padrão ozi-ui

oziConf({
    // ── Validação de campos ──────────────────
    zldResponseValidClass:   'zld-valid',
    zldResponseInvalidClass: 'zld-invalid',

    // ── Botão de envio ───────────────────────
    zldButtonDisabledClass: 'zld-disabled',
    zldButtonEnabledClass:  '',
    zldUseNativeDisabled:   false,
    zldAriaDisabled:        true,

    // ── Alertas ──────────────────────────────
    zldAlertClass:        'zld-alert',
    zldAlertWarningClass: 'zld-alert-warning',
    zldAlertDangerClass:  'zld-alert-danger',
    zldAlertMetaClass:    'zld-alert-meta',

    // ── Barra de progresso ───────────────────
    zldProgressBarGlobalOption: true,
    zldProgressBarGlobalClass:  'progress-bar-global',
    zldProgressClass:           'zld-progress',
    zldProgressBarClass:        'zld-progress-bar',
    zldProgressLoadingClass:    'zld-progress-loading',
    zldProgressSuccessClass:    'zld-progress-success',
});

Onde aplicar

Chame o oziConf antes dos plugins, no layout principal:

<!-- 1. jQuery -->
<script src="jquery.min.js"></script>

<!-- 2. ozi-loaddata — expõe o oziConf -->
<script src="/plugins/ozi-ui/ozi-loaddata/js/ozi-loaddata.js"></script>

<!-- 3. oziConf — uma única vez -->
<script>
oziConf({
    zldResponseValidClass:   'is-valid',
    zldResponseInvalidClass: 'is-invalid',
    zldAlertClass:           'alert',
    zldAlertWarningClass:    'alert-warning',
    zldAlertDangerClass:     'alert-danger',
});
</script>

<!-- 4. Demais plugins -->
@oziScripts

Referência completa

Validação de campos

Botão de envio

Alertas

Barra de progresso global

Hooks

Comparativo rápido