jQuery EasyUI Complementos


jQuery EasyUI proporciona una colección completa de componentes para crear páginas web compatibles con varios navegadores, incluyendo potentes datagrid (cuadrícula de datos), treegrid (cuadrícula de árbol), panel (panel), combo (combinación desplegable), etc. Los usuarios pueden combinar estos componentes o utilizar uno solo de ellos.

Lista de complementos

Base (Básicos)

Layout (Diseño)

Menu (Menú) y Button (Botón)

Form (Formulario)

Window (Ventana)

DataGrid (Cuadrícula de datos) y Tree (Árbol)

Complementos

Cada componente de easyui tiene propiedades, métodos y eventos. Los usuarios pueden ampliar fácilmente estos componentes.

Propiedades

Las propiedades se definen en jQuery.fn.{plugin}.defaults. Por ejemplo, las propiedades de dialog se definen en jQuery.fn.dialog.defaults.

Eventos

Los eventos (funciones de retorno de llamada) también se definen en jQuery.fn.{plugin}.defaults.

Métodos

Sintaxis para llamar a un método: $('selector').plugin('method', parameter);

Donde:

  • selector es el selector de objetos de jQuery.
  • plugin es el nombre del complemento.
  • method es un método existente que coincide con el complemento.
  • parameter es el objeto de parámetros, puede ser un objeto, una cadena...

Los métodos se definen en jQuery.fn.{plugin}.methods. Cada método tiene dos parámetros: jq y param. El primer parámetro, 'jq', es obligatorio y hace referencia al objeto jQuery. El segundo parámetro, 'param', hace referencia al parámetro real que se pasa al método. Por ejemplo, para extender el componente dialog con un método llamado 'mymove', el código es el siguiente:

$.extend($.fn.dialog.methods, {
    mymove: function(jq, newposition){
        return jq.each(function(){
            $(this).dialog('move', newposition);
        });
    }
});

Ahora puede llamar al método 'mymove' para mover el cuadro de diálogo (dialog) a la posición especificada:

$('#dd').dialog('mymove', {
    left: 200,
    top: 100
});

Empezar con jQuery EasyUI

Descargue la biblioteca y haga referencia a los archivos CSS y JavaScript de EasyUI en su página.

<link rel="stylesheet" type="text/css" href="easyui/themes/default/easyui.css.html">
<link rel="stylesheet" type="text/css" href="easyui/themes/icon.css.html">
<script type="text/javascript" src="easyui/jquery-1.7.2.min.js.html"></script>
<script type="text/javascript" src="easyui/jquery.easyui.min.js.html"></script>

Una vez que haya hecho referencia a los archivos necesarios de EasyUI, puede definir un componente EasyUI mediante marcas (HTML) o JavaScript. Por ejemplo, para definir un panel con funcionalidad plegable, necesita escribir el siguiente código HTML:

<div id="p" class="easyui-panel" style="width:500px;height:200px;padding:10px;"
    title="My Panel" iconCls="icon-save" collapsible="true">
    The panel content
</div>

Cuando se crea un componente mediante marcas, el atributo 'data-options' se utiliza para admitir nombres de atributos compatibles con HTML5 desde la versión 1.3. Por lo tanto, puede reescribir el código anterior de la siguiente manera:

<div id="p" class="easyui-panel" style="width:500px;height:200px;padding:10px;"
    title="My Panel" data-options="iconCls:'icon-save',collapsible:true">
    The panel content
</div>

El siguiente código demuestra cómo crear un cuadro combinado vinculado al evento 'onSelect'.

<input class="easyui-combobox" name="language"
    data-options="
    url:'combobox_data.json',
    valueField:'id',
    textField:'text',
    panelHeight:'auto',
    onSelect:function(record){
    alert(record.text)
    }">
Otras extensiones