jquery-ui stampa - finestra di dialogo dell'interfaccia utente jquery: come inizializzare senza una barra del titolo?





html aggiungere (19)


In realtà c'è un altro modo per farlo, usando direttamente il widget dialogo:

È possibile ottenere il widget di dialogo così

$("#example").dialog(dialogOpts);
$dlgWidget = $('#example').dialog('widget');

e poi fallo

$dlgWidget.find(".ui-dialog-titlebar").hide();

per nascondere la titlebar del titlebar in quella finestra di dialogo

e in una singola riga di codice (mi piace concatenare):

$('#example').dialog('widget').find(".ui-dialog-titlebar").hide();

Non c'è bisogno di aggiungere una classe extra alla finestra di dialogo in questo modo, basta andare direttamente. Funziona bene per me.

È possibile aprire una finestra di dialogo dell'interfaccia utente jQuery senza una barra del titolo?




Mi piace sovrascrivere i widget jQuery.

(function ($) {
    $.widget("sauti.dialog", $.ui.dialog, {
        options: {
            headerVisible: false
        },
        _create: function () {
            // ready to generate button
            this._super("_create"); // for 18 would be $.Widget.prototype._create.call(this);
            // decide if header is visible
            if(this.options.headerVisible == false)
                this.uiDialogTitlebar.hide();
        },
        _setOption: function (key, value) {
            this._super(key, value); // for 1.8 would be $.Widget.prototype._setOption.apply( this, arguments );
            if (key === "headerVisible") {
                if (key == false)
                    this.uiDialogTitlebar.hide();
                else
                    this.uiDialogTitlebar.show();
                return;
            }
        }
    });
})(jQuery);

Quindi ora puoi impostare se vuoi mostrare o meno la barra del titolo

   $('#mydialog').dialog({
      headerVisible: false // or true
});



È possibile rimuovere la barra con l'icona di chiusura con i tecnici sopra descritti e quindi aggiungere un'icona vicina da soli.

CSS:

.CloseButton {
background: url('../icons/close-button.png');   
width:15px;
height:15px;
border: 0px solid white;
top:0;
right:0;
position:absolute;
cursor: pointer;
z-index:999;
}

HTML:

var closeDiv = document.createElement("div");
closeDiv.className = "CloseButton";

// aggiungi questo div al div con il tuo contenuto

JS:

 $(closeDiv).click(function () {
         $("yourDialogContent").dialog('close');
     });



Ho trovato una soluzione per rimuovere in modo dinamico la barra del titolo.

$("#example").dialog(dialogOpts);
// remove the title bar
$(".ui-dialog-titlebar").hide();

Questo rimuoverà tutti gli elementi con la classe 'ui-dialog-titlebar' dopo il rendering della finestra di dialogo.




Trovo più efficiente e più leggibile utilizzare l'evento open e nascondere la barra del titolo da lì. Non mi piace usare ricerche di nomi di classi globali per pagina.

open: function() { $(this).closest(".ui-dialog").find(".ui-dialog-titlebar:first").hide(); }

Semplice.




Prova questo

$("#ui-dialog-title-divid").parent().hide();

sostituire i divid con id corrispondente




Questo è il modo più semplice per farlo e rimuoverà solo la barra del titolo in quella specifica finestra di dialogo;

$('.dialog_selector').find('.ui-dialog-titlebar').hide();



Penso che la soluzione migliore sia usare l'opzione dialogClass .

Un estratto dai documenti dell'interfaccia utente jquery:

durante init: $('.selector').dialog({ dialogClass: 'noTitleStuff' });

o se vuoi dopo init. :

$('.selector').dialog('option', 'dialogClass', 'noTitleStuff');

Così ho creato alcune finestre di dialogo con l'opzione dialogClass = 'noTitleStuff' e il css in questo modo:

.noTitleStuff .ui-dialog-titlebar {display:none}

Troppo facile !! ma ho impiegato un giorno per pensare perché il mio precedente metodo di perforazione id-> class non funzionava. Infatti quando chiamate il metodo .dialog() il div che trasformate diventate figli di un altro div (il vero dialog div) e possibilmente un "fratello" del div del titlebar , quindi è molto difficile provare a trovare quest'ultimo dal primo.




Lo uso nei miei progetti

$("#myDialog").dialog(dialogOpts);
// remove the title bar
$("#myDialog").siblings('div.ui-dialog-titlebar').remove();
// one liner
$("#myDialog").dialog(dialogOpts).siblings('.ui-dialog-titlebar').remove();



Prova a usare

$("#mydialog").closest(".ui-dialog-titlebar").hide();

Questo nasconderà tutti i titoli delle finestre di dialogo

$(".ui-dialog-titlebar").hide();



Credo che tu possa nasconderlo con i CSS:

.ui-dialog-titlebar {
    display: none;
}

In alternativa, puoi applicarlo a finestre di dialogo specifiche con l'opzione dialogClass :

$( "#createUserDialog" ).dialog({
    dialogClass: "no-titlebar"
});
.no-titlebar .ui-dialog-titlebar {
    display: none;
}

Dai un'occhiata a " Theming " nella finestra di dialogo. Il suggerimento di cui sopra fa uso dell'opzione dialogClass , che sembra essere in via di uscita a favore di un nuovo metodo.







È possibile utilizzare jquery per nascondere la barra del titolo dopo aver usato dialogClass durante l'inizializzazione della finestra di dialogo.

durante init:

$('.selector').dialog({
    dialogClass: 'yourclassname'
});

$('.yourclassname div.ui-dialog-titlebar').hide();

Utilizzando questo metodo, non è necessario modificare il file css, e anche questo è dinamico.




vai al tuo jquery-ui.js (nel mio caso jquery-ui-1.10.3.custom.js) e cerca this._createTitlebar (); e commentalo

ora qualcuno dei tuoi dialoghi apparirà con le intestazioni. Se vuoi personalizzare l'intestazione, vai su _createTitlebar (); e modifica il codice all'interno.

di




Questo ha funzionato per me per nascondere la barra del titolo della finestra di dialogo:

$(".ui-dialog-titlebar" ).css("display", "none" );



Se hai più finestre di dialogo, puoi usare questo:

$("#the_dialog").dialog({
        open: function(event, ui) { 
            //hide titlebar.
            $(this).parent().children('.ui-dialog-titlebar').hide();
        }
    });



Questo è come può essere fatto.

Vai alla cartella temi -> base -> apri jquery.ui.dialog.css

Trova

chi segue

se non vuoi visualizzare titleBar, imposta semplicemente display: none come ho fatto in seguito.

.ui dialog.ui-dialog .ui-dialog-titlebar 
{
    padding: .4em 1em;
    position: relative;
        display:none;
}

Samilarly per il titolo pure.

.ui-dialog .ui-dialog-title {
    float: left;
    margin: .1em 0;
    white-space: nowrap;
    width: 90%;
    overflow: hidden;
    text-overflow: ellipsis;
    display:none; 
}

Ora arriva il pulsante Chiudi, puoi anche impostarlo su Nessuno o puoi impostarlo

.ui-dialog .ui-dialog-titlebar-close {
    position: absolute;
    right: .3em;
    top: 50%;
    width: 21px;
    margin: -10px 0 0 0;
    padding: 1px;
    height: 20px;

   display:none;

}

Ho fatto un sacco di ricerche ma niente poi ho avuto questa idea nella mia mente. Tuttavia questo avrà effetto sull'intera applicazione per non avere il pulsante Chiudi, la barra del titolo per il dialogo, ma puoi anche superarlo usando jquery e aggiungendo e impostando css via jquery

ecco la sintassi per questo

$(".specificclass").css({display:normal})



L'unica cosa che ho scoperto nascondendo la barra del titolo di Dialog è che, anche se il display non è presente, lo screen reader lo riprende e lo leggerà. Se hai già aggiunto la tua barra del titolo, leggerà entrambi, causando confusione.

Quello che ho fatto è stato rimosso dal DOM usando $(selector).remove() . Ora i lettori di schermo (e tutti gli altri) non lo vedranno perché non esiste più.




$('.a .b , .a .c').css('border', '2px solid yellow');
//selects b and c
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="a">a
  <div class="b">b</div>
  <div class="c">c</div>
  <div class="d">d</div>
</div>





jquery jquery-ui