Resalte elementos DOM en Hover-TheRoom

Vista prévia

Descripción

TheRoom es un plugin de JavaScript que aplica un efecto de superposición personalizable a cualquier elemento DOM en Hover.

También ofrece la posibilidad de mostrar el selector actual (TAG, ID y Class) en el que está visualizando, similar al inspector web.

También puede especificar los elementos DOM que se excluirán.

Funcionamiento

Descargue e importe el ' theroom. js ' en el documento.

<script src="dist/theroom.min.js"></script>

Inicialice el TheRoom y listo.

theRoom.start();

Para crear una barra de información que muestre la etiqueta HTML actual, CSS ID/Class.

var template="";


template += "<div id=\"theroom-info\">";


template += "
<span id=\"theroom-tag\"><\/span>";


template += "
<span id=\"theroom-id\"><\/span>";


template += "
<span id=\"theroom-class\"><\/span>";


template += "<\/div>";


template += "";


template += "<style>";


template += "
#theroom-info {";


template += "

position: fixed;";


template += "

bottom: 0;";


template += "

width: 100%;";


template += "

left: 0;";


template += "

font-family: \"Courier\";";


template += "

background-color: #ffffff;";


template += "

padding: 10px;";


template += "

color: #333333;";


template += "

text-align: center;";


template += "

box-shadow: 0px 4px 20px rgba(0,0,0,0.3);";


template += "
}";


template += "";


template += "
#theroom-tag {";


template += "

color: #C2185B;";


template += "
}";


template += "";


template += "
#theroom-id {";


template += "

color: #5D4037;";


template += "
}";


template += "";


template += "
#theroom-class {";


template += "

color: #607D8B;";


template += "
}";


template += "<\/style>";

var options = {

template: template,

showInfo: true
};

// initialize
theRoom.start(options);

Más opciones de plugins con valores predeterminados.

var options = {



// namespace


namespace: "theroom",



// background color of the overlay


bgcolor: "rgba(255,0,0,0.5)",



// transition speed in milliseconds


transitionSpeed: 200,



// uses inline style attribute instead style


useInline: true,



// exclude these tags


exceptions: [



"head",



"meta",



"link",



"style",



"title",



"script"


]



}

Funciones de devolución de llamada disponibles.

var options = {



onStart: null,


onStarting: null,


onStop: null,


onStopping: null,


onClick: null,



}