jQWidgets jqxWindow AutoOpen Propiedad

Introducción: jQWidgets es un marco de JavaScript para crear aplicaciones basadas en web para PC y dispositivos móviles. Es un marco muy potente, optimizado, independiente de la plataforma y ampliamente compatible. jqxWindow se usa para ingresar datos o ver información en una aplicación.

La propiedad autoOpen se usa para establecer o devolver si la ventana especificada se mostrará después de su creación o no. Acepta valor booleano ya sea verdadero o falso.

Sintaxis:

Establezca la propiedad autoOpen.

$('#jqxWindow').jqxWindow({ autoOpen: true});  

Obtenga la propiedad autoOpen.

var autoOpen = $('#jqxWindow').jqxWindow('autoOpen'); 

Archivos vinculados: descargue jQWidgets desde el enlace dado. En el archivo HTML, busque los archivos de script en la carpeta descargada.

<enlace rel=”hoja de estilo” href=”jqwidgets/styles/jqx.base.css” type=”text/css” />
<enlace rel=”hoja de estilo” href=”jqwidgets/styles/jqx.summer.css” tipo =”text/css” />
<script type=”text/javascript” src=”scripts/jquery-1.10.2.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/jqxbuttons.js ”></guion>

Ejemplo: Este ejemplo ilustra la propiedad jqxWindow autoOpen en jQWidgets. Para este ejemplo, autoOpen se establece en false. Entonces, después de hacer clic en el botón «Abrir la ventana», se abrirá la ventana especificada.

HTML

<!DOCTYPE html>
<html lang="en">
  
<head>
    <link rel="stylesheet" href=
        "jqwidgets/styles/jqx.base.css" type="text/css" />
    <link rel="stylesheet" href=
        "jqwidgets/styles/jqx.summer.css" type="text/css" />
    <script type="text/javascript" 
        src="scripts/jquery-1.10.2.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/jqxbuttons.js"></script>
</head>
  
<body>
    <center>
        <h1 style="color: green;">
            GeeksforGeeks 
        </h1>
          
        <h3>
            jQWidgets jqxWindow autoOpen Property
        </h3>
          
        <div id='jqxwindow'>
            <div>Header</div>
            <div>GeeksforGeeks</div>
        </div>
          
        <button id="button">Open the Window</button>
    </center>
  
    <script type="text/javascript">
        $(document).ready(function () {
            $("#jqxwindow").jqxWindow({
                height: 100,
                width: 200,
                theme: 'energyblue',
                autoOpen: false
            });
            $("#button").click(function () {
                $("#jqxwindow").jqxWindow('open');
            });
        });
    </script>
</body>
  
</html>

Producción:

Referencia: https://www.jqwidgets.com/jquery-widgets-documentation/documentation/jqxwindow/jquery-window-api.htm?search=

Publicación traducida automáticamente

Artículo escrito por Kanchan_Ray y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *