Aplicar estilo css a botones por separado

gallurt · 20 Mar 2017

Hola betas, estoy intentando darle estilo css por separado a los botones, es decir un estilo css distinto para cada botón. para poder usar el :before y poner un icono a cada botón.

Tengo este código que funciona perfectamente pero tienen todos asignado el mismo estilo.

JS

HTML:

function reemplazarSeleccion(control, texto){ // v2011-12-21
	var inicio, seleccion;

	if("selectionStart" in control){ // W3C
		// Guardamos la posición inicial del cursor
		inicio = control.selectionStart;

		// Reemplazamos todo el contenido
		control.value = control.value.substr(0, control.selectionStart) +
			texto +	control.value.substr(control.selectionEnd, control.value.length);

		// Movemos el cursor a la posición final
		control.selectionStart = inicio + texto.length;
		control.selectionEnd = inicio + texto.length;
		
		control.focus();

	}else if(document.selection){ // IE
		control.focus();

		// Obtenemos la selección y la reemplazamos por el nuevo texto
		seleccion = document.selection.createRange();
		seleccion.text = texto;

		seleccion.select();

	}else{
		// No sabemos dónde está el cursor: insertamos el texto al final
		control.value += texto;
	}
}
jQuery(function($){
	var botones = {
		"Titulo": function(){
			return "[titulo][/titulo]";
		},
		"Negrita": function(){
			return "[B][/B]";
		},
		"centrar": function(){
			return "[C][/C]";
		},
		"enlace": function(){
			return "[enlace link=' '  blank='true'][/enlace]";
		}, 
		"imagen": function(){
			return "[img][/img]";
		},
		"youtube": function(){
			return "[youtube][/youtube]";
		},
		"citar": function(){
			return "[citar][/citar]";
		},
		"i": function(){
			return "[i][/i]";
		},
		"lista": function(){
			return "[lista][/lista]";
		},
		"subir": function(){
			popUp('/subir_imagen.php');
			
			return "";
		},
		"spoiler": function(){
			return "[spoilers title=' '][/spoilers]";
		}
		
	};
	$(".ps-postbox-status textarea").each(function(){
		var $cajaBotones = $("<div><\/div>");
		$cajaBotones.insertBefore($(this));

		for(etiqueta in botones){
			var $boton = $('<input type="button" class="stream_boton" style="padding: 5px; margin-top: -8px; margin-bottom: 20px;">');
			$boton.data("control", this).data("callbackTexto", botones[etiqueta]).val(etiqueta).click(function(){
				var control = $(this).data("control");
				var texto = $(this).data("callbackTexto")();
				reemplazarSeleccion(control, texto);
			});
			$boton.insertBefore($cajaBotones);
		}
	});
});

gracias y saludos

ZoroRoronoa · 23 Mar 2017

Dale una clase con terminacion numerica
Algo asi como

clase1
clase2
clase3

PHP:

$(".ps-postbox-status textarea").each(function(){
		var $cajaBotones = $("<div><\/div>");
		$cajaBotones.insertBefore($(this));

                var aux = 1;
		for(etiqueta in botones){
			var $boton = $('<input type="button" class="stream_boton mibotoncustom'+aux+'" style="padding: 5px; margin-top: -8px; margin-bottom: 20px;">');
			$boton.data("control", this).data("callbackTexto", botones[etiqueta]).val(etiqueta).click(function(){
				var control = $(this).data("control");
				var texto = $(this).data("callbackTexto")();
				reemplazarSeleccion(control, texto);

                                aux++;
			});
		    $boton.insertBefore($cajaBotones);
		}
	});

y con CSS le das esos estilos con :before

.mibotoncustom1:before {/* styles */}
.mibotoncustom2:before {/* styles */}
.mibotoncustom3:before {/* styles */}
etc...

gallurt · 23 Mar 2017

gracias por contestar.

He probado tu código y no hace ningún efecto pero todos los botones pasan a ser de la clase

PHP:

.mibotoncustom1

y en el CSS

PHP:

.mibotoncustom1:before {background:  #2C2B2B;}

tampoco hace nada

- - - Actualizado - - -

ZoroRoronoa dijo:

Dale una clase con terminacion numerica
Algo asi como

clase1
clase2
clase3

PHP:

$(".ps-postbox-status textarea").each(function(){
		var $cajaBotones = $("<div><\/div>");
		$cajaBotones.insertBefore($(this));

                var aux = 1;
		for(etiqueta in botones){
			var $boton = $('<input type="button" class="stream_boton mibotoncustom'+aux+'" style="padding: 5px; margin-top: -8px; margin-bottom: 20px;">');
			$boton.data("control", this).data("callbackTexto", botones[etiqueta]).val(etiqueta).click(function(){
				var control = $(this).data("control");
				var texto = $(this).data("callbackTexto")();
				reemplazarSeleccion(control, texto);

                                aux++;
			});
		    $boton.insertBefore($cajaBotones);
		}
	});

y con CSS le das esos estilos con :before

.mibotoncustom1:before {/* styles */}
.mibotoncustom2:before {/* styles */}
.mibotoncustom3:before {/* styles */}
etc...

Hola con más tiempo he cambiado aux++ colocándolo en otro lado y me ha funcionado perfecto

Gracias por ayudarme dejó aquí como lo he hecho por si le puede ayudar a alguien

PHP:

aux++;
            });
            $boton.insertBefore($cajaBotones);
        }

CAMBIADO

PHP:

            });
            $boton.insertBefore($cajaBotones);
            aux++;
        }

Gracias y Saludos

ZoroRoronoa · 25 Mar 2017

gallurt dijo:
Hola con más tiempo he cambiado aux++ colocándolo en otro lado y me ha funcionado perfecto

Gracias por ayudarme dejó aquí como lo he hecho por si le puede ayudar a alguien

PHP:

aux++; }); $boton.insertBefore($cajaBotones); }

CAMBIADO

PHP:

}); $boton.insertBefore($cajaBotones); aux++; }

Gracias y Saludos

Todo depende de con que valor inicialices la variable "aux"
Yo la inicie con 1.
Si tu la inicias con 0
var aux = 0

No tenias q mover el codigo.

PERO ESO NO IMPORTA... AMBOS DAN EL MISMO RESULTADO
Solo fue cuestión de q ocupas el "1", por eso moviste el aux++ para que incrementara después de hacer el insertBefore

Me alegra q te halla ayudado un poco mi aporte.
Saludos.

Aplicar estilo css a botones por separado

gallurt

ZoroRoronoa

gallurt

ZoroRoronoa

Temas similares