Widget de botón de radio EasyUI jQuery

EasyUI es un marco HTML5 para usar componentes de interfaz de usuario basados en tecnologías jQuery, React, Angular y Vue. Ayuda a crear funciones para aplicaciones móviles y web interactivas, lo que ahorra mucho tiempo a los desarrolladores.

En este artículo, aprenderemos cómo diseñar un botón de radio usando jQuery EasyUI. El widget Radiobutton se usa para crear un botón de radio que se puede usar para seleccionar la opción necesaria. Solo se puede seleccionar una opción en un grupo.

Descargas para EasyUI para jQuery:

https://www.jeasyui.com/download/index.php

Sintaxis:

<input class="easyui-radiobutton">

Propiedades:

ancho: Es el ancho del componente Radiobutton a realizar.
altura: Es la altura del componente Radiobutton a realizar.
valor: Es el valor predeterminado vinculado al Radiobutton que se va a realizar.
marcada: Define si el Radiobutton está marcado para ser realizado.
disabled: Define si deshabilitar el Radiobutton a realizar.
label: Es la etiqueta ligada al Radiobutton a realizar.
labelWidth: Es el ancho de la etiqueta.
labelPosition: Es la posición de la etiqueta. Los valores posibles son ‘antes’, ‘después’ y ‘superior’.
labelAlign: Es la alineación de la etiqueta. Los valores posibles son ‘izquierda’ y ‘derecha’.

Evento:

onChange: Se f

opciones: Devuelve el objeto de opciones.
setValue: Establece el valor para el Radiobutton.
disabled: Deshabilita el componente.
enable: Habilita el componente.
check: Comprueba el componente.
uncheck: Desmarca el componente.
clear: Borra el valor ‘marcado’.
reset: Resetea el valor ‘marcado’.

Enlace CDN: Primero, agregue los scripts jQuery Easy UI necesarios para su proyecto.

<script type=”text/javascript” src=”jquery.min.js”></script>
<!–bibliotecas jQuery de EasyUI –>
<script type=”text/javascript” src=”jquery.easyui.min. js”> </script>
<!–Biblioteca jQuery de EasyUI Mobile –>
<script type=”text/javascript” src=”jquery.easyui.mobile.js”> </script>

Ejemplo:

HTML

<html>
<head>
  
  <!-- EasyUI specific stylesheets-->
  <link rel="stylesheet" 
        type="text/css" 
        href="themes/metro/easyui.css">
  
  <link rel="stylesheet"
        type="text/css"
        href="themes/mobile.css">
  
  <link rel="stylesheet"
        type="text/css"
        href="themes/icon.css">
  
  <!--jQuery library -->
  <script type="text/javascript"
          src="jquery.min.js">
  </script>
  
  <!--jQuery libraries of EasyUI -->
  <script type="text/javascript"
          src="jquery.easyui.min.js">
  </script>
  
  <!--jQuery library of EasyUI Mobile -->
  <script type="text/javascript"
          src="jquery.easyui.mobile.js">
  </script>
</head>
<body>
  <h1>GeeksforGeeks</h1>
  <h3>EasyUI jQuery radiobutton widget</h3>
  
  <form id="gfg">
    <div style="margin-bottom:20px">
      <input class="easyui-radiobutton" 
             name="language" 
             value="HTML" 
             label="HTML">
    </div>
    <div style="margin-bottom:20px">
      <input class="easyui-radiobutton" 
             name="language"
             value="JavaScript"
             label="JavaScript">
    </div>
    <div style="margin-bottom:20px">
      <input class="easyui-radiobutton" 
             name="language"
             value="jQuery"
             label="jQuery">
    </div>
  </form>
</body>
</html>

Producción:

Referencia: https://www.jeasyui.com/documentation/radiobutton.php

Publicación traducida automáticamente

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

HTML

Deja una respuesta Cancelar la respuesta