Aplicar estilo css a botones por separado Aplicar estilo css a botones por separado


Mostrando resultados del 1 al 4 de 4
  1. #1
    Aplicar estilo css a botones por separado
    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
    Código 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
    Última edición por gallurt; 20-mar-2017 a las 14:11 Razón: corregir titulo

  2. #2
    Registro
    30-julio-2011
    Ubicación
    Veracruz, Mexico.
    Mensajes
    510
    Dale una clase con terminacion numerica
    Algo asi como

    clase1
    clase2
    clase3

    Código 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(controltexto);

                                    
    aux++;
                });
                
    $boton.insertBefore($cajaBotones);
            }
        }); 
    y con CSS le das esos estilos con :before

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

  3. #3
    gracias por contestar.

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

    Código PHP:
    .mibotoncustom1 
    y en el CSS
    Código PHP:
    .mibotoncustom1:before {background:  #2C2B2B;} 
    tampoco hace nada

    - - - Actualizado - - -

    Cita Iniciado por ZoroRoronoa Ver Mensaje
    Dale una clase con terminacion numerica
    Algo asi como

    clase1
    clase2
    clase3

    Código 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(controltexto);

                                    
    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


    Código PHP:
    aux++;
                });
                
    $boton.insertBefore($cajaBotones);
            } 
    CAMBIADO
    Código PHP:
                });
                
    $boton.insertBefore($cajaBotones);
                
    aux++;
            } 

    Gracias y Saludos

  4. #4
    Registro
    30-julio-2011
    Ubicación
    Veracruz, Mexico.
    Mensajes
    510
    Aplicar estilo css a botones por separado
    Cita Iniciado por gallurt Ver Mensaje

    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


    Código PHP:
    aux++;
                });
                
    $boton.insertBefore($cajaBotones);
            } 
    CAMBIADO
    Código 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.

Temas similares

  1. Tutorial: Botones para descargar con estilo.
    Hola este tutorial surgió por la duda del usuario javierbt de como poner un diseño de botones para descargar de diferentes servidores. A continuación...
    Respuestas: 29
    Último mensaje: 19-oct-2017
  2. Botones para compartir al estilo sharethis.com
    Amigos, en mi sitio tengo botones para compartir de sharethis.com iba todo muy bien hasta que me di cuenta que al compartir aveces tiene problemas...
    Respuestas: 2
    Último mensaje: 09-ene-2014
  3. problemas con botones de nuevo estilo
    he intentado cambiarlos por ya los traducidos pero no lo consigo,uso uno llamado ambiance y continuan en ingles, es mas,accedo por FTP y siguen...
    Respuestas: 2
    Último mensaje: 03-dic-2005

Normas de publicación

  • No puedes crear nuevos temas
  • No puedes responder mensajes
  • No puedes subir archivos adjuntos
  • No puedes editar tus mensajes
  •