Muchas veces los diseños no suelen ir de acuerdo con el aspecto de los radio y los checkbox que nos ofrecen los navegadores.
Crear controles que sustituyan los ya existentes puede darnos problemas de accesibilidad, salvo en este caso (bueno, y supongo que en otros), ya que lo que hace este script es aprovechar la funcionalidad de las etiquetas label para que el funcionamiento recaiga sobre estas etiquetas y no sobre las checkbox o los radio.
El script buscará los inputs radio y checkbox y los ocultará y cambiará el estilo de las label asociadas para que el funcionamiento sea el mismo. ARC – Adam’s Radio/Checkbox customisation
VÃa / Infected-FX
A veces dependemos del navegador en aspectos de diseño, un caso bastante común es con los checkboxes y radio buttons, no son como nosotros queremos y difieren según el navegador que usemos.
Esto se puede solucionar mediante CSS, para ello deberemos crearnos una imagen que contenga todos los estados del botón (seleccionado, no seleccionado, con foco y sin foco). Como se puede apreciar, la imagen contiene todos los posibles estados uno debajo del otro, ya que mediante estilos, usaremos una porción de la imagen para mostrar el estado correspondiente.
Para poder realizar este efecto es necesario usar la etiqueta label, la cual hará referenia al checkbox o al radio button, los cuales son necesarios ocultar para poder sustituirlos por la imagen (que estará ligada al elemento label).
Como se puede ver, existen dos scripts dentro de npm: build que compila el js y extrae los CSS, y dev, que arranca el servidor de webpack habilitando HMR (🎶 ¡ya no puedo vivir sin él! 🎶).
Ambas configuraciones de webpack usan un script en común (webpack.config.common.js):
const webpack = require( 'webpack' );
const path = require( 'path' );
// Carga los ficheros .vueconst VueLoaderPlugin = require( 'vue-loader/lib/plugin' );
// Configura stylelintconst StyleLintPlugin = require( 'stylelint-webpack-plugin' );
// Para obtener un path para los aliasfunctionresolve( dir ) {
return path.join( __dirname, '.', dir );
}
module.exports = {
mode: 'production',
// Fichero inicial del proyecto
entry: './js/main.js',
// Fichero final para incluir
output: {
filename: 'js/main.js',
publicPath: '/dist/',
},
module: {
// Reglas para los ficheros
rules: [
{
test: /\.js$/,
exclude: /node_modules/,
loader: 'babel-loader',
},
{
test: /\.vue$/,
loader: 'vue-loader',
},
{
test: /\.css$/,
use: [
'css-loader',
'sass-loader',
],
},
],
},
plugins: [
new webpack.HotModuleReplacementPlugin(),
new VueLoaderPlugin(),
new StyleLintPlugin( {
files: [ '**/*.{vue,htm,html,css,sss,less,scss,sass}' ],
} ),
],
resolve: {
extensions: [ '.js', '.vue', '.json' ],
alias: {
'@': resolve( '' ),
},
},
};
El frontend se gestiona desde el fichero main.js, que inicializará Vue y añadirá el componente principal:
import Vue from 'vue';
import Buefy from 'buefy';
import'buefy/dist/buefy.css';
import App from './components/App.vue';
import'@/assets/scss/main.scss';
Vue.use( Buefy );
new Vue( {
el: '#app',
components: {
App,
},
render: ( c ) => c( 'app' ),
} );
// accept replacement modulesif ( module.hot ) {
module.hot.accept();
}
Y ya por último el componente App.vue, que muestra simplemente un poco de HTML
Vamos a explicar un pequeño script para mostrar en una capa el mapa del sitio web usando Ajax (en este caso la librerÃa jQuery).
Un efecto parecido lo podemos encontrar en periódicos online para mostrar las diferentes secciones que se pueden visitar. Por ejemplo lo podemos ver en elmundo.es (en la cabecera) y en elpais.com (en el pie de página).
Se trata de que cuando se pasa el ratón sobre el link, se muestra un menú con las secciones del periódico (mapa del sitio en nuestro caso).
Como hemos explicado en otras ocasiones de cómo usar Ajax, esta vez vamos a utilizar la librerÃa jQuery para facilitar la labor. El que sea un mapa del sitio es debido a que de cara a SEO los buscadores indexan más facilmente nuestro sitio.
Ahora tan solo nos falta en el onload del window añadir la funcionalidad necesaria para ocultar la capa, y añadir al enlace el evento onmouseover para cargar el contenido de la capa y mostrarla cuando se pose el ratón en el enlace, y el evento onmouseout para ocultar la capa cuando salgamos del enlace.
window.onload = function() {
var obj = $("div#marco");
obj.hide();
$("a#secciones").mouseover(
function() {
var capa = $("div#marco");
// Para evitar recargar la pagica cada vez que se muestra
if (!capa.attr("cargado")) {
capa.load("secciones.html");
capa.attr({cargado: true});
}
capa.show().slideDown("slow");
} );
$("a#secciones").mouseout(
function() {
var capa = $("div#marco");
capa.slideUp("slow");
} );
}
El código es muy sencillo, lo único necesario de explicar para entenderlo es lo siguiente:
Cuando se carga el contenido de la capa, primero se comprueba si existe un atributo propio que hemos añadido a la capa, si no existe ese atributo entonces cargamos el contenido mediante Ajax y luego creamos ese atributo para asà no tener que volver a cargar otra vez el contenido cuando pasemos el ratón sobre el enlace.
La función $ nos permite obtener un elemento HTML, en el caso de $(“div#marco”) nos devuelve el elemento DIV cuyo id es “marco”.
hide() oculta un elemento HTML.
show() muestra un elemento.mouseover(funcion) añade la ejecución de la función en el evento mouseover de un elemento.
mouseout(funcion) añade la ejecución de la función en el evento mouseout de un elemento.
attr(texto) consulta el valor del atributo pasado como parámetro de un elemento.
attr(código) añade el atributos y valores a un elemento.
ZeroClipboard es una librería javascript que utiliza un swf para copiar contenido en nuestro portapapeles. Aunque hay algún script que te lo hace, con la nueva versión de Adobe Flash, han dejado de funcionar, algo que no ocurre con ZeroClipboard.
Se trata de una librería bastante completa que permite añadir eventos y estilos.
Podéis ver un ejemplo en micURL ZeroClipboard
Gracias José Luis por el aviso
Leyendo una entrada de Korsarios.net sobre la lista de países en SQL, recordé que no hace mucho yo también me tuve que crear una lista parecida, pero esta vez de idiomas. Por eso hemos pensado que no estaría mal ofrecer una serie de recursos sobre idiomas y países, que podamos usar en nuestras páginas web.
Suele ser muy útil cuando queremos mostrar un desplegable con los todos los países que existen. Existe el estándar ISO 3166 para definir los países y sus subdivisiones, codificados mediante dos letras, tres letras o de forma numérica.
También puede ser necesario disponer la lista de países en la base de datos, para eso nada mejor que lo que nos ofrece Korsarios.net, las sentencias sql para la lista de países en español y en inglés.
En otras ocasiones puede que necesitemos ir a distintas páginas según el idioma o país desde dónde se visite la página. El idioma se puede detectar mediante PHP o Javascript. Aunque el idioma no siempre es siempre lo más característico, porque puede tratarse de algo específico del país y no del idioma (por ejemplo, una tienda). Para ello lo mejor es detectar el país según la IP, habiendo dos formas, mediante acceso a BD o sin acceso a BD.
En el caso de que querer la lista de idiomas, tendremos que tener en cuenta el ISO 639, codificado con dos letras y tres letras. Como no, siempre es bueno también tener todos los datos de los idiomas en la BD, en este caso somos nosotros quienes os ponemos en disposición el sql necesario: Idiomas sql
Esto se puede solucionar mediante CSS, para ello deberemos crearnos una imagen que contenga todos los estados del botón (seleccionado, no seleccionado, con foco y sin foco). Como se puede apreciar, la imagen contiene todos los posibles estados uno debajo del otro, ya que mediante estilos, usaremos una porción de la imagen para mostrar el estado correspondiente.
