El mejor tutorial de plugin de jQuery EasyUI en 2024. En este tutorial podrás aprender Plug-in de la lista,Widget,Empecé a usar 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.
Easyui Cada componente tiene propiedades, métodos y eventos. Los usuarios pueden ampliar fácilmente con esos componentes.
Se define en las jQuery.fn. {Programas} .defaults. Por ejemplo, los atributos de diálogo se definen en jQuery.fn.dialog.defaults.
Evento (llamada de retorno) se define en jQuery.fn. {} Plugin .defaults.
Método de llamada sintaxis: $ ( 'selector') plug-in ( "método", parámetro) ;.
en la que:
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
});
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)
} ">