plugin de jQuery EasyUI
jQuery EasyUI proporcionan para la creación de páginas web en varios navegadores conjunto completo de componentes, incluyendo la poderosa cuadrícula de datos (tabla de datos), treegrid (forma de árbol), el panel (Panel), combinado (combinación desplegable) y así sucesivamente. Los usuarios pueden combinar estos componentes también se pueden usar uno solo.
Plug-in de la lista
Base (base)
- analizador analizador
- cargador de Easyloader
- arrastrable arrastrable
- Soltable se puede colocar
- Tamaño de tamaño variable ajustable
- pestaña de paginación
- cuadro de búsqueda Cuadro de búsqueda
- Barra de progreso Progressbar
- globos tooltip
Layout (Diseño)
Menu (Menú) y Button (Botón)
(Formulario)
- Más información Solicitud
- cuadro de verificación Validatebox
- combinación combo
- cuadro combinado cuadro combinado
- árbol combinación Combotree
- rejilla compuesta Combogrid
- caja digital Numberbox
- cuadro Fecha datebox
- Datetimebox marco de fecha y hora
- Calendario Calendario
- spinner spinner
- valor Numberspinner spinner
- TimeSpinner tiempo spinner
- deslizador deslizador
Ventana (Ventana)
Cuadrícula de datos (Data Grid) y el árbol (árbol)
Widget
Easyui Cada componente tiene propiedades, métodos y eventos. Los usuarios pueden ampliar fácilmente con esos componentes.
propiedad
Se define en las jQuery.fn. {Programas} .defaults. Por ejemplo, los atributos de diálogo se definen en jQuery.fn.dialog.defaults.
evento
Evento (llamada de retorno) se define en jQuery.fn. {} Plugin .defaults.
camino
Método de llamada sintaxis: $ ( 'selector') plug-in ( "método", parámetro) ;.
en la que:
- selector de jQuery es el selector de objeto.
- plugin es un nombre de plug-in.
- método con enchufe para el método existente.
- parámetro es un parámetro de objeto puede ser un objeto, una cadena ...
El método se define en jQuery.fn. {} Plugin .methods. Cada método tiene dos parámetros: jq y param. El primer parámetro 'JQ' es necesario, una referencia al objeto jQuery. El segundo parámetro "param" se refiere a los parámetros del método real que se pasa. Por ejemplo, para extender método de componentes de diálogo denominado enfoque 'mymove', de la siguiente manera:
$ .extend ($. Fn.dialog.methods, {
mymove: function (JQ, nuevPosicion) {
volver jq.each (function () {
$ (Este) .dialog ( 'mover', nuevPosicion);
});
}
});
Ahora se puede llamar al método 'mymove' para mover el cuadro de diálogo (diálogo) para la ubicación especificada:
$ ( '# DD'). Diálogo ( 'mymove', {
izquierda: 200,
superior: 100
});
Empecé a usar jQuery EasyUI
Descargar Biblioteca, y hace referencia a EasyUI archivos CSS y JavaScript en su página.
<Link rel = "stylesheet" type = "text / css" href = "easyui / themes / default / easyui.css"> <Link rel = "stylesheet" type = "text / css" href = "easyui / themes / icon.css"> <Script type = "text / javascript" src = "easyui / jquery-1.7.2.min.js"> </ script> <Script type = "text / javascript" src = "/ easyui jquery.easyui.min.js"> </ script>
Una vez que se hace referencia a los archivos necesarios EasyUI, se puede definir un EasyUI componentes mediante el uso de etiquetas o JavaScript. Por ejemplo, para un panel superior con una función de plegado, tiene que escribir el código HTML de la siguiente manera:
id = "p" clase <div = estilo "del panel easyui" = "width: 500px; altura: 200px; padding: 10px;"
title = "Mi panel" iconCls = "icono de guardado" colapsable = "true">
El contenido del panel
</ Div>
Al crear un componente mediante marcado, atributo 'ficha' Opciones se utiliza para apoyar el nombre de la propiedad ya que la versión 1.3 es compatible con HTML5. Por lo que puede volver a escribir el código anterior de la siguiente manera:
id = "p" clase <div = estilo "del panel easyui" = "width: 500px; altura: 200px; padding: 10px;"
title = "Mi panel" de datos-options = "iconCls: 'icono-SAVE', plegable: true">
El contenido del panel
</ Div>
El código siguiente muestra cómo crear un cuadro combinado enlazado evento 'onSelect'.
<Entrada class = "easyui-cuadro combinado" name = "lengua"
datos-options = "
url: 'combobox_data.json',
campo de Valor: 'id',
textField: "texto",
panelHeight: 'auto',
onSelect: function (registro) {
alerta (record.text)
} ">