Ver Mensaje Individual
  #2 (permalink)  
Antiguo 16/11/2013, 02:54
rodojpm
 
Fecha de Ingreso: julio-2010
Mensajes: 127
Antigüedad: 13 años, 9 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