Ver Mensaje Individual
  #2 (permalink)  
Antiguo 16/11/2013, 02:54
rodojpm
 
Fecha de Ingreso: julio-2010
Mensajes: 127
Antigüedad: 16 años, 3 meses
Puntos: 2
Respuesta: Estoy buscando un Combobox que no pueda ser modificado

Bueno, si alguien esta buscando algo parecido, aquí les tengo un script que acabo de crear:http://jsfiddle.net/6Tt2N/8/

html
Código HTML:
<select name="categories" class="category">
    <option value="none">no category</option>
    <option value="1">general</option>
    <option value="2">technology</option>
    <option value="3">medicine</option>
    <option value="4">economic</option>
</select> 
javascript (usando jquery)
Código PHP:
/* detecting the changes*/
var selector = ".category";
$(
"select" + selector).change(function () {
    $(
"#write_sel").trigger("click");
    $(
"#write_sel").val($(selector + " option:selected").text());
    $(
selector + " option:selected").text("");
    $(
"#write_sel").css("opacity", 1);
});

/*Create the selector input field*/
$("select" + selector).parent().append("<input type='text' name='new' id='write_sel' placeholder=''>");
var 
position = $("select" + selector).position();
$(
"#write_sel").css("width", $("select" + selector).width() - 20);
$(
"#write_sel").css("height", $("select" + selector).height());
$(
"#write_sel").css("padding", $("select" + selector).css("padding"));
$(
"#write_sel").css("position", "absolute");
$(
"#write_sel").css("top", position.top + 1);
$(
"#write_sel").css("left", position.left + 1);
$(
"#write_sel").css("background", "transparent");
$(
"#write_sel").css("font-size", $("select" + selector).css("font-size"));
$(
"#write_sel").css("padding-left", "7px");
$(
"#write_sel").css("border", "0");
$(
"#write_sel").css("outline", "none");
$(
"#write_sel").attr("placeholder", $(selector + " option").first().text());
$(
selector + " option").first().text("");
//console.log($(selector + " option").first().text());

/*Making sure the editor is only activated when double clicking*/
var DELAY = 200,
    
clicks = 0,
    
timer = null;
$(
"#write_sel").click(function (e) {
    
//    if()
    
if ($(selector + " option:selected").val() != $("select" + selector + " option").first().val()) {
        
clicks++; //count clicks
        
if (clicks === 1) {
            
timer = setTimeout(function () {
                $(
"#write_sel").blur(); //do nothing
                
clicks = 0; //after action performed, reset counter
            
}, DELAY);
        } else {
            
clearTimeout(timer); //prevent single-click action
            
$(selector + " option:selected").text("");
            $(
this).css("opacity", 1);
            
clicks = 0; //after action performed, reset counter

        
}
    }
}).
dblclick(function (e) {
    
e.preventDefault(); //cancel system double-click event
});

/*Returning the variable to the corresponding option*/
$("#write_sel").blur(function () {
    $(
selector + " option:selected").text($(this).val());
    if ($(
this).val() != '') {
        $(
this).css("opacity", 0);
    }
}); 
css
Código:
category {
    width:200px;
}
::-webkit-input-placeholder {
    /* WebKit browsers */
    color: #555;
}
:-moz-placeholder {
    /* Mozilla Firefox 4 to 18 */
    color: #555;
}
::-moz-placeholder {
    /* Mozilla Firefox 19+ */
    color: #555;
}
:-ms-input-placeholder {
    /* Internet Explorer 10+ */
    color: #555;
}
__________________
Mi ultima web.

Última edición por rodojpm; 16/11/2013 a las 11:00