Come rilevare il tipo di supporto della pagina corrente in jQuery

Question

Ho una pagina con campi di input. Voglio nascondere i campi di testo di tutti i valori 0 quando la pagina è nel tipo di supporto stampa.

Ho provato in jQuery. Ma questo funziona sia in modalità schermo che in modello di stampa.

HTML:

<div class="screen">some screen</div> 
<div class="print">some print</div> 
<input type='text' name='' id='1' class='' value='0'/> 
<input type='text' name='' id='2' class='' value='5'/> 
<button>Print</button> 

JS:

$('button').click(function(){ 
    $('input[type=text]').each(function(){ 
     if ($(this).val() == 0){ 
     $(this).hide() 
     }  
    }) 
}) 

CSS:

@media print{ 
    .screen{ 
     display:none; 
    } 

    .print{ 
     display:block; 
    } 
} 

@media screen{ 
    .screen{ 
     display:block   
    } 

    .print{ 
     display:none; 
    } 
} 

Se rilevo della pagina corrente dei media ty pe. Posso finirlo. Purtroppo non ho potuto ottenere il codice giusto.

Ho anche provato jmediatype, ma non c'è un'opzione di download.

Answer 1

Se si desidera solo per nascondere i campi con value="0", è possibile farlo con un solo CSS:

@media print { 
    input[value="0"] { 
     display: none; 
    } 
} 

Un'alternativa sarebbe quella di dare quegli elementi di una classe che solo viene nascosto dal foglio di stile di stampa:

$('button').click(function(){ 
    $('input[type=text]').filter(function() { 
     return parseInt(this.value, 10) == 0; 
    }).addClass('print-hidden'); 
}); 

E utilizzare uno stile come questo:

@media print { 
    .print-hidden { 
     display: none; 
    } 
} 

Answer 2

Definire una file CSS per la stampa dei media solo che contengono:

.empty 
{ 
    display: none; 
} 

includere questo file CSS nel vostro mago, solo per supporti di stampa

aggiungere un listener sul pulsante per l'evento click. Questo listener aggiungerà una classe CSS vuota per l'input con un valore vuoto.

$("ID_OF_YOUR_BUTTON").click(function(mouseEvent) { 

    $("input[type=text]").each(function(index, element) { 

     if ($(element).val().length == 0) 
      $(element).addClass("empty"); 

    }); 
}); 

Per la schermata dei media, questa classe non fa nulla, ma per la carta stampata che cambierà il display per nessuno.

Answer 3

Se si vuole scoprire il tipo di supporto di un particolare foglio di stile si può fare questo in jQuery:

var media = $('link[href$="styles.css"]').attr('media'); 

Avresti per separare i fogli di stile e caricarli nel markup con i media, invece attributo di utilizzare le query multimediali in un unico file.