Forum Replies Created

Viewing 15 posts - 1 through 15 (of 39 total)
  • Author
    Posts

  • pepe
    Participant

    Good afternoon Hristo, sorry for abusing your good predisposition will not happen again. I will implement what you recommend and once again thanks for the reply.
    A greeting.


    pepe
    Participant

    Good evening Hristo, I have followed the example you have set for me, but I still have a problem. I attach my code and I tell you:

    Pressing the A button will disable the click event of the A button and focus on the description text field. Pressing ESC in the description field will re-enable the click event, but the button’s toggle method does not work for me.

    thanks greetings.

    <!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
    <html xmlns=”http://www.w3.org/1999/xhtml”>
    <head>
    <meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ />
    <title>Documento sin título</title>

    <link rel=”stylesheet” href=”styles/jqx.base.css” type=”text/css”/>
    <link rel=”stylesheet” href=”styles/jqx.office.css” type=”text/css”/>

    <script type=”text/javascript” src=”scripts/jquery-1.11.1.min.js”></script>
    <script type=”text/javascript” src=”jqwidgets/jqxcore.js”></script>
    <script type=”text/javascript” src=”jqwidgets/jqxwindow.js”></script>
    <script type=”text/javascript” src=”jqwidgets/jqxtabs.js”></script>
    <script type=”text/javascript” src=”jqwidgets/jqxbuttons.js”></script>
    <script type=”text/javascript” src=”jqwidgets/jqxmaskedinput.js”></script>

    <style>

    #wndTiposVias{
    visibility: hidden;
    }

    #tituloVentanaTiposVias{
    float:left;
    margin-left: 10px;
    font-weight: bold;
    }

    #contenedorBotonAnadirTiposVias{
    float:left;
    }

    #contenedorBotonEditarTiposVias,
    #contenedorBotonAnteriorTiposVias,
    #contenedorBotonBuscarTiposVias,
    #contenedorBotonSiguienteTiposVias,
    #contenedorBotonEliminarTiposVias{
    float:left;
    margin-left: 5px;
    }

    #etiquetaIdentificadorTiposVias{
    float:left;
    margin-top: 1.3%;
    margin-left: 0.85%;
    width: 12%;
    height:30px;
    line-height: 30px;
    }

    #etiquetaDescripcionTiposVias{
    clear: left;
    float:left;
    margin-left: 0.85%;
    width: 12%;
    height: 30px;
    line-height: 30px;
    }

    #etiquetaAbreviaturaTiposVias{
    clear: left;
    float:left;
    margin-left: 0.85%;
    width: 12%;
    height: 30px;
    line-height: 30px;
    }

    #campoIdentificadorTiposVias{
    margin-top: 1.3%;
    float:left;
    width: 30%;
    height: 30px;
    display: flex;
    align-items: center;
    margin-left: 15px;
    }

    #campoDescripcionTiposVias{
    float:left;
    width: 570px;
    height: 30px;
    display: flex;
    align-items: center;
    margin-left: 15px;
    }

    #campoAbreviaturaTiposVias{
    float:left;
    width: 30%;
    height: 30px;
    display: flex;
    align-items: center;
    margin-left: 15px;
    }

    #btnAceptarTiposVias{
    margin-top: 8px;
    float: right;
    }

    #btnCancelarTiposVias{
    margin-top: 8px;
    margin-right: 5px;
    float: right;
    }

    .jqx-window-content {
    padding: 8px;
    }

    </style>

    <script type=”text/javascript”>
    $(document).ready(function () {
    $(“#wndTiposVias”).jqxWindow({
    height: 265,
    width: 700,
    theme: ‘office’,
    showCollapseButton:true
    });

    $(“#botonA”).jqxToggleButton({
    theme: ‘office’,
    width: 27,
    height: 27,
    });

    $(“#botonB”).jqxToggleButton({
    theme: ‘office’,
    width: 27,
    height: 27,
    disabled: true,
    });

    $(“#botonC”).jqxButton({
    theme: ‘office’,
    width: 27,
    height: 27,
    disabled: true,
    });

    $(“#botonD”).jqxToggleButton({
    theme: ‘office’,
    width: 27,
    height: 27,
    disabled: true,
    });

    $(“#botonE”).jqxButton({
    theme: ‘office’,
    width: 27,
    height: 27,
    disabled: true,
    });

    $(“#botonF”).jqxToggleButton({
    theme: ‘office’,
    width: 27,
    height: 27,
    disabled: true,
    });

    $(‘#tabTiposVias’).jqxTabs({
    width: ‘auto’,
    height: 145,
    theme: ‘office’
    });

    $(“#txtIdentificadorTiposVias”).jqxMaskedInput({
    height: ’22px’,
    width: “40px”,
    disabled: true,
    theme: ‘office’
    });

    $(“#txtDescripcionTiposVias”).jqxMaskedInput({
    height: ’22px’,
    width: “400px”,
    disabled: true,
    theme: ‘office’
    });

    $(“#txtAbreviaturaTiposVias”).jqxMaskedInput({
    height: ’22px’,
    width: “45px”,
    disabled: true,
    readOnly: true,
    theme: ‘office’
    });

    $(‘#btnAceptarTiposVias’).jqxButton({
    width: ’80’,
    height: ’27’,
    disabled: true,
    theme: ‘office’,
    })

    $(‘#btnCancelarTiposVias’).jqxButton({
    width: ’80’,
    height: ’27’,
    theme: ‘office’,
    })

    //———–( MOSTRAMOS EL DIV QUE CONTIENE EL FORMULARIO UNA VEZ CARGADO )

    $(‘#wndTiposVias’).css({“visibility”:”visible”});

    //———- ( ACCION BOTON AÑADIR )

    $(“#botonA”).on(“click”, eventoClick);

    function eventoClick(){
    console.log(“CLICK – A”);
    console.log(“TOGGLE – ” + $(“#botonA”).jqxToggleButton(‘toggled’));
    $(this).off(“click”);

    habilitarCamposNoIdentificador(‘#txtIdentificadorTiposVias’);
    $(“#txtDescripcionTiposVias”).jqxMaskedInput(‘focus’);
    $(‘#btnCancelarTiposVias’).val(“Cancelar”);
    }

    //———-( ACCION CAMPO DESCRIPCION )

    $(“#txtDescripcionTiposVias”).on(‘keydown’, function(e) {

    if (e.which == 27) {
    limpiarCampos();
    desabilitarCampos();
    $(‘#botonA’).jqxToggleButton({toggled: false});
    $(‘#btnCancelarTiposVias’).val(“Salir”);

    console.log(“CLICK – ESC”);
    console.log(“TOGGLE – ” + $(“#botonA”).jqxToggleButton(‘toggled’));
    $(“#botonA”).on(“click”, eventoClick);
    }

    })

    //———-( HABILITAR TODOS LOS INPUT TEXT MENOS EL INPUT IDENTIFICADOR )

    function habilitarCamposNoIdentificador(nombreCampoIdentificador){

    $(“input[type=text]:not(“+nombreCampoIdentificador+”)”).each(function() {
    $(this).jqxMaskedInput({disabled: false});
    });
    }

    //———-( DESABILITAR TODOS LOS INPUT TEXT )

    function desabilitarCampos(){
    $(“input[type=text]”).each(function(){
    $(this).jqxMaskedInput({ disabled: true});
    });
    }

    //———-( LIMPIAR TODOS LOS INPUT TEXT )

    function limpiarCampos(){
    $(“input[type=text]”).each(function(){
    $(this).jqxMaskedInput(‘clear’);
    });
    }

    });
    </script>

    </head>

    <body>
    <div id=’wndTiposVias’>
    <div>
    <div id=”tituloVentanaTiposVias”>TIPOS DE VIAS.</div>
    </div>

    <div>
    <div id=”menuBotonesAccion”>
    <div id=”contenedorBotonAnadirTiposVias”>
    <input type=”button” id=’botonA’ class=”botonesAccion” tabindex=”1″ value=”A”/>
    </div>
    <div id=”contenedorBotonEditarTiposVias”>
    <input type=”button” id=’botonB’ class=”botonesAccion” tabindex=”2″ value=”B”/>
    </div>
    <div id=”contenedorBotonAnteriorTiposVias” >
    <input type=”button” id=’botonC’ class=”botonesAccion” tabindex=”3″ value=”C”/>
    </div>
    <div id=”contenedorBotonBuscarTiposVias”>
    <input type=”button” id=’botonD’ class=”botonesAccion” tabindex=”4″ value=”D”/>
    </div>
    <div id=”contenedorBotonSiguienteTiposVias” >
    <input type=”button” id=’botonE’ class=”botonesAccion” tabindex=”5″ value=”E”/>
    </div>
    <div id=”contenedorBotonEliminarTiposVias”>
    <input type=”button” id=’botonF’ class=”botonesAccion” tabindex=”6″ value=”F”/>
    </div>
    </div>

    <div id=’tabTiposVias’ style=”clear:left; margin-top: 35px;”>
    <ul style=’margin-left: 20px;’>

  •           
  • <div>
    <div id=”etiquetaIdentificadorTiposVias”>
    <label id=”lblIdentificadorTiposVias” disabled=”disabled”>IDENTIFICADOR</label>
    </div>

    <div id=”campoIdentificadorTiposVias”>
    <input id=’txtIdentificadorTiposVias’ type=”text” tabindex=”7″>
    </div>

    <div id=”etiquetaDescripcionTiposVias”>
    <label id=”lblDescripcionTiposVias”>DESCRIPCION</label>
    </div>

    <div id=”campoDescripcionTiposVias”>
    <input id=’txtDescripcionTiposVias’ type=”text” tabindex=”8″>
    </div>

    <div id=”etiquetaAbreviaturaTiposVias”>
    <label id=”lblAbreviaturaTiposVias”>ABREVIATURA</label>
    </div>

    <div id=”campoAbreviaturaTiposVias”>
    <input id=’txtAbreviaturaTiposVias’ type=”text” tabindex=”9″>
    </div>
    </div>

    </div>

    <div>
    <input type=”button” value=”ACEPTAR” id=’btnAceptarTiposVias’ class=”botonRipple” tabindex=”10″/>
    </div>
    <div>
    <input type=”button” value=”SALIR” id=’btnCancelarTiposVias’ class=”botonRipple” tabindex=”11″/>
    </div>

    </div>
    </div>
    </body>
    </html>


pepe
Participant

Thank you very much Hristo, there is another way to lock and unlock a togglebutton without using on off.
Thank you


pepe
Participant

Thank you very much Hristo, perfect the answer. This line is the one I don’t understand $(“#btnSend”).On(“click”, hadndleSend);
Is it too much to ask if there is a possibility of not having to use a function? I’ve been trying but it stops working.


pepe
Participant

Thank you very much Hristo, that’s what I meant.

Cheers


pepe
Participant

Hi Hristo Hristov thanks for the reply, but not what I was asking.

I want to change the color of the close button X on the popover.

Thank you


pepe
Participant

Good morning Hristo, thanks for the answer but it’s not what I’m looking for.
What I intend is that when I use the tab key to move from one button to another and the button receives the focus I change the background color whenever this toggle is off.
Thank you

in reply to: popover position popover position #105862

pepe
Participant

Good afternoon, thanks for the reply. The answer is a solution to what I ask, I even think I would improve it using offset to position the popoper.
But I have a problem if I change the resolution of the monitor the coordinates x and y will not be the same and the popoper will not be where I want, that’s why I wanted the popoper to be inside the div capa.
A greeting.

in reply to: popover position popover position #105817

pepe
Participant

Good morning, sorry for my English, but I have to use the translator.
What I want to do is that when I press the button, the popover will appear inside the div (capa).

in reply to: button within notification button within notification #105776

pepe
Participant

Good night, I try to capture the click event of the button but I can not get it.
A greeting.

<!DOCTYPE html>
<html>
<head>
<title>jQuery Notification Sample</title>
<link type=”text/css” rel=”Stylesheet” href=”../../jqwidgets/styles/jqx.base.css” />
<script type=”text/javascript” src=”../../scripts/jquery-1.11.1.min.js”></script>
<script type=”text/javascript” src=”../../jqwidgets/jqxcore.js”></script>
<script type=”text/javascript” src=”../../jqwidgets/jqxnotification.js”></script>
<script type=”text/javascript” src=”../../jqwidgets/jqxbuttons.js”></script>

<script type=’text/javascript’>
$(document).ready(function () {
$(‘#jqxNotification’).jqxNotification({
width: 300,
height: 100,
position: ‘top-left’,
opacity: 0.9,
autoOpen: true,
autoClose: false,
template: ‘info’,
closeOnClick: false,
});

$(‘#jqxButton’).jqxButton({
height: ’30px’,
});

$(“#jqxButton”).on(‘click’, function () {
alert(‘ok’);
});

});
</script>

<style>
#jqxButton{background-color: transparent;}
</style>

</head>
<body>
<div id=’jqxNotification’>Welcome to our website!
<div><input type=’button’ value=’Click me’ id=’jqxButton’ /></div>
</div>
</body>
</html>

in reply to: button within notification button within notification #104674

pepe
Participant

Thank you very much for the answers Martin. I have tried the button code and the notification separately and they work perfectly as I want, but when I put the button inside the div of the notification its appearance is 3d. Keep looking.

A greeting.

in reply to: jqxWindow and jqxLoader jqxWindow and jqxLoader #104605

pepe
Participant

Thank you very much for the answer. A greeting.

in reply to: change password box icon change password box icon #99598

pepe
Participant

Thank you very much for the reply.
a greeting


pepe
Participant

thank you very much, perfect the example

in reply to: disable last toolbar button disable last toolbar button #98912

pepe
Participant

Thanks for the answer, but how can I do so that when I load the page the last button appears disabled.

A greeting.

Viewing 15 posts - 1 through 15 (of 39 total)